45 potentes técnicas de CSS/JavaScript

 

 

 

  • Behavioral Design Workshop, with Susan and Guthrie Weinschenk

  • Índice
    1. Técnicas CSS interesantes
    2. Menús de navegación CSS
    3. Tipografía CSS y texto del cuerpo
    4. Listas CSS
    5. Botones CSS
    6. Botones de forma redondeada
    7. ¡Manténganse al tanto!

    Casi todos los días, los diseñadores y desarrolladores idean trucos y técnicas de CSS novedosos e inteligentes y los comparten con otros desarrolladores en línea. Regularmente recopilamos todos estos trucos, los filtramos, los clasificamos, los revisamos y los preparamos para los lectores de Smashing Magazine.

     

    CSS y JavaScript son herramientas extremadamente poderosas para diseñadores y desarrolladores. Sin embargo, a veces es difícil encontrar una idea excelente que resuelva el problema al que te enfrentas en este momento. Buenas noticias: casi todos los días, los diseñadores y desarrolladores idean trucos y técnicas de CSS novedosos e inteligentes y los comparten con otros desarrolladores en línea.

    Somos conscientes de que muchos lectores están cansados ​​de las “listas” que flotan en la Web, pero estamos seguros de que la gran mayoría de nuestros visitantes se beneficiarán de este formato de publicación y encontrarán útiles al menos algunas de las técnicas presentadas en esta publicación.

    Técnicas CSS interesantes

    Creación de nuevas anotaciones visuales. Estas superposiciones de notas se componen de dos elementos principales, una superposición con brillo y un borde con transparencia. Una técnica muy interesante pero sencilla de la agencia de diseño ZURB, diseñadores que también han escrito una serie de artículos en Smashing Magazine.

    Superposiciones de álbumes de música sexy Este artículo muestra cómo diseñar tus transmisiones de música y te proporciona algunos gráficos para hacerlo.

    Un reloj colorido con CSS y jQuery Este tutorial describe cómo se puede crear un reloj usando CSS y JavaScript básicos.

    Cómo crear cintas 3D profundas y agradables solo usando CSS3 Usaremos box-shadow para crear una sombra paralela con RGBa, un modelo de color que permite un contraste optimizado con cualquier tipo de fondo. RGBa es el modelo RGB estándar (0,0,0 – 255,255,255) y agrega la última opción (a) para la opacidad. Podemos usar este modelo también para otras propiedades y funciona con el nuevo navegador.

    Línea de tiempo avanzada de eventos con PHP, CSS y jQuery Esta línea de tiempo avanzada de eventos se utiliza con la ayuda de PHP, MySQL, CSS y jQuery. El resultado: una bonita línea de tiempo con eventos en los que se puede hacer clic. Agregar nuevos será tan fácil como insertar una fila en la base de datos.

     

    Menús de navegación CSS

    CSS 3D Meninas “Tomé la pintura clásica The Maids of Honor (Las Meninas) y creé un efecto CSS pseudo–3D / Parallax. Es CSS puro, no interviene JavaScript ni Flash. Ha sido probado y funciona en Internet Explorer 8, Firefox 3, Opera 9, Safari 3, Chrome 4 y Konqueror 3.5, y también se valida.

    ¡Brotando! - Crear un menú de miniaturas elástico “En un intento continuo de ofrecer métodos alternativos para mejorar los menús, he creado un menú de miniaturas elástico. Amplía los elementos del menú cuando se pasa el cursor sobre ellos y los elementos del menú se expanden hacia arriba.

    Cómo crear subnavegaciones simples y efectivas con listas de definiciones “Cuando necesitamos una navegación en la página simple y efectiva, ya sea para saltar al contenido de la página o pasar a otra vista, usamos el elemento dl. Sus subelementos, dt y dd, nos facilitan la creación de enlaces en línea con una etiqueta clara. Aquí vamos a compartir con ustedes un método rápido y liviano sobre cómo usaremos CSS para hacerlo”.

    Sticky SideNav Layout con CSS Aprenda a crear un diseño de navegación lateral fijo para su blog o sitio web. Tener un navegador lateral fijo resulta útil cuando se trata de sitios web estilo blog donde el contenido es extremadamente alto y es necesario un buen desplazamiento. La navegación fija permite al usuario navegar por el contenido sin tener que desplazarse hacia arriba para navegar por el resto del sitio.

    Cambiador de páginas desplegable discreto Usar un menú desplegable select para crear navegación no es tan común como lo era antes, pero todavía existe. Se desgarró bastante bien por ser inaccesible/obstructivo. De hecho, muchos de los scripts que encontrarás para crear un menú como este son de esta manera. Gorrón. Hagamos uno que funcione con o sin JavaScript.

    Navegación CSS: no se requiere JavaScript, jQuery ni imagen, navegación/paginación CSS gratuita con información sobre herramientas Barra de navegación/paginación basada en CSS sin JavaScript. Hay información sobre herramientas al pasar el cursor sobre las viñetas de las páginas "anterior" y "siguiente" que facilita la navegación.

    Cómo codificar un menú principal con pestañas superpuestas El menú de navegación principal es la parte del diseño de un sitio web que hace que todo el sitio parezca animado y completo. Pero el tipo más común de estilo de menú de navegación que todavía se usa mucho es el menú de navegación con pestañas. Aquí hay un tutorial sobre cómo codificar un menú con pestañas superpuestas.

    Solución para menús desplegables muy largos “Me gusta tener confianza con los títulos de las publicaciones, pero la realidad en este caso es una posible solución para menús desplegables muy largos. El problema con los menús desplegables largos es que el menú desplegable en sí puede ir debajo del "pliegue" del sitio web. Es decir, debajo del área visible de la ventana del navegador. Entonces, para acceder a los elementos del menú que aparecen a continuación, debe desplazar la ventana de su navegador. Para aquellos de nosotros que tenemos ruedas de desplazamiento de algún tipo en nuestros ratones (¿ratones?), no es gran cosa. Para aquellos que no los tienen, esos elementos del menú inferior son totalmente inaccesibles, porque usar la barra de desplazamiento del navegador significa sacar el mouse del menú (y probablemente cerrarlo)”.

     

    Mega menú desplegable con CSS y jQuery Cuando se usan correctamente, los mega menús desplegables pueden ser bastante eficientes para sitios web de gran escala. Experimentemos con diferentes formas de implementar esta técnica. Un tutorial de Soh Tanaka, autor habitual de Smashing Magazine.

    Tipografía CSS y texto del cuerpo

    Cómo crear un efecto de texto anaglifo genial con CSS Los anaglifos son esas asombrosas imágenes en 3D que se crean compensando dos de los canales rojo, verde y azul, y se ven con esas gafas 3D de aspecto nerd con lentes de diferentes colores. No sé si este efecto funciona de verdad, ya que lamentablemente perdí mis especificaciones 3D, ¡pero de todos modos es un efecto de texto bastante bueno! Echemos un vistazo a cómo se puede crear un estilo similar para mejorar sus diseños web, teniendo en cuenta la semántica y evitando la repetición de cualquier marcado.

    Planificador de trabajo tipográfico Introduzca esto, un pequeño planificador de trabajo tipográfico HTML/CSS. Usando algo de HTML súper semántico y una pizca de CSS, puedes crear un planificador de trabajo hermoso pero increíblemente simple para ti y tu personal.

    Reducir el texto en Webkit (Safari) Safari tiene una forma no tan encantadora de aumentar el volumen del texto mediante la representación de subpíxeles. En versiones anteriores de Safari, esto se solucionó con una declaración de sombra de texto, pero desde Snow Leopard ese método ya no funciona. Afortunadamente, hay una alternativa.

    Pseudo letras mayúsculas, existen desde hace un tiempo y aparecen en revistas, medios impresos y ahora en la web. Tanto los diseñadores como los desarrolladores han experimentado con múltiples soluciones, desde el uso de estilos en línea hasta el uso de reemplazo de imágenes, pero ambas soluciones presentan problemas. Por ejemplo, ¿qué sucede cuando recreas tu sitio y decides que ya no quieres cargar las imágenes con letras capitales? Ahora te quedará una imagen rota al comienzo de cada publicación que habías creado previamente, esto es obviamente, suponiendo que no haya utilizado sangría de texto. Si decidiste seguir la ruta del estilo en línea, entonces eres simplemente malo, muy malo.

    Cómo crear etiquetas previas perfectas Si opera un sitio web que presenta muchos ejemplos de código, sabe lo importante que es dedicar algo de tiempo a diseñar el elemento pre. Cuando no se les da estilo, las etiquetas pre salvajes destrozarán el contenido preformateado y destruirán el diseño de su sitio. Los diferentes navegadores tratan la etiqueta pre de manera bastante diferente, variando mucho en su manejo predeterminado del tamaño de fuente, la representación de la barra de desplazamiento y el ajuste de palabras. De hecho, lograr que su código preformateado luzca consistente, utilizable y elegante en todos los navegadores no es una tarea fácil, pero ciertamente se puede lograr. Este artículo explica todo lo que necesita para crear etiquetas pre adecuadas.

     

    Mejore su tipografía web con el cambio de línea de base La línea de base es una línea invisible sobre la que se ubican todos los caracteres tipográficos, aunque, por supuesto, algunos caracteres (incluidos 'j', 'p', 'g' e 'y') tienen descendentes que cuelgan debajo de la línea de base. . El cambio de línea de base implica mover personajes hacia arriba o hacia abajo en relación con la línea de base y usarlo de manera efectiva puede marcar una gran diferencia en el aspecto profesional de tu tipo. Aunque el cambio de línea de base ha sido tradicionalmente parte del uso de herramientas como InDesign o Quark, hay formas de lograr los mismos resultados usando CSS.

    Tipografía: escala y ritmo Esta página es a la vez un ensayo y una herramienta. Se propone explorar cómo dos conceptos entrelazados, a menudo divertidos pero a veces atrevidos, pueden animarse a bailar en las páginas web. Arrastra los cuadros de colores a lo largo de la escala para lanzar estas palabras de nuevo. En su mayor parte, este texto es sólo un libreto para la interpretación que estás a punto de interpretar. tienda de patinaje

    Citas elegantes con jQuery, AJAX y CSS Aprenda cómo crear un sistema de calificación de citas elegante que mostrará una serie de citas famosas y permitirá a los visitantes del sitio calificar sus favoritas.

    Cómo crear títulos de imágenes simples, elegantes e intercambiables La mayoría de las soluciones de títulos de imágenes requieren mucho HTML excesivo, dificultan el rediseño o no comunican claramente que pertenecen a una imagen. Veamos qué podemos hacer para abordar estos problemas.

    Diseñar títulos de fotos con CSS Claro, algunas fotos se explican por sí mismas, pero la mayoría de las fotos se sirven mejor con títulos de texto. Esto es cierto para los medios tradicionales como periódicos y revistas, e igualmente cierto para las publicaciones de blogs y artículos web. A continuación se ofrece un consejo rápido sobre cómo usar pies de foto y darles un bonito estilo con la magia de CSS.

    Títulos de imágenes en páginas web Este documento sugiere tres formas de presentar una imagen con un título en HTML. También se analiza el estilo en CSS.

    Diseñar encabezados de publicaciones que sobresalgan “Recientemente, he notado una tendencia en los encabezados de publicaciones de blogs donde sobresalen de su diseño base. Me gustaría compartir esta técnica para aquellos que quieran darle un nuevo estilo a los títulos de sus publicaciones. Un consejo a tener en cuenta al diseñar esto es asegurarse de que se ajuste al tamaño de resolución de pantalla de su público objetivo. Tenga en cuenta que esta técnica puede variar según su diseño. Mi objetivo es que comprendas el concepto principal de este tutorial para que puedas experimentar y aplicarlo a tus propios proyectos”.

    Usar puntos suspensivos con HTML y CSS Si el texto es demasiado ancho para caber en un contenedor, una buena solución puede ser tener puntos suspensivos para mostrar que hay más información disponible. Si bien actualmente no forma parte de las especificaciones oficiales de HTML, es posible definir puntos suspensivos en CSS y funciona para Internet Explorer, Safari, Chrome y Opera. No funciona para Firefox, pero hay una solución que se puede hacer con jQuery.

     

    Listas CSS

    Crea un esquema estilo Microsoft Word con CSS Como puedes ver, el navegador no se molesta en variar mucho el estilo de sangría, o cambiar el tipo de lista de números romanos a caracteres alfabéticos y demás… todas las cosas a las que estamos tan acostumbrados ver porque Microsoft Word y otros programas de escritura los hacen de forma predeterminada. ¡Así que usemos un poco de ingenio CSS para hacer un esquema al estilo de Microsoft Word usando listas ordenadas!

    Línea de tiempo CSS pura “Quería crear una línea de tiempo CSS para la sección “Acerca de” de mi sitio mientras usaba un marcado limpio y simple. Quería evitar el uso de imágenes tanto como fuera posible, así que dediqué unos minutos a crear prototipos de algunas opciones y se me ocurrió una solución utilizando listas desordenadas. El resultado es una línea de tiempo simple y limpia con un marcado muy sencillo. En este artículo, compartiré mi enfoque para crear una línea de tiempo a partir de CSS y HTML, lo que da como resultado una línea de tiempo sencilla y atractiva”.

    Numeración automática con contadores CSS Al escribir documentos, suele ser útil numerar secciones y tener una tabla de contenidos. Puede numerarlos a mano, directamente en el marcado, pero esto puede llevar mucho tiempo si el orden cambia y tiene que editar todos los números. CSS2.1 nos brinda una forma automatizada de generar números usando contadores CSS y este artículo le explicará cómo usarlos. Una cosa a tener en cuenta antes de comenzar es que los contadores CSS aún no están implementados en IE, aunque están en la hoja de ruta para IE8.

    Trucos CSS para viñetas personalizadas

    Estilo de calendario elástico con CSS Un calendario tradicional es una cuadrícula de cuadros numerados en una página. Como diseñador web, podrías optar por una mesa y no te culparía por eso. Sin embargo, a veces puede resultar difícil darle forma a las mesas. El purista de CSS que hay en mí se enoja cuando configuro el ancho de una tabla (o una celda) y decide que sabe mejor y crece o se reduce como mejor le parezca. Puedes abordar el estilo del calendario con CSS puro, y creo que tiene tanto sentido semánticamente como una tabla. ¿Qué es un calendario sino una lista ordenada de días? Al usar CSS, incluso podemos hacer algunas cosas interesantes, como ajustar todos nuestros tamaños con ems para que el diseño de nuestro calendario sea elástico. Es decir, crece tanto en ancho como en alto cuando se cambia el tamaño del texto en los navegadores, al tiempo que aumenta considerablemente la accesibilidad.

    Diseñe una lista con un píxel Una imagen de fondo de un píxel puede ser algo bastante versátil. Con repetir–x puede ser una línea horizontal, repetir–y crea una línea vertical y repetir lo convierte en un color de relleno. Solo como una pequeña prueba de concepto divertida, podemos usarla para crear una lista desordenada que parezca un gráfico de profundidad.

    Diseñe su lista ordenada De forma predeterminada, la mayoría de los navegadores muestran los números de la lista ordenada con el mismo estilo de fuente que el cuerpo del texto. Aquí hay un tutorial rápido de CSS sobre cómo usar el elemento de lista ordenada (ol) y párrafo (p) para diseñar una lista numerada con estilo.

     

    Simulación de una tabla usando una lista desordenada Su primera pregunta inmediata podría ser: "¿por qué querría simular una tabla con una lista, por qué no usar simplemente una tabla?" Con el aumento de la popularidad de los elementos de lista ordenables AJAX, el uso de elementos de lista para representar una tabla de datos de varias columnas puede permitir una fácil clasificación de información más "tabley". Entonces empecemos.

    8 formas diferentes de diseñar bellamente tus listas HTML con CSS “El uso de listas HTML (ol para una lista ordenada, ul para una lista desordenada) es muy común hoy en día. Hoy, vamos a ir un poco más allá de la creación de listas normales, mostrando 8 formas diferentes de diseñar bellamente tus listas HTML con CSS. Usaremos algunas técnicas CSS puras para hacer que una lista aburrida se vea increíble (e incluso tenga algunas funciones adicionales)”.

    Consejo rápido: simplifique los márgenes de la lista con CSS. ¿Alguna vez estableciste márgenes predeterminados para un diseño y luego tuviste que regresar y ajustar manualmente todas tus listas? De forma predeterminada, los marcadores de elementos de la lista tienen una posición negativa en relación con el propio elemento de la lista. Esto significa que poner a cero los márgenes conduce automáticamente a un desbordamiento si la lista está contenida dentro de cualquier otra cosa. ¿No sería más fácil colocar el marcador del elemento de la lista en el mismo punto de partida que otros elementos? Por suerte para nosotros, existe un estilo que nos ayuda a lograr precisamente eso. Veamos qué se puede hacer con la list–style–positionpropiedad.

    Trucos atractivos de listas HTML Contempla los omnipresentes elementos de la lista, ul y ol. Estos dos elementos atractivos ayudan a millones de sitios web a mostrar listas de información de forma limpia y semántica. Sin ellos, estaríamos arrastrándonos como sucios cavernícolas, comiendo tierra y aullando a la luna. Pero estos elementos de lista no sólo son atractivos, sino que también son extremadamente flexibles, lo que nos permite a los humildes diseñadores crear configuraciones de lista sólidas que son semánticamente versátiles y altamente personalizables.

    li en el que se puede hacer clic Originalmente codifiqué el marcado para que fuera una tabla, pero descubrí un problema cuando intenté hacer que se pudiera hacer clic en toda la fila. En su lugar, terminé con una lista de artículos.

    Botones CSS

    SimplyB–uttons v2 Esta técnica presenta botones del tamaño que siempre se ajusta al contenido. Hay 3 estados: inactivo, activo y suspendido. La técnica funciona en todos los navegadores principales y no requiere JavaScript.

    Cómo hacer botones atractivos con CSS Este tutorial le enseñará cómo crear botones textuales bonitos (con un estado de pulsación alternativo) utilizando CSS. Los botones dinámicos le ahorran mucho tiempo que de otra manera dedicaría a crear gráficos y básicamente lo convertirán en una persona más feliz al final del día.

    Botones CSS líquidos y de color ajustables Cuando se trabaja en un sitio grande con varios botones, puede resultar bastante tedioso crear todos los botones en Photoshop. Hacer ajustes futuros en la palabrería y los colores también puede llevar mucho tiempo. Al tener botones dinámicos, este escenario es mucho más fácil de manejar, y al tener botones líquidos y de color ajustables con CSS, podemos cambiar la verborrea y los colores en un instante.

    Crear un botón con estados activos y flotantes usando Sprites CSS Demasiados diseñadores descuidan el estado de clic ( active–propiedad en CSS) en el diseño web, ya sea porque no lo conocen, subestiman su importancia o simplemente son vagos. Es un efecto simple que mejora la usabilidad al brindarle al usuario información sobre en qué hizo clic, pero también puede agregar profundidad a un diseño.

    Recreación del botón "Pensé que sería interesante proporcionar una parte de los antecedentes sobre los botones aquí y discutir algunas de las iteraciones por las que hemos pasado hasta ahora para llegar al estado actual".

    Botones de forma redondeada

    Botones sin imágenes de Google Una discusión interesante sobre varias técnicas de diseño de botones para reconstruir los botones sin imágenes de Google.

    ¡Manténganse al tanto!

    Esta es la primera parte de nuestro gran resumen de nuevas técnicas de CSS/JavaScript. No olvide seguirnos en Twitter para artículos similares y un flujo de recursos útiles. ¡Háganos saber también qué deberíamos cambiar o mejorar en nuestras publicaciones futuras!

    También te pueden interesar los siguientes posts relacionados:

    • Aprender JavaScript: conceptos básicos y pautas
    • Siete cosas de JavaScript que desearía saber mucho antes en mi carrera
    • CSS: técnicas innovadoras y soluciones prácticas
    • Nuevas funciones de CSS en 2022

    (lu, il)Explora más en

    • Codificación
    • CSS
    • javascript
    • Técnicas





    Tal vez te puede interesar:

    1. ¿Deberían abrirse los enlaces en ventanas nuevas?
    2. 24 excelentes tutoriales de AJAX
    3. 70 técnicas nuevas y útiles de AJAX y JavaScript
    4. Más de 45 excelentes recursos y repositorios de fragmentos de código

    45 potentes técnicas de CSS/JavaScript

    45 potentes técnicas de CSS/JavaScript

    Behavioral Design Workshop, with Susan and Guthrie Weinschenk Índice Técnicas CSS interesantes

    programar

    es

    https://aprendeprogramando.es/static/images/programar-45-potentes-tecnicas-de-cssjavascript-766-0.jpg

    2024-05-20

     

    45 potentes técnicas de CSS/JavaScript
    45 potentes técnicas de CSS/JavaScript

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20