JMiur [E]

Que el CSS3 sólo este disponible en algunos navegadores es una limitación importante porque no cabe duda que es muy poderoso y en el momento en que se extienda su uso, el diseño de los sitios web cambiará radicalmente.

Este es un ejemplo de CSSplay que utiliza gradientes, colores en formato RGBA y bordes redondeados.

El resultado, solo es visible en Firefox, Safari y Google Chrome e incluso en esos navegadores, habrá algunas leves diferencias:

Esta imagen muestra la forma en que se vería en Firefox:


Y esta otra como se vería en Safari y Chrome:


Estas serían las definiciones de estilo del demo:
<style type="text/css">
.holder {
text-align: center;
background: #777;
padding: 30px 60px;
height: 140px;
width: 320px;
margin: 0 auto;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
}
.colwhite { background:white; }
.colyellow { background:yellow; }
.colbrown { background:brown; }
.colgreen { background:green; }
.colblue { background:blue; }
.colpink { background:pink; }
.colred { background:red; }
.colblack { background:black; }
.ball{
display: block;
width: 72px;
height: 72px;
float: left;
margin-right: 5px;
margin-bottom: 5px;
-webkit-border-radius: 36px;
-moz-border-radius: 36px;
border-radius: 36px;
background-image: -moz-radial-gradient(36px 10px 45deg, circle cover, rgba(255,255,255,1), rgba(255,255,255,0) 20%, rgba(255,255,255,0) 50%, rgba(0,0,0,1) 80%);
background-image: -webkit-gradient(radial,36 36, 72, 36 10, 0, from(rgba(0,0,0,1)), to(rgba(255,255,255,1)), color-stop(0.85, rgba(255,255,255,0)), color-stop(0.4, rgba(0,0,0,1)));
}
</style>
Y el HTML:
<div class="holder">
<div class="ball colwhite"></div>
<div class="ball colyellow"></div>
<div class="ball colbrown"></div>
<div class="ball colgreen"></div>
<div class="ball colblue"></div>
<div class="ball colpink"></div>
<div class="ball colred"></div>
<div class="ball colblack"></div>
</div>
Y el resultado sería este:

3 comentarios:

sephi  

maestro jmiur solo pasando a saludar. sabes aprovechando te mandare una consulta, saludos.

Responder
Anónimo  

Este post me pareció interesantisimo. Es imprecionante lo que se viene con CSS3 y las imágenes. JMiur, cambiando de tema, notaste la novedad cuando se hace Vista Previa? Me apareció una "etiqueta" a la izquierda y arriba del blog con letras grandes que dice "Vista Previa" :-|
Gracias por tan buenos temas, saludos.

Responder
JMiur  

Será intrereantísimo cuando todos los navegadores admitan estas cosas.

Sín eso de Vista Previa acabo de leerlo en el Blog de Gem@; no lo había notado :D

Responder

¿Quiere dejar un comentario?

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

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