necolas's public fiddles
-
CSS speech bubbles (.net)
Using pseudo-elements to create a speech bubble effect without images or presentational HTML. Could just as easily be used to present client testimonials, blog comments, tooltips, etc.
-
CSS3 animated button (v2)
Animated button made without pseudo-elements. Works best in Firefox 4 because of buggy WebKit transitions.
-
CSS3 animated button
Semantic HTML. Uses pseudo-elements but only "fully animated" in Firefox 4 for now.
-
WRWBY
Mootools 1.3 (compat), HTML, CSS, JavaScript
-
CSS simple ribbons (.net)
Using pseudo-elements to create a ribbon without images or extra HTML.
-
CSS fancy download ribbon
An alternative pseudo-element method to create the download buttons on http://html5boilerplate.com
-
EcRdd
jQuery 1.9.1, HTML, CSS, JavaScript
-
CSS :hover 'shine effect' (ver 2)
A more robust and simpler method that uses pseudo-elements, background-size, gradients, and transitions to create a 'shine effect' when hovering over the icon.
-
A few CSS shapes
Alternative methods for trapezoid, pentagon, and heart shapes with CSS
-
CSS pseudo background-crop (.net)
An example of how to use CSS pseudo-elements to crop images.
-
CSS folded corner effect (.net)
Example code for producing a folded corner effect using CSS pseudo-elements
-
CSS tag effect (.net)
Example code for creating a popular tag style using CSS pseudo-elements
-
CSS drop-shadows: solutions/hacks
Two possible solutions to prevent pseudo-element 'shadows' dropping behind the background of a containing element. (Demo for @beep)
-
CSS :hover 'shine effect' (ver 1)
Uses CSS multiple backgrounds, background-size, gradients, and transitions to create a 'shine effect' when hovering over the icon
-
JS detection of CSS generated content support
Proof of concept. Uses JavaScript (jQuery) to detect browser's level of CSS generated content support.