Experimentos con CSS3

Algna vez (espero que pronto) las nuevas opciones del CSS3 estarán disponibles en todos los navegadores. Por ahora, sólo son accesibles en Firefox, Opera, Safari y Chrome pero incluso allí, con ciertas limitaciones y propiedades diferenciadas. De todos modos, vale la pena mostar los experiementos que se van encontrando.

Estos fueron publicados en CSSTricks y son muy simples de aplicar aunque algunas de las propiedades utilizadas son un poco crípticas.

Creación de elipses:

¡ Hola !

<style>
.oval {
background-color: #1E90FF;
color: #000;
font-family: Comic Sans MS;
font-size: 40px;
height: 100px;
line-height: 100px;
margin: 0 auto;
text-align: center;
width: 200px;
-moz-border-radius: 100px / 50px;
-moz-transition: all 0.8s linear;
-webkit-border-radius: 100px 50px;
-webkit-transition: all 0.8s linear;
}
.oval:hover {
-webkit-transform: rotate(720deg);
}
</style>

<div class="oval">¡ Hola !</div>

NOTA: En navegadores como Chrome, el efecto hover utiliza la propiedad -webkit-transform y el óvalo girará.

Esfumados con sombras:

Fantasmagórico

<style>
.blur {
color: white;
font-family: Helvetica;
font-size: 80px;
font-weight: bold;
height: 100px;
letter-spacing: -5px;
text-align: center;
color: rgba(255,255,255,0.2);
text-shadow:0 0 2px rgba(255,255,255,0.2),0 0 4px rgba(255,255,255,0.2),0 0 6px rgba(255,255,255,0.2);
-webkit-transition: all 0.2s linear;
}
.blur:hover {
color: rgba(128, 128, 128, 0.2);
font-size: 70px;
letter-spacing: 5px;
opacity: 0.8;
}
</style>

<div class="blur">Fantasmagórico</div>

Otra vez, se usa la propiedad -webkit-transition para los navegadores basados en WebKit, text-shadow y los colores en formato rgba().

Efectos sobre enlaces:

Un enlace cualquiera Otro enlace cualquiera Un último enlace

<style>
.grower {
background-color:rgba(0, 195, 255, 0.3);
border: 1px solid #456;
display: block;
margin: 5px auto;
padding: 2px 5px;
text-align: center;
width: 200px;
-webkit-border-radius: 2px;
-moz-transition: all 0.1s ease-in-out;
-moz-border-radius: 2px;
-webkit-transition: all 0.1s ease-in-out;
}
.grower:hover {
background: #1E90FF;
border-color: #FFF;
-moz-border-radius: 10px;
-moz-box-shadow: 0 0 20px black;
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-webkit-box-shadow: 0 0 20px black;
-webkit-border-radius: 10px;
}
</style>

<a href="XXX" class="grower">Un enlace cualquiera</a> <a href="XXX" class="grower">Otro enlace cualquiera</a> <a href="XXX" class="grower">Un último enlace</a>