Stremaxon Like Animated Header For Blogger

Yesterday,I have been pretty busy recreating Stramaxon like animated header for blogger.Stramaxon is a popular blogger tech site that is written by a young author from India Named Deepak Kamath. The animated header that they have used in their blog is really amazing .Adding this header to your blogspot sites will give them a premium touch . Another specialty of this header is that they don't use F lash which could slow your webpage loading thereby affecting the SEO.This Cool header souly work on Css3.So No worries about Page Loading Time.Lets Get into the tutorial.

Screen shots- Animated Header

The Code -Copyright Softwarevilla

Widget Title:

<style type="text/css"> .Header h1 a { border-color:black !important; text-decoration: none; font-size: 70px; font-family: consolas; background-color: aliceblue ; border-style: solid; border-top-style: none; border-bottom-style: none; padding: 20px 25px 20px 25px; border-radius: 15px; border-width: 16px; border-bottom-right-radius: 76px; border-top-left-radius: 76px; color: black !important; transition:background-color 1s,border-style 1s,border-top-style 1s,border-radius 1s,border-width 1s,border-bottom-right-radius 1s,border-top-left-radius 1s; -webkit-transition:all 1s,border-color 1s ease-in-out; -ms-transition:all 1s,border-color 1s ease-in-out; -moz-transition:all 1s,border-color 1s ease-in-out; -o-transition:all 1s,border-color 1s ease-in-out; } .Header h1 a:hover { color: white !important; border-style: solid; border-top-style: none; border-bottom-style: none; border-width: 16px; padding: 20px 25px 20px 25px; border-radius: 15px; border-bottom-left-radius: 76px; border-top-right-radius: 76px; background-color: Gainsboro !important; border-color: Grey !important; } </style><br /> <br /> <header><br /> <div class="header-outer"><br /> <div class="header-cap-top cap-top"><br /> <div class="cap-left"></div><br /> <div class="cap-right"></div><br /> </div><br /> <div class="fauxborder-left header-fauxborder-left"><br /> <div class="fauxborder-right header-fauxborder-right"></div><br /> <div class="region-inner header-inner"><br /> <div class="header section" id="header"><div class="widget Header" id="Header1"><br /> <div id="header-inner"><br /> <div class="titlewrapper"><br /> <h1 class="title"><br /> <a href="http://www.Prohackertools.blogspot.com/">Softwarevilla</a><br /> </h1><br /> </div><br /> </div><br /> </div></div><br /> </div><br /> </div><br /> <div class="header-cap-bottom cap-bottom"><br /> <div class="cap-left"></div><br /> <div class="cap-right"></div><br /> </div><br /> </div><br /> </header>

Little Customization !

• Replace the text to your Blog URL
• Replace the text to your Blog Title