Skip to content

Instantly share code, notes, and snippets.

View dziudek's full-sized avatar

Tomasz Dziuda dziudek

View GitHub Profile
@dziudek
dziudek / dabblet.css
Created June 16, 2012 00:29
The first commented line is your dabblet’s title
/**
* The first commented line is your dabblet’s title
*/
.circle {
background: #fff;
margin: 50px 25px;
width: 24px;
height: 24px;
border: 12px solid #f55;
@dziudek
dziudek / dabblet.css
Created August 3, 2012 21:41
Simple animated CSS3 switcher
/**
* Simple animated CSS3 switcher
*/
label {
display: inline-block;
line-height: 24px;
}
.switcher {
display: inline-block;
@dziudek
dziudek / dabblet.css
Created August 3, 2012 22:06
CSS arrow
/**
* CSS arrow
*/
body {
background: #4546da;
}
.arrow {
background: #fff;
@dziudek
dziudek / dabblet.css
Created August 4, 2012 21:24
Animated circle
/**
* Animated circle
*/
#circle {
background: #f5a;
border-radius: 50%;
box-sizing: border-box;
height: 200px;
margin: 50px;
@dziudek
dziudek / dabblet.css
Created August 11, 2012 10:54
Nice CSS 3D animation
/**
* Nice CSS 3D animation
*/
body {
perspective: 1400;
}
#box {
background: #d45;
@dziudek
dziudek / dabblet.css
Created September 5, 2012 19:02
Responsive devices :)
/**
* Responsive devices :)
*/
#responsive {
background: #fff;
border: 5px solid #333;
border-bottom: 17px solid #333;
border-radius: 5px;
border-top: 10px solid #333;
@dziudek
dziudek / dabblet.css
Created September 6, 2012 19:01
Responsive devices :)
/**
* Responsive devices :)
*/
#responsive {
animation-name: device;
animation-duration: 5s;
animation-iteration-count: infinite;
animation-direction: alternate;
@dziudek
dziudek / dabblet.css
Created December 5, 2012 12:50
Image Roll
/**
* Image Roll
*/
#image-roll {
height: 200px;
width: 600px;
perspective: 600;
}
@dziudek
dziudek / dabblet.css
Created December 5, 2012 12:56
Image Roll
/**
* Image Roll
*/
#image-roll {
height: 200px;
width: 600px;
-webkit-perspective: 600;
-moz-perspective: 600;
perspective: 600;
@dziudek
dziudek / dabblet.css
Created December 5, 2012 19:30
Image :hover animation I
/**
* Image :hover animation I
*/
figure {
height: 300px;
overflow: hidden;
perspective: 600;
position: relative;
width: 400px;