Code Playground

rpjs

rpjs ( Rob Smyth )

 

21 Code Samples

CSS Checkbox Styles

A very nice collection of checkboxes made purely in CSS3 by me. The checkboxes you see above are nothing but the labels for their respective inputs while the checkbox inputs are hidden because these have a very limited CSS styling support. These checkboxes will work in all the major browsers except Internet Explorer 8 and below.

Animations are achieved using the transition property. Extra elements like "ON" and "OFF" are created using :after and :before pseudo elements of labels or the container divs. These can be easily used in real world projects, take a look at the code to learn more about them.

Views1108

Animated check inputs

Animated checkbox example

Views1009

Notepad with pure CSS

By CSSFlow: free UI elements and widgets coded with HTML5, CSS3, and Sass.

View the original article and download the Sass source at:
cssflow.com/snippets/notepad

Original PSD by Mathieu Berenguer.

Views1120

Pure CSS3 Smooth Ribbon With Borders

Subtle and smooth ribbon made purely out of CSS3. The ribbon shape is created using 3 elements with classes .base, .left_corner and .right_corner respectively. The corners are just squares that are rotated and moved to left/right to create the ribbon shape.

The shadow at the top is just an oval shape with box-shadow property positioned absolutely. It has a negative top offset to make the ribbon look like it's coming from under something.

The borders on the ribbon are created using dashed borders applied on the pseudo elements (:after and :before) of .base class. Then they are positioned absolutely and colored accordingly.

Views881

3d Tags

Hello Friends look at the 3d tag's visit : http://bloggingbolt.blogspot.com/

Views876

Twitter Bootstrap Badges

Badges from the Bootstrap framework that can act as indicators or to display unread counts.

Views829
-1
rpjs