you are in: codestacker → codes [RSS] → tag: css3 [RSS]

transition to link highlighting Delicious Email

show/hide lines
   1  a {
   2          transition: all .2s linear; 
   3          -o-transition: all .2s linear;
   4          -moz-transition: all .2s linear;
   5          -webkit-transition: all .2s linear;
   6  }
created by leozera — 11 July 2011 — get a short url — tags: css3 — embed

[css3] link animation Delicious Email

show/hide lines
   1  a {     
   2  	color: #fff;
   3  	-webkit-transition: color .5s ease-in;  
   4  	-moz-transition: color .5s ease-in;  
   5  	-o-transition: color .5s ease-in;  
   6  	transition: color .5s ease-in;  
   7  }
   8  
   9  a:hover {
  10  	color: #ccc;     
  11  }
created by leozera — 05 February 2011 — get a short url — tags: css3 — embed

[css3] fade in page Delicious Email

show/hide lines
   1  @-webkit-keyframes fade-in {
   2  	0%   { opacity: 0; }
   3  	50%   { opacity: 0; }
   4  	100% { opacity: 1; }
   5  }
   6  
   7  body {
   8  	-webkit-animation-name: fade-in;
   9  	-webkit-animation-duration: 1.5s;
  10  }
created by leozera — 05 February 2011 — get a short url — tags: css3 — embed

image-free tag shape Delicious Email

preview: http://playground.deaxon.com/css/tag-shape/

show/hide lines
   1  <!doctype html>
   2  <title>Image-free tag shape</title>
   3  <style>
   4    ul {list-style:none}
   5    a {
   6      float:left;
   7      margin-right:8px;
   8      padding:2px 7px 3px 19px;
   9      font:700 .7em "lucida grande", arial, sans-serif;
  10      color:#3d5295;
  11      text-decoration:none;
  12      text-shadow:0 1px 0 rgba(255,255,255,.5);
  13      border-radius:0 .4em .4em 0;
  14      background:
  15        -moz-linear-gradient(
  16          -45deg,
  17          transparent 50%,
  18          #d0daf7 50%
  19        ),
  20        -moz-linear-gradient(
  21          45deg,
  22          transparent 50%,
  23          #d0daf7 50%
  24        ),
  25        -moz-linear-gradient(
  26          #d0daf7,
  27          #d0daf7
  28        );
  29      background:
  30        -webkit-gradient(
  31          linear,
  32          0 0, 100% 100%,
  33          color-stop(.5,transparent),
  34          color-stop(.5,#d0daf7)
  35        ),
  36        -webkit-gradient(
  37          linear,
  38          0 100%, 100% 0,
  39          color-stop(.5,transparent),
  40          color-stop(.5,#d0daf7)
  41        ),
  42        -webkit-gradient(
  43          linear,
  44          0 0, 100% 0,
  45          from(#d0daf7),
  46          to(#d0daf7)
  47        );
  48      background-repeat:no-repeat;
  49      background-position:0 0, 0 100%, 10px 0;
  50      background-size:10px 53%, 10px 50%, 100% 100%;
  51      -moz-padding-start:14px;
  52      -webkit-mask-image:-webkit-gradient(
  53        radial,
  54        11 50%, 2.9, 11 50%, 3,
  55        from(transparent),
  56        to(rgba(0,0,0,1))
  57      )}
  58  </style>
  59  <ul>
  60    <li><a href=.>icon</a>
  61    <li><a href=.>48px</a>
  62    <li><a href=.>free</a>
  63  </ul>
created by leozera — 27 January 2011 — get a short url — tags: css3 — embed

twitter-like input using css 3 Delicious Email

show/hide lines
   1  textarea {  
   2  	padding: 5px;  
   3  	font-size: 15px;  
   4  	text-shadow: 0px 1px 0px #fff;  
   5  	outline: none;  
   6  	-webkit-border-radius: 3px;  
   7  	-moz-border-radius: 3px;  
   8  	border-radius: 3px;  
   9  	border: 1px solid #ccc;  
  10  	-webkit-transition: .3s ease-in-out;  
  11  	-moz-transition: .3s ease-in-out;  
  12  }  
  13  
  14  textarea:focus {  
  15  	border: 1px solid #fafafa;  
  16  	-webkit-box-shadow: 0px 0px 6px #007eff;  
  17  	-moz-box-shadow: 0px 0px 5px #007eff;  
  18  	box-shadow: 0px 0px 5px #007eff;  
  19  }
created by leozera — 21 January 2011 — get a short url — tags: css css3 twitter — embed

google-like css 3 button Delicious Email

http://www.zurb.com/playground/google-buttons

show/hide lines
   1  button.g-button, a.g-button, input[type=submit].g-button {
   2  padding: 6px 10px;
   3  -webkit-border-radius: 2px 2px;
   4  border: solid 1px rgb(153, 153, 153);
   5  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
   6  color: #333;
   7  text-decoration: none;
   8  cursor: pointer;
   9  display: inline-block;
  10  text-align: center;
  11  text-shadow: 0px 1px 1px rgba(255,255,255,1);
  12  line-height: 1;
  13  }
created by leozera — 02 January 2011 — get a short url — tags: css3 google — embed