Categoría: CSS

Valencia, 09/04/2014, G.B.
Hace algunos días un amiguete me pidió que le indicara algún plugin de WordPress para crear botones de forma sencilla y que fueran ‘aparentes’. Yo he utilizado un par de plugins de botones para WordPress, pero no me acordaba en ese momento de cómo se llamaban, así que realicé una búsqueda de plugins desde el Escritorio de WordPress y encontré en primer lugar este: Standout CSS3 Buttons. Lo instalé, lo probé y realmente me convenció del todo; a mi amigo también.

Una vez instalado y activado, podréis acceder a la configuración del plugin a través de Ajustes ->Standout CSS3 Buttons. En la página de configuración podréis elegir entre varias opciones y apariencias.  Pero a la hora de utilizarlo, tendrás que escribir un shortcode en la página o entrada en la que quieras que aparezca el botón. Dentro del shortcode tienes parámetros sencillos como la URL o dirección web a donde quieres que envíe el botón al ser pulsado, la etiqueta o label del botón, etc. Eso sí, no es del todo sencillo ver dónde está el shortcode para copiar y pegarlo, personalizándolo con tus parámetros, así que os dejo el código que podéis copiar de la página FAQ del plugin: FAQ de Standout CSS3 Buttons (en el repositorio de WordPress). Es el siguiente:

[standout-css3-button cssclass="button-dribbble" href="http://www.TUSITIO.com/"]
texto que aparece en el botón (PULSAR, CONTACTAR, ETC.)
[/standout-css3-button]

Y este sería el ejemplo, cambiando la URL por la de mi formulario de contacto y el texto del botón por Contactar con KnowHow:

[standout-css3-button cssclass="button-dribbble" href="http://know-how.com.es/contactar/"]
Contactar con KnowHow
[/standout-css3-button]

 Y ahora lo añado:
[standout-css3-button cssclass=”button-dribbble” href=”http://know-how.com.es/contactar/”]Contactar con KnowHow[/standout-css3-button]

Por supuesto, el plugin te permite configurarlo mucho más, como la opción de utilizar un estilo CSS propio,  insertarlo vía código PHP, etc. Un plugin muy recomendable, si lo que estás buscando son botones. Dejo un par de capturas de pantalla más:

CSS Multi-column Layout

Inicio la categoría o sección CSS del blog de INDAGA con un post sobre la creación de textos multicolumna utilizando la última versión de las hojas de estilo o Cascading Style Sheet: (CSS 3), la cual, si no me equivoco, ya soportan la gran mayoría de los navegadores web, menos mal!

Recuerdo que cuando estaba en Hoja Digital –un periódico online ya inexistente y cuyas noticias estaban en formato columnas, emulando al típico periódico de papel-  la maquetación de cada noticia y de todas las páginas la tenía que realizar a través de tablas, lo cual era bastante pesado y difícil de mantener, además de no estar recomendado por la W3C. ¡Qué bien me hubiera venido la maquetación multi-columna automática!

Hoy por hoy podemos crear una páginas o entradas con varias columnas, siendo la hoja de estilos la encargada de maquetarlas de forma automática, utilizando la especificación  de CSS Multi-column Layout. Eso sí, la hoja de estilos debes trabajarla bien antes, pero merece la pena. La propiedad encargada de la creación de las columnas sedenomina column-count. Además, podemos añadir cualquier elemento al bloque, como por ejemplo una imagen, dejando que el texto fluya de manera equilibrada.

Un buen artículo al respecto (y en castellano) y con enlaces a ejemplos lo podéis encontrar en Desarrolloweb.com. Esta es una página de ejemplo en HTML basada en el ejemplo de Desarrollo.web y que me servirá de referencia: multi-columnas.html.

Adjunto también un tutorial sobre CSS3  y una utilidad para generar elementos en CSS 3, respectivamente: Tutorial CSS3 (en inglés) y CSS 3 Generator (en inglés).