In the previous post, we’ve talked about CSS checkout forms templates, navigation website menu, preloaders, loading & spinners CSS to beautify your website. Today, we’ve a huge collection of CSS3 snippet code that you can use to create beautiful website widget
Each snippet include detailed tutorial on how to implemented the source code. Even if you are beginner to codes, this tutorial will help you step by step until you complete your widget or CSS3 effect.
See Also: 14 CSS/HTML Button Templates
70Expanding overlay CSS effect
A new amazing CSS snippet to produce an easy expanding overlay effect using the CSS clip property and CSS transitions.
69Milky text effect with CSS
A good milky text effect made up of pure CSS. A code snippet by Jorge Epuñan.
68Flexing pagination CSS
Flexing pagination is a fancy pagination test including a truly nice animation. Developed by hakimel.
67CSSmatic a tool for designers
CSSmatic is a powerful device for assisting web designers to easily produce CSS gradients, border radius shapes, noise textures and package shadows.
663D shading with box-shadows
This awesome tutorial is about how to create a 3D shading effect with box-shadows.
65SideComments.js Medium style comments
SideComments.js is an interface component to give your site/app Medium.com design commenting system. Coded by Eric Anderson.
64Animated page transition
A CSS driven animation, that replaces the refresh regarding the page while the content is updated making use of Ajax. A tutorial by CodyHome.
63Settings panel PSD CSS
Free PSD and HTML/CSS snippet of a settings panel with brushed metal interface elements / toggle switches.
62uiGradients Color gradients tool
uiGradients is a helpful tool getting beautiful color gradients for the next design.
61Product item hover effect
A fantastic product item CSS hover effect for eCommerce sites. It is made width both CSS and JavaScript.
60Reading progress indicator widget
a well written article including a quick tutorial about creating a learning progress indicator widget.
59Flat iPhone with Next Post animation
A flat iPhone mockup made with few lines of CSS and jQuery featuring a truly good animation.
58CSS + jQuery flat clock
A flat clock made up of some lines of HTML + CSS + jQuery. Coded by Marco Biedermann.
573D hover effect with CSS3
An incredible 3D hover effect made up of only CSS3.
56Textures.js SVG patterns
Textures.js is a JavaScript library for creating SVG patterns.
553D folding panel in CSS
A secondary content panel that folds flat, powered by CSS Transformations and jQuery.
54Countdown flip clock CSS + jQuery
Practical countdown flip clock made out of few lines of CSS and jQuery. Created by Adem Ilter.
53CSS clouds
A set of 3 clouds designed with only CSS3.
52A fun text box made of CSS jQuery
A notepad-style textbox composed of CSS and simply a couple of lines of jQuery.
51Tumblr-style cog loaders CSS
A Tumblr-style cog loader with CSS and SVG icons predicated on an icon set designed by Jiri Silha.
50CSS dashed shadows
A snippet for creating pure CSS hipster-ish typographic dashed shadows.
49Simple Typography: Sass boilerplate for beautiful typography
Simple Typography is a simple typography boilerplate built with Sass and grunt which will also come in handy to begin with with a new web project.
48Rain drops effect with WebGL
A fascinating test by Codrops to generate a rain drop effect on your web pages with WebGL.
47Styleguide: Living style guides made easy
46CSS page transitions
CSS web page transitions for producing interesting navigation effects when exposing a new page.
45Fullscreen pageflip layout with HTML & CSS
Awesome fullscreen pageflip layout with HTML, CSS and the BookBlock plugin.
44Metro Twitter feed widget CSS + PSD
A lovely Metro-style twitter feed made of CSS + the original PSD file. Containing different states for various tweets, links, and timing.
43Effekt.css A collection of CSS effects
Effekt.css is a CSS transitions & animations collection grouping the best snippets in the web.
42Animated text fills with CSS and SVG
A tutorial on how best to produce various types of animated fills and shots for text using various methods including CSS and SVG.
41Detox Free Ghost theme
Detoxification is a clean, minimal and free Ghost theme best suitable for web log and news websites. Coded by Jordan Bowman.
40New subtle hover effects with CSS3
Some new imaginative and subtle hover effects making use of modern CSS practices including 3D translate and pseudo elements.
39Round calendar PSD + HTML
A minimal and flat calendar consists of circles. Mcdougal Marco Biedermann has released both the PSD therefore the ready-coded widget.
38CSSGram Instagram filters with CSS
A CSS library predicated on blend modes generate some cool photo effects prompted to Instagram filters.
37Pure CSS3 wall analog clock
An incredible wall surface analog clock made out of pure CSS3. Created by Nik Rassadin.
36Points of interest CSS + JS
Sights is a small snippet to highlight the points of interest of your services and products.
35Techniques for creating separators
A collection of separator styles for horizontally dividing sections on a website.
34CSS on/off switch
A minimal and cool CSS on/off switch.
33SVGeneration SVG patterns generator
SVGeneration is a habits generator for SVG. With this particular device, producing a background pattern with SVG is manufactured much easier.
32Animo.js Tool for managing CSS animations
Animo.js is a powerful tool for handling CSS animations and creating stack animations, create cross-browser blurring, set callbacks on animation conclusion, etc.
31Fullscreen overlay menu with CSS
A tutorial for producing fullscreen overlay menu with CSS.
30HTML5 device mockups
Stunning showcases with your HTML5 mockups of popular products is really fast and simple.
29Simple stack effects with CSS
A couple of easy stack effects on thumbnails created with CSS.
28Techniques for creating textured text
An interesting guide for creating image or texture filled text and show you just how to use them.
27Mac OSX-like animated folder with CSS3
A OSX-like folder with CSS3, by utilizing 3D transforms, gradients and box shadows.
26iOS7 blurred header CSS+JS
An iOS7-style blurred header made up of some lines of CSS and JS. This of good use snippet happens to be coded by Rik Schennink.
25Responsive & expanding thumbnail grid
A responsive thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
24Text styles and hover effects
An innovative text designs and hover effects for the motivation. Some effects utilize experimental techniques including SVG masking and Canvas.
23Long Shadows generator
Long Shadows generator is a robust tool for creating custom CSS shadows.
22Astrum: Pattern library for web projects
Astrum is a lightweight pattern library for web tasks including numerous helpful components which can be easily handled and grouped through the command-line.
21Weather loading animation
A wonderful weather loading animation developed by Tim Holman for Authentic Weather with a few lines of HTML and CSS.
208 CSS devices mockups
A free device mockups made out of pure CSS including iPhone, Android, Lumia and iPad. Coded and released by Oleg.
19CSS-only weather app concept
A weather app concept based on Sergey Valiukh dribbble shot and constructed with pure CSS. A snippet by David Khourshid.
18Pricing tables with HTML/CSS
A precious collection of pricing tables coded with HTML and CSS and able to be utilized on your website.
17Type Nugget: Web typography CSS generator
Type Nugget is a new device for generating stunning responsive web typography. It gives a settings panel, where you could adjust font settings individually for headings, paragraphs, links and listings.
16Motion blur effect with SVG
A tutorial on how to create a motion blur effect on HTML elements utilizing JavaScript and an SVG blur filter.
15CSS3 Pricing Tables
CSS3 pricing tables through the Impressionist UI, made by Vladimir Kudinov.
14MocKit HTML iPhone 6 mockups
MocKit is a ready-made iPhone 6 mockup kit built with HTML and CSS. Customisable tints, size and always retina ready.
13Notification alert modal windows with CSS3
A collection of flat notification alert modal windows with pure CSS icons. The icons are made utilizing before/after pseudo-elements and CSS3 transform functions.
12Simple toggle switch CSS
A straightforward toggle switch with subtle shadows and details created using CSS. Released by CSSFlow.
11CSS Calendar concept
A calendar app concept created with CSS only and prompted by Ludmila Shevchenkos dribbble shot.
10Reveal.js Framework for HTML presentations
Reveal.js is a framework for easily producing gorgeous presentations utilizing HTML. A project developed by hakimel.
9Expandable image gallery
A graphic that expands on click, going full-width and turning into a gallery. A smart snippet by Codyhouse.
8Fancy Banners CSS3
A pure CSS3 fancy text advertising making use of transforms, pseudo-elements, last-child, and much more.
7Item transitions inspiration
A couple of item transitions made making use of CSS animations that can be used for inspiration.
6Notepad CSS snippet
A realistic notepad created using CSS3, with a lined paper background and concealed pages in the bottom.
5CSS3 3D book showcase
3D publications on a rack made with some lines oh HTML and CSS. The theory is make publications look more practical by utilizing 3D transforms and apply some lighter moments effects in their mind, like rotating, flipping and starting.
4iOS7 Toggles CSS
CSS snippet on Codepen is an iOS7-style toggle made out of CSS3. Developed by Joshua Hibbert.
3CSSCO: CSS filters inspired by VSCO
A small library of CSS photographic filters encouraged by VSCO and built by Lauren Waller.
2Twitter Account Widget CSS + PSD
A small Twitter widget / profile field for your next design Twitter account widget.
1Tooltip styles collection CSS + SVG
A collection of hover tooltip styles and effects. Utilizing CSS transforms, border-radius and SVG shapes we are able to produce modern looking and interesting tooltips.
