you are here: codestackercodes [RSS] → tag css3 [RSS]

transition to link highlighting

a {
        transition: all .2s linear; 
        -o-transition: all .2s linear;
        -moz-transition: all .2s linear;
        -webkit-transition: all .2s linear;
}

[css3] link animation

a {     
	color: #fff;
	-webkit-transition: color .5s ease-in;  
	-moz-transition: color .5s ease-in;  
	-o-transition: color .5s ease-in;  
	transition: color .5s ease-in;  
}

a:hover {
	color: #ccc;     
}

[css3] fade in page

@-webkit-keyframes fade-in {
	0%   { opacity: 0; }
	50%   { opacity: 0; }
	100% { opacity: 1; }
}

body {
	-webkit-animation-name: fade-in;
	-webkit-animation-duration: 1.5s;
}

image-free tag shape

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

<!doctype html>
<title>Image-free tag shape</title>
<style>
  ul {list-style:none}
  a {
    float:left;
    margin-right:8px;
    padding:2px 7px 3px 19px;
    font:700 .7em "lucida grande", arial, sans-serif;
    color:#3d5295;
    text-decoration:none;
    text-shadow:0 1px 0 rgba(255,255,255,.5);
    border-radius:0 .4em .4em 0;
    background:
      -moz-linear-gradient(
        -45deg,
        transparent 50%,
        #d0daf7 50%
      ),
      -moz-linear-gradient(
        45deg,
        transparent 50%,
        #d0daf7 50%
      ),
      -moz-linear-gradient(
        #d0daf7,
        #d0daf7
      );
    background:
      -webkit-gradient(
        linear,
        0 0, 100% 100%,
        color-stop(.5,transparent),
        color-stop(.5,#d0daf7)
      ),
      -webkit-gradient(
        linear,
        0 100%, 100% 0,
        color-stop(.5,transparent),
        color-stop(.5,#d0daf7)
      ),
      -webkit-gradient(
        linear,
        0 0, 100% 0,
        from(#d0daf7),
        to(#d0daf7)
      );
    background-repeat:no-repeat;
    background-position:0 0, 0 100%, 10px 0;
    background-size:10px 53%, 10px 50%, 100% 100%;
    -moz-padding-start:14px;
    -webkit-mask-image:-webkit-gradient(
      radial,
      11 50%, 2.9, 11 50%, 3,
      from(transparent),
      to(rgba(0,0,0,1))
    )}
</style>
<ul>
  <li><a href=.>icon</a>
  <li><a href=.>48px</a>
  <li><a href=.>free</a>
</ul>

twitter-like input using css 3

textarea {  
	padding: 5px;  
	font-size: 15px;  
	text-shadow: 0px 1px 0px #fff;  
	outline: none;  
	-webkit-border-radius: 3px;  
	-moz-border-radius: 3px;  
	border-radius: 3px;  
	border: 1px solid #ccc;  
	-webkit-transition: .3s ease-in-out;  
	-moz-transition: .3s ease-in-out;  
}  

textarea:focus {  
	border: 1px solid #fafafa;  
	-webkit-box-shadow: 0px 0px 6px #007eff;  
	-moz-box-shadow: 0px 0px 5px #007eff;  
	box-shadow: 0px 0px 5px #007eff;  
}

google-like css 3 button

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

button.g-button, a.g-button, input[type=submit].g-button {
padding: 6px 10px;
-webkit-border-radius: 2px 2px;
border: solid 1px rgb(153, 153, 153);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255, 255, 255)), to(rgb(221, 221, 221)));
color: #333;
text-decoration: none;
cursor: pointer;
display: inline-block;
text-align: center;
text-shadow: 0px 1px 1px rgba(255,255,255,1);
line-height: 1;
}
Displaying all 6 Code