JMiur [E]

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>

15 comentarios:

Graciela  

Guau pedimos unión de todos los navegadores, me encantan los efectos, aunque la burbuja no gire está preciosa! :P

Responder
GARABATO  

El 2do y el 3ro funcionan perfecto ¡Ya me los compré y ya me los llevo!!

GRACIAS JMIUR. Alegraste mi día :)

Responder
JMiur  

Son cosas divertidas para jugar un rato :D

Responder
MamaNunes  

I seguimos jugando... :D
besos maestro!

Responder
Delfin  

Hola
Pues en safari van de maravilla... y la elipse gira como loca ;)
¡Gracias!
Delfin

Responder
JMiur  

Juguemos, MamaNunes :D

Delfín, sí, lo mismo hace en Chrome :)

Responder
José GDF  

Me gusta el último efecto para un menú... Lástima que no lo "entiendan" aún muchos de los actuales navegadores... :(

Responder
Garabato  

He vuelto con mis preguntontas:

A ver si entendí… el experimento 2 y 3, como te dije, funcionó perfecto. Los usé en 2 blogs diferentes y son igual de bellos, aún con Explorer que insiste en remarcar ERROR DE PÁGINA c/ vez que entro al sitio… la pregunta es: ¿es tan grave como para preocuparme?

Fumando espero….

Responder
JMiur  

Eso de error de página puede ser cualquier cosa; normalmente, se trata de un error en acún script. El CSS suele ser inocuo. Habría que ver qué dice, si hacés doble click en el iconito de error, debería decirte dónde qué script lo produce.

Responder
GARABATO  

Hola JMiur, el mensaje de error me sale en más de 10 blogs que actualicé estos últimos días… el detalle es el mismo en todos, te lo paso por aquí si me lo permites:

Detalles de error de página web

Agente de usuario: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; msn OptimizedIE8;ESES)
Fecha: Mon, 8 Mar 2010 04:24:15 UTC

Mensaje: Acceso denegado.

Línea: 197
Carácter: 78
Código: 0
URI: http://www.blogger.com/static/v1/widgets/3604811677-widgets.js

Responder
Garabato  

Volví, acabo de probar 75 blogs diferentes y con Explorer marcan el mismo error, incluso los que no actualizo desde hace 1 año, pero con Mozila firefox no aparece nada. ¿qué está pasando?

Responder
JMiur  

Ese error sale en casi todos los blogs de Blogger. Es un script interno de ellos y nada puede hacerse al respecto. El error no es de IE, también ocurre en Firefox aunque no se vea ningún mensaje.

Sólo resta esperar que alguien lo corrija ... en lo posible sentados :-)

Responder
Boris Vasquez  

Muy bueno Jmiur excelente creo que el css3 sera muy efectivo en los nuevos navegadores, ademas creo que cada dia se adhieren nuevos estilos....... Muy bueno te felicito por aportar estos buenos topics que sin duda son muy esenciales para los diseñadores

Responder
leandro sanchez  

encontre un bug en la imagen que dice "hola". si arrimas el mouse despacio, se buggea. Es solo un detalle nada mas. No critico ni nada por el estilo. ;)

JMiur  

No veo nada raro pero, puede ser cualquier cosa. Esta entrada es muy vieja y en su momento, sólo funcionaba plenamente en Chrome.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR