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>