miércoles, 17 de octubre de 2012

Algunas Características de CSS3 (parte 2)






Comenzaremos la segunda parte de este tuto mostrando caracteristicas de CSS3, con los bordes redondeados, algo que con CSS3 es muy sencillo de hacer, les mostrare una caricatura hecha solo con div's rectangulares y bordes redondeados, para que vean que es muy util.


#face{
border-radius: 50px;
position:relative;
width:310px;
height:300px;
background:#07beea;
border:#333 2px solid;
margin: auto;
}
#base_white{
border-radius: 80px;
position:absolute;
border:#000 2px solid;
width:264px;
height:196px;
background:#FFF;
z-index:1;
top:85px;
left:22px;
}
div.black_eye{
border-radius: 50px;
position:absolute;
width:15px;
height:15px;
background:#333;
z-index:21;
}
div.eye_left{
border-radius: 50px;
top:45px;
left:82px;
}
div.eye_right{
border-radius: 50px;
top:45px;
left:156px;
}
#nose{
border-radius: 50px;
width:32px;
height:32px;
border:2px solid #000;
background:#c93e00;
position:absolute;
top:117px;
left:139px;
z-index:30;
}
#mouth{
border-radius: 100px;
width:240px;
height:500px;
border-bottom:3px solid #333;
position:absolute;
top:-263px;
left:36px;
z-index:10;
}


Como podemos observar, en cada uno de los div's utilizamos border-radius, con esto le daremos un borde redondeado a cada div, con tantos pixeles como queramos. Ahora vamos a ver que podemos lograr con border-radius, teniendo en cuenta que todos son div's rectangulares.


























 


Tenemos tambien la libertad de colocar backgrounds con degradados, de los cuales tenemos dos tipos, degradados lineales y degradados radiales

Degradado Lineal:

 #ejemplo-degradado-lineal {
border: 0;
height: 100px;
background: -moz-linear-gradient(90deg, #00abeb, #fff, #66cc00, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00));
}




Degradado Radial:

#ejemplo-degradado-radial {
border: 0;
height: 100px;
background: -moz-radial-gradient(430px 50px, circle cover, red 0, #000 200px);
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000));
}




Podemos colocar sombras a los textos,
div's... muy
interesante si sabes jugar con esto, ya que puedes crear textos y contenedores que parezcan en 3D, haremos un ejemplo con un div y el texto dentro de el.


#ejemplo-sombra {
font-size: 75px;
margin: 10px 10px 30px 10px;
padding: 20px;
text-align: center;
text-shadow: rgba(64, 64, 64, 0.5)9px 9px 8px;
box-shadow: rgba(0, 0, 128, 0.25) 9px 9px 9px;
}



Sombras




Vamos a usar lo que hemos visto para crear un logo 2.0 con borde redondeado, fondo degradado, sombra y un reflejo.

#logo-contenedor {
font-size: 66px;
color: #226;
padding: 20px 0 50px;
margin-bottom: 50px;
text-align: center;

}
#logo {
border-radius: 50px;
text-shadow: rgba(0, 0, 0, 0.5) 0 9px 9px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(200, 200, 240, 1)), to(rgba(255, 255, 255, 1)));
-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.28)));
}


algo con muy pocas lineas y que jugando con todas estas caracteristicas, y añadiendo mas podriamos lograr algo interesante.



Tenemos algunas mejoras en los background's, podemos hacer un dimensionamiento de una imagen de fondo con background-size, podemos usarlo de 4 maneras: auto, contain, cover y con porcentaje (10%, 100%). veremos los 4 ejemplos e intenta redimensionar el textarea para que visualices el funcionamiento de cada una.


 #textarea-auto {
background: white url(http://www.google.com/intl/en_ALL/images/logo.gif) center center no-repeat;
background-size: auto;
width: 200px;
height: 100px;
outline: 0;
}
#textarea-contain {
background: white url(http://www.google.com/intl/en_ALL/images/logo.gif) center center no-repeat;
background-size: contain;
width: 200px;
height: 100px;
outline: 0;
}
#textarea-cover {
background: white url(http://www.google.com/intl/en_ALL/images/logo.gif) center center no-repeat;
background-size: cover;
width: 200px;
height: 100px;
outline: 0;
}
#textarea-porcentage {
background: white url(http://www.google.com/intl/en_ALL/images/logo.gif) center center no-repeat;
background-size: 70%;
width: 200px;
height: 100px;
outline: 0;
}


4 Resultados:








otra característica interesante es que podemos tener multiples backgrounds simplemente colocando una coma y el siguiente background, de esta manera:

div {
background: url(src/zippy-plus.png) 10px center no-repeat,
url(src/gray_lines_bg.png) 0 center repeat-x;
}


Modelos de caja flexible ¿lo habias utilizado? es muy sencillo y hace que tus cajas se ajusten horizontal o verticalmente al contenedor en el que estan dependiendo que que orientacion indiques en el css, mostraremos 2 ejemplos, con el mismo HTML y CSS pero cambiando solo horizontal-vertical y veras a lo que me refiero.


#ejemplo-orientacion-horizontal {
height: 260px;
display: -webkit-box; -webkit-box-orient: horizontal;
display: -moz-box; -moz-box-orient: horizontal;
}
#ejemplo-orientacion-horizontal div:nth-child(1) {
background: white; padding: 10px; -webkit-box-flex: 1;
-moz-box-flex: 1; text-align: center;
}
#ejemplo-orientacion-horizontal div:nth-child(2) {
background: #ddd; padding: 10px; -webkit-box-flex: 1;
-moz-box-flex: 1; text-align: center;
}
#ejemplo-orientacion-horizontal div:nth-child(3) {
background: white; padding: 10px; -webkit-box-flex: 3;
-moz-box-flex: 3; text-align: center;
}
#ejemplo-orientacion-vertical {
height: 260px;
display: -webkit-box; -webkit-box-orient: vertical;
display: -moz-box; -moz-box-orient: vertical;
}
#ejemplo-orientacion-vertical div:nth-child(1) {
background: white; padding: 10px; -webkit-box-flex: 1;
-moz-box-flex: 1; text-align: center;
}
#ejemplo-orientacion-vertical div:nth-child(2) {
background: #ddd; padding: 10px; -webkit-box-flex: 1;
-moz-box-flex: 1; text-align: center;
}
#ejemplo-orientacion-vertical div:nth-child(3) {
background: white; padding: 10px; -webkit-box-flex: 3;
-moz-box-flex: 3; text-align: center;
}


y tenemos estos resultados solo cambiando la orientacion en el css.



Caja 1


Caja 2


Caja 3



 




Caja 1


Caja 2


Caja 3



Y con esto finalizamos la segunda parte de es tuto, queria hablarles de animaciones, transiciones y transformaciones, pero lo dejaremos para la 3ra parte y asi dar mas detalles con respecto a estas características. Espero les haya gustado.!!

Nota: algunas de las características no son soportadas por todos los navegadores, y deberas usar fallback's si quieres que funcione en los demas.

2 comentarios:

  1. Muy interesante la información me gusta el reflejo del logo 2.0 :D

    ResponderEliminar
  2. Genial que te haya gustado.!! pero solo funciona con webkit por los momentos.! ^^

    ResponderEliminar