Tipos de Selectores en CSS

Los selectores en CSS son aquellos que identifican elementos dentro de una página web para así poder aplicar estilos a sus elementos.

Los tipos de selectores abarcan desde el nombre de las etiquetas usadas en HTML hasta combinaciones que permiten diversos selectores de la página.

Existen diferentes tipos de selectores como lo son:

  • universal
  • de etiqueta
  • descendentes
  • de clase
  • de id.

TIPOS:

Selector Universal

Es aquel que se puede utilizar para identificar y modificar a todos los elementos de la pagina web.

El selector universal se declara con un asterisco (*) y dentro de las llaves se colocan las características que tomarán los elementos como se muestra a continuación.

Creamos nuestro selector * {} en el que daremos el mismo estilo margin y padding ademas de el color aqua a todos los elementos.

Selectores de Etiqueta

Los selectores de etiqueta seleccionan a los elementos cuyo nombre coincida con el nombre del elemento html.

Cuando existen diferentes etiquetas con propiedades iguales se puede enlazar separando los nombres por comas.

Ejemplo: Se le asigna un color y un formato al texto de los títulos h1, h2 y h3.

Podemos observar en el ejemplo estamos asignando un mismo estilo a las tres etiquetas.

Selectores descendentes

Son aquellos que seleccionan los elementos que se encuentran dentro de uno o mas elementos creando una mayor precisión para la selección de la etiqueta a la que se le aplicara el estilo. Estos selectores se separan por espacios en blando.

Ejemplo: Se modificara el color y la fuente de los elementos dentro de una etiqueta <p> que a su vez este dentro de la etiqueta <div>.

Un elemento no tiene que ser descendente directo de otro si no que la única condición es que el elemento debe estar dentro del otro elemento sin importar el nivel de profundidad en el que se encuentre

Selectores de Clase

Son prácticos para aplicar estilos a un solo elemento de la página ya que utilizando el atributo class se puede indicar directamente la regla CSS

Se diferencia este tipo de selector con la notación de un punto (.) antes de la palabra usada con el prefijo “class”.

Ejemplo: Al elemento <p> en su atributo class asignamos el nombre del selector creado .DeClase

Selectores de ID

Se utilizan para dar estilo a un solo elemento según su identificador único (id). Se utiliza con el atributo de id.

La sintaxis es muy parecida con los selectores de clase; la diferencia es que se utiliza el símbolo (#) en vez del (.). La diferencia  es que no se puede repetir en una misma página web.

Por ejemplo: Al elemento h3 se le da como identificador único #DeId por lo cual solo se le aplicara el estilo a este elemento. 

Es importante no confundir este selector con los anteriores:

p#DeId : Todos los elementos de tipo p con identificador unico DeId

p DeId : Todos los elementos con identificador único DeId y este dentro de alguna etiqueta p

p, DeId : Todos los elementos p y todos los elementos con identificador único DeId

Selectores Específicos

Pero ¿Cómo es posible aplicar estilos a solamente al párrafo cuyo atributo class sea igual a Estilo?

Combinando el selector de clase y el selector de tipo, para obtener un selector mucho mas especifico:

Como podemos observar el estilo solo se aplico al párrafo y no a los otros elementos. “Se puede interpretar el selector p.Estilos como Elementos de tipo <p> que dispongan de un atributo class con un valor de Estilos”

Estos fueron los diversos selectores CSS que puedes utilizar en la creación de tu página web.

 

Crea tu propio Slider para tu página web con HTML, CSS Y JS

Hola, en esta nueva publicación te mostraremos una manera sencilla de crear tu propio slider de imágenes para tu página web.

Comencemos con una pequeña introducción de lo que es un slider.

Un slider es un recurso que se utiliza para dar un diseño mas novedoso a la presentación de imágenes en un sitio web además de ser una manera de atraer la atención de los visitantes y usuarios que accedan a ella.

Requisitos:

Para realizar esta práctica necesitaras de algunas imágenes, así como también haremos uso de conocimientos en HTML, CSS y Javascript.

  • Definiremos el código HTML en el cual crearemos un contenedor donde se creara el slider, lo llamaremos “caja”.
  • Declararemos en el código CSS la apariencia que tomara el contenedor.
  • Y por ultimo utilizaremos Javascript para el funcionamiento de este con un degradado.

Procedimiento:

  1. Iniciemos la práctica colocando el código HTML, dentro de la etiqueta <body>  colocamos onload=”javascript:Aparecer()” para que se ejecute automáticamente al cargar la página.
  2. Ahora crearemos el contenedor con la etiqueta <div> en la que declararemos las imágenes  <img  src= dirección de imagen  id= identificador de imagen>.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Practica</title>
</head>
<!--Código HTML-->
<body onload="javascript:Aparecer();">
.
.(imagenes)
.
</body>

 

Es importante que dentro de la etiqueta <img> se declare un identificador ya que se utilizara mas adelante.

3.- Para definir la apariencia utilizaremos CSS el cual definimos de la siguiente manera dando formato al contenedor de las imágenes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS--> 
<style type="text/css">
#caja{
width:262px; 
height:192px; 
color:white; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; 
margin:0px auto; 
margin-top:30px;}

img{     
width:350px;    
height:200px; 
position:absolute;}
</style>
</head> 
<!--Código HTML--> 
.
.
.
</html>

Asignamos un tamaño a las imágenes con un width y height además de la posición en la que se ubicarán las imágenes dentro del slider.

Ahora estamos listos para comenzar a introducir el código javascript.

4.- Comenzaremos creando la función Aparecer en la que utilizaremos un interval=setInterval(muestra, 20) para llamar cada 20 milisegundos una nueva función llamada muestra.

La función Aparecer llamara:

  • La función detener  la cual manejara un clearInterval(interval) para limpiar el intervalo.
  • Y la función elige la cual se encargara de elegir y activar la visibilidad entre las imágenes del slider.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
<title>Practica</title> 
<!--Código CSS-->
.
.
. 
<!--Código Javascript--> 
 
var interval; 
var i=1; 
var ver=0; 

function Aparecer() { 
detener(); 
elige(); 
interval=setInterval(muestra, 20); } 

function muestra() { 
if(i>6) { 
   i=1; 
    Ocultar(); } 
if(ver==0) 
   document.getElementById("arbol").style.opacity=i; 
else 
   document.getElementById("nieve").style.opacity=i; 
i+=0.05; } 

function detener() { 
clearInterval(interval); } 

function elige() { 
if(ver==0) { 
document.getElementById("arbol").style.visibility="visible"; 
document.getElementById("nieve").style.visibility="hidden"; } 
else { 
document.getElementById("arbol").style.visibility="hidden"; 
document.getElementById("nieve").style.visibility="visible"; } }


</head> 
<!--Código HTML--> 
.
.
.
</html>

5.- La función muestra jugara un papel muy importante a la hora de mostrar y ocultar ya que manejara la transición entre imágenes jugando con la opacidad de la imagen que se muestra en el slider.

function Ocultar() { 
detener(); 
interval=setInterval(desvanecer,20); } 

function desvanecer() { 
if(i<=0) { 
i=0; 
if(ver==0) 
ver=1; 
else ver=0; 
elige(); 
Aparecer(); } 
if(ver==0) 
document.getElementById("arbol").style.opacity=i; 
else document.getElementById("nieve").style.opacity=i; 
i-=0.05; } 
<!--Código HTML--> 
.
.
.
</html>

6.- Mientras que la función de Ocultar se encargara con un interval=setInterval(desvanecer,20) de llamar cada 20 milisegundos a la función desvanecer esta se encargara de modificar la opacidad de la imagen que se ocultara.

De esta manera tendremos el efecto de un transición entre cada imagen del slider. Listo esta es una manera secilla de realizar un slider para tu sitio web.

Resultado:

See the Pen slider1 by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Crear un reloj utilizando Javascript, HTML Y CSS

A continuación se muestra la creación de un reloj, un  ejercicio en que utilizaremos elementos html, css y javascript.

Con este ejercicio podremos aprender la utilización de la hora y fecha del sistema para implementarla en una pagina web.

Iniciaremos con la creación de un nuevo documento de tipo html, y dentro de body crearemos el contenedor con la etiqueta <div></div> donde colocaremos nuestro reloj el cual llamaremos “caja”. Ademas agregaremos un enlace utilizando la etiqueta <a></a> con la cual daremos inicio a nuestro reloj.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
<body>
</html>
 A continuación le daremos un formato a la caja utilizando elementos css.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
<style type="text/css">
#caja{ 
width:300px; 
height:200px;
background-color:blanchedalmond;
color:black; 
font-family:"Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; font-size:2.0em; 
text-align:center;}
a{ 
border:1px solid brown;}
</style>
</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
</body> </html>

Ya que tenemos nuestro código CSS y HTML comenzaremos con nuestro código. Utilizaremos la función de iniciarReloj() en la que con setInterval(reloj, 1000)  según el valor indicado la función sera ejecutada en este caso 1000 milisegundos es el tiempo que se ejecutara la función reloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){
interval=setInterval(reloj, 1000);//1000 milisegundos = 1 segundo  }

function reloj() { 
var d= new Date(); 
var t= d.toLocaleTimeString();
document.getElementById("caja").innerHTML= t;
} 

</head>
<!--Código HTML-->
.
.
.
</html>

Posteriormente en la función reloj() es donde se inyectara el código js en HTML con document.getElementById(“caja”).innerHTML= t  utilizaremos t en caso de utilizar solo la hora, y d si se requiere la fecha completa.

También podemos incluir un enlace con la etiqueta <a></a> para detener el reloj esto en nuestro código HTML y creando una nueva función en el código CSS en la cual marcamos el clearInterval(interval); que limpiara el intervalo que anteriormente se había declarado para el intervalo de ejecución en el iniciarReloj().

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>RELOJ</title>
<!--Código CSS-->
.
.
.
<!--Código JS-->
 
var interval;
function iniciarReloj(){ ... }
function reloj() { ... } 

function detenerReloj() { 
clearInterval(interval);
 }

</head>
<!--Código HTML-->
<body>
 <a href="javascript:iniciarReloj();">Iniciar Reloj</a>
 <a href="javascript:detenerReloj();">Detener Reloj</a>
 </body> </html>

De esta manera concluimos el ejercicio con el cual aprendimos a utilizar la hora del sistema, y la implementan del setinterval y el clearinterval ademas del innerHTML.

See the Pen reloj by Maria Gpe. Velázquez Martínez (@MarieVelmart7) on CodePen.

Menú HTML & CSS responsivo con transiciones

Hola a todos!!. En una publicación anterior vimos como crear un menú con animación JQuery, el día de hoy vamos a crear un menú con movimiento a través de transiciones CSS, es decir, podemos omitir el código Javascript para animar el menú, esto lo hacemos gracias a un truco de CSS ligado a un control checkbox.

1. El primer paso es crear la estructura HTML:

Aqui es dónde viene el truco, como puedes ver utilizamos un checkbox para mostrar el icono de menú, te preguntarás ¿Por qué utilizar un checkbox si lo puedo hacer con una etiqueta img?, bueno, pues este control nos ayudará a detectar cuando se hizo clic sobre él, utilizando CSS detectamos el cambio de estado checked para desplegar u ocultar el menú. ¿podría utilizarse una etiqueta button, link u alguna otra?, la respuesta es, seguramente sí, siempre y cuando podamos detectar sus estados dentro de CSS

<!-- Agregamos el control Checkbox y su label asociado -->
<input type="checkbox" id="menuCheck">
<label class="iconoMenu" for="menuCheck"></label>

<<!-- Este es el titulo de la página -->
<h1>Título de mi página</h1>

<!-- Estructura del menú y su contenedor -->
<div class="contenedorMenu">
<ul>
<li><a href="#">Opción uno</a></li>
<li><a href="#">Opción dos</a></li>
<li><a href="#">Opción tres</a></li>
<li><a href="#">Opción cuatro</a></li>
</ul>
</div>

Seguramente notarás que la estructura realmente no es tan compleja, así que no ahondaré en ella.

2. Pasemos a los estilos

Dentro de los estilos, solo rescataré la forma de mostrar/ocultar el menú.

#menuCheck:checked ~ .contenedorMenu{transform: translateX(0%)}

La explicación de esta línea debe comenzar con saber qué es el simbolo ~ y para que se utiliza, este simbolo llamado selector obtiene todos los elementos de la parte izquierda que preceden a la parte derecha de la regla, ejemplo: element1 ~ element2 (seleccionar todos lo elementos element2 que sean hermanos/estén al mismo nivel jerárquico que element1), para mayor información consultar el enlace https://www.w3schools.com/cssref/css_selectors.asp.

Para nuestro caso, estamos seleccionado al div contenedor del menú cuando el checkbox este en estado checked. Cuando el checkbox deja de estar en este estado los estilos vuelven a su “normalidad”, es decir a los estilos establecidos de inicio.

Para “animar” el menú utilizamos transiciones CSS que propiamente son algo diferente a las animaciones CSS, la principal diferencia es que las transiciones solo se inician en un cambio de estado como vimos ahora, mientras que las animaciones no dependen de estados de las etiquetas y se puede configurar mas a detalle como se comportará el CSS.

Finalmente te dejo el demo del funcionamiento de este código.

Saludos!

See the Pen Menú HTML & CSS responsivo con transiciones by Jesús Rodríguez (@chuyrdz) on CodePen.

Cómo usar los íconos Font Awesome (fa)

El conjunto de íconos Font Awesome es una de las alternativas que nos permiten decorar nuestro sitio o desarrollo web con elementos gráficos que le den un toque moderno y ligero ya que la representación gráfica de los íconos no se realiza mediante imágenes sino a través de una tipografía (fuente).

La versión actual incluye una colección de 585 íconos en la versión 4.4.0 de Font Awesome y constantemente se agregan más.

font-awesome

La imagen anterior muestra una parte de la colección de íconos Font Awesome.

Unas de las características especiales de este conjunto de íconos es:

  • Al no ser gráficos y ser representados mediante una fuente, el peso en mucho menor.
  • Pueden utilizarse distintos colores para su representación
  • Es posible utilizar varios tamaños sin que estos se deformen

Prácticamente para usar estos íconos es necesario:

  • del proyecto de Font-Awesome es necesario descargar a la carpeta de tu proyecto la carpeta:
    • CSS que incluye los siguientes archivos:
      • font-awesome.css
      • font-awesome.css.map
      • font-awesome.min.css
    • fonts que incluye los siguientes archivos
      • FontAwesome.otf
      • fontawesome-webfont.eot
      • fontawesome-webfont.svg
      • fontawesome-webfont.ttf
      • fontawesome-webfont.woff
      • fontawesome-webfont.woff2



Una vez que tengas la estructura de directorios mencionada en la carpeta de tu proyecto, es necesario incluir el siguiente código en las páginas desde donde se utilizarán los íconos:

La referencia a los archivos CSS:
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.min.css”/>
<link type=”text/css” rel=”stylesheet” href=”css/font-awesome.css”/>

y ¡listo!, esto es lo que necesitas.

Ahora, para llamar los íconos en tu página web se hace através del artributo class de HTML y donde se mandan a llamar las conjuntos de estilos defindos por Font Awesome, de la siguiente manera:

<span class=”fa fa-folder-open”></span> directorio<br/>
<span class=”fa fa-folder-open fa-2x”></span> directorio al doble<br/>
<span class=”fa fa-folder-open fa-3x”></span> directorio al triple<br />
<span class=”fa fa-spinner fa-2x”></span>cambio de ícono <br/>
<span class=”fa fa-spinner fa-2x” style=”color:red”></span>Al ser una fuente puedes indicar el color que necesitas<br/>

el resultado es:

font-awesome-ejemplo

Utilizar una etiqueta spam es semanticamente mejor que utilizar <i> como lo menciona la ayuda de la página oficial de Font Awesome, sin emabargo es posible utilizar cualquiera de las dos.

Una de las características de estos íconos es la rotación, la puedes experimentar con el estilo: fa-spin

Font Awesome incluye el soporte para botones, listas y controles HTML, puedes encontrar documentación completa en: http://fortawesome.github.io/Font-Awesome/examples/

Saludos

Crear un menu usando elementos DIV y CSS

Generalmente la creación de menús horizontales en páginas web se realizan mediante listas (ul,ol) o mediante el uso de DIV, en algún otro momento chuyrdz ya expuso detalladamente cómo se realiza la creación de un menu (ul) desde cero.

Ahora mostraré los elementos mínimos para la creación de un menú horizontal usando solamente DIV y darle la funcionalidad necesaria sin uso de JavaScript para lograr la funcionalidad.

A partir de este código mostrado tendrán la posibilidad de personalizarlo de acuerdo al diseño que se seleccione.

La estructura en HTML es la siguiente:

<div class=”Menu”>
    <div><a href=”#”>inicio</a></div>
    <div><a href=”google.com.mx”>Google</a></div>
    <div><a href=”wordpress.com”>Word Press</a></div>
    <div>
            <a href=”#”>Correos</a>
            <div class=”SubMenu”>
                <div><a href=”gmail.com”>google</a></div>
                <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
            </div>
    </div>
    <div>
           <a href=”#”>Enlaces</a>
          <div class=”SubMenu”>
               <div><a href=”www.google.com.mx”>google</a></div>
               <div><a href=”hotmail.com”>hotmail</a></div>
                <div><a href=”yahoo.com”>yahoo</a></div>
           </div>
    </div>
</div>

La estructura de estos elementos es la siguiente:

div (menu)
    – div
            -a
    – div
            -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a
    – div
            -a
            -div (submenu)
                    -div
                          -a
                    -div
                          -a
                    -div
                          -a

La estructura anterior muestra los elementos principales del menú que contienen submenú, en este caso, se ejemplificará para los dos últimos elementos, sin embargo si los dos primeros elementos tuvieran submenú, solo tendría que seguirse la estructura especificada y la funcionalidad se aplicará sin realizar ninguna modificación.

Ahora, para que esta estructura tenga la funcionalidad mínima de mostrar los submenús cuando el mouse esté arriba de la opción se deberá especificar el siguiente código como parte de los estilos.

/*establecemos el alto del menú*/
.Menu

{
height:30px; 
}

/*flotamos los div que son hijos directos del div que tiene como clase Menu*/
.Menu > div
{
float:left;
}

/*se indica que los enlaces ocupen todo el espacio del DIV donde están contenidos, se les da un espacio de separación interior entre el texto y el borde (padding)*/
.Menu a
{
display:block;
padding:5px 15px 5px 15px;
}

/*se establece la funcionalidad del enlace al colocar el mouse arriba del enlace*/
.Menu a:hover
{
background-color:gray;
}

/*Se establecen las características iniciales del submenú, el cual no debe mostrarse*/
.SubMenu
{
position:absolute;
visibility:hidden;
display:none;
}

/*Se establece la funcionalidad del submenu cuando el mouse esté arriba de la opción de menu*/
.Menu > div:hover .SubMenu
{
display:block;
visibility:visible;
}

Hasta el momento se tiene solamente funcionalidad, sin embargo este código está listo para adaptarle cualquier diseño de colores, contornos, estilos de letra y demás monerías  a los elementos estáticos o dinámicos.

Saludos

Creación de menú (UL) desde cero – 4 Sticky Menu.

En el post anterior hicimos un menú horizontal, con posibilidad de agregar submenus verticales para cada opción del menú.

Ahora, agregaremos un poco de funcionalidad al menú, haremos que este menú este siempre visible sin importar que tan larga este la pagina y cuanto se scrollee, a este efecto se le conoce como StickyMenu (Menú pegajoso).

Comencemos……

1.- Estructura básica del menú. Para este ejemplo, utilizaremos la estructura generada en el primer ejercicio.

<div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>

2.- Estilos para el menú. Utilizaremos los estilos generados en el primer ejercicio.

<style type=”text/css”>
            body{ margin:0px;}                       
            /*Estilos para el contendor del menu*/            
            .contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 100%; /*ancho del menu */
            }
            /*Estilos para el elemnto ul*/
            .menu
            {
                list-style: none;  /*Quitar viñetas de la lista*/
                padding: 0px;    /*Quitar sangría de la lista */
                height: 30px;    /*Establecer el ancho del menu*/
                line-height: 30px; /*Centrar el contenido al medio*/
                margin: 0px;/*Quitar espacios arriba y abajo*/
            }
            /*Estilos para los items de menu*/
            .menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }
            /*Estilos para el enlace dentro de los Items de menu*/
            .menu li a
            {
                text-decoration: none;    /*Quitar el subrayado*/
                color: white;    /*Color de fuente*/
                display: inline-block;    /*Expandir el enlace a lo alto del LI*/
                width: 100%;    /*Expandir el enlace a lo largo del LI*/
            }
            /*Estilos para los enlaces cuando el mouse se coloca sobre ellos*/
            .menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
            }
            /*Estilos sticky*/
            .sticky{position: fixed; top: 0px; width: 1000px;}
        </style>

3.- Agregar elementos adicionales a la pagina. Para mostrar como funciona este ejercicio, incorporaremos un encabezado y saltos de linea a la pagina. Como encabezado agregaremos un div, y los saltos de linea se incorporaran al final de la página.

<div class=”pagina”>
            <div class=”encabezado”></div>
            <div class=”contenedorMenu”>        
                <ul class=”menu”>
                    <li><a href=”#inicio”>Inicio</a></li>            
                    <li><a href=”#seccion1″>Sección 1</a></li>
                    <li><a href=”#seccion2″>Sección 2</a></li>
                    <li><a href=”#seccion3″>Sección 3</a></li>
                </ul>                        
            </div>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
            <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
        </div>

Y sus correspondientes estilos:

            /*Estilos generales para la pagina*/
            .pagina{ width: 1000px; margin: 0 auto;}
            .encabezado{ width:100%; background-color: #456789; height: 200px;}

4.- Agregar la referencia a la API de JQuery. De preferencia utilicemos el sitio oficial de JQuery y la version mas reciente para trabajar nuestros proyectos.

             <script src=”http://code.jquery.com/jquery-1.11.0.min.js”></script>

5.- Implementar el código JQuery. Lo que queremos lograr es lo siguiente:

-Inicialmente el menú debe verse debajo del encabezado y, mientras se scrollea hacia abajo recorrerse en la ventana, como normalmente ocurriría.
-Cuando el scroll rebase el ancho del encabezado, el menú cambiará de estilo para permitir que siempre este visible al tope de la página.

Esto se implementa así:

<script type=”text/javascript” >
            $(document).ready(function () {
                    /*Vincular el evento scroll a la ventana*/
                    $(window).scroll(function () {
                            //Obtener el alto del encabezado
                            var distancia = $(“.encabezado”).height();
                            //Verificar si se ha scrolleado lo sifuciente para que menú se vea en el tope del sitio                            
                            if( $(this).scrollTop() > distancia )
                            {
                                /*Si el scroll llego a la posicion del menu, dejar el menu al tope con posicion fija*/
                                $(“.contenedorMenu”).addClass(“sticky”);
                            }
                            else
                            {
                                /*Si el scroll esta por encima del menu, quitar la posicion fija en el tope*/
                                $(“.contenedorMenu”).removeClass(“sticky”);
                            }
                    });
            });
        </script>

Donde la clase sticky, se define:

/*Estilos sticky*/
.sticky{position: fixed; top: 0px; width: 1000px;}

Esto permite que el menú, siempre este visible sin importar que tan larga sea la página.

Menu4aMenu4b

Gracias

Cómo usar las animaciones con CSS3

Con la versión 3.0 de CSS es posible crear animaciones de elementos web que anteriormente solo se podía crear mediante un lenguaje de programación estructurado que permitiera estructuras de control (ciclos y condicionantes).

De manera similar ocurrió con las transiciones (también incorporadas en CSS3), sin embargo la diferencia entre las transiciones y las animaciones es que las transiciones se ejecutan a partir de un evento como puede ser el hover y las animaciones no responden a un evento en especial, sino al cargado de los estilos al momento de cargar la página.

para ejemplificar el uso de las animaciones usaremos una imagen.

<img alt=”” ” src=”tatto%20page.jpg”  />

y lo que haremos es que mediante animaciones cambiaremos la propiedad de opacidad (opacity) de la imagen de manera que esté transparente al unicio y que se comience a visualizar conforme pasa el tiempo.

Entonces los atributos de la imagen quedaría así:

img{
    animation: aparecer 5s; /*se declara para la imagen una animación llamada “aparecer” y que la animación se realizará en 5 segundos */ 
}

Nota: Estas instrucciones son las declaraciones estándares, en caso de que no se ejecuten tendrás que agregar los prefijos (-webkit-, -o-, -ms-, etc) de acuerdo al navegador que utilices para revisar el ejercicio.

Una vez declarada la animación para el elemento se realiza la declaración de la animación de la siguiente manera:

@keyframes animacion
{
    from{opacity:0;}  /* apariencia inicial del elemento*/
    to{opacity:1;} /* apariencia finaldel elemento*/
}

El ejemplo anterior indica que la opacidad del elemento que tenga asignada esta animación será de “cero” inicialmente (es decir no se verá) y durante la animación se transitará hasta llegar a “uno” (es decir será completamente visible).

Si el ejemplo se deja tal como está, esta animación solo hará una transición es decir de opacidad cero a opacidad uno, sin embargo si queremos que esto sea cíclico (que cuando llegue a opacidad 1 inicie nuevamente) debemos agregar a la animación una instrucción indicando que la animación no se detenga en el estado final:

animation-iteration-count: infinite;

Otro mecanismo para ejemplificar el paso de la animación entre el estado inicial y el final es hacerlo mediante el porcentaje del tiempo que durará la animación, de la siguiente manera:

@-webkit-keyframes aparecer {
    0% {opacity:0;}      /*  similar al “from” estado inicial*/
    50% {opacity:1;}    /*  estado que marca el estado al 50% del tiempo transcurrido */
    100% {opacity:0;} /*  similar a “to”, marca el estado al 100% del tiempo transcurrido */
}

Les recomiendo profundizar en los demás parametros de las animaciones que permiten personaliar la transición de la aminación:

  • animation-delay, especifica el tiempo en que comenzará la animación
  • animation-direction, especifica como se desarrollará la animación
  • animation-duration, especifica cuanto tiempo durará el tiempo del ciclo de la animación
  • animation-fill-mode, especifica el estilo que se le aplicará al elemento cuando la animación no ha terminado o no ha comenzado
  • animation-play-state, especifica cuando la animación está ejecutándose o está en pausa.

Cada una de estos parámetros tiene su conjunto de valores.

Espero les sea de utilidad.

Creación de menú (UL) desde cero – 3 Submenus.

En el post inicial vimos como crear un menú utilizando listas no ordenadas, luego vimos como añadir un estilo de tabs a las opciones del menú. Ahora veremos como agregar submenus a las opciones del menú principal, claro, utilizando listas no ordenadas.

Comencemos….

1.- Estructura principal. Para este ejemplo utilizaremos la estructura creada en el menú básico y la modificaremos para agregar submenus utilizando otra lista no ordenada. La lista que representara el submenu se agregará dentro de la opcion de menu que la contenga, con esto se facilita el posicionamiento del submenu.

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a>
                    <!– este es el submenu –>                    
                    <ul class=”submenu”>
                        <li><a href=”#Subseccion1″>SubSeccion1</a></li>                    
                        <li><a href=”#Subseccion2″>SubSeccion2</a></li>
                        <li><a href=”#Subseccion3″>SubSeccion3</a></li>
                    </ul>
                    <!– Termina el submenu –>                
                </li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Estilos para el submenu. El submenu debería estar oculto hasta que la opción que lo contiene este seleccionada. Además, agregamos estilos para los submenu items.

/*Estilos para submenu UL*/
            .submenu
            {
                display:none; /*No mostrar*/
            }

/*Estilos para los SubmenuItems    */
            .submenu li
            {
                background: #a921A6;   /*Color de fondo para el menu*/                
                width:140px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
            }

3.- Desplegar el submenu. Una vez el cursor este sobre la opción del menú principal, se cambiará el estilo del submenu para mostrarlo.

/*Cuando se pase el cursor sobre el Item de Menu, mostrar el submenu*/
            .menu li:hover > .submenu
            {
                display: inline-block;            /*Mostrar submenu*/
            }        

 

Ahora, tenemos un menú parecido a este:

Menu Ul

En el siguiente post veremos como hacer un sticky menú

Gracias

Creación de menú (UL) desde cero – 2 Diseño Tab.

En el post anterior creamos la estructura básica del menú utilizando un contenedor y una lista no ordenada como las opciones que el menú va mostrar. Construimos un menú bastante básico pero funcional.

En este post, daremos al menú un aspecto diferente, vamos a simular TABs.

Comencemos…

1.- Estructura Intacta. Para este ejemplo, la estructura que creamos anteriormente no se modificara, seguimos utilizando:

<div class=”contenedorMenu”>        
            <ul class=”menu”>
                <li><a href=”#inicio”>Inicio</a></li>            
                <li><a href=”#seccion1″>Sección 1</a></li>
                <li><a href=”#seccion2″>Sección 2</a></li>
                <li><a href=”#seccion3″>Sección 3</a></li>
            </ul>                        
        </div>

2.- Agregar estilos. Para darle el efecto de tab, tendremos que agregar nuevos estilos y cambiar de lugar algunos otros.

El primer cambio que realizaremos sucede en la regla del contenedor, en el menú original teníamos esta regla:

.contenedorMenu
            {
                background: #E321A6;   /*Color de fondo para el menu*/
                width: 400px; /*ancho del menu */
            }

Como primer cambio moveremos el estilo que establece color de fondo de la regla del contenedor y lo colocaremos en la regla que establece estilos a los ListsItems.

Como segundo cambio, en esta misma regla, agregaremos los estilos para redondear los bordes superiores de los item de la lista, para esto utilizaremos los estilos border-top-left y border-top-right.

La regla queda así:

.menu li
            {
                float:left;    /*alinear los elemntos a la izquierda*/
                width:100px;    /*Establecer el ancho de cada item*/
                text-align:center;    /*centrar contenido en texto*/
                

               /*Para menú en forma de tabs*/
                background: #E321A6;   /*Color de fondo para el menu 1er cambio*/
                border-top-left-radius: 15px;   /*Bordes redondeados 2ndo cambio*/
                border-top-right-radius: 15px;                
            }

Para mayor información acerca del estilo border-radius, ir aquí

Como tercera modificación, agregamos un borde redondeado al evento hover de los ListItems, esto con la finalidad de ver un borde redondeado al colocar el cursor sobre el Item.

.menu li a:hover
            {
                 background-color:white;    /*Color de Fondo*/
                 color:#E321A6;    /*Color de fuente*/
                 /*Para menú en forma de tabs*/

                 border-top:1px #E321A6 solid;
                 border-top-left-radius: 15px;
                 border-top-right-radius: 15px;    
            }       

El menú queda así:

Menu tab

En el siguiente post veremos como agregar submenús al menú principal

Saludos