Cargando

Ir a contenido


 


Listas y menus en CSS3

Veremos las diferentes opciones a la hora de crear listas que funcionen como menús en HTML y después como personalizarlas gracias a CSS3.


Escrito por el dic 13 2015 19:35 css3 html5


Para crear menús dinámicos para nuestras páginas web es muy común hoy en día programar en HTML5 y después darle apariencia y estilo personales a través de CSS3 que se trata de un lenguaje que se basa en hojas de estilo, es decir, el código que da la forma, color y estructura a nuestra página va en un archivo aparte codificado fuera de la propia página en sí que estamos escribiendo.

 

En primer lugar vamos a ver cómo hacer listas, ya que a fin de cuentas un menú es una lista a la que se le pone un estilo para que quede visiblemente más elegante. De esta manera nos queda estructurado en Html como una lista de vínculos y después le ponemos un aspecto personalizado ya con CSS3.

 

Hay dos tipos de listas, las ordenadas y las desordenadas. Si vamos a utilizar una lista para después configurar un menú, lo más probable es que utilicemos una lista desordenada, sin embargo, vamos a ver las opciones.

 

Se crean exactamente igual, la única diferencia radica en la palabra reservada, que para las ordenadas será <ol> y para las desordenadas <ul>

 

El código en HTML es el siguiente:

<ol id="menu">
   <li>Primer elemento</li>
   <li>Segundo elemento</li>
   <li>Tercer elemento</li>
</ol>

<ul id="menú">
   <li>Primer elemento</li>
   <li>Segundo elemento</li>
   <li>Tercer elemento</li>
</ul>
Y el resultado en pantalla de escribir esto es:

 

1. Primer elemento
2. Segundo elemento
3. Tercer elemento

 

O exactamente igual sin el ordinal primero:

 

Primer elemento
Segundo elemento
Tercer elemento

 

En HTML hay ciertos pre-formatos cuando creamos una lista, es decir, hay un determinado margen, color de letra, viñeta, relleno, etc. que aparece por defecto al crear nuestra lista. Lo malo, es que visualmente no tiene muy buen aspecto, lo bueno es que es tremendamente sencillo cambiarlo a nuestro gusto gracias a CSS.

 

Vamos a empezar viendo los diferentes tipos de viñetas que podemos colocar a nuestro menú. Por defecto cada elemento de la lista viene precedido de un círculo negro. Sin embargo nosotros podemos poner cuadrados, círculos vacíos o una imagen de nuestro archivo.

 

El código para modificar la viñeta en CSS3 es el siguiente:

#menu
{ list-style-type:square;}
Ahí podemos poner las palabras reservadas square para que aparezcan cuadrados, circle para los círculos vacíos o una url por ejemplo, url(misimagenes/midubujo.jpg). No obstante creo que lo más habitual será que no pongamos ninguna viñeta si nuestro menú es dinámico. En ese caso la palabra a utilizar será none.

 

Para modificar el margen valiéndonos del menú del ejemplo es tan sencillo como utilizar este código en CSS3:

#menu
{ margin: 0px;}
Ahí en margin podemos poner el valor que queramos, y podemos elegir la medida, ya sea porcentual, en pixels, etc. Y es importante decir que en algunos navegadores o versiones de ellos puede haber problemas, por lo que se recomienda además de escribir el margen escribir el relleno. Esto se hace con padding:
#menu
{
   margin: 0px;
   padding: 2px;
}
Para elegir el borde de nuestro menú y de cada uno de los elementos nos fijaremos en el siguiente código de CSS3:
#menu
{  border: 2px;}
Con la palabra border podemos indicar que medida o grosor queremos. Border puede aplicarse para el borde en general, pero también podemos especificar si sólo queremos que sea un borde lateral o el borde inferior o superior. Eso se consigue añadiendo a border bottom, top, right o left.

 

Además del grosor border es un campo que tiene muchas posibilidades, podemos elegir un estilo, un color, un degradado… y vamos a ver algunas opciones.

 

Border-Style

Empezando por el estilo del borde, border-style, las posibilidades más utilizadas son:

 

None
Esto lo que hace es quitar el borde en sí. Esta es la opción por defecto, asique de manera normal cuando creamos listas para nuestros menús no aparecerán bordes a menos que nosotros se lo especifiquemos.

 

Solid
Este es el borde que quizá se utilice más. Se trata de un borde continuo, de color negro.

Hidden
O escondido se trata de otra opción en la que nosotros no visualizamos ningún borde, ya que están oculto. Sin embargo a efectos de programación sí que existe. Se utiliza para delimitar los bordes con otras celdas o tablas adyacentes aunque no queramos que se vea un borde grueso.

Ridge
Este borde lo pondremos si queremos que sobresalga sobre lo demás. Hace que el borde parezca que se coloca un nivel por encima del resto en la pantalla.

Outset
Al igual que el anterior se trata de un borde saliente sin embargo este no parece sino que se encuentra un nivel por encima en la superficie de la pantalla de lo que lleva dentro.

Groove
Al contrario que ridge con este estilo de borde parece que el elemento está hundido por debajo del resto.

Inset
Del mismo modo que Groove este borde no parece que esté hundido sino que realmente lo está un nivel por debajo de lo demás.

Dotted
Con este estilo generamos un borde formado por una línea de puntos, negros por defecto, y espacios.

Double
Como dice la propia palabra se trata de un doble borde, formado por dos línea contínuas negras separadas por un espacio.

 

Dashed
Esto es un tipo especial de borde parecido al dotted solo que los puntos se convierten en rayas más grandes, es decir es una especie de línea discontínua.

 

Al igual que con border, con border-style podemos elegir definir el borde de un lateral, los dos, el límite superior, el inferior o todos. Si únicamente escribimos un valor, éste se pone en todos los bordes, y si escribimos en vez de una dos opciones, la primera es para los bordes de arriba y abajo y la segunda para los laterales.

 

Ahora bien, con esto hemos definido el borde, el tamaño y el estilo, sin embargo el menú nos sigue quedando muy simple y poco bonito visualmente hablando. Podemos querer menús verticales, como se crean por defecto, pero si queremos que sean horizontales tenemos que agregar la palabra reservada float para que cada elemento de la lista se coloque al lado del siguiente.

 

Explico esto con un poco más de detalle, cada elemento de la lista que hemos codificado con “li” tiene por defecto el comportamiento de elemento de bloque, es decir, después de situarse genera un salto de línea e impide que otro elemento se coloque a su lado. Si queremos colocar cada elemento de nuestra lista al lado de la anterior debemos eliminar este comportamiento de bloque.

 

Para ello el código sería el siguiente:

#menu
{
   list-style: none;
   margin: 0px;
   padding: 0;
}

#menu li
{
   margin: 2px;
   padding: 2px;
   border: 2px solid;
   float: left;
}
Con esto generamos un menú y le ponemos las características básicas de margen y relleno a 0 y sin borde, y después a cada elemento encerrado en un li dentro de nuestro menú le ponemos otras características, 2px de margen y relleno, 2 px de borde sólido y que flote a la izquierda, es decir, que a su derecha se puede colocar el siguiente elemento.
De esta manera ya tenemos nuestro menú en horizontal.

 

Ahora si queremos que nuestra lista haga las veces de menú y nos redirija a donde queramos tenemos que agregarle vínculo a nuestros elementos. Esto es muy sencillo. En nuestro código en el Html añadimos lo siguiente:

<ul id="menu">
   <li><a href="#">Primer elemento</a></li>
   <li><a href="#">Segundo elemento</a></li>
   <li><a href="#">Tercer elemento</a></li>
</ul>
De esta forma cada elemento saldrá subrayado y funcionará como un link que nos lleva a dónde queremos ir.

 

Por último veremos algunas de las opciones para el aspecto.

 

Propiedades del texto

Width
Si queremos poner una anchura fija. Por ejemplo width: 100 px;

Text-decoration
Si queremos que el texto de nuestro elemento esté decorado de alguna manera. Hay muchas posibilidades pero algunas de las más comunes son:
  • underline: si queremos que todo esté subrayado
  • overline: igual que underline pone una línea en todo el texto, pero esta vez en vez de por debajo por encima.
  • blink: Crea un texto que brilla, que parpadea como una luz de manera intermitente.
  • line-through: Escribiremos esta opción si queremos que nuestro texto se encuentre tachado.
  • none: esto es una redundancia ya que por defecto el texto viene con este valor, sin ningún tipo de decoración. Sin embargo, a veces nos resultará útil si queremos volver a la opción inicial después de haber utilizado algún efecto utilizando un recurso llamado hover que veremos a continuación.

 

Text-align
Es la dirección en la que se va a publicar el contenido de nuestros elementos de bloque, ojo, no del texto en sí, que veremos después con la propiedad direction. Las opciones son muy sencillas: left si queremos que vaya de izquierda, right si al revés queremos que vaya de derecha a izquierda, center si queremos que el texto quede centrado y justify si queremos que el texto quede de manera justificada.

 

Direction
Con esta opción sí que vamos a definir la dirección del texto que escribamos, en este caso sólo hay dosopciones:
  • ltr: que es la que aparece por defecto en los navegadores, ya que exceptuando algunos idiomas en los que se escribe de derecha a izquierda, lo habitual es la escritura de izquierda a derecha, que es la que define esta opción.
  • rtl: es la otra direccionalidad posible del texto, de derecha a izquierda que utilizaremos si queremos escribir textos árabes por ejemplo.

 

Text-indent
Que proviene de indentación o tabulación es una propiedad que se encarga de establecer dicho criterio en la primera línea de nuestros elementos de bloque, y también en tablas. Hay tres opciones:
  • medida
  • porcentaje
  • inherit

 

En ellos si utilizamos porcentaje estaremos haciendo referencia a la anchura del elemento en el que se encuentra.
También en todos ellos podemos utilizar cifras positivas o negativas de cualquiera de las unidades de medida que existen para css3, pixels, ems…

 

Text-transform
Última propiedad relacionada con el texto que veremos que tiene que ver con las mayúsculas y minúsculas:
  • capitalize: con esta opción se mostrará en mayúsculas sólo la primera letra de cada palabra.
  • uppercase: muestra todo el texto al completo con mayúsculas.
  • lowercase: muestra todo el texto al completo con minúsculas.
  • none: deja el texto tal cual se ha escrito. Es el que viene por defecto.

 

Word-spacing
Aunque no trata del texto directamente, lo hace sobre el espacio que dejamos entre palabras. Sus valores pueden ser “normal” o una medida válida. Si ponemos una medida, el valor de la misma se añade a la medida normal que es la que viene por defecto.

 

Ahora vamos con las propiedades de la fuente.

 

Propiedades de la fuente

Font
Esta propiedad es la más completa de todas las relacionadas con la fuente, y tiene varias opciones a la hora de utilizarse. En primer lugar puede empezar con uno, dos, tres o ninguno de los valores “font-style”, “font-variant” y “Font-weight”.

 

Después tenemos que poner obligatoriamente el tamaño de la letra con “font-size” seguido opcionalmente por el interlineado que se da con “line-height” y acabando siempre con el tipo de familia de la fuente “font-family”. Por último habrá que poner uno de los valores siguientes:

  • caption: para botones o listas desplegables, es decir, para los controles y los campos de formularios.
  • menu: si vamos a configurar menús desplegables u otros tipos de menús.
  • icon: para los textos que se muestran debajo de los iconos.
  • message-box: para los cuadros de diálogo, ya sea ventanas emergentes de error, de información, etc.
  • status-bar: para las barras de estado de las ventanas.
  • small-caption: para campos y controles de formularios pequeños.

 

En la propiedad font hemos utilizado algunas otras opciones que aun no hemos visto y que explicaremos a continuación:

 

Font-style
Con ella definiremos el estilo de letra. Los valores que puede tener son “normal”, que es el que viene por defecto, “italic” si queremos que nuestra letra sea itálica, es decir, cursiva; u “oblique” si queremos tener la letra oblicua, que es una especie de cursiva donde solo se inclinan los caracteres y no todos como en la itálica.

 

Font-variant
La utilizaremos para establecer las variantes de los tipos de letra y únicamente tenemos dos opciones, la “normal” que es la que viene por defecto, y la variante “small-caps” también llamada versalita que genera que las letras mayúsculas se vean del mismo tamaño que las minúsculas.

 

Font-weight
Se trata de una de las propiedades más utilizadas ya que con ella podemos controlar el grosor de las letras (ojo, que no es lo mismo que el tamaño de cada letra que veremos después). Numéricamente hablando tiene 9 opciones que son las centenas desde el 100 hasta el 900, es decir, 100, 200, 300, 400, 500, 600, 700, 800 y 900. También hay valores escritos, el “normal” que se equipara al 400, “bold” que se corresponde con el 700 y que es el nosotros llamaríamos negrita y que curiosamente no aparecía en font-style sino aquí. También están los valores “bolder” o “lighter” y a veces otros como “médium” o “heavy” que se asignan a valores numéricos dependiendo el número de grosores que posea dicha fuente.

 

Font-size
Con esta propiedad si controlaremos el tamaño de la letra. Hay cuatro valores disponibles, “absolute-size”, “relative-size”, “unidad de porcentaje” y “unidad de medida”. Hay bastantes unidades de medida absolutas y relativas definidas en css como em, que es la más utilizada en esta propiedad, ex, px, %, in, cm, mm, pt, o pc. Además de dichas medidas hay algunas palabras que funcionan y se pueden utilizar como xx-small para lo más pequeño, x-small, small, medium, large, x-large o xx-large para el más grande. Estas seis palabras se corresponden a los tamaños de las diferentes etiquetas de título de html de <h1> a <h6> y se trata de tamaños de medida absolutos, por lo que siempre se verán igual independientemente del navegador o de la resolución de la pantalla. Las palabras “smaller” y “larger” también se pueden utilizar como medidas relativas que dependerán del tamaño de letra del elemento que lo contiene.

 

Line-height
Ya se definió en las propiedades del texto.

Font-family
Propiedad muy utilizada que nos permite elegir el tipo de letra o fuente. Primero ponemos el nombre de la fuente, o el tipo de letra, y opcionalmente puede ir seguido de otros nombres de fuente por si nuestro navegador o sistema no posee la primera o no la soporta. No hay un tipo de fuente por defecto, ya que depende de nuestro navegador, aunque una muy habitual es “Times New Roman”. Algunos valores genéricos de tipos de fuentes pueden ser “serif” donde se incluyen algunos tipos como Times New Roman, Garamond, Georgia o Cambria; “sans-serif” y sus tipos Verdana, Arial, Tahoma, Helvetica o Futura. “Monospace” y sus ejemplos Courier New o Monaco entre otras. Y “fantasy” con los tipos Comic sans o Impact. Por supuesto hay muchos más tipos de letras que podemos elegir.

 

Letter-spacing
Con esto podremos controlar el espacio entre las letras, y funciona exactamente igual que su análoga word-spacing de las propiedades del texto, con los valores “normal” y una medida válida.

 

Color
Por último veremos la propiedad del color que queremos poner a nuestro texto. Por defecto es el negro. Hay varias maneras de elegir el color, una de ellas es mediante las 17 diferentes palabras de colores que hay que son: aqua, black, red, yellow, blue, fuchsia, Green, lime, orange, gray, maroon, olive, navy, purple, silver, teal y white.

 

Otra opción es poner un color de RGB porcentual, esto simplemente es especificar tres porcentajes correspondientes a los colores rojo ®, verde (G) y azul (B):

color: rgb(22%, 76%, 14%); (Los 3 porcentajes no tienen que dar un 100%)
Otra forma es mediante RGB decimal que funciona exactamente igual que el RGB porcentual pero en vez de poner tres valores en porcentaje se ponen como valores decimales:
color: rgb(114, 29, 54);
De igual modo podemos elegir que nuestro RGB sea hexadecimal:
color: rgb(#23A556);

 

Con estas opciones ya podemos divertinos un buen rato cambiando y probando los diferentes estilos, colores y fuentes.

¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo
  • -
  • 0
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado dic 13 2015 19:35
  •   Actualizado dic 17 2015 21:07
  •   Visitas 2.9K
  •   Nivel
    Profesional



Tutoriales Relacionados


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
Demuestra que eres experto!
  ESCRIBIR TUTORIAL
Suscribirse