CSSDeck

CSS social share button

2013-05-20 11:18:44

CSS Social share button inspired by this dribbble shot: http://dribbble.com/shots/1072278-Share

Nice LESS buttons

2013-05-19 16:30:06

Using the .cool-button LESS function with 1 argument of the base colour will generate these nice-looking buttons!

Example for a red button:

.cool-button(#ff0000); or .cool-button(red); will also work

风扇

2013-05-18 15:17:24

CSS Only Macbook Air

2013-05-17 19:23:05

Flat UI Login Form

2013-05-17 16:27:48

Inspiration from http://365psd.com/day/3-328/

Modal slider (light) declinaison

2013-05-16 10:39:40

Rebound of This item

webkit only

Full CSS NES

2013-05-16 09:40:10

A full CSS NES, fully resizable thanks to 'em' and '%' units.

Decepticon Logo Pixel Art

2013-05-16 04:05:04

Decepticon logo pixel art created with an HTML table.

A little fun, well okay it wasn't really, but it was. I felt like doing it one day for kicks after I saw a needlepoint/cross-stitch pattern which this is based on.

specimen typographical

2013-05-16 02:49:59

TEST / text-stroke / text-fill-color // sólo webkit, sorry.

Reflections

2013-05-15 21:08:22

Displaying a few different ways to play with text orientation using CSS.

Ringtail Animation

2013-05-15 12:42:13

13.04 Ringtail animation. Vector from https://plus.google.com/111311916570668380146/posts/DEa8HFPFH7s and values rounded to the nearest integer.

LOST series intro

2013-05-14 01:14:31

CSS animation and use -webkit-filter: blur (Xpx)

CSS Social Ribbons

2013-05-12 19:04:00

Simple yet stylish CSS Social Ribbons

Login Form

2013-05-12 16:51:14

Pricing Table

2013-05-12 12:15:57

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/pricing-table

Original PSD by Edi Gil.

Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8 (and newer).

Click Invaders

2013-05-11 20:57:12

Destroy the aliens by clicking them out of this world!

First and quick attempt at making a 100% css game, with no javascript. Still pretty much a proof of concept that I will eventually take into more than just an old school test of your skills with a mouse.

I wanted to do a css game for quite some time but seeing Alex Walker's Pong gave me the motivation, kuddos to him and to the people of cssdeck.com.

UPDATES
2013-05-13 added explosions (twelve-point-star from css3shapes.com)
2013-05-14 removed an useless animation + restored background gradient + lights (down-triangle from css3shapes.com)
2013-05-19 added timer + time over screen

Works better on Google Chrome
Buggy on Opera

Disqus style star widget

2013-05-11 18:12:59

Uses CSS transition and checkbox hack to create a Disqus style star widget in CSS.

Super basic accordion

2013-05-11 03:11:46

Super basic accordion without javascript only simple css

Flat Apple Device CSS3

2013-05-09 15:14:00

Countdown

2013-05-08 21:10:44

This is a simple countdown to redirect page I worked on for a project. We used this for a domain where we changed the domain.

I took out the redirect portion so that it doesn't redirect you. You can use php, javascript or asp.net to redirect you.

JS1k submission

2013-05-08 05:56:32

Forked from http://js1k.com/2010-first/demo/171

CSS3 Pong - with scoring

2013-05-08 01:51:08

An exercise in the futile but fun.

This is a playable version of Pong complete with working scoring system -- built entirely with CSS. Not a line a Javascript to be seen.

All game logic is built using hover state and sibling selectors.

PS: It's not quite finished but it's close.

ISSUES:

I'd love to limit the movement of the bat to vertical only
If the player doesn't move at all, he/she can cheat. Basically we're relying on ':HOVER' to determine if the animation continues or ends. When your cursor is stationary the browser doesn't ever recheck to see if the hover state has changed.

I doubt there's a solution to this, other than finding another method not using hover. If you can do it in pure CSS, I salute you sir or madam!

PS: I've written a breakdown on how this works here -- http://www.sitepoint.com/css3-pong-insane-things-to-do-with-css/

Box with stitching effect

2013-05-06 17:01:15

http://www.red-team-design.com/slick-login-form-with-html5-css3

Orange car

2013-05-06 13:41:54

Animated Single element, Pseudo-elements :before :after. / Experiment / only works in Chrome and Firefox

Animated Envelope

2013-05-04 17:22:10

Hover over the envelope to make it open and reveal contact information. Manipulates the transition delay upon hover in order to animate in the correct order.

Color Palette

2013-05-04 13:40:57

View on behance: http://bit.ly/15GYvw8

Facebook Login Form

2013-05-04 12:07:50

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/facebook-login-form

Original PSD by Alex Montague.

Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 8 (and newer).

Message Form

2013-05-02 13:54:05

Just a little character counter experiment with jQuery :)

Flat Folio

2013-05-01 21:37:54

A simple flat portfolio style that doesn't suck. Saw a similar style on a theme and had to re-create it. Added some animate.css by Dan Eden and a hover effect.

Make loading using box shadows

2013-05-01 16:22:17

Simple preloader animation

2013-04-27 11:16:20

Simple preloader animation

Infinite loaders (Haml & SASS)

2013-04-27 10:43:42

It a rebound of Infinite loaders

Loader alternative for new browsers

2013-04-27 03:47:47

Simple css3 animation to make loader.

Worm cycle V2

2013-04-26 19:26:18

Worm cycle

2013-04-26 18:28:20

Animation Transform-origin.

Tooltip for web-apps (ios)

2013-04-26 12:48:20

Keyframes were generated with PrexifMyKeyframes

ice cream truck

2013-04-24 14:36:49

i made this for animation practice

Love CSS

2013-04-23 10:54:42

Because I love CSS

Cake

2013-04-23 01:59:02

Circular Rings

2013-04-22 16:27:55

I forked http://cssdeck.com/labs/canvas-spaceship-loader to allow the number of rings and style of animation to be easily changed. Primarily use lines 71 & 73 to affect it.

Social media icon holder

2013-04-22 13:12:09

Inspreted by http://dribbble.com/shots/579544-Navigation-Bar-For-App

locking for dribbble invite =) http://dribbble.com/bartos_lazarski

CSS3 Text Effect

2013-04-21 12:05:24

Metal Progress Bar

2013-04-21 11:41:43

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/metal-progress-bar

Original PSD by Ivo Ivanov.

Tested in Firefox 4, Safari 4, Chrome 14, Opera 10, IE 6 (and newer).

CSS3 Twitter Follow Box

2013-04-21 10:22:01

Player CSS3

2013-04-21 09:07:43

A CSS3 template for musique player inspired by Sanadas Young.

Login/Register form with pass metter

2013-04-21 00:39:24

CSS Proximity Effect

2013-04-20 18:17:15

Pure CSS proximity effect, yet to find any practical use for it:)

CSS3 Animated Social Media Icons

2013-04-19 21:10:26

Animated CSS wifi icon

2013-04-19 18:04:46

CSS3 Snows and Stars

2013-04-19 13:49:57

Snows (or starts) with pure 3D transforms & animation - best view Chrome, Safari.