This is a demo. Back to the blog.
Tested in Chrome 12 on Mac. Please leave a comment which parts work or not in your browser/version/platform.
I said, i could make a single plain HTML-element show 3 differently colored lines around it – looking like borders – defined in CSS only. Guido said he could make 9.
I agreed and spent an evening to test the theory. I ended up with 12 CSS-borders around one simple element.
(In fact there are 13, and in certain cases you could make that 15, i guess. Or make it look like 17 even, but … yeah.)
I made that watching the Chrome browser only. I am quite sure it is looking different in almost any other browser.
a.k.a what you see is just a screenshot.
Hover the kitten to get some hints on how it is done. Best experienced in Chrome. So it should look quite similar in Safari. I know it looks weirdly different in Firefox, sadly und surprisingly no luck at all in Opera, and i would be amazed to see more than 6 colored borders in any Internet Explorer below version 9. Tell me in the comments.
While hovering, there will even be an innermost bonus border in everybody’s most favorite color: fuchsia!
Now check the markup and styles below, if you are interested.
<div id="o_twelve_borders">cat o’ 12 borders</div>
As there is a 13th border to be revealed on hover, I had to change the source to:
<div id="o_twelve_borders">cat o’ <del>12</del><ins>13</ins> borders</div>
A bit of commentary within, i think you will get it, do you?
/*o twelve borders*/
#o_twelve_borders {
/*layout*/
position: relative;
width: 200px;
height: 200px;
padding: 10px;
margin: 150px;
/*the kitten*/
background-image: url('http://placekitten.com/219/219'); /*if you do not see a cat, placekitten.com may be down*/
background-repeat: no-repeat;
background-position: center;
background-size: 210px;
background-color: black;
/*font beauty*/
font-weight: bold;
font-style: italic;
text-align: center;
font-size: 30px;
line-height: .9;
color: rgba(255, 255, 255, .6);
text-transform: uppercase;
text-shadow: 0px 2px 2px rgba(0, 0, 0, 1);
/*border 2*/
border: 5px solid red;
/*border 1, border 3*/
-webkit-box-shadow: 0 0 0 5px maroon inset, 0 0 0 10px yellow;
-moz-box-shadow: 0 0 0 5px maroon inset, 0 0 0 10px yellow;
box-shadow: 0 0 0 5px maroon inset, 0 0 0 10px yellow; /* no IE<9 i guess*/
/*border 4*/
outline: 5px solid orange; /* firefox: amazing placement around the generated content! opera: no outline support?*/
}
#o_twelve_borders:before {
content:"";
/*layout*/
position: absolute;
top: -25px;
left: -25px;
display: block;
width: 260px;
height: 260px;
/*border 6*/
border: 5px solid green;
/*border 5, border 7*/
-webkit-box-shadow: 0 0 0 5px lime inset, 0 0 0 10px aqua;
-moz-box-shadow: 0 0 0 5px lime inset, 0 0 0 10px aqua;
box-shadow: 0 0 0 5px lime inset, 0 0 0 10px aqua; /* no IE<9 i guess*/
/*border 8*/
outline: 5px solid teal; /* firefox: placement around the box-shadow! pushed to invisible here. opera: no outline support?*/
}
#o_twelve_borders:after {
content:"";
/*layout*/
position: absolute;
top: -45px;
left: -45px;
display: block;
width: 300px;
height: 300px;
/*border 10*/
border: 5px solid navy;
/*border 9, border 11*/
-webkit-box-shadow: 0 0 0 5px blue inset, 0 0 0 10px fuchsia;
-moz-box-shadow: 0 0 0 5px blue inset, 0 0 0 10px fuchsia;
box-shadow: 0 0 0 5px blue inset, 0 0 0 10px fuchsia; /* no IE<9 i guess*/
/*border 12*/
outline: 5px solid purple; /* firefox: placement around the box-shadow! pushed to invisible here opera: no outline support?*/
}
#o_twelve_borders, #o_twelve_borders::before, #o_twelve_borders:after {
/*transition magic, not sure if i got teh transform part very right*/
-webkit-transition: color .5s ease-in, text-shadow .5s linear, -webkit-transform 2s ease-out, background-size 1s ease-out, background-color 1s ease-in-out;
-moz-transition: color .5s ease-in, text-shadow .5s linear, -moz-transform 2s ease-out, background-size 1s ease-out, background-color 1s ease-in-out;
-o-transition: color .5s ease-in, text-shadow .5s linear, -o-transform 2s ease-out, background-size 1s ease-out, background-color 1s ease-in-out;
-khtml-transition: color .5s ease-in, text-shadow .5s linear, -khtml-transform 2s ease-out, background-size 1s ease-out, background-color 1s ease-in-out;
-ms-transition: color .5s ease-in, text-shadow .5s linear, -ms-transform 2s ease-out, background-size 1s ease-out, background-color 1s ease-in-out;
transition: color .5s ease-in, text-shadow .5s linear, transform 2s ease-out, background-size 1s ease-out, background-color 1s ease-in-out;
}
#o_twelve_borders:hover {
/*bonus-border 13*/
background-color: fuchsia;
background-size: 200px;
color: rgba(255, 255, 255, .8);
text-shadow: 0px 2px 2px rgba(0, 0, 0, .5);
-webkit-transform: rotate(-2deg) scale(1.1);
-moz-transform: rotate(-2deg) scale(1.1);
-o-transform: rotate(-2deg) scale(1.1);
-khtml-transform: rotate(-2deg) scale(1.1);
-ms-transform: rotate(-2deg) scale(1.1);
transform: rotate(-2deg) scale(1.1);
}
/*swap 12 to 13 on hover*/
#o_twelve_borders del{
text-decoration: none;
}
#o_twelve_borders ins{
display: none;
text-decoration: none;
}
#o_twelve_borders:hover ins{
display: inline;
}
#o_twelve_borders:hover del{
display: none;
}
/*mark the generated content boxes and make some transform happen. you might even see them transition nicely in firefox.*/
#o_twelve_borders:hover:before{
content:":before";
font-size: 14px;
-webkit-transform: rotate(2deg) scale(1.1);
-moz-transform: rotate(2deg) scale(1.1);
-o-transform: rotate(2deg) scale(1.1);
-khtml-transform: rotate(2deg) scale(1.1);
-ms-transform: rotate(2deg) scale(1.1);
transform: rotate(2deg) scale(1.1);
}
#o_twelve_borders:hover:after{
content:":after";
font-size: 14px;
-webkit-transform: rotate(3deg) scale(1.18);
-moz-transform: rotate(3deg) scale(1.18);
-o-transform: rotate(3deg) scale(1.18);
-khtml-transform: rotate(3deg) scale(1.18);
-ms-transform: rotate(3deg) scale(1.18);
transform: rotate(3deg) scale(1.18);
}
/* lovely */