Tutorial sobre algunas opciones de CSS3.
Redondear esquinas sin usar imagenes.
Código:
-moz-border-radius: 0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
-webkit-border-radius: 0px 0px 0px 0px;
Bien explico:
La primera linea es para redondearlo en Firefox.
La segunda es para redondear en Opera.
La tercera redondea en Safari y Chrome.
Va en direccion de las agujas del reloj: superior izquierdo, superior derecho, inferior derecho, inferior izquierdo.
Internet Explorer tendra esta funcion apartir de la V9 (ya funciona en la beta).
NOTAS: Estos codigos deben ir entre los {} de los estilos css del div en el que redondearemos las esquinas.
Los div no tienen por que tener definidos bordes para ser redondeados.
Cambiar la opacidad <-- NUEVO!
Esto lo que hace es cambiar la opacidad de un elemento haciendolo mas o menos transparente.
El nivel de opacidad esta comprendido entre 0 y 1; siendo asi 0 el 0%, el 0.5 el 50% y el 1 el 100%.
Por ejemplo, para cambiar a la opacidad del 100% (valor por defecto) al 25% deberiamos poner en sus estilos lo siguiente:
Este codigo no funciona en los navegadores IE7 y anteriores pero eso lo podemos corregir poniendole un filtro para IE quedando el codigo de la siguiente forma:
Código:
opacity: 0.25;
filter: alpha(opacity=25);
Poner sombra y relieve interno a textos
Internet Explorer no soportara este codigo en su version 9 (seguramente tampoco en las proximas 
).
SOMBRA
Código:
text-shadow: 3px 3px 4px #000000;
Este codigo sombrea los textos.
Con esto le indicamos 3px de sombra a la derecha, 3px de sombra a la izquierda, 4px de desenfoque y color negro.
RELIEVE INTERNO
Código:
text-shadow: 0px 1px 0 #FFFFFF;
Ahora lo que hace es un relieve interno.
Le damos 0px de sombra por la derecha, 1px de sombra por abajo y 0px de desenfoque.
El color es blanco, teniendo en cuenta que el texto sea negro, para que se note el cambio. Podeis modificarlo.
NOTA: Acepta, en los dos casos, colores rgb y rgba (explicado despues).
Sombrear divs
Internet Explorer tendra esta funcion apartir de la V9 (ya funciona en la beta).
Código:
box-shadow: 3px 3px 4px rgba(0,0,0, 0.3);
-webkit-box-shadow: 3px 3px 4px rgba(0,0,0, 0.3);
-moz-box-shadow: 3px 3px 4px rgba(0,0,0, 0.3);
Primera linea para Opera, segunda para Safari y Chrome y la tercera para Firefox.
Definimos primero 3px para derecha, despues 3px para abajo, 4px de difusion y el color lo escribo en rgba (explicado en el siguiente punto), aunque tambien acepta rgb, hexadecimal... entre otros.
Colores RGBA (Red Green Blue Alpha)
Asta ahora CSS nos dejaba usar solo RGB. Teniendo en cuenta que: rgb(0, 0, 0) era negro y rgb(250, 250, 250) era blanco.
Ahora agregaron el valor A = Alpha (Transparencia).
Un RGBA tiene la siguiente forma:
Código:
rgba(0, 0, 0, 0.3);
Los primeros tres numeros indican rojo, verde y azul. El cuarto numero es el de la transparencia (teniendo en cuenta que 1 es 100% opaco y 0 100% transparente).
Definiendo un 0.3 le damos un 30% de su opacidad al color negro (definido en formato RGB).
Definir varios fondos a la vez
Internet Explorer, de momento, no acepta esto en su version 9 BETA.
Oooh siiiiiiiii! por fiiiiiiiin! el de tiempo que llevaba esperando esto :D
Ahora con CSS3 podemos definir varios fondos para un div, una tabla, un body... lo que te venga en gana ;D
Se puede hacer de una manera muy simple:
Código:
background: url(fondo1) center no-repeat,
url(fondo2) bottom left repeat-x,
url(fondo3) top right repeat-y;
Pueden agregar todos los background que les de la gana.
EJEMPLO
Guarden el siguiente codigo como un archivo html y abranlo desde algun navegador que no sea Internet Explorer, lo cual no es raro...
Encajar palabras largas en un box
Saben que, como pasa en CCTW, cuando escribes algun codigo o algo dentro de una caja con ancho limitado una palabra muy larga, esta se adapta a su tamano o, simplemente, se sale de la caja.
Microsoft creo el codigo hace tiempo para IE (si ya se que parece absurdo), aun cuando no era oficial. El codigo lo que hacia era que si una palabra es muy larga, cuando llegaba al final del box se hacia un enter automaticamente. Como era algo util lo han incluido en el CSS3 como oficial (esto parece un sueno).
Con esto puedo decir que este codigo FUNCIONA EN TODOS LOS NAVEGADORES (todos quiere decir todos, incluyendo IE).
Simplemente en el box donde quereis aplicar esta regla escriban:
Código:
word-wrap: break-word;
Para quitar esa norma simplemente sustituyan break-word por normal (son los dos valores posibles).
Ahora cualquier font ES COMPATIBLE!
Apartir de la V9 de IE (ya disponible en la BETA) IE no necesita un codigo especial ni una fuente .eot, cualquiera sirve (como en los demas).
Otra cosa util... O dios mio!!! Es compatible con IE desde la V4 
Aunque se complica un poco (na mas que un poquitin he) la cosa para IE, podemos usarlo perfectamente.
Asta ahora solo podiamos usar en la web unos pocos formatos de texto, que seguro (o casi) eran compatibles en TODOS los navegadores. Estos formatos eran muy feos y muchas veces, simplemente, teniamos que usar flash o imagenes. Ahora con CSS3 podemos usar cualquier formato a la perfeccion, sin preocuparnos de si el otro lo tiene o no lo tiene
Esto se hace definiendo el @font-face:
Código:
@font-face {
font-family: 'Nombre de font';
/* Para IE (NO ES NECESARIO APARTIR DE LA V9 BETA) */ src: url('fuentes/fuente.eot');
/* Para los demas */ src: local('Nombre de font'), url('fuentes/fuente.ttf u .otf') format('truetype u opentype');
}
En este caso, SIEMPRE, ANTES TIENE QUE IR DEFINIDO PARA IE.
Si os fijais IE solo acepta un formato .eot (apartir de la V9 BETA acepta todos los font), mientras que los demas aceptan .ttf (truetype) y .otf (opentype).
El codigo local('Nombre de font') comprueba si la fuente ya esta instalada, si no, la carga del server. Es obligatorio que este.
No creo que haga falta explicar nada mas... aparte de como convertir a .eot.
IMPORTANTE: Las fonts siempre deben ir alojadas en algun servidor desde donde puedan usarse directamente (no valen cosas como MU, RS, etc).
Convertir a .eot
Si es una fuente OpenType (.otf), primero debes convertirla a TrueType (.ttf). Puedes usar: http://fontforge.sourceforge.net
Despues, de .ttf la puedes pasar a .eot con esto: http://code.google.com/p/ttf2eot
*************************************************
Espero que useis todas las nuevas funciones que trae CSS3, ya que no son nada del otro mundo... Vamos, que son faciles. :)
Citar
Iniciado por gjulian
Marcadores