Skip to main content

Transparent borders with CSS3


I’ve seen a few website examples recently (like this one) where transparent borders have been used so that the background image shows through the border. I think this is a really nice effect and it got me wondering how it’s done and if I could use this on my planned redesign of CVW Web Design. Turns out it’s relatively simple but there’s one ‘trick’ you will need to get it to work.
Transparent border screenshot
Firstly, here’s my demo page with a <div> content area and a transparent border that allows the background cork board pattern to show through.
The border transparency is achieved using the rgba property which allows you to specific three rgb color values and a value for alpha (transparency). In my demo CSS, I’ve set the border property values like this:
div {
 border: 10px solid rgb(100, 100, 100); /* default color */
 border: 10px solid rgba(0, 0, 0, 0.3); /* rgba for transparency */
}
In this case I set a default grey color for browsers without rgba support and follow that with the rgba rule for more modern browsers. I used black with an alpha value of 0.3.
However, if we use these rules on their own, the background color (white) of the <div> element will be underneath the border and it will show through, thus making the borders non-transparent. The specific CSS for the background color is below. I’ve also added some padding, just to space things out a bit for the demo.
div {
        padding: 3em;
 background-color: rgb(255, 255, 255); /*background color, white*/
}
Here’s a demo showing the background color problem (the borders are not transparent). To get round this problem, what we need is a CSS property that will ‘clip’ the content area so that the<div> background-color is not underneath the border – therefore allowing our transparent borders to be just that – transparent!
That property is background-clip which can have several different values depending on where you want to clip the background. In my case, I want to clip the background at the border. To achieve this, rather confusingly, I need to give the background-clip property a value of padding-box and also provide the -moz- and -webkit- prefixes for browsers that use their own implementation. Here’s what I have used:
div {
 -moz-background-clip: padding; /* for Mozilla browsers*/
 -webkit-background-clip: padding;   /* Webkit */
 background-clip: padding-box; /*  browsers with full support */
}
My demo page has the full CSS with everything combined into one declaration block. Like this:
div {
 padding: 3em;
 background-color: rgb(255, 255, 255);
 border: 10px solid rgb(100, 100, 100); 
 border: 10px solid rgba(0, 0, 0, 0.3); 
 -moz-background-clip: padding; 
 -webkit-background-clip: padding; 
 background-clip: padding-box; 
}
Most modern browsers (including Internet Explorer 9) support rgba and background-clip in one form or another but Internet Explorer 6, 7 and 8 do not. You may choose to provide alternative border property values in a conditional commented style sheet for these browsers.
Modern browsers, transparent borders. I love ‘em!

Comments

Popular posts from this blog

உடல் எடையை குறைக்க வேண்டுமா ?

இன்றைய அவசர உலகின் மிக பெரிய பிரச்சனையாக இருப்பது உடல் எடை அதிகரிப்பது தான்.மனம் போன போக்கில் உணவு கட்டு பாடு இல்லாமல் கண்டதையும் உள்ளே தள்ளுவதும்,உக்காந்த இடத்திலேயே கணணி முன் நேரத்தை விரயமாக்குவதும் தான் இந்த பிரச்சனைக்கு மூல காரணமாகும். அது சரி இந்த பிரச்சனையை எப்படி இல்லாமல் செய்வது அல்லது உடல் எடையை எவ்வாறு குறைப்பது என்பதை பற்றி பாப்போம் , பல வருட ஆரய்சிக்குபின் மருத்துவர்கள்   உடல் எடைய குறைக்க மிகவும் சுலபமான உடற்பயிற்சியை கண்டுபிடித்துள்ளனர்.இது  100% பயனளிக்க கூடியது, எந்த இடத்திலும் எந்தநேரத்திலும் மிக சுலபமா செய்ய கூடிய உடற் பயிற்சியாகும்.இந்த உடற்பயிற்சிகள் படத்துடன் கீழே தரப்பட்டுள்ளது நீங்களும் முயற்சித்து பாருங்கள கண்டிப்பாக பலன் கிடைக்கும்... முதலில் நாற்காலியில் உட்கார்ந்து இட  பக்கம் பார்கவும் .. ..        அடுத்து  நாற்காலியில் உட்கார்ந்து வல  பக்கம் பார்கவும்  ....  நண்பர்கள் யாரவது மச்சி வாடா சின்ன பீஸ் ,இங்க பாரு சூப்பர் அய்டம்னு சொல்லி கால்ல விழுந்து கூப்பிட்டலோ மேற்கூறிய உடற் பயி...

(Loot again) Get Mi Earphones & Mi Backpack In Just Rs.1

How to Get Mi Band , Mi Earphones & Mi Backpack In Just Rs.1 1, First Of All Just  Click On Below Links 1 By 1  Click 1->  Mi City Backpack Dark Grey Minimalist sleek design  -In Just Rs.1 Click 2->  Mi Earphones Silver Dynamic bass sound  -In Just Rs.1 2. Now Open All Links 1 By 1 3. After Opening The Link Click On “ Click to Bring The Price Down ” Then Click “ I Want it too ” 4. Login into Your Mi Account ( Or Sign Up  –  New Mi Account Giving Huge Price drop Like Rs.50 Or Rs.70 Drop , So Recommend You to Make New Account ) 5. Now You will See 3 Products There In this  Mi 24 Hour Madness Sale  6. Click On “ Participate ” Now Button & Share The Link With Your Friends When Each Friend Click On Your Link , You Will See Some Price cut in Your Products… Finally After Enough Click Your Product Will be Available For Just Rs.1  7. Start Referring , Start Looting MI

20 Best Themes For Windows XP

Have you been using  Windows XP  since a long time and tired of it’s dull looks? Then it’s time to give a facelift to XP by changing it’s look and feel. There are lots of  free visual style themes  available based on  Windows Vista ,  Windows 7 , Mac OSX ,  XBox ,  Linux  etc. In this article, we present the best of them. If you are installing a Visual Theme for the first time on your Windows XP, then you might want to check our article How to install visual themes in Windows XP?  first before applying the themes. Here goes our handpicked list of  Twenty Best Windows XP Themes  for your PC. If you are looking for more  Windows XP  Themes, you might want to check our other article:  20 Awesome  Windows XP Themes . 1.  Vista Live Pack One of the best Windows Vista based themes with a touch of Windows Live. There are many color variants, including Vista Live Blue (shown above), Vista Live Green, Vista Liv...