Simple Header With CSS3

6/16/2013 Beginners Guide , CSS 0 Comments

Hi guys long time i did`nt posted any posts i was just busy on my latest template which was Smile Blogger Template but now i finished designing that template so now until i get some other inspirations for an another template i would be staying in Bloggeraxe for posting more and more posts today`s post is about a simple header with css3, I will just give the HTML and the CSS3 and you should find where to add them.

Codes

HTML

<div class='circle'>
<h1>Bloggeraxe</h1>
</div>

CSS

 .circle {
    background:black);
        border:2px solid rgb(150,0,0);
border-radius:8px 8px 0px 0px;
    cursor: pointer;
    position: relative;
    margin: -40px auto;
    width:671px; height: 5em;
    overflow: hidden;
    -webkit-transform: translateZ(0);
       -moz-transform: translateZ(0);
        -ms-transform: translateZ(0);
            transform: translateZ(0);
}
.circle h1 {
    color: black;
    font-family: 'Agency FB', sans-serif;
    font-weight: 900;
    font-size: 3em;
    line-height:0.65em;
    text-align: center;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transition: color 0.8s ease-in-out;
       -moz-transition: color 0.8s ease-in-out;
        -ms-transition: color 0.8s ease-in-out;
            transition: color 0.8s ease-in-out;
}
.circle:before,
.circle:after {
    content:"";
    position: absolute;
    top: 0; left: 0;
    width: inherit; height: inherit;
    box-shadow: inset 10.6em 0 0 rgba(255, 0, 0, 0.4),
                inset 0 10.6em 0 rgba(255, 0, 0, 0.4),
                inset -10.6em 0 0 rgba(255, 0, 0, 0.4),
                inset 0 -10.6em 0 rgba(255, 0, 0, 0.3);
    -webkit-transition: box-shadow 0.75s;
       -moz-transition: box-shadow 0.75s;
        -ms-transition: box-shadow 0.75s;
            transition: box-shadow 0.75s;
}
.circle:after {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
            transform: rotate(45deg);
}
.circle:hover:before,
.circle:hover:after {
    box-shadow: inset 0.86em 0 0 rgba(255, 0, 0, 0.5),
                inset 0 0.86em 0 rgba(252, 0, 0, 0.5),
                inset -0.86em 0 0 rgba(252,0 , 0, 0.5),  
                inset 0 -0.86em 0 rgba(252,0 , 0, 0.5);
}
.circle:hover > h1 {
    color:rgba(252,0 , 0, 0.5);
    text-decoration:blink;
}