CSS; El futuro del diseño web

El tiempo de las hojas de estilo en cascada(css),definitivamente ha llegado, y es mejor no tener que esperar la completa e inminente estandarizacion para ponernos al dia en cuanto a las reglas nuevas y el soporte brindado por los diferentes navegadores.Es cierto que la W3C aun estudia las proximas reglas que seran introducidas en el estandar a aprobar,y que esto todavia puede tardar un poco, pero no es menos cierto que la mayoria de los navegadores estan trazando la pauta a seguir y nos dan una clara señal de lo que va a ocurrir,esto lo hacen dando soporte a casi todas las reglas CSS3,es por eso que debemos mantenernos actualizados y no correr el riesgo de quedarnos sumidos en lo obsoleto y desusado; Es claro que CSS es el futuro del diseño web.

A continuacion les muestro algunas reglas CSS,y tambien como aplicarlas en nuestras paginas,espero les saquen el mayor provecho.

Menu Desplegable

El CSS resuelve el problema del espacio, a la hora de crear nuestra barra de navegacion,mediante un util y practico menu desplegable,creado unicamente a base de HTML y CSS.

Border-Radius

Redondear las esquinas ya no es un problema con css3,la regla"Border-Radius" soportada incluso por internet explorer 9 ha llegado para solucionar definitivamente la inquietud de las esquinas puntiagudas,dando un delicado borde curvo con el radio deseado y a la esquina que deseemos.

Box-Shadow

Como ya se ha hecho costumbre CSS3 viene en nuestro auxilio para ayudarnos con nuestras sombras,sin tener que recurrir a las capas superpuestas que tantos esfuerzos y recursos nos costaban.Solo un pequeño codigo css y obtendremos una sombra para nuestra imagen,div o tabla del color,direccion y dimension que deseemos.

Text-Shadow

Es una regla css muy parecida a "Box-Shadow",pero con la particularidad de que es aplicada al texto.Esta propiedad en conjunto con "Box-Shadow" dan a la pagina una delicadeza y estetica envidiables,siempre que no se abuse de su uso.

Gradient o degradado

Es una regla CSS muy popularizada,y consiste en crear una mezcla de dos o mas colores en nuestro divs,menus,tablas,etc.dando un estilo estetico y distinguido a nuestra pagina, a la vez que realza el contenido.

Galeria de imagenes en CSS

Nueva vez Css viene en nuestro auxilio , en esta ocasion facilitando el uso de imagenes en nuestro sitio web mediante una compacta galeria , tan versatil que la podemos utilizar incluso como parte de nuestro menu. Ademas del reducido espacio que ocupa , esta galeria tiene la particularidad de poder albergar practicamente la cantidad de imagenes que deseemos lo que la convierte en la opcion adecuada para insertar en nuestro site. Para ver el ejemplo en funcionamiento pulse AQUI

El codigo base para nuestra galeria compacta de imagenes , es el usado en nuestro ya estudiado menu desplegable con css , por lo tanto si lo habian aprendido les sera mucho mas facil comprender la logica creativa de esta , pero si todavia tenian alguna duda al respecto espero que con este codigo les sea mucho mas facil saciarla.Tambien los invito a pasar por mi canal de youtube "ESPECTRO" donde les explico paso a paso el proceso de creacion de la misma.

El codigo Css es el siguiente

 <style type="text/css">
 /*aqui pueden colocar el margin conveniente 
 para ustedes.  Espectro*/
 #galeria{margin-left:300px;margin-top:100px; }

 /*Eliminamos los puntos de los li. Espectro*/
 #galeria li{list-style:none;float:left;}

 /*Damos estilo al primer li y por consiguiente 
 a todos los demas,
 puesto que las caracteristicas otorgadas al
 primer Li son heredadas 
 por todos los li dentro de nuestra lista . Espectro*/
 #galeria li a
 {display:block;
 width:190px;
 height:20px;
 background:#99cccc;
 border:1px solid black;
 border-collapse:collapse;
 padding:2px;
 text-decoration:none;
 text-align:center;
 color:#000;
 font-family:arial;
 font-size:15px;
 font-weight:bold;}
			  
 /*Damos el evento onmouseover a nuestro Li,
 con la regla CSS 
 hover cuyas caracteristicas seran visibles 
 al pasar el cursor sobre el enlace del  Li.  Espectro*/			  
 #galeria li a:hover{
 background:navy;
 border:1px solid tranparent;
 border-collapse:collapse;
 color:#ffcc00;}
					
 /*Procedemos a las caracteristicas 
 de la segunda lista,que la van a hacer
 invisible por default. Espectro*/					
 #galeria li ul{
 display:none;
 position:absolute;}
			   
 /*Inmediatamente el hover de nuestra 
 segunda lista,cuyas caracteristicas 
 la van a hacer visible. Espectro*/			   
 #galeria li:hover ul{
 display:block;
 padding-left:0px;}
					 
 /*Recordemos que las caracteristicas 
 del primer Li la heredan todos los Li, 
 por lo tanto daremos algunas caracteristicas 
 adicionales a los Li 
 de nuestra segunda lista. Espectro */					 
 #galeria li ul li{
 display:block;
 float:none;
 position:relative;
 padding:0px;}
				  
 /*Caracteristicas de los enlaces de 
 los Li de nuestra 
 segunda lista. Espectro*/				  
 #galeria li ul li a{
 display:block;}

 /*Damos un hover distinto a cada Li 
 de la segunda lista recurriendo 
 al ID que habiamos dado a cada Li 
 y colocamos un background-image 
 distinto para cada uno. Espectro*/
 #galeria li ul #im1:hover a{
 width:190px;
 height:190px;
 background:url(misfotos.jpg/imag1.jpg);
-webkit-background-size:190px 190px;
 color:transparent;}	
 #galeria li ul #im2:hover a{
 width:190px;
 height:190px;
 background:url(misfotos.jpg/imag2.jpg);
 color:transparent;}	
 #galeria li ul #im3:hover a{
 width:190px;
 height:190px;
 background:url(misfotos.jpg/imag3.jpg);
 color:transparent;}	
 #galeria li ul #im4:hover a{
 width:190px;
 height:190px;
 background:url(misfotos.jpg/imag4.jpg); 
 color:transparent;}	
 #galeria li ul #im5:hover a{
 width:190px;
 height:190px;
 background:url(misfotos.jpg/imag5.jpg);
 color:transparent;}								
 </style>

El codigo Html es el siguiente

<body>
<ul id="galeria">
<li><a href="#">IMAGENES</a>
<ul>
<li id="im1"><a href="misfotos.jpg/
imag6.jpg"target="blank">IMAGEN1</a></li>
<li id="im2"><a href="misfotos.jpg/
imag7.jpg"target="blank">IMAGEN2</a></li>
<li id="im3"><a href="misfotos.jpg/
imag8.jpg"target="blank">IMAGEN3</a></li>
<li id="im4"><a href="misfotos.jpg/
imag9.jpg"target="blank">IMAGEN4</a></li>
<li id="im5"><a href="misfotos.jpg/
imag10.jpg"target="blank">IMAGEN5</a></li>
</ul></li>
</ul>
</body>
 
 

Ejemplo en ejecucion

• IMAGENES
  • IMAGEN1
  • IMAGEN2
  • IMAGEN3
  • IMAGEN4
  • IMAGEN5

REGRESAR ARRIBA

Menu Desplegable con CSS

Uno de los grandes problemas a la hora de iniciarse en la creacion de una pagina web, es como vamos a distribuir nuestros enlaces adecuadamente, y por lo regular llegamos a la conclusion de que un menu desplegable seria la solucion a nuestro problema, pero la dificultad radica en que la mayoria de los menus desplegables requieren de javascrip u otro lenguaje de programacion. Es por esto que decidi traer a mi pagina, el proceso de creacion de un menu desplegable basado solo en HTML y CSS, a continuacion el codigo html de nuestro menu:

Colocamos dentro de nuestro <body> el siguiente codigo,
<ul id="menu">
<li><a href="url...">HOME</a></li>
<li><a href="url...">THEESPECTROMANIA</a></li>
<li><a href="url...">HTML</a>
<ul>
<li><a href="url...">CENTER</a></li>
<li><a href="url...">FONT</a></li>
</ul></li>
<li><a href="url...">CSS</a>
<ul>
<li><a href="url...">GRADIENT</a></li>
<li><a href="url...">BORDES</a></li>
</ul></li>

Y a seguidas el codigo CSS para nuestro menu desplegable:

#menu{padding-left:25px; margin-top:15px;}
#menu li{list-style:none; float:left;}
#menu li a{display:block; width:200px;
height:20px; background:#99cccc;
border:1px solid; padding:2px;
text-decoration:none;
text-align:center; color:#000;
font-family:arial; font-size:15px;
font-weight:bold;}
#menu li a:hover{background:navy;
border-color:transparent;
color:#ffcc00;}
#menu li ul{display:none; position:absolute;}
#menu li ul li {display:block; float:none;
position:relative; padding:0px;}
#menu li:hover ul{display:block; padding-left:0px;}
#menu li ul li a{display:block;}

Lo cual nos daria como resultado, el siguiente menu desplegable:

• HOME
• THEESPECTROMANIA
• HTML
  • CENTER
  • FONT
• CSS
  • GRADIENT
  • BORDES

Espero este tutorial les sea de mucha ayuda,pueden copiar los codigos y adaptar los valores a sus necesidades,Espectro se despide, suerte.

Bordes Redondeados

Redondear los bordes de nuestros divs y menus era uno de nuestros grandes dolores de cabeza,a la hora de diseñar nuestras paginas web,las esquinas puntiagudas resultaban muy toscas al tratar de conseguir un diseño en donde primara la estetica, y eliminarlas conllevaba consigo mucho trabajo,tiempo y recursos.Fue en nuestros momentos de mayor desesperacion cuando aparecio nuestra tabla de salvacion con las siglas CSS3,dandonos las facilidades que durante tanto tiempo habiamos esperado,un borde redondeado rapido e increiblemente sencillo por la facilidad de su linea de codigo.Ya sabemos que CSS se ha dedicado a facilitar el trabajo del diseñador web, pero a veces los resultados son tan extraordinarios que nos imaginamos unos codigos llenos de complejidad,cuando en realidad la sencillez nos deja pasmados de asombro. En esta ocasion voy a mostrarles como crear un borde redondeado visible en practicamente todos los navegadores,incluyendo internet explorer. Si leyeron bien,dije internet explorer,pues su version 9 da soporte a esta y otras reglas css3.

Muy bien vamos a comenzar por crear cuatro divs en HTML,a los que llamaremos:

<div id="bordes_redondeados1"> </div>
<div id="bordes_redondeados2"> </div>
<div id="bordes_redondeados3"> </div>
<div id="bordes_redondeados4"> </div>

Y aqui tenemos el codigo CSS de estos cuatro divs:

#bordes_redondeados1{width:130px; height:130px; background:#ff0000; border-radius:15px 0px 0px 0px; -moz-border-radius:15px 0px 0px 0px; -webkit-border-radius:15px 0px 0px 0px;}
#bordes_redondeados2{f width:130px; height:130px; background:#ff0000; border-radius:15px 15px 0px 0px; -moz-border-radius:15px 15px 0px 0px; -webkit-border-radius:15px 15px 0px 0px;}
#bordes_redondeados3{ width:130px; height:130px; background:#ff0000; border-radius:15px 15px 15px 0px; -moz-border-radius:15px 15px 15px 0px; -webkit-border-radius:15px 15px 15px 0px;}
#bordes_redondeados4{ width:130px; height:130px; background:#ff0000; border-radius:15px 15px 15px 15px; -moz-border-radius:15px 15px 15px 15px; -webkit-border-radius:15px 15px 15px 15px;}

Como hemos visto en nuestros ejemplos anteriores,podemos aplicar uno(1),dos(2),tres(3) y hasta cuatro(4) esquinas redondeadas,siendo el primer valor para la esquina superior izquierda,el segundo para la esquina superior derecha,el tercero para la esquina inferior derecha y el cuarto para la esquina inferior izquierda.Como podemos observar los valores siguen siempre la trayectoria de las agujas del reloj.

Tambien podemos aplicar un valor unico para redondear las cuatro esquinas,esto lo conseguimos con el siguiente codigo CSS.

#bordes_redondeados{ width:130px; height:130px;
background:#ff0000;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;}

Espero les sea de mucha ayuda, Espectro se despide, suerte

Box-Shadow

Durante mucho tiempo se tuvo que recurrir a las capas superpuestas para lograr un efecto de sombra en divs,tablas etc. provocando esto el consabido exceso de trabajo,codigo y recursos.El css3 nos facilita la creacion de una sombra del color y longitud que deseemos con solo una linea de codigo,facil de aprender y de aplicar,y ademas tiene la particularidad de asimilar valores negativos,esto quiere decir que podemos dirigir nuestra sombra en la direccion que nosotros decidamos.Pero lo realmente extraordinario es el soporte recibido por practicamente todos los navegadores,incluyendo Iexplorer que ha decidido en su version numero 9 dar soporte a un numero mayor de reglas css3,entre las que se encuentra la regla Box-Shadow, que es la encargada de crear las cajas de sombras.

Los elementos en los que mas se usa la regla css "Box-Shadow" es en las imagenes,en los divs y en los menus,aunque tambien se puede usar para las tablas,las posibilidades son inmensas.Por lo pronto les voy a mostrar como usar la regla "Box-Shadow" para darle sombra a un div.

Primero vamos a crear un div en HTML al que llamaremos:

<div id="shadow"> </div>

Y ahora vamos a crear el codigo CSS para este div:

#shadow{width:130px;
height:130px;
box-shadow:-8px 8px 3px #bdbdbd;
-moz-box-shadow:-8px 8px 3px #bdbdbd;
-webkit-box-shadow:-8px 8px 3px #bdbdbd;}
Esto dara como resultado este div con una sombra hacia la izquierda y hacia abajo.

Como podemos observar la regla "box-shadow"consta de cuatro(4)valores,el primero se refiere a la direccion horizontal que va a tener la sombra,si tiene un valor negativo como en el ejemplo,entonces la sombra se dirigira hacia la izquierda,en caso contrario se dirigira a la derecha.El segundo valor se refiere a la direccion vertical,si el valor es negativo la sombra ira hacia arriba,en caso contrario ira hacia abajo como en el ejemplo.El tercer valor trata sobre el difuminado que tendra la sombra y puede tener incluso un valor cero(0).El cuarto valor no es mas que el color que daremos a la sombra y las posibilidades son tantas como colores hay en el espectro.

espero que la informacion les sea de mucha utilidad,espectro se despide,suerte.

Text-shadow

En una entrega anterior habiamos visto como crear sombras en divs,imagenes,tablas,etc. con la ayuda de css,tambien habiamos abordado el tema del soporte proporcionado por internet explorer9 a la regla css "Box-Shadow" y otras mas.En esta ocasion vamos a recrear una regla css muy parecida a "Box-Shadow" pero cuyos resultados en vez de afectar a los divs o las imagenes,van a dar sombra al elemento basico de nuestra pagina,o sea al texto,nos referimos a la regla css "text-shadow",que contrario a "Box-Shadow" carece de soporte por parte de internet explorer,aunque es facilmente asimilado por la mayoria de los navegadores.Por lo demas la sintaxis de "Text-Shadow" es identica a "Box-Shadow",lo que nos facilita su aprendisaje y posterior uso.

Pero como para muestra basta un boton,vamos a crear un ejemplo de texto con sombra, y asi podremos ver la similitud existente con las cajas de sombra o box-shadow.
Primero vamos a empezar por crear el texto al que daremos sombra,que en este caso sera la palabra "espectro" a la cual le daremos una clase como sigue a continuacion.
Para el HTML usaremos:

<h2 class="sombra"> "Espectro" </h2>

"Espectro"

El codigo css aplicado es el siguiente:

.sombra{font-size:55px;
text-align:center;
color:#ff0000;
text-shadow:-7px -7px 4px #000;
-moz-text-shadow:-7px -7px 4px #000;
-webkit-text-shadow:-7px -7px 4px #000;}

Como podemos observar la regla "Text-Shadow", al igual que "box-shadow"consta de cuatro(4)valores,el primero se refiere a la direccion horizontal que va a tener la sombra,si tiene un valor negativo como en el ejemplo,entonces la sombra se dirigira hacia la izquierda,en caso contrario se dirigira a la derecha.El segundo valor se refiere a la direccion vertical,si el valor es negativo como en el ejemplo la sombra ira hacia arriba,en caso contrario ira hacia abajo.El tercer valor trata sobre el difuminado que tendra la sombra y puede tener incluso un valor cero(0).El cuarto valor no es mas que el color que daremos a la sombra y las posibilidades son tantas como colores hay en el espectro.

Como podemos observar, el grado de similitud entre las reglas css "text-shadow" y "box-shadow" es bastante grande, por lo que tenemos que tener cuidado al usarlas para no confundirnos.
Es todo por esta entrega,espero les sea de mucha utilidad,espectro se despide,suerte.

Degradado con CSS

CSS3 ha abierto un amplio abanico de posibilidades a la hora de diseñar paginas web, al punto de convertirse en imprescindible al momento de crear una pagina. Una de las reglas css3 mas utilisadas es la relativa a los degradados o gradient; Esta regla aunque es soportada por la mayoria de los navegadores aun sigue esperando el soporte de iexplorer,en donde para ser visualizada tiene que recurrir a los tediosos filtros de microsoft.

En esta entrega vamos a mostrarles como crear un gradient utilizando el css3;En primer lugar vamos a crear un div al que llamaremos gradient.

<div="gradient">

             </div>

Esto para el archivo HTML, para el archivo CSS usaremos la siguiente linea de codigo:

#gradient{width:100px; height:100px;
background:#ff0000;
background:-moz-linear-gradient(top,#ff0000,#fff);
background:-ms-linear-gradient(top,#ff0000,#fff);
background:-o-linear-gradient(top,#ff0000,#fff);
background:-webkit-gradient(linear,0 0,0 100%,from(#ff0000),to(#fff));}

Este codigo dara como resultado un degradado como el que sigue a continuacion,visible en FIREFOX,CHROME,OPERA 11.10 etc.

excepto en internet explorer, para el cual tendremos que seguir usando el filtro de microsoft , como sigue a continuacion

-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#ff0000',EndColorStr='#fff' ,gradientType='0'); A excepcion de las versiones modernas cuyo codigo queda especificado con el prefijo -ms-