Saminou24

Mac OS X 10.8 Finder in CSS3

This is a WIP. I explain why later.

I recreated the 10.6 Finder almost 2 years ago. At that time a lot of people recreated a bunch of elements from the Mac UI in CSS3. Like the dock or various kinds of aqua buttons, etc. I decided to make the Finder to learn the kinks of CSS3 and just to see what I'm able to do with it.

You can see it here: http://patrickkontschak.com/css3/finder

That was almost 2 years ago. I've been learning SASS and HAML and all those "hip new things' and tried to update it with these, but I ended up breaking half the thing and the code just looks horrible. It's a code-monster. 2 days ago I finally decided to update my CSS3 project.

Saminou24

Apple Promos

Apple designers have found a very neat way to create rounded box-shadow.

A Pen by Lavi Perchik on CodePen.

License.

Saminou24

CSShrome

★ chrome with css

A Pen by Adem ilter on CodePen.

License.

Saminou24

Interactive UI demo

You can find this on running website — http://plugin.subtlepatterns.com/

A Pen by Saminou yengue kizidi on CodePen.

License.

Saminou24

Chart.js into PNG using phantomjs/casperjs

Building a prototype so I can turn a chart into a PNG using phantomjs/casperjs to go into monthly client reports sent out by email

A Pen by Tahir Fayyaz on CodePen.

License.

Saminou24

A Pen by Harris Novick

A Pen by Harris Novick on CodePen.

License.

Saminou24

Selectable Color without JS (Chrome Only)

Hacking the HTML5 color input type to tint a photo or change background color. CSS only - no JS. Chrome only.

A Pen by Saminou yengue kizidi on CodePen.

License.

Saminou24

Lease Balance Meter

Design from a Dribbble shot by Cesar Zeppini. I built the visual meter on top of a hidden meter element. The value of the meter’s value attribute determines the width of the red meter bar and the number displayed in the green box. Demo by changing the value of the value attribute from 750 to a number between 0 and 1000.

Because the functionality of the visual meter relies on JavaScript, progressive enhancement is necessary. Progressive enhancement can be achieved by leaving the meter element’s display property at default until hidden by a script-loaded stylesheet. This stylesheet would contain all the style declarations for the visual meter. If the stylesheet failed to load, the meter element would remain accessible.

A Pen by Saminou yengue kizidi on CodePen.

[License](htt

Saminou24

Light Switch

Dribbble Shot by - Griffin Moore - http://dribbble.com/okgriffin

A Pen by Saminou yengue kizidi on CodePen.

License.

Saminou24

CSS Tabs

A Pen by Saminou yengue kizidi on CodePen.

License.