El siguiente ejemplo nos vuelve a mostrar las posibilidades que nos ofrecen las transiciones
de CSS3.

HTML:

 <ul>
        <li>Botón 1</li>
        <li>Botón 2</li>
        <li>Botón 3</li>
        <li>Botón 4</li>
        <li>Botón 5</li>
</ul>

CSS:

ul {
  display: table;
  width: 400px;
}
li {
  display: table-cell;
  width: 20%;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
}
ul:hover li {
  width: 15%;
}
li:hover {
  width: 40% !important;
  opacity: 0.7;
}
ul li:nth-of-type(1) { background: #FF4C4C; }
ul li:nth-of-type(2) { background: #FFBF49; }
ul li:nth-of-type(3) { background: #444444; }
ul li:nth-of-type(4) { background: #6FDC6F; }
ul li:nth-of-type(5) { background: #3AADFE; }

Ver ejemplo en funcionamiento » »

El siguiente ejemplo muestra cómo crear un tooltip animado con CSS3. Para la animación del tooltip se hace uso de las transiciones CSS, que ya han sido tratadas en este blog en el anterior post "CSS3 Transitions: Realizar transiciones con CSS".

HTML:

<a class="tooltip" href="#">webintenta <span>blog de desarrollo web</span></a>

CSS:

a.tooltip {
    position:relative;    
    color:#cf2c2c;
    text-decoration:none;
}

a.tooltip span {
    padding:5px 10px;
    background:#555;
    border:1px solid #555;
    min-width:140px;
    position:absolute;
    top:5px;
    left:5px;
    color:#FFF;
    text-align:center;
    opacity:0;
    -moz-transition: opacity 1s ease,top 1s ease;
    -webkit-transition: opacity 1s ease,top 1s ease;
    -o-transition:opacity 1s ease,top 1s ease;
    transition: opacity 1s ease,top 1s ease;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:13px;
    font-weight:bold;

}

a.tooltip span:before {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #555;
    z-index:5;
    content: " ";
    position:absolute;
    top:-7px;
    left:11%;
}

a.tooltip span:after {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #555;
    display:block;
    content: " ";
    position:absolute;
    top:-8px;
    left:11%;
}

a.tooltip:hover span {
    opacity:1;
    top:25px;
}

Ver ejemplo en funcionamiento » »

Utilizando las transiciones en CSS podemos crear una animación, tanto en "checkboxes" como "radio buttons", que se ejecute cuando estos se seleccionen. En el siguiente ejemplo se crea una animación para los elementos input que tienen la clase sel.

input.sel{
	height: 20px;
	-webkit-transition: width 1s ease;
	-moz-transition: width 1s ease;
	-o-transition: width 1s ease;
	-ms-transition: width 1s ease;
	transition: width 1s ease;
	vertical-align:middle;
}

input.sel:checked {
	width: 30px;
}

Ver ejemplo en funcionamiento » »

CSS3 nos permite rotar letras, pero es bastante complicado organizar cada letra a lo largo de un trazado curvo. Arctext.js es un plugin de jQuery que nos permite hacer exactamente eso de un modo sencillo. Basado en Lettering.js, calcula la rotación correcta de cada letra y distribuye los caracteresm de un modo equidistante en el arco.

Arctext.js » »

Interesante aplicación de CSS3 para, mediante el uso de sucesivas sombras de texto, obtener un texto en 3D.

h1 {
  text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}

3D Text » »