CSS3 Shadow Block Menu

<div dir="ltr" style="text-align: left;" trbidi="on"><span style="color: black;">This CSS Menu harnesses CSS3's ability to define multiple/ inset shadows (so the shadow grows inwards) on an element to create menu items with bevelled edges and a growing inner glow when the mouse rolls over them. CSS3 animation is enabled to gradually transition between various property changes.</span><br> <div class="separator" style="clear: both; text-align: center;"><a href="http://img594.imageshack.us/img594/9444/shadowblockmenu.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="http://img594.imageshack.us/img594/9444/shadowblockmenu.jpg" width="640"></a></div><div style="text-align: center;"><a href="http://www.blogger.com/testblog-02.blogspot.in/" target="_blank"><span style="font-family: verdana,geneva,sans-serif;"><b><span style="font-size: 24px;"><span style="background-color: red;"></span></span></b></span></a><br> </div></div>

CSS3 Shadow Block Menu

This CSS Menu harnesses CSS3's ability to define multiple/ inset shadows (so the shadow grows inwards) on an element to create menu item...

Read more »

Pure CSS Circle Menu

<div dir="ltr" style="text-align: left;" trbidi="on"><span style="color: black;">An interesting CSS trick is the creation of "circles", by using CSS3.the border on each of the four corners of the element merge into a continuous round edge, creating the look of a circle. Using this nifty little trick, the following creates a series of circle menu links:</span><br> <div style="text-align: center;"><img alt="" src="http://img716.imageshack.us/img716/8787/circel.jpg"></div><div style="text-align: center;"><a href="http://testblog-02.blogspot.in/" target="_blank"><span style="font-size: 24px;"><span style="font-family: times new roman,times,serif;"><b><span style="background-color: red;"></span></b></span></span></a></div></div>

Pure CSS Circle Menu

An interesting CSS trick is the creation of "circles", by using CSS3.the border on each of the four corners of the element merge i...

Read more »

Create Spotlight Menu with CSS

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="color: black;">It is a Flash-like, sleek spotlight menu.The circular background appears in all major browsers, including IE9, while the transition effect works in browsers that support CSS3 transitions, namely, FF3.5+, Safari 3.1+, Google Chrome, and Opera 11.6+.<br> <div class="separator" style="clear: both; text-align: center;"><a href="http://img600.imageshack.us/img600/2278/spotlightl.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="139" src="http://img600.imageshack.us/img600/2278/spotlightl.jpg" width="640"></a></div><br> </div></div>

Create Spotlight Menu with CSS

It is a Flash-like, sleek spotlight menu.The circular background appears in all major browsers, including IE9, while the transition effect w...

Read more »

Pure CSS3 : Apple.com Navigation

<div dir="ltr" style="text-align: left;" trbidi="on"><span style="color: black;">Apple’s website has long served as inspiration to web designers who recognize the superiority of simplicity in user experience. One of its most iconic features is the tabbed navigation – a long, narrow, slightly-rounded set of immaculately devised and executed buttons that serve as the launchpad for Apple.com.</span><br> <span style="color: black;">Today i will show you  how to create </span><b><a href="http://www.apple.com/" target="_blank"><span style="color: black;">Apple</span></a><span style="color: black;">.com</span></b><span style="color: black;"> Menu Bar using CSS3 alone.</span><br> <div style="text-align: center;"><img alt="" src="http://img198.imageshack.us/img198/9554/55238461.jpg"></div><span style="color: black;"><span style="font-size: 20px;"><span style="font-family: verdana,geneva,sans-serif;"><b><u></u></b></span></span></span><br> </div>

Pure CSS3 : Apple.com Navigation

Apple’s website has long served as inspiration to web designers who recognize the superiority of simplicity in user experience. One of its m...

Read more »

CSS3 Search Box Inspired by Apple.com

<div dir="ltr" style="text-align: left;" trbidi="on"><span style="color: black;">Today’s tutorial is on creating </span><b><a href="http://www.apple.com/" target="_blank"><span style="color: black;">Apple</span></a><span style="color: black;">-inspired</span></b><span style="color: black;"> search box or search field using CSS3 alone. The search field expands slowly when focused/clicked. This animation effect achieved purely using CSS3 transition property.</span><br> <div style="text-align: center;"><img alt="Search Box" src="http://img841.imageshack.us/img841/9179/ssssfa.png" style="height: 100px; width: 786px;"></div><br> </div>

CSS3 Search Box Inspired by Apple.com

Today’s tutorial is on creating Apple -inspired search box or search field using CSS3 alone. The search field expands slowly when focused/c...

Read more »

The Story of Send | An Email’s Journey

<div dir="ltr" style="text-align: left;" trbidi="on"><div style="color: black;">You send and receive a lot of emails every day. But have you ever wondered where your message goes after you hit “send?”</div><div style="color: black;">How does an email travel from your computer to your friend’s computer/tab/smartphone across the country or around the world?</div><div class="separator" style="clear: both; color: black; text-align: center;"><a href="http://img213.imageshack.us/img213/9986/startsection.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="361" src="http://img213.imageshack.us/img213/9986/startsection.png" width="640"></a></div><div style="color: black;"><br> </div><div style="color: black;"><br> </div></div>

The Story of Send | An Email’s Journey

You send and receive a lot of emails every day. But have you ever wondered where your message goes after you hit “send?” How does an email ...

Read more »