Currently browsing: CSS

Crea un menú desplegable usando sólo CSS

Beware: This post was published 7 years ago and its content may be outdated.

Es habitual encontrar menús desplegables (drop down menus) en muchos sitios webs, y estos nos permiten acceder a las subpáginas de cada sitio de forma más rápida y nos ahorran el tiempo de cargar la página padre para ir a la hija. Es frecuente que estos menús usen Javascript para funcionar, y con él logran unos efectos bastante atractivos, pero para lograr un menú más accesible a aquellos que no puedan usar Javascript, podemos sustituirlo por CSS.

El HTML

Antes de meternos en el CSS, tenemos que decidir cómo será el HTML de nuestro menú desplegable. Yo he optado por crear una lista desordenada (<ul>), ya que es el sistema que más se suele usar, y que podemos encontrar, por ejemplo, en WordPress.

El aspecto de nuestro menú será este:

<ul id="dropdownmenu">
<li><a href="#">Link 1</a></li>
<li>
<a href="#">Link 2</a>
<ul>
<li><a href="#">SubLink 2.1</a></li>
<li><a href="#">SubLink 2.2</a></li>
<li><a href="#">SubLink 2.3</a></li>
</ul>
</li>
<li>
<a href="#">Link 3</a>
<ul>
<li><a href="#">SubLink 3.1</a></li>
<li><a href="#">SubLink 3.2</a></li>
</ul>
</li>
<li><a href="#">Link 4</a></li>
<li>
<a href="#">Link 5</a>
<ul>
<li>
<a href="#">SubLink 5.1</a>
<ul>
<li><a href="#">SubLink5.1.1</a></li>
<li><a href="#">SubLink5.1.2</a></li>
</ul>
</li>
<li><a href="#">SubLink 5.2</a></li>
</ul>
</li>
</ul>

El menú tiene 5 links principales, de los cuales el segundo link tiene tres sublinks, el tercero tiene dos sublinks y el quinto tiene dos sublinks de los cuales el primero tiene dos subsublinks.

El CSS

Voy a explicar un poco la lógica del menú. En principio el menú sólo tiene que mostrar los cinco links principales (links padres). Los demás deberían estar ocultos. Al pasar el cursor sobre un link padre, deberían mostrarse sus links hijos. Al pasar el cursor sobre uno de estos hijos, debería mostrarse sus hijos, y así sucesivamente.

Comenzaremos reseteando un par de estilos para que el menú quede mejor y haciendo que el menú principal sea en horizontal.

body, ul, li {
margin:0;
padding:0;
}
ul {
list-style:none;
display:inline-block;
}
ul li {
float:left;
}

Ahora daremos un poco de estilo al menú principal. Esta parte se puede modificar para que el menú quede al gusto de cada uno y se adapte mejor al diseño del lugar donde va a estar.

ul#dropdownmenu {
margin:none;
list-style:none;
height:40px;
width:100%;
background:#3b3b3b;
}
ul#dropdownmenu li {
height:40px;
}
ul#dropdownmenu li a {
display:block;
padding:8px;
height:24px;
color:#FFF;
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:18px;
text-decoration:none;
}
ul#dropdownmenu li a:hover {
background:#CCC;
}

Ahora tenemos que ocultar los sublinks y hacer que sólo se muestren cuando se pasa el cursor sobre el link padre. Esto lo haremos usando el selector :hover.

ul#dropdownmenu li ul {
display:none;
}
ul#dropdownmenu li:hover ul {
display:block;
background:#999;
position:absolute;
}

Continuamos añadiendo algo de color a los sublinks:

ul#dropdownmenu li:hover ul li {
float:none;
position:relative; /* Gracias por el consejo, Álex */
background:#999;
}

Finalmente, ocultamos los links nietos (hijos de los hijos), usando la misma técnica que antes. Lo único que cambia es que añadimos la propiedad top y left para que los links aparezcan a la derecha y no debajo (si aparecen debajo se superponen a los siguientes links hijos).

ul#dropdownmenu li ul li ul, ul#dropdownmenu li:hover ul li ul {
display:none;
}
ul#dropdownmenu li:hover ul li:hover ul {
display:block;
top:0;
left:100%;
}

Con esto ya tenemos el menú completado. Este menú permite añadir tres niveles de links (padres, hijos y nietos), aunque se puede modificar para que funcione con todos los niveles que se necesiten.

Descarga y demo

Como es costumbre, he preparado una pequeña demo del menú desplegable para que podáis comprobar el resultado.

También está disponible la misma demo en un archivo comprimido para que la descarguéis si tenéis problemas con el tutorial.

Añade una línea separadora entre cada artículo

Beware: This post was published 7 years ago and its content may be outdated.

Vía el formulario de contacto, Omar me ha preguntado cómo añadir una línea para separar cada artículo del siguiente en WordPress. He pensado que es un tutorial interesante, así que a continuación explico cómo hacerlo.

Vamos a modificar el theme Default, y los archivos que modificaremos serán el index.php y el style.css.

Abrimos el primero y nos situamos entre las lineas 13 y 26. En estas líneas se encuentra el bucle encargado de mostrar los artículos de la página de inicio. El código que encontramos es el siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> |
 <?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

</div>

<?php endwhile; ?>

El código es sencillo:

  • La primera y la última línea inician y concluyen el bucle (respectivamente).
  • La línea 15 comienza la capa (div) que contendrá el artículo.
  • La 16 muestra el título del artículo.
  • La 17 muestra la fecha.
  • La línea 18 está en blanco.
  • La 19 comienza la capa que contiene el texto del artículo.
  • La 20 muestra el contenido del artículo.
  • La 21 cierra la capa abierta dos líneas más arriba.
  • La línea 22 está en blanco.
  • La 23 muestra los tags del artículo, la categoría en la que está incluído, el link para editarlo (sólo usuarios con permisos adecuados) y por último el número de comentarios.
  • La 24 cierra la capa abierta en la línea 15.
  • La línea 25 está en blanco.

Ahora tenemos que decidir dónde poner la línea separadora. Yo he decicido añadirla después de la línea 23, pasados los links referentes a las tags, las categorías y los comentarios.

Así que vamos a la línea 24 y añadismos una nueva línea, en la que escribimos:

<hr class="separator" />

Con esto tendremos un código similar al siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

<hr class="separator" />
</div>

<?php endwhile; ?>

Si entramos ahora al blog, podremos ver una línea que separa cada artículo, pero esta línea no es demasiado bonita, y debemos darle algo de estilo y aquí es donde entra en acción el archivo style.css.

Abrimos el archivo style.css y nos situamos al final del mismo, donde añadimos el siguiente código:

hr.separator {
border:none;
border-top:1px dashed #9E9E9E;
}

Este código CSS afectará sólo a los elementos hr con clase separator, así que sólo modificará el estilo de la línea separadora.

Y así tenemos una bonita línea separadora, para añadirla a cualquier theme basta con seguir los mismos pasos, siempre teniendo en cuenta en lugar donde añadir la línea.

Por último, podéis descargar el theme Default modificado directamente desde aquí, por si tenéis problemas con el tutorial.

Sustituyendo CSS3 por jQuery

Beware: This post was published 7 years ago and its content may be outdated.

Ayer en Anieto2k se publicó un interesante artículo sobre algunas técnicas y propiedades de CSS3 que se pueden conseguir con jQuery.

Para los que no estéis al tanto del asunto, el principal problema de CSS3 es que no todos los navegadores lo soportan, y entre los que sí lo hacen, no todos soportan todas las funciones que nos trae CSS3. Por eso actualmente no es viable usar únicamente CSS3 para nuestros diseños, ya que muchos usuarios no podrán ver el resultado final como debería.

Y aquí es donde entra jQuery, que mediante javascript (un código que sí que ejecutan la mayoría de los navegadores, por no decir todos) obtiene unos resultados similares a los que conseguiríamos con CSS3.

Dale un nuevo estilo a tus formularios

Beware: This post was published 7 years ago and its content may be outdated.

Alguno elementos de los formularios son más complicados de modificar a nuestro gusto que otros (por ejemplo, las casillas de verificación o las listas desplegables), y a veces no quedan como nos gustaría que quedasen y no se adaptan a nuestros diseños.

Una solución para este problema es la que nos proponen en ryanfait.com, con la que mediante un poco de Javascript y CSS podemos dar un toque especial a nuestros formularios.

Si queremos darle un nuevo estilo al formulario, tendremos que descargar este archivo js, e incluirlo en la página del formulario.

También hay que añadir este código CSS:

span.checkbox {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(checkbox.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.radio {
width: 19px;
height: 25px;
padding: 0 5px 0 0;
background: url(radio.gif) no-repeat;
display: block;
clear: left;
float: left;
}
span.select {
position: absolute;
width: 158px;
height: 21px;
padding: 0 24px 0 8px;
color: #fff;
font: 12px/21px arial, sans-serif;
background: url(select.gif) no-repeat;
overflow: hidden;
}

Lo último es descargar las imágenes de las casillas de verificación, los radiobutton (no se me ocurre ninguna buena traducción… ¿botones de radio? ¿botones circulares?) y las listas desplegables.

Para aplicarlo basta con añadir class=”styled” a los elementos que queremos darle ese nuevo estilo, mientras que dejamos como antes los que no queremos modificar.

Podéis descargar un pequeño formulario de prueba que he creado. Es muy básico, pero se puede ver con facilidad cómo se aplica.

Espero que os resulte útil.

Estilos CSS para los comentarios de WordPress 2.7

Beware: This post was published 7 years ago and its content may be outdated.

Vía anieto2k descubro los estilos CSS básicos para diseñar los comentarios en WordPress 2.7.

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Aunque el CSS está vacío, nos puede servir de base para diseñar los comentarios y así evitar tener que crear nuestra propia función personalizada.

Nota mental: A ver cuándo me pongo a arreglar los comentarios del blog… siempre se me acaba olvidando.

Haz gráficos con CSS

Beware: This post was published 7 years ago and its content may be outdated.

Leyendo a Andrés Nieto he descubierto 8 técnicas CSS para mostrar gráficos, recopiladas por los redactores de Sex Revisions:

  1. CSS for Bar Graph
  2. Accesible data visualization with Web Standars
  3. CSS Vertical Bar Graphs
  4. Creating a Graph Using Percentage Background Images
  5. Pure CSS Data Chart
  6. CSS Scatter Plot
  7. Definition List Bar Chart
  8. Accessible Bar Chart

Espero que os sirvan de ayuda, aunque si preferís hacer gráficos sin usar CSS ni imágenes, siempre podéis usar Open Flash Chart, del que espero hablar algún día de estos…