 |
| MYDWEB |
La web cambió para siempre cuando unos años atrás nuevas aplicaciones desarrolladas sobre implementaciones Ajax mejoraron el diseño y la experiencia de los usuarios.
La versión 2.0, asignada a la web para describir un nuevo nivel de desarrollo,
representó un cambio no solo en la forma en que la información era transmitida
sino también en cómo los sitios web y nuevas aplicaciones eran diseñados y
construidos.
Los códigos
implementados en esta nueva generación de sitios web pronto se volvieron estándar.
La innovación se volvió tan importante para el éxito de cualquier proyecto en
Internet que programadores desarrollaron librerías completas para superar las
limitaciones y satisfacer los nuevos requerimientos de los diseñadores.
La
falta de soporte por parte de los navegadores era evidente, pero la organización
responsable de los estándares web no tomó las tendencias muy seriamente e
intentó seguir su propio camino. Afortunadamente, algunas mentes brillantes siguieron
desarrollando nuevos estándares en paralelo y pronto HTML5 nació. Luego del
retorno de la calma (y algunos acuerdos de por medio), la integración entre
HTML, CSS y JavaScript bajo la tutela de HTML5 fue como el caballero bravo y victorioso
que dirige las tropas hacia el palacio enemigo.
A pesar
de la reciente agitación, esta batalla comenzó mucho tiempo atrás, con la
primera especificación de la tercera versión de CSS. Cuando finalmente,
alrededor del año 2005, esta tecnología fue oficialmente considerada estándar,
CSS estaba listo para proveer las funciones requeridas por desarrolladores
(aquellas que programadores habían creado desde años atrás usando códigos JavaScript
complicados de implementar y no siempre compatibles).
En
este capítulo vamos a estudiar las contribuciones hechas por CSS3 a HTML5 y
todas las propiedades que simplifican la vida de diseñadores y programadores.
Ahora
nos volvemos locos, debemos copiarnos una la siguiente plantilla para poder
aplicar las nuevas etiquetas del CSS3:
NOTA: Pega este código en tu editor de texto y
guárdalo como plantilla.html
<!DOCTYPE
html>
<html
lang="es">
<head>
<meta
charset=”utf-8”>
<title>Nuevos Estilos
CSS3</title>
<link rel="stylesheet"
href="nuevocss3.css">
</head>
<body>
<header id="principal">
<span id="titulo">Estilos
CSS Web 2.0</span>
</header>
</body>
</html>
Luego
crea otro archivo y copia este código css,
y guárdalo con el nombre de nuevocss3.css.
Recuerda
que los dos archivos tienen que estar en la misma carpeta para que funciones.
body {
text-align:
center;
}
#principal
{
display:
block;
width:
500px;
margin:
50px auto;
padding:
15px;
text-align:
center;
border:
1px solid #999999;
background:
#DDDDDD;
}
#titulo {
font: bold
36px verdana, sans-serif;
}
Abre tu archivo .hmtl en el navegador para que tengas
la primera vista de la plantilla que modificaremos, como ya te diste cuenta no
tiene nada de especial xD…su propósito es solo crear una caja en la que podamos
mostrar nuestros siguientes ejemplos.
 |
| @madesweb |
Una de
las cosas que notará sobre esta caja cuando sea mostrada en pantalla es que sus
esquinas son rectas. Esto no es algo que nos agrade, ¿verdad? Puede ser un
factor psicológico o no, lo cierto es que a casi nadie en este negocio le agradan
las esquinas rectas. Por lo tanto, lo primero que haremos será cambiar este
aspecto.
Border-radius
Por
muchos años diseñadores han sufrido intentando lograr el efecto de esquinas
redondeadas en las cajas de sus páginas web. El proceso era casi siempre
frustrante y extenuante. Todos lo padecieron alguna vez. Si mira cualquier
presentación en video de las nuevas características incorporadas en HTML5, cada
vez que alguien habla sobre las propiedades de CSS3 que hacen posible generar fácilmente
esquinas redondeadas, la audiencia enloquece. Esquinas redondeadas eran esa
clase de cosas que nos hacían pensar: “debería ser fácil hacerlo”. Sin embargo
nunca lo fue.
El código
seria:
#border-radius{
display:
block;
width:
500px;
margin:
50px auto;
padding:
15px;
text-align:
center;
border:
1px solid #999999;
background:
#DDDDDD;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
}
El –moz
y webkit se usan para que el Border-radius sean soportados en los exploradores
de Chrome y Firefox, pero eso fue solo al inicio, en estos días ya todos los exploradores
soportaran estos estilos.
Si
todas las esquinas tienen la misma curvatura podemos utilizar un solo valor.
Sin embargo, como ocurre con las propiedades margin
y padding,
podemos también declarar un valor diferente por cada una:
-moz-border-radius: 20px 10px 30px 50px;
-webkit-border-radius: 20px 10px 30px 50px;
border-radius: 20px 5px 10px 100px;
Sabiendo esto las posibilidades
son muchas ya que podremos manipular una caja a nuestro antojo, y poder
utilizarlo con otros fines que no sean solo redondear contornos, les muestro una
figura creada con este método.
 |
| @madesweb |
Acá le colocamos los siguientes
datos: border-radius: 20px 5px 10px 100px; y además le subimos el borde: 5px;
Como
lo podrán notar los datos 100px y 20px corresponden a las esquinas de la izquieda y los valores de 5px y 10px a las esquinas del lado derecho. Con esto las posibilidades son infinitas.
Otra
forma de escribir estos datos seria de la siguiente manera:
-moz-border-radius: 20px / 10px;
-webkit-border-radius: 20px / 10px;
border-radius: 15px / 15px;
Los valores
a la izquierda de la barra representarán el radio horizontal mientras que los
valores a la derecha representan el radio vertical. La combinación de estos valores
genera una elipsis.
Box-shadow
Ahora que finalmente
contamos con la posibilidad de generar bonitas esquinas para nuestras cajas
podemos arriesgarnos con algo más. Otro muy buen efecto, que había sido
extremadamente complicado de lograr hasta este momento, es sombras. Por años
diseñadores han combinado imágenes, elementos y algunas propiedades CSS para
generar sombras. Gracias a CSS3 y a la nueva propiedad box-shadow podremos aplicar sombras a
nuestras cajas con solo una simple línea de código:
CODIGO:
#box-shadowl
{
display:
block;
width:
500px;
margin:
50px auto;
padding:
15px;
text-align:
center;
border:
1px solid #999999;
background:
#DDDDDD;
-moz-box-shadow: rgb(150,150,150) 5px 5px;
-webkit-box-shadow: rgb(150,150,150) 5px 5px;
box-shadow: rgb(150,150,150 20px 20px;
}
El
resultado sería el siguiente:
 |
| @madesweb |
Los valores: rgb(150,150,150) definen el color de la sombra en el
sistema RGB como ya sabemos la combinación de los colores ROJO, VERDE y AZUL
generan la gama de todos los colores. Y los valores: 20px 20px; establecen la
distancia con respecto a la caja.
Exageramos estos
valores para poder notar una diferencia, pero con una configuración de 5px, se
obtiene un resultado muy notable y aceptable.
Text-shadow
Ahora
que conoce todo acerca de sombras probablemente estará pensando en generar una
para cada elemento de su documento. La propiedad box-shadow fue diseñada especialmente
para ser aplicada en cajas. Si intenta aplicar este efecto a un elemento <span>, por ejemplo, la caja
invisible ocupada por este elemento en la pantalla tendrá una sombra, pero no
el contenido del elemento. Para crear sombras para figuras irregulares como
textos, existe una propiedad especial llamada text-shadow.
CODIGO:
#box-shadow
{
font:
bold 36px verdana, sans-serif;
text-shadow:
rgb(250,150,0) 3px 3px 5px;
}
El
resultado sería el siguiente:
Para los
valores presente, también se configuran el valor y la posición.
Gradiente lineal
Los
gradientes son uno de los efectos más atractivos entre aquellos incorporados en
CSS3. Este efecto era prácticamente imposible de implementar usando técnicas
anteriores pero ahora es realmente fácil de hacer usando CSS. Una propiedad background con algunos pocos parámetros
es suficiente para convertir su documento en una página web con aspecto profesional:
CODIGO:
#gradiente-lineal
{
background: -webkit-linear-gradient (top, #FFFFFF,
#006699);
background: -moz-linear-gradient (top, #FFFFFF, #006699);
}
El
resultado sería el siguiente:
 |
| @madesweb |
Para este
ejemplo los varales establecen el color y la posición de donde inicia y donde
termina y que con que color en específico. En este caso se especifican en hexadecimal.
Gradiente radial
La sintaxis estándar
para los gradientes radiales solo difiere en unos pocos aspectos con respecto a
la anterior. Debemos usar la función radial-gradient()
y un nuevo atributo para la forma:
CODIGO:
#gradiente-radial {
background:
-moz-radial-gradient(center, circle, #FFFFFF 0%, #DF3A01 200%);
background:
-webkit-radial-gradient(center, circle, #FFFFFF 0%, #DF3A01 200%);
}
El resultado sería el
siguiente:
 |
| MYDWEB |
Outline
La propiedad outline es una vieja propiedad CSS
que ha sido expandida en CSS3 para incluir un valor de desplazamiento. Esta
propiedad era usada para crear un segundo borde, y ahora ese borde puede ser
mostrado alejado del borde real del elemento.
CODIGO:
#OUTLINE {
outline:
2px dashed #000099;
outline-offset:
15px;
}
Resultado sería:
 |
| @madesweb |
Transform:
scale
Números
enteros y decimales pueden ser declarados para la escala. Esta escala es
calculada por medio de una matriz. Los valores entre 0 y 1 reducirán el
elemento, un valor de 1 mantendrá las proporciones originales y valores mayores
que 1 aumentarán las dimensiones del elemento de manera incremental.
CODIGO:
#{
-moz-transform:
scale(1);
-webkit-transform:
scale(1);
}
Esta opción es para
poner una escala a la caja que contiene el texto, no puse imagen de ejemplo
pues ocupa casi toda la pantalla con un valor de 2 y pues con un valor de 1
pues luce exactamente igual a los demás ejemplos.
Prueben en sus
computadoras para ver el efecto que tiene sobre los elementos, pueden probar
agregando un segundo para metro con números negativos para poder girar el
elemento.
#{
-moz-transform: scale(1,
-1);
-webkit-transform:
scale(1, -1);
}
Transform: rotate
La
función rotate rota
el elemento en la dirección de las agujas de un reloj. El valor debe ser
especificado en grados usando la unidad “deg”:
Codigo:
#{
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
}
El resultado sería:
 |
| MYDWEB |
TRANSFORMACIONES DINÁMICAS
Lo que hemos aprendido
hasta el momento en este capítulo cambiará la forma de la web, pero la mantendrá
tan estática como siempre. Sin embargo, podemos aprovecharnos de la combinación
de transformaciones y pseudo-clases para convertir nuestra página en una
aplicación dinámica:
Dejo el código completo:
#dinamic {
display: block;
width: 500px;
margin: 50px auto;
padding: 15px;
text-align: center;
border: 1px solid
#999999;
background: #ACFA58;
-moz-transition:
-moz-transform 1s ease-in-out 0.25s;
-webkit-transition:
-webkit-transform 1s ease-in-out 0.25s;
}
#dinamic:hover{
-moz-transform:
rotate(10deg);
-webkit-transform: rotate(10deg);
}
El resultado lo podrán ver
en sus navegadores.
Están son las nuevas herramientas que agrego css3, hace algunos años, cabe recalcar que esto es a nivel de introducción a css3, a la fecha hay muchas mas tecnologías para hacer lo que se presenta en este articulo, pero una de las mejores maneras de aprender es saber como se hace, paso a paso para poder generar estos mismos efectos de una forma automática.
Recuerden que pueden compartir con sus amigos, en sus redes sociales si les a parecido interesante.
Para finalizar les dejo el link donde podrán descargar el .rar con los archivos con los códigos para que los puedan abrir en su computador.
No hay comentarios:
Publicar un comentario