<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	
	xmlns:georss="http://www.georss.org/georss"
	xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
	>

<channel>
	<title>css3 menu &#8211; Amazing Things</title>
	<atom:link href="https://www.amazingthings.in/tag/css3-menu/feed" rel="self" type="application/rss+xml" />
	<link>https://www.amazingthings.in</link>
	<description>Amazing Things is for Everyone. Everything which is amazing. Amazing wallpapers, entertainment, creativity, technology updates &#38; knowledge.</description>
	<lastBuildDate>Sat, 10 Nov 2012 17:00:50 +0000</lastBuildDate>
	<language>en-GB</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.5.3</generator>

<image>
	<url>https://i0.wp.com/www.amazingthings.in/wp-content/uploads/2017/12/AmazingThings.png?fit=32%2C32&#038;ssl=1</url>
	<title>css3 menu &#8211; Amazing Things</title>
	<link>https://www.amazingthings.in</link>
	<width>32</width>
	<height>32</height>
</image> 
<site xmlns="com-wordpress:feed-additions:1">44718163</site>	<item>
		<title>10 Pure CSS3 Drop Down Navigation Menu&#8217;s (No Javascript)</title>
		<link>https://www.amazingthings.in/10-pure-css3-drop-down-navigation-menus.html</link>
					<comments>https://www.amazingthings.in/10-pure-css3-drop-down-navigation-menus.html#respond</comments>
		
		<dc:creator><![CDATA[Aakash Doshi]]></dc:creator>
		<pubDate>Sun, 12 Aug 2012 07:14:00 +0000</pubDate>
				<category><![CDATA[CSS3 and Jquery]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[css3 menu]]></category>
		<category><![CDATA[dropdown menu]]></category>
		<category><![CDATA[navigation menu]]></category>
		<guid isPermaLink="false">http://www.amazingthings.in/2012/08/10-pure-css3-drop-down-navigation-menus-no-javascript-2.html</guid>

					<description><![CDATA[<p>1.Pure css3 Lava Drop Down Menu  Demo&#124;Tutorial 2.Pure css3 Animated Drop Down Menu  Demo&#124;Tutorial 3.Pure css3 Menu Navigation Effects Demo&#124;Tutorial 4.Pure css3 Click to Open/Close Drop Down Menu  Demo 5.css3 3D Flip Down Menu Demo 6.Pure css3 Smooth Transition Drop Down Menu  Demo&#124;Tutorial 7.Multi-Color css3 Drop Down Menu Demo&#124;Tutorial 8.css3 Flying Menu Demo&#124;Tutorial 9.Office Style css3 Menu Demo&#124;Tutorial 10.Click Action Multi-Level Drop Down Menu Demo&#124;Tutorial</p>
<p>The post <a rel="nofollow" href="https://www.amazingthings.in/10-pure-css3-drop-down-navigation-menus.html">10 Pure CSS3 Drop Down Navigation Menu&#8217;s (No Javascript)</a> appeared first on <a rel="nofollow" href="https://www.amazingthings.in">Amazing Things</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div style="clear: both; text-align: left;"><span style="font-size: large;">1.Pure css3 Lava Drop Down Menu <a href="http://www.script-tutorials.com/demos/249/index.html" target="_blank" rel="nofollow"> <span style="color: #ff9900;"><strong>Demo</strong></span></a>|<span style="color: #ff9900;"><strong><a href="http://www.script-tutorials.com/pure-css3-lavalamp-menu/" target="_blank" rel="nofollow"><span style="color: #ff9900;">Tutorial</span></a></strong></span></span></div>
<div style="clear: both; text-align: left;"><img fetchpriority="high" decoding="async" style="font-size: large; text-align: left;" src="https://i0.wp.com/4.bp.blogspot.com/-weYYCrMRSHo/UCc86hvcA3I/AAAAAAAADn0/2vGc_CoJl_o/s640/css3menu1.png?resize=620%2C215" alt="" width="620" height="215" border="0" data-recalc-dims="1" /><br />
<span style="font-size: large;"><br />
2.Pure css3 Animated Drop Down Menu <a href="http://www.blogger.com/goog_1010277068" target="_blank" rel="nofollow"> </a><strong><span style="color: #ff9900;"><a href="http://www.red-team-design.com/wp-content/uploads/2011/11/css3-animated-dropdown-menu-demo.html" target="_blank" rel="nofollow"><span style="color: #ff9900;">Demo</span></a></span>|<span style="color: #ff9900;"><a href="http://www.red-team-design.com/css3-animated-dropdown-menu" target="_blank" rel="nofollow"><span style="color: #ff9900;">Tutorial</span></a></span></strong></span><img decoding="async" style="font-size: large; text-align: left;" src="https://i0.wp.com/2.bp.blogspot.com/-vNvY0UdDzGI/UCc76JAw38I/AAAAAAAADnM/XTGZMFyPQKs/s640/css3-animated-dropdown-menu-preview.png?resize=620%2C212" alt="" width="620" height="212" border="0" data-recalc-dims="1" /><br />
<span style="font-size: large;"><br />
3.Pure css3 Menu Navigation Effects</span><span style="font-size: large; color: #ff9900;"> </span><strong style="font-size: large;"><span style="color: #ff9900;"><a href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Menu-Navigation-Effect/index.html" target="_blank" rel="nofollow"><span style="color: #ff9900;">Demo</span></a></span>|</strong><span style="font-size: large; color: #ff9900;"><strong><a href="http://www.alessioatzeni.com/blog/css3-menu-navigation-effect/" target="_blank" rel="nofollow"><span style="color: #ff9900;">Tutorial<br />
</span></a></strong></span><img decoding="async" style="font-size: large;" src="https://i0.wp.com/2.bp.blogspot.com/-Xn7r1OR8dI8/UCc74wGQX2I/AAAAAAAADm8/62H8UMExems/s640/1334065374.jpg?resize=620%2C352" alt="" width="620" height="352" border="0" data-recalc-dims="1" /><br />
<strong style="font-size: x-large;"></strong><strong style="font-size: x-large;"><br />
</strong><span style="font-size: large;">4.Pure css3 Click to Open/Close Drop Down Menu <a href="http://www.cssplay.co.uk/menus/cssplay-radio-dropline.html" target="_blank" rel="nofollow"> <span style="color: #ff9900;"><strong>Demo</strong></span></a></span><strong style="font-size: x-large;"><img loading="lazy" decoding="async" style="font-size: large;" src="https://i0.wp.com/2.bp.blogspot.com/-cLYHLivjBj0/UCc762BZXxI/AAAAAAAADnU/ShlEJjntWZk/s640/css3menu.PNG?resize=620%2C158" alt="" width="620" height="158" border="0" data-recalc-dims="1" /><br />
</strong><span style="font-size: large;">5.css3 3D Flip Down Menu <strong><a href="http://www.cssplay.co.uk/menus/cssplay-3d-flip-down.html" target="_blank" rel="nofollow">Demo</a></strong></span><strong style="font-size: x-large;"><img loading="lazy" decoding="async" style="font-size: large;" src="https://i0.wp.com/1.bp.blogspot.com/-SRW3QLj3Y2Y/UCc78gNHK2I/AAAAAAAADnk/GP8ZHQmDOsI/s640/menu.png?resize=620%2C240" alt="" width="620" height="240" border="0" data-recalc-dims="1" /></strong></p>
<p><span style="font-size: large;">6.Pure css3 Smooth Transition Drop Down Menu <a href="http://www.blogger.com/goog_1010277068" target="_blank" rel="nofollow"> </a><strong><span style="color: #ff9900;"><a href="http://designmodo.com/demo/css3dropdownmenu/" target="_blank" rel="nofollow"><span style="color: #ff9900;">Demo</span></a></span>|<span style="color: #ff9900;"><a href="http://designmodo.com/css3-dropdown-menu/" target="_blank" rel="nofollow"><span style="color: #ff9900;">Tutorial</span></a></span></strong></span><strong style="font-size: x-large;"><img loading="lazy" decoding="async" style="font-size: large;" src="https://i0.wp.com/2.bp.blogspot.com/-KT7zae4813A/UCc79W0DR5I/AAAAAAAADns/KmU6gzioOxY/s640/preview.png?resize=620%2C208" alt="" width="620" height="208" border="0" data-recalc-dims="1" /></strong></p>
<p><span style="font-size: large;">7.Multi-Color css3 Drop Down Menu <strong><span style="color: #ff9900;"><a href="http://www.script-tutorials.com/demos/232/index.html" target="_blank" rel="nofollow"><span style="color: #ff9900;">Demo</span></a></span>|<span style="color: #ff9900;"><a href="http://www.script-tutorials.com/css3-multicolor-menu/" target="_blank" rel="nofollow"><span style="color: #ff9900;">Tutorial</span></a></span></strong></span><strong style="font-size: x-large;"><img loading="lazy" decoding="async" style="font-size: large;" src="https://i0.wp.com/4.bp.blogspot.com/-jWVFevtUHtY/UCdDQZ3yXWI/AAAAAAAADo4/UE1n3ZIDEjI/s640/multicolor.png?resize=620%2C272" alt="" width="620" height="272" border="0" data-recalc-dims="1" /></strong></p>
<p><span style="font-size: large;">8.css3 Flying Menu<span style="color: #ff9900;"> </span><strong></strong><strong><span style="color: #ff9900;"><a href="http://www.script-tutorials.com/demos/260/index.html" target="_blank" rel="nofollow"><span style="color: #ff9900;">Demo</span></a></span>|<span style="color: #ff9900;"><span><a href="http://css.dzone.com/articles/flying-css3-navigation-menu" target="_blank" rel="nofollow">Tutorial</a></span></span></strong></span><strong style="font-size: x-large;"><img loading="lazy" decoding="async" style="font-size: large;" src="https://i0.wp.com/2.bp.blogspot.com/-k59eXHcFyR4/UCdDPr94MlI/AAAAAAAADow/Ev0k_TO6CfE/s640/flying.png?resize=620%2C216" alt="" width="620" height="216" border="0" data-recalc-dims="1" /></strong></p>
<p><span style="font-size: large;">9.Office Style css3 Menu <strong></strong><strong><span style="color: #ff9900;"><a href="http://www.script-tutorials.com/demos/266/index.html" target="_blank" rel="nofollow"><span style="color: #ff9900;">Demo</span></a></span>|<span style="color: #ff9900;"><a href="http://css.dzone.com/articles/ms-office-style-css3" target="_blank" rel="nofollow"><span style="color: #ff9900;">Tutorial</span></a></span></strong></span><strong style="font-size: x-large;"><img loading="lazy" decoding="async" style="font-size: large;" src="https://i0.wp.com/1.bp.blogspot.com/-uqmbgKW50kc/UCdDQzuD3sI/AAAAAAAADpA/VABheTdauc8/s640/result.png?resize=620%2C308" alt="" width="620" height="308" border="0" data-recalc-dims="1" /></strong></p>
<p><span style="font-size: large;">10.Click Action Multi-Level Drop Down Menu <span style="color: #ff9900;"><strong><a href="http://www.script-tutorials.com/demos/133/index.html" target="_blank" rel="nofollow"><span style="color: #ff9900;">Demo</span></a><span style="color: #000000;">|</span><a href="http://css.dzone.com/articles/click-action-multi-level-css3" target="_blank" rel="nofollow"><span style="color: #ff9900;">Tutorial</span></a></strong></span></span><img loading="lazy" decoding="async" style="font-size: large;" src="https://i0.wp.com/4.bp.blogspot.com/-YhWjohBIptM/UCdE4fBqCWI/AAAAAAAADpI/C8QXm4RX-Vg/s640/css3_menu9.jpg?resize=620%2C340" alt="" width="620" height="340" border="0" data-recalc-dims="1" /></p>
</div>
<p>The post <a rel="nofollow" href="https://www.amazingthings.in/10-pure-css3-drop-down-navigation-menus.html">10 Pure CSS3 Drop Down Navigation Menu&#8217;s (No Javascript)</a> appeared first on <a rel="nofollow" href="https://www.amazingthings.in">Amazing Things</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.amazingthings.in/10-pure-css3-drop-down-navigation-menus.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">554</post-id>	</item>
		<item>
		<title>15 Fresh and Pure CSS3 Tutorials 2012</title>
		<link>https://www.amazingthings.in/15-fresh-and-pure-css3-tutorials-2012.html</link>
					<comments>https://www.amazingthings.in/15-fresh-and-pure-css3-tutorials-2012.html#respond</comments>
		
		<dc:creator><![CDATA[Aakash Doshi]]></dc:creator>
		<pubDate>Sun, 13 May 2012 07:41:00 +0000</pubDate>
				<category><![CDATA[CSS3 and Jquery]]></category>
		<category><![CDATA[css3]]></category>
		<category><![CDATA[css3 menu]]></category>
		<category><![CDATA[Jquery plugins]]></category>
		<guid isPermaLink="false">http://www.amazingthings.in/2012/05/15-fresh-and-pure-css3-tutorials-2012-2.html</guid>

					<description><![CDATA[<p>1.Pure CSS3 accordion image gallery The very popular “accordion or toggle” effects can now be easily implemented using only CSS! Article Source-Speckyboy Click the Image for live Demo 2. Impressive Product Showcase with CSS3 A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be [&#8230;]</p>
<p>The post <a rel="nofollow" href="https://www.amazingthings.in/15-fresh-and-pure-css3-tutorials-2012.html">15 Fresh and Pure CSS3 Tutorials 2012</a> appeared first on <a rel="nofollow" href="https://www.amazingthings.in">Amazing Things</a>.</p>
]]></description>
										<content:encoded><![CDATA[<div style="text-align: left;" dir="ltr">
<div style="text-align: left;" dir="ltr">
<div style="text-align: left;" dir="ltr">
<div style="text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"><strong>1.Pure CSS3 accordion image gallery</strong><strong></strong><br />
The very popular “accordion or toggle” effects can now be easily implemented using only CSS!</span></div>
<div style="text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"><br />
<em style="color: #000000; font-size: large;">Article Source-<strong><a href="http://speckyboy.com/2012/04/25/how-to-build-an-accordion-image-gallery-with-only-css/" target="_blank" rel="nofollow">Speckyboy</a></strong> Click the Image for live Demo</em></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://webstandard.kulando.de/static/css3-toggler#coffeecards" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/3.bp.blogspot.com/-pBWZImYrGbU/T6YjG-QXHBI/AAAAAAAAC4g/hSBCOMOpWfU/s640/accordioncss3.jpg?resize=620%2C448" alt="" width="620" height="448" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: left;"><strong style="font-family: georgia, palatino; font-size: large;"><br />
2. Impressive Product Showcase with CSS3</strong></div>
<div style="clear: both; text-align: left;">
<p><span style="font-size: large; font-family: georgia, palatino;">A product page is any page on your website that showcases a product. It has to describe its features, give some screenshots, and be descriptive.Now its possible with only css3.</span></p>
<p><em style="text-align: justify;">Article Source-<strong><a href="http://tutorialzine.com/2012/02/css3-product-showcase/" target="_blank" rel="nofollow">TutorialZine</a></strong> Click the Image for live Demo</em></p>
</div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://demo.tutorialzine.com/2012/02/css3-product-showcase/#/intro" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/2.bp.blogspot.com/-aAPkctG0bR8/T6Ym4NmEO8I/AAAAAAAAC4w/7bpes0aTqog/s640/productcss3.jpg?resize=620%2C260" alt="" width="620" height="260" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: left;"><strong style="color: #e69138; font-family: georgia, palatino; font-size: large;"><br />
<span style="color: #000000;">3.Flux Slider using CSS3</span></strong></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;">Experimental attempt to enable Nivo style image transitions but instead of using the traditional Javascript timer based animations to utilise the newer, more powerful CSS3 animations.</span></div>
<div style="clear: both; text-align: justify;"><em style="text-align: justify;"><br />
Article Source-<strong><a href="http://blog.joelambert.co.uk/2011/05/05/flux-slider-css3-animation-based-image-transitions/" target="_blank" rel="nofollow">Joelambert</a></strong> Click the Image for live Demo</em></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.joelambert.co.uk/flux" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/3.bp.blogspot.com/-356SFb_KJeY/T642nLOYstI/AAAAAAAAC7Q/Byqkmxs0ETM/s640/flux.jpg?resize=620%2C354" alt="" width="620" height="354" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"> </span></div>
<div style="clear: both; text-align: left;"><span style="color: #e69138; font-size: large; font-family: georgia, palatino;"><strong>4.A Pure CSS3 Cycling Slideshow</strong></span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;">Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.</span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"> </span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><em style="text-align: justify;">Article Source-<a href="http://coding.smashingmagazine.com/2012/04/25/pure-css3-cycling-slideshow/" target="_blank" rel="nofollow">Smashingmagazine</a> Click the Image for live Demo</em></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.alessioatzeni.com/CSS3-Cycle-Image-Slider/" target="_blank" rel="nofollow"><img decoding="async" src="https://i0.wp.com/3.bp.blogspot.com/-gZjV8JdGJYI/T6YnuvJ09KI/AAAAAAAAC44/He_BxDPoMv0/s1600/stop_slider.jpg?w=696" alt="" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><em style="text-align: justify;"><br />
</em></span></div>
<div style="clear: both; text-align: left;"><span style="text-align: justify; font-size: large; font-family: georgia, palatino;"><span style="color: #e69138;"><strong>5.CSS3 3D Unfolding Menu</strong></span></span></div>
<div style="clear: both; text-align: left;"><span style="text-align: justify; font-size: large; font-family: georgia, palatino;">This menu has 3D unfolding sub list with animation. Just hover the top level link to see this in Firefox, Safari and Chrome.</span></div>
<div style="clear: both; text-align: left;"><span style="text-align: justify; font-size: large; font-family: georgia, palatino;"><br />
</span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><em style="text-align: justify;">Article Source-<a href="http://www.cssplay.co.uk/menus/cssplay-3d-unfolding-menu.html" target="_blank" rel="nofollow">cssplay</a> Click the Image for live Demo</em></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.cssplay.co.uk/menus/cssplay-3d-unfolding-menu.html" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/1.bp.blogspot.com/-kFZyn6LxuFU/T6YpPPPwK9I/AAAAAAAAC5A/ZduK90krXg4/s640/3d.png?resize=620%2C408" alt="" width="620" height="408" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><em style="text-align: justify;"><br />
</em></span></div>
<div style="clear: both; text-align: left;"><span style="text-align: justify; font-size: large; font-family: georgia, palatino;"><strong><span style="color: #e69138;">6.CSS3 3D Flipdown Menu</span></strong></span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;">This menu has 3D flip down sub lists with animation. Just hover the top level links to see this in Firefox, Safari and Chrome.</span></div>
<div style="clear: both; text-align: left;"><span style="text-align: justify; font-size: large; font-family: georgia, palatino;"><strong><span style="color: #e69138;"><br />
</span></strong></span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"><em>Article Source-<a href="http://www.cssplay.co.uk/menus/cssplay-3d-flip-down.html" target="_blank" rel="nofollow">cssplay</a> Click the Image for live Demo</em></span></div>
<div style="clear: both; font-size: x-large; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.cssplay.co.uk/menus/cssplay-3d-flip-down.html" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/4.bp.blogspot.com/-i4vQbjZoA34/T6YqTVJVopI/AAAAAAAAC5I/X1Pr-s3pNWI/s640/menu.png?resize=620%2C240" alt="" width="620" height="240" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; font-size: x-large; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"> </span></div>
<div style="clear: both; text-align: justify;"><span style="color: #e69138; font-size: large; font-family: georgia, palatino;"><strong>7.<span style="text-align: left;">A Bunch of Soft, Customizable Pressure Buttons in CSS3</span></strong></span></div>
<div style="clear: both; text-align: justify;"><span style="text-align: left; font-size: large; font-family: georgia, palatino;">You can use or edit these as much as you like without any credit. They’re compatible with the latest version of all the major browsers.</span></div>
<div style="clear: both; text-align: justify;"><span style="text-align: left; font-size: large; font-family: georgia, palatino;"><br />
</span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"><em>Article Source-<a href="http://www.inserthtml.com/2012/01/soft-pressure-buttons-css/" target="_blank" rel="nofollow">inserthtm</a>l Click the Image for live Demo</em></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://inserthtml.com/demo/buttons/index.html" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/3.bp.blogspot.com/-AXfdi49wGzY/T6YsX0iN4NI/AAAAAAAAC5Q/eKQ8Zn2iMN8/s640/buttons1.jpg?resize=620%2C151" alt="" width="620" height="151" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"> </span></div>
<div style="clear: both; text-align: left;"><span style="color: #e69138; font-size: large; font-family: georgia, palatino;"><strong>8.Content Navigator with CSS3</strong></span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;">Responsive content navigation using CSS3 transitions and :target pseudo-class.</span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"> </span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"><em>Article Source-<a href="http://tympanus.net/codrops/2012/03/23/responsive-content-navigator-with-css3/" target="_blank" rel="nofollow">codrops</a> Click the Image for live Demo</em></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://tympanus.net/Tutorials/CSS3ContentNavigator/index5.html#slide-main" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/4.bp.blogspot.com/-2FeeKQBxPlc/T6YttKWDa1I/AAAAAAAAC5o/5JHjJN2rV7Y/s640/menu.jpg?resize=620%2C302" alt="" width="620" height="302" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: justify;"><strong style="text-align: left; font-size: large;"><br />
9.CSS3 ordered list styles</strong></div>
<div style="clear: both;"><span style="font-size: large;"><span style="font-family: georgia, palatino;">In this article you’ll learn how to add some CSS3 fine tuning to your ordered lists, using a semantic approach.<br />
</span><span style="font-family: georgia, palatino; font-style: italic;">Article Source-</span><strong><a style="font-style: italic;" href="http://www.red-team-design.com/css3-ordered-list-styles" target="_blank" rel="nofollow">redteamdesign</a></strong><span style="font-family: georgia, palatino; font-style: italic;"> Click the Image for live Demo</span></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.red-team-design.com/wp-content/uploads/2012/02/css3-ordered-list-styles-demo.html" target="_blank" rel="nofollow"><img decoding="async" src="https://i0.wp.com/3.bp.blogspot.com/-oB2nujL1_xc/T6Yu_QksjrI/AAAAAAAAC5w/0fhMg3VhRbo/s1600/css3-ordered-list-styles.png?w=696" alt="" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: justify;"><span style="font-family: georgia, palatino; font-size: large;"><br />
<strong></strong><strong>10.Fancy Social Menu with CSS3!</strong><br />
Today we’ll learn how to code a fancy social networks menu with HTML5 and CSS3 and absolutely no images. Yup, that’s right! No images at all. We’ll also learn how to convert a normal font to a web-font.</span></div>
<div style="clear: both;"><span style="font-size: large; font-family: georgia, palatino;"><em><br />
Article Source-<strong><a href="http://dirtekdesigns.com/tutorial/fancy-social-menu-with-html5-and-css3/" target="_blank" rel="nofollow">dirtekdesigns</a></strong> Click the Image for live Demo</em></span><a style="font-family: georgia, palatino; font-size: large;" href="http://dirtekdesigns.com/demo/circular-social-menu/" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/3.bp.blogspot.com/-xkklSQUW5QE/T6Yv2khXemI/AAAAAAAAC54/M3BkBcVUS-c/s640/Untitled.jpg?resize=620%2C186" alt="" width="620" height="186" border="0" data-recalc-dims="1" /></a></div>
<div style="clear: both;"><em style="font-family: georgia, palatino; font-size: large; text-align: left;"><br />
</em><span style="font-size: large;"><strong>11.Stylish Image Content Slider in Pure CSS3</strong></span><br />
<span style="font-size: large;">Yet another image content slider using pure css3.This will work in chrome and firefox.<em style="font-family: georgia, palatino; font-size: large; text-align: left;"><br />
Article Source-<strong><a href="http://designmodo.com/slider-css3/" target="_blank" rel="nofollow">Designmodo</a></strong> Click the Image for live Demo</em></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://designmodo.com/demo/css3slider/" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/2.bp.blogspot.com/-PtoPnjtCHRU/T6YyqYvDg1I/AAAAAAAAC6E/Bz4nY-sAlXM/s640/preview.png?resize=620%2C480" alt="" width="620" height="480" border="0" data-recalc-dims="1" /><br />
</a></span><span style="font-family: georgia, palatino; font-size: large;"><strong>12.CSS3 Image hover effects</strong><br />
Five examples of hover effects using different CSS properties compared to the old tutorial posted on </span><strong><a style="font-family: georgia, palatino; font-size: large;" href="http://tympanus.net/codrops/2011/11/02/original-hover-effects-with-css3/" target="_blank" rel="nofollow">Codrops</a></strong><span style="font-family: georgia, palatino; font-size: large;">.</span></div>
<div style="clear: both; text-align: justify;"><span style="text-align: left; font-size: large; font-family: georgia, palatino;"><br />
</span><em style="font-family: georgia, palatino; font-size: large; text-align: left;">Article Source-<strong><a href="http://www.alessioatzeni.com/blog/css3-hover-effects/" target="_blank" rel="nofollow">alessioatzeni </a></strong>Click the Image for live Demo</em></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index.html" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/2.bp.blogspot.com/-x_nKVbEq3RY/T645N-nWMqI/AAAAAAAAC7c/MLXaYlTZmaI/s640/Untitled.jpg?resize=620%2C430" alt="" width="620" height="430" border="0" data-recalc-dims="1" /><br />
</a></span><em style="font-family: georgia, palatino; font-size: large;"><br />
<strong>13.CSS3 Skill Bar Animation</strong><br />
Article Source-<a href="http://www.alessioatzeni.com/blog/css3-skill-bar-animation/" target="_blank" rel="nofollow"><span><span>alessioatzeni</span></span> </a>Click the Image for live Demo</em></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Skill-Bar-Animation/index.html" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/1.bp.blogspot.com/-01ZftzhrDTw/T648Y_ZL7cI/AAAAAAAAC7o/c8TTeka_Pk4/s640/css3-skill-bar-animation.gif?resize=620%2C315" alt="" width="620" height="315" border="0" data-recalc-dims="1" /><br />
</a></span><span style="font-family: georgia, palatino; font-size: large; text-align: justify;"><strong>14.Cross browser pure CSS3 buttons</strong><br />
The result is this set of buttons created entirely from CSS (no images used at all).</span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large; font-family: georgia, palatino;"><br />
</span><em style="text-align: left;">Article Source-<strong><a href="http://www.midwinter-dg.com/permalink-cross-browser-pure-css3-button-demo-2011-07-21.html" target="_blank" rel="nofollow">midwinter </a></strong>Click the Image for live Demo</em></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://www.midwinter-dg.com/blog_demos/css3-buttons/" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/2.bp.blogspot.com/-HrNb6ZOtIF0/T69VYhPehHI/AAAAAAAAC8A/nEJLp1dISlE/s640/Untitled.jpg?resize=620%2C258" alt="" width="620" height="258" border="0" data-recalc-dims="1" /></a></span></div>
<div style="clear: both; text-align: left;"><span style="font-family: georgia, palatino; font-size: large; text-align: justify;"><br />
</span><span style="font-size: large;"><span style="font-family: georgia, palatino; text-align: justify;"><strong>15.Sliding image panels with CSS3</strong></span><span style="font-family: georgia, palatino; text-align: justify;"><br />
Some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label.</span></span></div>
<div style="clear: both; text-align: justify;"><span style="font-size: large;"><span style="font-family: georgia, palatino;"><br />
</span><em style="text-align: left;">Article Source-<strong><a href="http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/" target="_blank" rel="nofollow">tympanus</a></strong> Click the Image for live Demo</em></span></div>
<div style="clear: both; text-align: left;"><span style="font-size: large; font-family: georgia, palatino;"><a href="http://tympanus.net/Tutorials/CSS3SlidingImagePanels/" target="_blank" rel="nofollow"><img loading="lazy" decoding="async" src="https://i0.wp.com/2.bp.blogspot.com/-YKOOcGKyC-4/T0j1lAktRKI/AAAAAAAACW8/HIrzYvmNKFc/s640/Sliding+Image+Panels+with+CSS3.jpg?resize=620%2C428" alt="" width="620" height="428" border="0" data-recalc-dims="1" /><br />
</a></span><span style="font-family: georgia, palatino; font-size: large; text-align: justify;">Thats all folks for now.Do leave me a comment if possible <img src="https://s.w.org/images/core/emoji/15.0.3/72x72/1f642.png" alt="🙂" class="wp-smiley" style="height: 1em; max-height: 1em;" /></span></div>
</div>
</div>
</div>
<p>The post <a rel="nofollow" href="https://www.amazingthings.in/15-fresh-and-pure-css3-tutorials-2012.html">15 Fresh and Pure CSS3 Tutorials 2012</a> appeared first on <a rel="nofollow" href="https://www.amazingthings.in">Amazing Things</a>.</p>
]]></content:encoded>
					
					<wfw:commentRss>https://www.amazingthings.in/15-fresh-and-pure-css3-tutorials-2012.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
		<post-id xmlns="com-wordpress:feed-additions:1">570</post-id>	</item>
	</channel>
</rss>
