Snipplr

(CSS) CSS3 validation - fcommisso

Tue, 02 Feb 2016 12:02:22 UTC

CSS for form field validation

(CSS) Cross-Browser Gradient in CSS3 - apphp-snippets

Tue, 22 Dec 2015 07:03:12 UTC

The following code will display a cross-browser CSS-gradients. Th add the right selector you can use rgba() for transparency.

(JavaScript) EnjoyHint 3.0 To Add Free Hints and Tips To Site Or App - lanagio

Fri, 06 Feb 2015 22:41:28 UTC

The new updated introduced auto scrolling to highlighted elements, possibility to hide 'next' and 'skip' buttons, add html markup in description, and more.

(CSS) Word break links - flatearthcomms

Wed, 02 Apr 2014 06:26:10 UTC

Stop a link overflowing it's parent's width

(HTML) HTML5 Basic Template (w/ Comments) - Rar

Sun, 27 Oct 2013 10:36:15 UTC

Extremely helpful to anyone who is looking to improve performance and follow best practices in HTML/CSS

(CSS) CSS Rotate Animation - keidash

Wed, 21 Aug 2013 22:45:05 UTC

How to create animate rotation for a element.

(CSS) Curtain Effect Using Multiple Background Images - COBOLdinosaur

Thu, 06 Jun 2013 05:05:00 UTC

Each image is positioned, dimensioned, and repeated according to the comma separated values in the other background properties. The images in the list are layered front to back in the same order they are listed in the rule declaration. If a background color is specified it will be the bottom layer.

(CSS) Css3 twitter follow box - jntu_gnec

Mon, 06 May 2013 01:21:23 UTC

Demo Image: http://i.imgur.com/hTQXYOu.png

(CSS) Simple CSS3 Play Button - devowhippit

Fri, 01 Mar 2013 02:54:00 UTC

Uses CSS3 attributes and psuedo elements to create a simple play button for web interfaces.

(CSS) CSS3 Box Sizing Made Easy - bmayzure

Fri, 25 Jan 2013 11:10:53 UTC

When box sizing is set, the padding, border and margin no longer add onto the total width or height of the element. Instead, they eat into the set width or height. So, if you have a box whose width is set to 300px, and padding set to 10px, then the total width of the box is still 300px. Instead, there are 20 less pixels inside the box for content such as text or images. This may be a confusing concept but one that will definitely come in handy, especially to those who do not like to do math because we all know that in the real world measurements are made up of wacky numbers and not increments of 10. **Source:** [http://designmodo.com/css-layout-properties/](http://designmodo.com/css-layout-properties/) and [http://css-tricks.com/box-sizing/](http://css-tricks.com/box-sizing/)

(CSS) CSS3 Roll Links - bmayzure

Fri, 25 Jan 2013 10:47:29 UTC

Cross-browser roll link effect in CSS3. Works in IE 10+, Webkit (Chrome/Safari/etc), Opera, Gecko (Firefox/Seamonkey/etc). Degrades nicely for unsupported browsers.

(CSS) CSS3 Link Color Transition Effect - bmayzure

Fri, 25 Jan 2013 10:21:22 UTC

A simple CSS3 link-color transition effect. Fades from the base color to the active/focus color and back on rollover. A nice little added effect that's pretty well cross browser. Works with Webkit (Chrome/Safari/etc), Opera, Gecko (Firefox/Seamonkey/etc), and IE 10. Degrades nicely for unsupported browsers.

(CSS) Lining up vendor-prefixed CSS properties for easy editing in Sublime Text - Todd

Fri, 18 Jan 2013 16:08:05 UTC

When using a CSS3 property that has vendor-prefixed versions available, I indent as usual with one tab and then use spaces to line up the properties on the colon. This allows for easy editing of all â€˜siblingâ€™ properties at once using [Sublime Textâ€™s](http://www.sublimetext.com/) multiple selection feature ([video demonstration](http://youtu.be/czQipWJA8EU)).

(HTML) CSS3 Ajax Loading Cross browser - MohamedAlaa

Wed, 28 Nov 2012 05:58:48 UTC

CSS3 Ajax Loading Animation ======== This is a simulation for the popular gif animated images. The reason why i choose to do it in css3 is the flexibility of re-using it in different sizes, different colors and the transparency issues in gif animated loaders. Enjoy it ;) -------- [Mohamed](http://seniorwebdesigner.com/ "My Portfolio") Twitter: [@MohammedAlaa](http://twitter.com/MohammedAlaa "@MohammedAlaa on Twitter")

(CSS) Add box shadow on bottom of element only - Huskie

Mon, 19 Nov 2012 22:54:21 UTC

CSS code to add a CSS3 box shadow to the bottom of an element only.

(CSS) Webkit lastline truncate - Rakowskey

Wed, 26 Sep 2012 02:01:07 UTC

Truncate the multiline text. Webkit Property.

(CSS) CSS - Rounded corners - tucq88

Wed, 05 Sep 2012 17:34:12 UTC

IE8 and below have no CSS support

(CSS) Implementation of CSS3 Media Query - ecksteing

Mon, 03 Sep 2012 15:36:45 UTC

Implementation of CSS3 Media Query

(CSS) CSS - Adding a gradient â€“ linear-gradient - satie83

Sun, 12 Aug 2012 10:09:07 UTC

(HTML) HTML5 CSS3 Webtemplate with Html5 drop down navigation bar - flanker

Thu, 02 Aug 2012 03:02:38 UTC

This is a simple HTML5 CSS3 website template you can customize it according to your needs. It has a clean and modular code and css. No fancy stuff just basic elements presents like : slideshow, social icons and a navigation bar. Its cross browser compatible

(CSS) Chunky CSS3 Button - kdesilva

Wed, 04 Jul 2012 04:40:41 UTC

not mine.

(CSS) CSS3 Only - Small Sphere Following Larger Circular Track - ryanfiorini

Fri, 13 Apr 2012 00:24:03 UTC

* This will not work in IE.

(Other) CSS3 box-shadow with page curl effect - rodcwahr

Tue, 10 Apr 2012 08:50:39 UTC

(Other) CSS3 box-shadow with page curl effect - rodcwahr

Tue, 10 Apr 2012 08:50:01 UTC

(CSS) Menu With CSS Only - ryanfiorini

Mon, 09 Apr 2012 21:05:10 UTC

Simple 2 lines of CSS and you have a dropdown with hover.

(CSS) Use CSS3 Media Screen to go from Horizontal Menu to dropdown - ryanfiorini

Fri, 06 Apr 2012 03:27:24 UTC

This will take the screen width into account and display either a horizontal menu or a dropdown menu with a hover style. Resize your window to see the effect.

(CSS) CSS3 box-shadow can replace mask for mobile - ryanfiorini

Wed, 04 Apr 2012 22:07:34 UTC

This is a good replacement for a mask for mobile devices. You are still able to click through the shadow to the text behind.

(CSS) Nice Gradient Button with Hover all CSS - ryanfiorini

Tue, 03 Apr 2012 22:40:15 UTC

This uses transitions for the hover effect which has limited IE support.

(CSS) Soothing Clouds in CSS3 - jimmy101

Sun, 11 Mar 2012 14:38:02 UTC

Just came across pure css3 soothing clouds, looks awesome, checkout!

(CSS) Rotating circle link animation - discipolo

Sun, 04 Mar 2012 00:37:14 UTC

a link with the class becomes circle animated rotating once and fading in

(HTML) CSS3 Form Search Button - CKOink

Fri, 24 Feb 2012 22:21:17 UTC

A nice looking search button built with css3

(HTML) CSS3 Page Curls - CKOink

Fri, 24 Feb 2012 20:24:35 UTC

Using css3 to create page curl illusion on box elements

(CSS) Rounded Corners with CSS3 / Creating a Circle with CSS3 - ninacess

Mon, 30 Jan 2012 18:07:05 UTC

Use css for rounding corners instead of images. Also use css3 for creating circles.

(CSS) Amazing CSS3 Pushy Buttons (So Slick) - jimmy101

Sat, 07 Jan 2012 20:59:31 UTC

Really Nice CSS3 Buttons I came across. Love the gradients and especially the Pushy Effects.

(CSS) iOS Media Queries - swoicik

Sun, 18 Dec 2011 12:27:59 UTC

(CSS) Fix Webkit CSS3 animation flickers - FatFolderDesigner

Sat, 17 Dec 2011 15:57:28 UTC

Ever notice a weird CS3 animation flicker? Annoying right? Add these CSS3 classes to the objects being animated and it should go away (at least it has in my testing). More details at the link, questions can be postsed either here or there.

(CSS) CSS3 animation flash stop - inpixelitrust

Thu, 01 Dec 2011 23:41:46 UTC

Fight the "flash" effect at animation start in webkit browsers

(CSS) CSS3 multiple backgrounds - Barlon

Tue, 15 Nov 2011 18:10:39 UTC

img1.png is closest to the viewer and img4.png furthest. This will create a feeling of stuff moving around when resizing the browserwindow.

(CSS) CSS3 heartbeat animation - Roen

Mon, 14 Nov 2011 03:48:49 UTC

heartbeat pulse, a css3 animation

(CSS) CSS3 Transition - Barlon

Sun, 13 Nov 2011 02:14:50 UTC

The transition instructions are attached to the normal state and therefore declared only once, then triggered on for eg. hover.

(CSS) CSS3 fallback prefixes - Barlon

Sun, 13 Nov 2011 01:42:23 UTC

CSS3 fallback prefixes for major browser-vendors.

(CSS) CSS3 usable today - Barlon

Sun, 13 Nov 2011 01:35:25 UTC

Usable CSS3

(jQuery) metro.js: recreating Windows 8 UI as a web interface - claudiowebdesign

Fri, 14 Oct 2011 22:53:35 UTC

Hi everyone, a while ago i posted a little script that reproduced a little animation effect seen in Windows 8 Developer Preview. I thought about expanding it some more, and in the end i started actually recreating the whole Metro interface in HTML5/CSS3/jQuery. if anyone gets interested in it and desires to give a hand i'll soon upload everything on a public github repository THE RESULT: http://claudiobonifazi.com/snippets/metro THE SCRIPT: http://claudiobonifazi.com/snippets/metro/script/metro.js THE MINIFIED SCRIPT: http://claudiobonifazi.com/snippets/metro/script/metro.min.js hope you enjoy

(Other) Safari flickering fix when HW-accel CSS - athanassiadis

Fri, 14 Oct 2011 19:59:28 UTC

(Other) CSS3 Border Radius Bottom Left - maxxscho

Thu, 13 Oct 2011 00:07:55 UTC

(jQuery) placeholders using jQuery - tjboverl

Fri, 30 Sep 2011 22:44:21 UTC

(CSS) Starry Night Parallax CSS Simplified - DeluxiveState

Thu, 15 Sep 2011 03:00:42 UTC

A Simplified solution to CSS-Tricks Starry Night Parallax Effect. Se URL for demo and original article. Example files can also be downloaded at the URL.

(CSS) Style for Required inputs and Placeholder - rigobcastro

Sat, 10 Sep 2011 06:23:13 UTC

CSS3 Normalize for Required and Placeholder...

(CSS) CSS3 - Rounded Corner Boxes - anaplusx

Tue, 30 Aug 2011 18:57:20 UTC

(CSS) Pure CSS3 Buttons - Huskie

Wed, 10 Aug 2011 00:09:15 UTC

Pure CSS3 buttons with 9 pre-defined colours and 3 styles. Adapted from Web Designer Wall - http://www.webdesignerwall.com/demo/css-buttons.html