bueno amigos, en este tutorial voy a mostrarle 2 propiedades bastante buenas para realizar diseños de maquetacion web...
como siempre, les dejo un videotutorial realizado por mi, y abajo la explicacion textual de todo lo visto... cualquier duda comenten.
bueno, mas que nada vamos a comenzar por hacer lo normal a un div, le agregamos un tamaño, unos bordes, un color de fondo, asi lo podremos diferenciar de toda la pagina y podremos trabajar mejor con él.
una vez que tenemos eso vamos a comenzar a trabajar la propiedad border-radius que le agrega las esquinas redondeadas a un div.
border-radius: 10px;
lo que ahi estamos haciendo es definir el radio que va a tener, en este caso son de 10px.
como no todos los navegadores estan estables para propiedades en css3 vamos a tener que usar distintos prefijos para que lo reconoscan:
-moz- es para que lo reconosca el navegador Mozilla Firefox.
-webkit- es para que lo reconosca los navegadores Chrome y Safari
-o- es para que lo reconosca el navegador Opera.
entonces para las propiedades vamos a hacer esos prefijos, y luego la propiedad css3
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
recuerden que no necesariamente tiene que ser 10px, pueden agregarle diferentes tamaños para hacer el radio mas grande o chico, pero recuerden cambiarlo a todas las propiedades, porque sino en mozilla se va a ver de un tamaño, en chrome de otro tamaño y asi...
bueno, ya terminado eso, no hay mas que explicar salvo alguna duda que si me preguntan en comentarios respondo.
bueno, para las sombras de los div no es muy complicado, vamos a usar una propiedad llamada box-shadow y es muy facil de usar.
ahora vamos a practicar un poco con esto:
box-shadow: #000 0 0 50px;
pueden cambiarle el tamaño los colores e ir jugando con la propiedad.
tengan en cuenta los prefijos para los navegadores...
este tampoco es dificil. la propiedad que vamos a usar se llama text-shadow y viene de html4, osea que no necesita prefijos, ya que es algo viejista :B
text-shadow: X Y DEGRADE COLOR;
ahi usamos lo siguiente:
text-shadow: 2px 2px 2px white;
el primer detalle le indica la inclinacion horizontal que va a tener nuestra sombra, la podemos hacer con valores negativos asi la sombra va hacia la derecha y no a la izquierda.
el segundo detalle nos indica la inclinacion vertical que va a tener, como ya dije pueden ponerle valores negativos para que la sombra vaya hacia arriba.
el otro detalle es la difuminacion que va a tener la sombra.
y el ultimo es el color :B
como siempre, les dejo un videotutorial realizado por mi, y abajo la explicacion textual de todo lo visto... cualquier duda comenten.
bueno, mas que nada vamos a comenzar por hacer lo normal a un div, le agregamos un tamaño, unos bordes, un color de fondo, asi lo podremos diferenciar de toda la pagina y podremos trabajar mejor con él.
una vez que tenemos eso vamos a comenzar a trabajar la propiedad border-radius que le agrega las esquinas redondeadas a un div.
border-radius: 10px;
lo que ahi estamos haciendo es definir el radio que va a tener, en este caso son de 10px.
como no todos los navegadores estan estables para propiedades en css3 vamos a tener que usar distintos prefijos para que lo reconoscan:
-moz- es para que lo reconosca el navegador Mozilla Firefox.
-webkit- es para que lo reconosca los navegadores Chrome y Safari
-o- es para que lo reconosca el navegador Opera.
entonces para las propiedades vamos a hacer esos prefijos, y luego la propiedad css3
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
recuerden que no necesariamente tiene que ser 10px, pueden agregarle diferentes tamaños para hacer el radio mas grande o chico, pero recuerden cambiarlo a todas las propiedades, porque sino en mozilla se va a ver de un tamaño, en chrome de otro tamaño y asi...
bueno, ya terminado eso, no hay mas que explicar salvo alguna duda que si me preguntan en comentarios respondo.
SOMBRAS
bueno, para las sombras de los div no es muy complicado, vamos a usar una propiedad llamada box-shadow y es muy facil de usar.
box-shadow: COLOR 0 0 TAMAÑO;
ahora vamos a practicar un poco con esto:
box-shadow: #000 0 0 50px;
pueden cambiarle el tamaño los colores e ir jugando con la propiedad.
tengan en cuenta los prefijos para los navegadores...
SOMBRA EN TEXTO
este tampoco es dificil. la propiedad que vamos a usar se llama text-shadow y viene de html4, osea que no necesita prefijos, ya que es algo viejista :B
text-shadow: X Y DEGRADE COLOR;
ahi usamos lo siguiente:
text-shadow: 2px 2px 2px white;
el primer detalle le indica la inclinacion horizontal que va a tener nuestra sombra, la podemos hacer con valores negativos asi la sombra va hacia la derecha y no a la izquierda.
el segundo detalle nos indica la inclinacion vertical que va a tener, como ya dije pueden ponerle valores negativos para que la sombra vaya hacia arriba.
el otro detalle es la difuminacion que va a tener la sombra.
y el ultimo es el color :B