Я пытаюсь сделать что-то подобное для клиента, у которого есть блог.
Она хотела полупрозрачную рамку. Я знаю, что это возможно, сделав его просто фоном. Но я не могу найти логику/код, лежащий в основе такого метода CSS для баннеров. Кто-нибудь знает, как это сделать? Это было бы очень полезно, потому что мой клиент хотел добиться своего блога....
Хорошо, если вы хотите полностью прозрачно, чем использовать
border: 5px solid transparent;
Если вы имеете в виду непрозрачный/прозрачный, чем вы можете использовать
border: 5px solid rgba(255, 255, 255, .5);
Здесь a означает альфу, которую вы можете масштабировать, 0-1.
Также некоторые могут предложить вам использовать opacity, который выполняет ту же работу, с той лишь разницей, что это приведет к тому, что дочерние элементы также будут непрозрачными, да, есть некоторые работы, но rgba кажется лучше, чем использование opacity.
Для старых браузеров всегда объявляйте цвет фона, используя # (hex), как раз как назад, так что, если старые браузеры не распознают rgba, они будут применять цвет hex к вашему элементу.
Демо 2 (с фоновым изображением для вложенного div)
Демо 3 (с тегом img вместо background-image)
body {
background: url(http://www.desktopas.com/files/2013/06/Images-1920x1200.jpg);
}
div.wrap {
border: 5px solid #fff; /* Fall back, not used in fiddle */
border: 5px solid rgba(255, 255, 255, .5);
height: 400px;
width: 400px;
margin: 50px;
border-radius: 50%;
}
div.inner {
background: #fff; /* Fall back, not used in fiddle */
background: rgba(255, 255, 255, .5);
height: 380px;
width: 380px;
border-radius: 50%;
margin: auto; /* Horizontal Center */
margin-top: 10px; /* Vertical Center ... Yea I know, that
manually calculated*/
}
Примечание (для демонстрации 3): Изображение будет масштабироваться в соответствии с высотой и шириной, поэтому убедитесь, что он не нарушает коэффициент масштабирования.
Вы также можете использовать border-style: double с background-clip: padding-box, без использования каких-либо дополнительных (псевдо) элементов. Это, вероятно, самое компактное решение, но не так гибкое, как другие.
<div class="circle">Some text goes here...</div>
.circle{
width: 100px;
height: 100px;
padding: 50px;
border-radius: 200px;
border: double 15px rgba(255,255,255,0.7);
background: rgba(255,255,255,0.7);
background-clip: padding-box;
}
Если вы посмотрите внимательно, вы увидите, что край между границей и фоном не идеален. Это, по-видимому, проблема в текущих браузерах. Но это не так заметно, когда граница небольшая.
Использование псевдоэлемента :before,
CSS3 border-radius,
и некоторая прозрачность довольно проста:
<div class="circle"></div>
CSS
.circle, .circle:before{
position:absolute;
border-radius:150px;
}
.circle{
width:200px;
height:200px;
z-index:0;
margin:11%;
padding:40px;
background: hsla(0, 100%, 100%, 0.6);
}
.circle:before{
content:'';
display:block;
z-index:-1;
width:200px;
height:200px;
padding:44px;
border: 6px solid hsla(0, 100%, 100%, 0.6);
/* 4px more padding + 6px border = 10 so... */
top:-10px;
left:-10px;
}
:before присоединяется к нашему .circle другому элементу, который вам нужно сделать только (ok, block, absolute и т.д.) прозрачным и играть с непрозрачностью границы.
используйте rgba (rgb с alpha transparency):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
Диаграмма alpha transparency между 0 (0% непрозрачность = 100% прозрачная) и 1 (100 непрозрачность = 0% прозрачная)