Skip to content

Instantly share code, notes, and snippets.

@darkyen

darkyen/puffy.css

Created October 1, 2012 18:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save darkyen/3813571 to your computer and use it in GitHub Desktop.
Save darkyen/3813571 to your computer and use it in GitHub Desktop.
Download ZIP
Puffy V1.0
Raw
puffy.css
/* (C) Tapeer Team 2012
* Puffy is/was/will be a brain work of Abhishek Hingnikar , Nikita Arora , Lila Pustovoyt , Jennifer Inzer and
* other members of tapeer design team
* AWW SERIOUSLY MAN YOU GUYS HAVE READ THIS N1000 TIMES ... SO
* THIS IS JUST TO SAY THIS FILE IS DISTRIBUTED UNDER MIT LICENSE HAPPY ? KTHX BYE
*/
@import url(http://fonts.googleapis.com/css?family=Josefin+Sans);
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
h1{
color:#fff;
font-size:48px;
font-family: 'Source Sans Pro', sans-serif;
text-shadow:0 1px 0px rgba(0,0,0,1),1px 0px 0px rgba(0,0,0,1),0 -1px 0px #606060,-1px 0px 0px #606060;
}
body{
background:#2d2d2d;
padding-bottom:30px;
}
option,select{
-webkit-appearance:none;
}
select,input,option,button,progress,.buttonset,.text{
font-size:14px;
margin-top:30px;
margin-left:30px;
}
select,input,textarea,option{
padding:8px 10px;
background:#1f1f1f;
border-radius:6px;
border:1px solid #000;
color:#fff;
-webkit-transition:border-color 200ms,box-shadow 200ms;
box-shadow:inset 0px 2px 0px 2px rgba(10,10,10,0.2),0 0 2px rgba(0,0,0,0.1);
}
select{
padding-right:40px;
background:url(http://i.stack.imgur.com/0eUl7.png) no-repeat 90% 12px ,#1f1f1f;
background-size:12px 10px;
}
select:hover,input:hover{
-webkit-transition:border-color 5ms,box-shadow 5ms;
box-shadow:inset 0px 2px 0px 2px rgba(10,10,10,0.2),0 0 2px rgba(0,0,0,0.1),0 0 2px rgba(17,217,250,0.4)
}
select:focus,textarea:focus,input:focus{
-webkit-transition:border-color 5ms,box-shadow 5ms;
outline:none;
border:1px solid rgb(62,182,194);
box-shadow:inset 0px 1px 0px 1px rgba(10,10,10,0.6),0 0 2px rgba(17,217,250,0.8);
}
select:active{
border-bottom:none;
border-bottom-left-radius:0px;
border-bottom-right-radius:0px;
}
button{
position:relative;
padding:8px 20px;
border:0px;
-webkit-appearance:none;
border-radius:4px;
background:#454545;
box-shadow:0px 4px 0px -1px #181818,inset 0px 1px 3px rgba(150,150,150,0.4);
-webkit-transition:box-shadow 50ms,top 50ms;
color:#ddd;
font-weight:800;
text-shadow:0px -1px 0px rgba(0,0,0,0.8);
}
button:hover{
box-shadow:0px 4px 0px -1px #181818,inset 0px 1px 3px rgba(150,150,150,0.4),inset 0px 0px 2px rgba(62,182,194,0.8);
}
button:active{
-webkit-transition:box-shadow 4ms,top 4ms;
top:2px;
box-shadow:0px 0px 0px 0px rgba(0,0,0,0),inset 0px -1px 3px rgba(150,150,150,0.4),inset 0px 1px 3px rgba(5,5,5,0.8),inset 0px 0px 2px rgba(62,182,194,0.8);
}
input[type=range]{
-webkit-appearance:none;
padding:0px;
height:2px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance:none;
height:18px;
width:18px;
border-radius:16px;
background:#3d3d3d;
border:1px solid rgba(0,0,0,1);
}
input[type="range"]:hover{
border:1px solid black;
box-shadow:inset 0px 2px 0px 2px rgba(10,10,10,0.6),0 0 2px rgba(0,0,0,0.3);
background: rgb(0,44,56);
background: -moz-linear-gradient(left, rgba(0,44,56,1) 0%, rgba(19,19,19,1) 25%, rgba(19,19,19,1) 75%, rgba(0,44,56,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,44,56,1)), color-stop(25%,rgba(19,19,19,1)), color-stop(75%,rgba(19,19,19,1)), color-stop(100%,rgba(0,44,56,1)));
background: -webkit-linear-gradient(left, rgba(0,44,56,1) 0%,rgba(19,19,19,1) 25%,rgba(19,19,19,1) 75%,rgba(0,44,56,1) 100%);
background: -o-linear-gradient(left, rgba(0,44,56,1) 0%,rgba(19,19,19,1) 25%,rgba(19,19,19,1) 75%,rgba(0,44,56,1) 100%);
background: -ms-linear-gradient(left, rgba(0,44,56,1) 0%,rgba(19,19,19,1) 25%,rgba(19,19,19,1) 75%,rgba(0,44,56,1) 100%);
background: linear-gradient(to right, rgba(0,44,56,1) 0%,rgba(19,19,19,1) 25%,rgba(19,19,19,1) 75%,rgba(0,44,56,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#002c38', endColorstr='#002c38',GradientType=1 );
}
input[type="range"]:hover::-webkit-slider-thumb {
border:1px solid rgb(62,152,182);
box-shadow:inset 0 0 2px rgba(62,152,182);
}
input[type="checkbox"]{
box-shadow:none;
-webkit-appearance:none;
width:60px;
height:30px;
position:relative;
overflow:hidden;
}
input[type="checkbox"]:checked{
border:1px solid rgb(62,152,182);
}
input[type="checkbox"]::before{
content:'off';
position:absolute;
top:6px;
left:30px;
color:#fff;
text-shadow:0 0 4px rgba(
}
input[type="checkbox"]:checked::before{
left:10px;
content:'on';
}
input[type="checkbox"]::after{
position:absolute;
content:' ';
width:18px;
height:26px;
border:1px solid rgba(0,0,0,1);
background:#545454;
top:0px;
left:0px;
box-shadow:inset 0 2px 1px 1px rgba(20,20,20,0.5),inset 0 -2px 1px 1px rgba(20,20,20,0.5);
border-radius:4px;
}
input[type="checkbox"]:checked::after{
left:38px;
}
input[type="radio"]{
-webkit-appearance:none;
position:relative;
padding:0px;
width:20px;
height:20px;
border-radius:10px;
box-shadow:inset 0px 2px 0px 2px rgba(10,10,10,0.2),0 0 2px rgba(0,0,0,0.1),inset 0px -2px 0px 2px rgba(10,10,10,0.2),inset -2px 0px 0px 2px rgba(10,10,10,0.2),inset 2px 0px 0px 2px rgba(10,10,10,0.2);
}
input[type="radio"]{
-webkit-appearance:none;
padding:0px;
width:20px;
height:20px;
border-radius:10px;
box-shadow:inset 0px 0px 2px rgba(62,152,182,0);
}
input[type="radio"]:checked{
box-shadow:inset 0px 0px 2px rgba(62,152,182,0.8);
}
input[type="radio"]:checked::after{
content:' ';
border:6px solid rgba(62,152,182,0.8);
width:0px;
left:50%;
top:50%;
margin:-6px;
height:0px;
border-radius:12px;
position:absolute;
}
progress{
-webkit-appearance: none;
position: relative;
background:#1f1f1f;
border:1px solid rgba(0,0,0,1);
border-radius:4px;
}
progress::-webkit-progress-bar {
border-radius:4px;
background:#1f1f1f;
}
progress::-webkit-progress-value{
border-radius:4px;
position:relative;
background:rgb(62,152,182);
}
input[type=radio].button{
display:none;
}
.buttonset{
width:320px;
display:inline-block;
border-radius:4px;
border:1px solid #000;
}
.buttonset .button+label{
font-family: 'Source Sans Pro', sans-serif;
position:relative;
padding:10px 0px;
font-size:18px;
display:inline-block;
width:33.33%;
text-align:center;
color:#ededed;
font-weight:400;
float:left;
-webkit-transition:color 200ms;
background: rgb(32,32,32);
box-shadow:inset 0 2px 2px 0px rgba(10,10,10,0.6),inset 0 -2px 3px 0px rgba(10,10,10,0.6);
text-shadow:0px -1px 1px rgba(0,0,0,1);
}
.buttonset .button+label:hover{
color:rgb(62,152,182);
}
.buttonset .button+label:active,.button:checked+label{
background: rgb(22,22,22);
}
.buttonset .button:checked+label{
color:rgb(17,217,255);
}
.buttonset .button+label:first-of-type{
border-top-left-radius:4px;
border-bottom-left-radius:4px;
box-shadow:inset 0 2px 2px 0px rgba(10,10,10,0.6),inset 0 -2px 3px 0px rgba(10,10,10,0.6),inset 2px 0px 2px 0px rgba(10,10,10,0.6);
}
.buttonset .button+label:last-of-type{
border-top-right-radius:4px;
border-bottom-right-radius:4px;
box-shadow:inset 0 2px 2px 0px rgba(10,10,10,0.6),inset 0 -2px 3px 0px rgba(10,10,10,0.6),inset -2px 0px 2px 0px rgba(10,10,10,0.6);
}
input[type=email]:invalid+label::after{
content:'\26A0';
text-shadow:0px -1px 0px #000,-1px 0px 0px #000,0 0 8px rgba(250,0,0,1);
}
input[type=email]+label::after{
position:relative;
display:inline-block;
content:'\2713';
font-size:28px;
width:30px;
height:28px;
top:5px;
text-align:center;
border-radius:4px;
color:#fff;
text-shadow:0px -1px 0px #000,-1px 0px 0px #000,0 0 8px rgba(0,250,0,1);
}
.text{
display:inline-block;
width:320px;
}
.text textarea,.text button{
padding:0px;
float:left;
margin-left:10px;
margin-top:0px;
}
.text button{
width:0px;
padding:5px 0px;
}
.text textarea:valid + button{
width:auto;
padding:6px 10px;
}
.text textarea{
font-family:14px;
line-height:24px;
width:280px;
resize:none;
padding:2px 10px;
}
.text textarea:valid{
width:220px;
}
/* Lists . css */
ul{
background:#1f1f1f;
padding:0px 0px;
list-type:none;
border-radius:4px;
border:1px solid #000;
}
ul > li{
font-family:'Josefin Sans',sans-serif;
font-size:18px;
font-weight:700;
color:#ddd;
padding:10px;
border-bottom:1px solid #444;
display:block;
}
ul > li:last-of-type{
border-bottom:none;
}
ul > li:hover{
background:rgba(50,50,50,0.3);
}​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment