css3

CSS3 está empezando a usarse. CSS3  amplia las posibilidades de personalización de nuestra página web. Lástima que estos efectos solo puedan verse si usas Firefox o Safari. En el salto de la página te mostraremos algunos ejemplos:


Bordes redondeados

Para crear bordes redondeados con CSS3 sin usar imágenes, deberemos incluir este código CSS en nuestro documento:

.r-box {
	background-color: #666;
	color: #fff;
	line-height: 20px;
	width: 200px;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Demostración en directo (Solo los navegadores Firefox o Safari pueden verlo) :

Try doing this without images

Si usas otro navegador, aquí se muestra una imagen del resultado final:

borde-redondeado

Si solo deseas 2 bordes redondeados puedes probar a usar esto:

-webkit-border-bottom-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomleft: 10px;
-moz-border-radius-topright: 10px;

Borde degradado

Para tener los bordes degradados, deberemos incluir este código CSS:

#box {
	border: 8px solid #000;
	-moz-border-bottom-colors: #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-top-colors:    #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-left-colors:   #033 #039 #777 #888 #999 #aaa #bbb #ccc;
	-moz-border-right-colors:  #033 #039 #777 #888 #999 #aaa #bbb #ccc;
    -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
	width:400px;
}

Un ejemplo en directo (Solo Firefox):

Gradient borders are cool

Una imagen para los que no usen Firefox o Safari:

borde-degradado-css3

En todos los navegadores que usen Webkit (Safari, Google Chrome…) podemos realizar un degradado de esta forma:

background-image:

-webkit-gradient(

linear,

left top, right top,

color-stop(0, #66D2E1),

color-stop(0.4, #7FE386),

color-stop(0.6, #C9D74E),

color-stop(0.9, #9FEB70)

);

El código anterior se mostraría así (Un contenedor -div- con un degradado):

 

También podríamos realizar dos degradados, de esta forma:

background-image: 
          -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0, #00abeb),
            color-stop(0.5, #fff),
            color-stop(0.5, #66cc00),
            color-stop(1, #fff));

El código anterior da lugar a este contenedor (div) con dos degradados:

 

Sombra en el texto

Para crear un efecto de sombra en cualquier texto, deberemos añadir este código CSS a nuestro documento. La propiedad text-shadow funciona a partir de Safari 2.1:

<p style="text-shadow: 2px 2px 2px #000;">My Text</p>

Un ejemplo:

If you have Safari 3, Opera 9.5, Firefox 3.1a, Konqueror or iCab this paragraph should have a gray drop-shadow.

Una imagen del resultado final para los que no usen ni Safari, Firefox ni Opera:

sombra-texto-css

Trucos con la imagen

Otros trucos que se pueden hacer con la imagen para aplicarle efectos, que se explica muy bien en Webkit.org, se puede conseguir aplicando cualquiera de estos efectos CSS:

-webkit-mask (background)
-webkit-mask-attachment (background-attachment)
-webkit-mask-clip (background-clip)
-webkit-mask-origin (background-origin)
-webkit-mask-image (background-image)
-webkit-mask-repeat (background-repeat)
-webkit-mask-composite (background-composite)
-webkit-mask-box-image (border-image)

Como dijimos antes, se explica muy bien en Webkit.org.

Todos estos trucos que os hemos enseñado son muy útiles, guardalós cuando CSS3 reine en la web.

Vía | WebMonkey