Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS
Code

10 Técnicas CSS Desafiantes Pero Increíbles

by
Difficulty:IntermediateLength:LongLanguages:

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

La mayoría de los diseñadores y desarrolladores web sólo arañan la superficie del potente lenguaje que es CSS. En términos de lenguajes de programación, CSS tiene una curva de aprendizaje bastante simple. Eso no significa que el CSS no sea un lenguaje poderoso. A veces son las pequeñas cosas que hacen una gran diferencia en el diseño de un sitio web.

En este post vamos a describir 10 impresionantes técnicas CSS para desarrolladores web que conocen lo suyo.

Existe una gran cantidad de técnicas de CSS y hacks por ahí para los diseñadores que comienzan. Todo el mundo sabe sobre los trucos de rutina como:

Estos trucos sencillos son muy buenos y muy importantes, pero hoy vamos a ver algunas técnicas de CSS que son un poco más desafiantes. No son las técnicas comunes y corrientes que usted enseñaría a un principiante de CSS. Estos 10 trucos son un poco más difíciles, pero si se hacen bien pueden añadir algo extra especial a su diseño de sitio web.


1. Enfoque y Desenfocando Elementos de Menú

burring menu items

Vamos a empezar las cosas con una técnica que no es demasiado avanzada, para que podamos calentar. El enfoque y el desenfoque de elementos del menú de navegación es una forma poderosa de añadir atención al elemento seleccionado. Esta técnica es diferente de los cambios de imagen tradicionales porque, en lugar de cambiar el estado del elemento suspendido, cambia los elementos que no están seleccionados.

En el núcleo de este efecto es un rollover simple, usando una imagen para cada uno de los enlaces. Cada imagen es de 600px de ancho, con 3 estados diferentes: estático, activo y rodado.


Un ejemplo de la imagen del elemento de menú

Esto hará que cada botón de navegación 200px de ancho, de modo que cuando se pase el crursor por un botón, cada otro elemento de navegación se moverá -200px para cambiar su imagen de fondo. Es un efecto ingenioso que es muy diferente a la mayoría de los menús de navegación basados ​​en rollover.



2. Rollovers Ilustrativos de Menú

Diseños basados ​​en ilustraciones son la última tendencia en el diseño web, y por buenas razones. Una ilustración hermosa puede ser una disposición web muy atractiva. Sin embargo, algunas veces los diseños ilustrados tienen dificultades para mostrar animaciones en las páginas, ya que la mayor parte del diseño se basa en imágenes. Podemos usar un poco de CSS en la navegación para animar la ilustración.

WebDesignerWall tiene un excelente tutorial que no sólo le muestra cómo agregar animación a la navegación, sino también cómo crear todo el sistema de navegación en Photoshop. El producto final es un sistema de navegación lúdico y vibrante que hace que el diseño sea mucho más realista y atractivo. La parte difícil de seguir el ejemplo no es trabajar con el CSS, sino hacer los cambios en Photoshop para que los rollovers aparezcan conectados.



3. Ajustes Avanzados de Tipografía con CSS

La tipografía a veces se pasa por alto en un CSS. Sin embargo, usted puede hacer muchas cosas creativas al texto simplemente agregando algo de CSS. Por ejemplo:

Reflexiones

Puede saltarse el javascript e ir directamente al CSS para hacer reflexiones dentro del texto. Por supuesto, no parece tan elegante como la solución javascript, pero tiene potencial para ser bastante agradable.

Titulares Fluidos

Puede crear titulares ingeniosos que fluyan juntos utilizando un espaciado de letras bajas para el primer carácter dentro de un span. Nota: No todas las combinaciones de caracteres se ven fantásticas.

Caracteres Sueltos

Incluso puede crear caracteres sueltos (ve la "g"?) Utilizando una altura de línea baja y un borde inferior.

Puedes ver muchas otras técnicas avanzadas de CSS para texto en el blog 3.7Crea.tv.


4. Columnas Resaltadas Dinámicamente en Tablas

Crazy Egg tiene un diseño increíblemente intuitivo para su página de registro. En lugar de hacer que el usuario haga clic en otra página para iniciar el proceso de registro, Crazy Egg utiliza CSS y un toque de javascript para hacer que la columna de la tabla se deslice perfectamente hacia la izquierda mientras que un formulario de registro aparece en lugar de las otras columnas. Muy práctico si usted está deseando que el visitante inicie al instante el proceso de registro, todo dentro de un espacio muy pequeño.

Mientras que las tablas son algo que a los diseñadores modernos les gusta evitar, pueden ser perfectas para organizar gran cantidad de datos. Las tablas de precios son un gran lugar para utilizar tablas, y hacerlas más interesantes sin duda ayuda a la experiencia del usuario.

Ask the CSS guy tiene un excelente tutorial que replica el código, con un ejemplo en vivo y una fuente descargable.



5. Variables Dinámicas en CSS

CSS no es realmente un lenguaje tan poderoso por sí mismo. Claro, usted puede hacer toneladas de trucos ingeniosos con él, pero sigue siendo sólo un lenguaje de estilo. Usted no puede almacenar variables ni hacer otras cosas que los lenguajes dinámicos como PHP pueden hacer. Sin embargo, usted puede utilizar lenguajes dinámicos para generar CSS, dándoles variables dinámicas.

Mediante el uso de la función header() en PHP, es posible que PHP imprima CSS. Puede utilizar diferentes matrices para mostrar diferentes bits de estilos CSS. Por ejemplo, aquí hay un esquema de color por defecto en CSS, sacado por medio de PHP:

Y aquí hay un esquema de color alternativo:

Si usted quisiera mostrar un esquema de color alternativo, basta con alternar entre $persistent y $alternate1 para intercambiar los estilos.

Eche un vistazo al tutorial completo en Digital Web Magazine para una explicación más detallada del cambio de estilo dinámico con CSS y PHP.



6. Citas Emergentes con CSS

Emerger citas a partir del texto de una página web es una gran técnica de diseño que puede agregar un buen elemento de estilo a un sitio web. Muchas revistas, libros electrónicos y otras publicaciones en línea utilizan citas para separar un poco del texto más importante para que el ojo del lector se vea atraído por él. Las citas son esencialmente un pedazo de caramelo visual para el lector. Aquí hay algunas maneras un diseñador podría hacer emerger citas del artículo.

Manualmente

El diseñador podría hacer manualmente una div adicional que se parecía algo así:

Con un estilo que se viera aquí:

con cualquier otro estilo que pueda ser necesario. Hacer manualmente una div adicional no es una gran idea porque toma más tiempo y agrega contenido duplicado a la fuente.

Javascript

También puede utilizar javascript para extraer citas del texto. Mientras que esto elimina el problema de contenido duplicado y no requiere que codifique otra div, usted todavía tiene que incluir un poco de javascript.

Designmeme tiene un tutorial excelente sobre cómo extraer citas usando sólo un poco de CSS y el pseudo elemento CSS 2 :before para mostrar una cita.

Aquí está la clase pullquote:

Junto con la pseudo clase :before

Ahora cada vez que usted tiene un párrafo con la clase "quote", cualquier texto que ponga en el atributo de título aparecerá en un cuadro de cita (con comillas rizadas).

Puede leer el resto del excelente tutorial para extraer citas CSS en Designmeme.


7. Cambiar Estilos Basados ​​en la Hora del Día

Cambiar la apariencia de su sitio web en función de la hora del día no sólo es una forma divertida de agregar profundidad a su diseño, sino también una forma de personalizar la experiencia del visitante. Hasta ahora hay dos maneras de lograrlo con CSS: Por javascript o PHP (o algún otro lenguaje dinámico).

Ambos enfoques hacen esencialmente lo mismo, con algunas pequeñas diferencias. Mediante el uso de javascript puede utilizar el tiempo del visitante para mostrar la hoja de estilo apropiado. (Si desea utilizar el tiempo de su servidor, utilice la versión de PHP).

Aquí está el código javascript de katgal que cambia la hoja de estilo cada 3-4 horas, basado en el tiempo del usuario.

Utilizando este método puede mostrar diferentes hojas de estilo

  • De 5 am a 8 am
  • De 8 am a 12 pm
  • De 12 pm a 3 pm
  • De 3 pm a 6 pm
  • De 6 pm a 9 pm
  • De 9 pm a 5 am

8. Cambiar los Estilos CSS en Base al Clima

Cambiar la apariencia de su sitio web en función de la hora del día es muy sencillo en comparación con la capacidad de cambiar la apariencia de su sitio basado en el clima. CSS-Tricks tiene un tutorial increíble que muestra cómo formar un diseño basado en las condiciones climáticas actuales de Yahoo! Weather.

Mediante el uso de un poco de trucos CSS y PHP, el tutorial muestra cómo cambiar las clases del diseño basándose en el clima. Simplemente cree un estilo (el ejemplo muestra una imagen de encabezado) que se correlacione con las condiciones meteorológicas apropiadas. Utiliza una hoja de estilo como esta

y estando ahí llama la condición meteorológica a través de PHP/XMl. Este fragmento de PHP se utiliza en el diseño para mostrar la clase de clima adecuada.



9. Impresión de Páginas Perfecta con CSS

Una característica pasada por alto en el sitio web es el vínculo "imprimir este artículo". Hay muchas personas que utilizan Internet que todavía les gusta imprimir los artículos útiles y almacenarlos en forma de papel. Para poder hacer esto, necesita usar saltos de página CSS/XHTML.

David Walsh tiene un excelente código que muestra el CSS que se necesita para hacer saltos de página eficaces en páginas impresas.

Y luego para usar el código, añada <div class="page-break"></div> siempre que necesite romper la página, así:

David también da algunos geniales ejemplos de lugares para agregar saltos de impresión en la página.

  • Entre secciones de página (etiquetas h2 o h3, dependiendo del formato de su sitio)
  • Entre el final de un artículo y comentarios / trackbacks subsecuentes
  • Entre largos bloques de contenido

Relacionado

Echa un vistazo a algunos de los artículos de David sobre cómo hacer que su sitio más compatible con la impresora.


10. Gráficos de barras CSS

Los gráficos de barras crean una buena imagen visual para un grupo de estadísticas de otro modo aburridas. Apples to Oranges ha encontrado una manera de mostrar con precisión los gráficos de barras con CSS solamente. Es una solución elegante para lo que tendría que ser de otra manera ser codificado o hecho con javascript.

El pensamiento básico detrás del tutorial es que usted crea una clase como .graph

y la muestra así:

La única parte "fluida" del ejemplo es añadir el estilo = "24%" a la instrucción <strong>. Cualquier porcentaje habría mostrado correctamente el gráfico correcto. Simple y elegante.

Hay muchos ejemplos más complejos de la creación de gráficos de barras de CSS en el blog Apples to Oranges, si se siente con ganas de aventurar.

  • Suscríbete al Feed RSS de NETTUTS para obtener más tutoriales y artículos sobre desarrollo web a diario.

Glen Stansberry es un desarrollador web y blogger que ha luchado más veces de lo que él desea admitir con CSS. Usted puede leer más consejos sobre el desarrollo web en su blog Web Jackalope.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.