I'm trying to do something like this for a client who has a blog.
She wanted a semi transparent border. I know that's possible with making it just a background. But I can't seem to find the logic/code behind this kind of css technique for banners. Does anybody know how to do this? It would be a lot of help because that's the look my client's wanting to achieve for his blog....
Using the :before
pseudo-element,
CSS3's border-radius
,
and some transparency is quite easy:
<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;
}
The :before
attaches to our .circle
another element which you only need to make (ok, block, absolute, etc...) transparent and play with the border opacity.
use rgba
(rgb with alpha transparency
):
border: 10px solid rgba(0,0,0,0.5); // 0.5 means 50% of opacity
The alpha transparency
variate between 0 (0% opacity = 100% transparent) and 1 (100 opacity = 0% transparent)
You can also use border-style: double
with background-clip: padding-box
, without the use of any extra (pseudo-)elements. It's probably the most compact solution, but not as flexible as the others.
<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;
}
If you look closely you can see that the edge between the border and the background is not perfect. This seems to be an issue in current browsers. But it's not that noticeable when the border is small.
Source: Stackoverflow.com