Menu

45+ Most Useful Freebies of CSS3 (Free Download)


Cascading Style Sheets 3 is divided into many separate documents known as "modules". In this, each and every module adds new capabilities defined in Cascading Style Sheets 2(CSS 2), preserving backward compatibility. In this post, we have collected the best and the most useful freebies of CSS3 which will help you enhance your knowledge and skills. Some popular freebies in below collection are: 3d animation using pure CSS3, Animated Navigation Menu, Rotating billboard, Stylize Input Element.

CSS3 Media Queries


CSS3 Media Queries
http://webstuffshare.com/demo/CSSFlyMenu/ http://www.webstuffshare.com/2010/06/codesnippet-css3-flying-menu/


3d animation using pure CSS3


3d animation using pure CSS3
http://demo.marcofolio.net/3d_animation_css3/ http://www.marcofolio.net/downloads/css/3d_animation_using_pure_css3/download.html


An analogue clock using only CSS


An analogue clock using only CSS
http://www.paulrhayes.com/experiments/clock/#clock http://www.paulrhayes.com/2009-03/an-analogue-clock-using-only-css/


Animated CSS3 helix using 3d transforms


Animated CSS3 helix using 3d transforms
http://demo.marcofolio.net/css3_helix/ http://www.marcofolio.net/downloads/css/animated_css3_helix/download.html


Animated wicked CSS3 3d bar chart


Animated wicked CSS3 3d bar chart
http://demo.marcofolio.net/css3_bar_chart_animated/ http://www.marcofolio.net/downloads/css/animated_wicked_css3_3d_bar_chart/download.html


Apple Navigation with CSS3


Apple Navigation with CSS3
http://designindevelopment.com/demos/apple/# http://designindevelopment.com/css/apple-navigation-with-css3/


Awesome Cufonized Fly-out Menu with jQuery and CSS3


Awesome Cufonized Fly-out Menu with jQuery and CSS3
http://tympanus.net/Tutorials/CufonizedFlyOutMenu/ http://www.marcofolio.net/downloads/css/animated_wicked_css3_3d_bar_chart/download.html


A Rotating Image Slideshow with CSS3 and jQuery


A Rotating Image Slideshow with CSS3 and jQuery
http://demo.tutorialzine.com/2010/11/rotating-slideshow-jquery-css3/ http://www.marcofolio.net/downloads/css/animated_wicked_css3_3d_bar_chart/download.html


Cool Sprites – Free overlapped CSS menu


Cool Sprites – Free overlapped CSS menu
deepubalan.com/blog/2010/01/18/cool-sprites-free-overlapped-css-menu-using-css-sprites/ deepubalan.com/blog/2010/01/18/cool-sprites-free-overlapped-css-menu-using-css-sprites/


A Fun Animated Navigation Menu With Pure CSS


A Fun Animated Navigation Menu With Pure CSS
http://designshack.net/tutorialexamples/AnimatedMenu/animatedMenu.html http://designshack.net/articles/css/creating-a-fun-animated-navigation-menu-with-pure-css


A Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5


A Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5
http://nettuts.s3.amazonaws.com/771_sticky/step5.html http://nettuts.s3.amazonaws.com/771_sticky/step5.htmlhttp://nettuts.s3.amazonaws.com/771_sticky/step5.html


A unique Gallery by using z-index and jQuery


A unique Gallery by using z-index and jQuery
http://demos.usejquery.com/03_z-index_gallery/ http://nettuts.s3.amazonaws.com/771_sticky/step5.htmlhttp://nettuts.s3.amazonaws.com/771_sticky/step5.html


A Vibrant Digital Poster Design with CSS3


A Vibrant Digital Poster Design with CSS3
http://line25.com/wp-content/uploads/2010/css-poster/demo/index.html http://line25.com/tutorials/create-a-vibrant-digital-poster-design-with-css3


A polaroid photo viewer with CSS3 and jQuery


A polaroid photo viewer with CSS3 and jQuery
http://demo.marcofolio.net/polaroid_photo_viewer/ http://www.marcofolio.net/downloads/webdesign/polaroid_photo_viewer_with_css3_jquery/download.html


CSS drop-shadows without images


CSS drop-shadows without images
http://nicolasgallagher.com/css-drop-shadows-without-images/demo/ http://nicolasgallagher.com/css-drop-shadows-without-images/


CSS3 Animated Bubble Buttons


CSS3 Animated Bubble Buttons
http://demo.tutorialzine.com/2010/10/css3-animated-bubble-buttons/css3-buttons.html http://www.marcofolio.net/downloads/webdesign/polaroid_photo_viewer_with_css3_jquery/download.html


CSS3 Border Images for Beautiful, Flexible Boxes


CSS3 Border Images for Beautiful, Flexible Boxes
http://www.sitepoint.com/css3-border-images/ http://www.sitepoint.com/css3-border-images/


CSS3 Chess Board


CSS3 Chess Board
http://designindevelopment.com/css/css3-chess-board/ http://designindevelopment.com/css/css3-chess-board/


CSS3 gradients – quick tutorial


CSS3 gradients – quick tutorial
http://www.red-team-design.com/css-gradients-quick-tutorial http://www.red-team-design.com/css-gradients-quick-tutorial


CSS3 Media Queries


CSS3 Media Queries
http://webdesignerwall.com/tutorials/css3-media-queries http://webdesignerwall.com/tutorials/css3-media-queries


CSS3 Minimalistic Navigation Menu


CSS3 Minimalistic Navigation Menu
http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.html http://demo.tutorialzine.com/2010/06/css3-minimalistic-navigation-menu/demo.zip


Display social icons in a beautiful way using CSS3


Display social icons in a beautiful way using CSS3
http://demo.marcofolio.net/social_css3_display/ www.marcofolio.net/downloads/css/display_social_icons_using_css3/download.html


Turn Your Images Into Polaroids with CSS3


Turn Your Images Into Polaroids with CSS3
http://zurb.com/article/305/easily-turn-your-images-into-polaroids-wi http://zurb.com/article/305/easily-turn-your-images-into-polaroids-wi


Editable CSS3 Image Gallery


Editable CSS3 Image Gallery
http://css-tricks.com/examples/CSS3PhotoGallery/ http://www.splashnology.com/article/50-useful-css3-tutorials/258/


Feature table design with CSS3


http://www.red-team-design.com/wp-content/uploads/2010/12/feature-table.html http://www.red-team-design.com/wp-content/uploads/2010/12/feature-table.zip


FormBox – A jQuery & CSS3 Drop-Down Menu


FormBox – A jQuery & CSS3 Drop-Down Menu
http://www.addyosmani.com/resources/formbox/release2/#tab4 http://www.addyosmani.com/resources/formbox/release2/formbox.zip


Halftone Navigation Menu With jQuery & CSS3


Halftone Navigation Menu With jQuery & CSS3
http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.html http://demo.tutorialzine.com/2010/01/halftone-navigation-menu-jquery-css/demo.zip


A Sexy Vertical Sliding Panel Using jQuery And CSS3


A Sexy Vertical Sliding Panel Using jQuery And CSS3
http://spyrestudios.com/demos/sliding-panel-right/ http://spyrestudios.com/how-to-create-a-sexy-vertical-sliding-panel-using-jquery-and-css3/


A CSS3 Christmas Tree Ornaments


A CSS3 Christmas Tree Ornaments
http://sixrevisions.com/css/how-to-create-css3-christmas-tree-ornaments/ http://sixrevisions.com/css/how-to-create-css3-christmas-tree-ornaments/


Text in WebKit-CSS3


Text in WebKit-CSS3
http://css-tricks.com/slide-to-unlock/ http://css-tricks.com/slide-to-unlock/


CSS3 3D Interactive Photo Stack


CSS3 3D Interactive Photo Stack
http://www.addyosmani.com/resources/3dstack/3dstack.zip http://www.addyosmani.com/resources/3dstack/3dstack.zip


Colourful rating system with CSS3


Colourful rating system with CSS3
http://demo.marcofolio.net/colourful_rating_system/ http://www.marcofolio.net/downloads/webdesign/colourful_rating_system_with_css3_and_jquery/download.html


column text using CSS3


column text using CSS3
http://www.red-team-design.com/multi-column-text-using-css3 http://www.red-team-design.com/multi-column-text-using-css3


Photoshop Effect vs CSS3 Properties


Photoshop Effect vs CSS3 Properties
http://webstuffshare.com/demo/PhotoshopCSS3/ http://www.webstuffshare.com/2010/04/photoshop-effect-vs-css3-properties/


Pure CSS folded-corner effect


Pure CSS folded-corner effect
http://nicolasgallagher.com/pure-css-folded-corner-effect/demo/ http://nicolasgallagher.com/pure-css-folded-corner-effect/


A jQuery And CSS3 Persistent Navigation Menu


A jQuery And CSS3 Persistent Navigation Menu
http://www.addyosmani.com/resources/rocketbar/ http://www.addyosmani.com/resources/rocketbar/rocketbar.zip


Rotating billboard using only CSS3


Rotating billboard using only CSS3
http://demo.marcofolio.net/rotating_billboard/ http://www.marcofolio.net/downloads/css/rotating_billboard_using_only_css3/download.html


A Kick-Ass New jQuery & CSS3 Gallery


A Kick-Ass New jQuery & CSS3 Gallery
http://www.addyosmani.com/resources/shinetime/ http://www.addyosmani.com/resources/shinetime/shinetime.1.01.zip


Stylize Input Element Using CSS3


Stylize Input Element Using CSS3
http://webstuffshare.com/demo/StylizeInput/ http://www.webstuffshare.com/2010/04/stylize-input-element-using-css3/


CSS3 Typography that you’d Swear


CSS3 Typography that you’d Swear
http://code.tutsplus.com/tutorials/subtle-css3-typography-that-youd-swear-was-made-in-photoshop--net-13811 http://nettuts.s3.amazonaws.com/766_css3typography/typography.html.zip


Buttons with CSS3 and RGBA


Buttons with CSS3 and RGBA
http://zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba http://www.zurb.com/blog_uploads/0000/0617/buttons-03.html


Cool CSS Flip Effect with Webkit Animation


Cool CSS Flip Effect with Webkit Animation
http://line25.com/wp-content/uploads/2010/webkit-flip/demo/index.html http://line25.com/articles/super-cool-css-flip-effect-with-webkit-animation


Sweet tabbed navigation using CSS3


Sweet tabbed navigation using CSS3
http://demo.marcofolio.net/css3_tabbed_nav/ http://www.marcofolio.net/downloads/css/tabbed_navigation_using_css3/download.html


Simpler CSS Grid


Simpler CSS Grid
http://www.webdesignerwall.com/demo/simpler-grid/978grid.html http://webdesignerwall.com/tutorials/the-simpler-css-grid


A jQuery, CSS3 & HTML5 Hover-Based Interface


A jQuery, CSS3 & HTML5 Hover-Based Interface
http://www.addyosmani.com/resources/wanderwall/index.html http://www.addyosmani.com/resources/wanderwall/jquerywanderwall.rar


CSS3 3d bar chart


CSS3 3d bar chart
http://demo.marcofolio.net/css3_bar_chart/ http://www.marcofolio.net/downloads/css/wicked_css3_3d_bar_chart/download.html


Share This:

Post Tags:

Vikrant Agarwal

Vikrant Agarwal is a Creative Designer. When he is not working on blog you can find him climbing mountains.

  • To add an Emoticons Show Icons
  • To add code Use [pre]code here[/pre]
  • To add an Image Use [img]IMAGE-URL-HERE[/img]
  • To add Youtube video just paste a video link like http://www.youtube.com/watch?v=0x_gnfpL3RM