99 nuevas y poderosas técnicas de CSS y JavaScript

 

 

 

  • Anuncie en la revista Smashing
  • Implemente rápidamente. Implementar inteligentemente

  • Índice
    1. Lecturas adicionales sobre SmashingMag:
      1. Tabla de contenido
    2. Transiciones y animaciones CSS
    3. Técnicas CSS útiles y prácticas
    4. Tipografía y texto con CSS
    5. Efectos de desplazamiento y menús de navegación con CSS
    6. Técnicas Visuales con CSS

    Desde nuestro último resumen de técnicas útiles de CSS , hemos visto un montón de técnicas de CSS realmente notables.

     

    Con CSS3, algunas de las técnicas más antiguas se han vuelto obsoletas, otras se han establecido como estándares y muchas técnicas todavía se encuentran en la etapa de “experimentación loca”.

    Desde el lanzamiento de la publicación anterior, hemos estado recopilando, ordenando, filtrando y preparando una descripción general compacta de nuevas y poderosas técnicas de CSS . Hoy por fin os presentamos algunas de estas técnicas. Úselos de inmediato o guárdelos para consultarlos en el futuro.

    Lecturas adicionales sobre SmashingMag:

    • 50 técnicas de codificación útiles
    • 45 poderosas técnicas de CSS y JavaScript
    • 50 técnicas brillantes de codificación CSS3/JavaScript

    Tenga en cuenta que muchas técnicas no sólo se basan en CSS, sino que también utilizan HTML5 y JavaScript. Presentaremos herramientas CSS útiles y técnicas de diseño responsivo en publicaciones separadas. No dude en comentar esta publicación y háganos saber exactamente cómo los está utilizando en su flujo de trabajo. Sin embargo, evite perder el enlace; En su lugar, comparta sus conocimientos y experiencia y no dude en vincular técnicas que realmente le hayan ayudado recientemente. ¡Gracias a todos los diseñadores y desarrolladores destacados por su fantástico trabajo!

    Tabla de contenido

    1. Transiciones y animaciones CSS
    2. Técnicas CSS útiles y prácticas
    3. Tipografía CSS y técnicas de texto
    4. Menús de navegación CSS y efectos de desplazamiento
    5. Técnicas visuales con CSS

    Transiciones y animaciones CSS

    Las transiciones y animaciones CSS se utilizan a menudo para hacer que la experiencia del usuario sea un poco más fluida e interesante, especialmente cuando se trata de efectos interactivos al pasar el cursor o al hacer clic. Los diseñadores están experimentando con la tecnología y crean técnicas a veces locas, a veces prácticas, pero a menudo innovadoras que podrías utilizar para hacer que tus sitios web sean un poquito más atractivos.

     

    Efectos de iluminación CSS3 interactivos Un efecto interesante para crear efectos de iluminación interactivos con transformaciones 3D, degradados CSS y máscaras; la sombra proyectada se creó utilizando sombras de cuadro y transformaciones.

    Dodecaedro CSS3 Un elegante experimento de dodecaedro, creado usando transformaciones CSS y un pequeño fragmento de JavaScript.

    CSS 3D Lighting Engine Photon Nuestro editor Tom Giannattasio ha creado una biblioteca JavaScript que agrega efectos de iluminación simples a elementos DOM en el espacio 3D utilizando el objeto WebKitCSSMatrix. También sería fantástico tener una implementación para otros motores de renderizado.

    Efectos de desplazamiento de miniaturas 3D con CSS Esta técnica produce efectos de desplazamiento de miniaturas 3D con transformaciones CSS 3D. El código es bastante detallado y probablemente podría optimizarse, pero el efecto es bastante bueno.

    Deslizar cuadros de imagen Una técnica para crear un efecto de "deslizar" para cuadros al pasar el mouse para hacerlos un poco más interactivos.

    Gráficos de mapa de bits CSS3 Los gráficos de mapa de bits se representan con CSS: sin imágenes, sin canvasURI de datos y sin marcas adicionales. Los píxeles se dibujan con degradados CSS, cuyo tamaño se ajusta exactamente a los límites del píxel.

    Paperfold CSS Un efecto de plegado visual para comentarios ocultos de Felix Niklas. El complemento toma un elemento DOM, lo corta en partes y las organiza como un papel doblado en un espacio 3D.

    Beercamp: un experimento con CSS 3D Un libro emergente de CSS 3D al estilo del Dr. Seuss. El sitio web fue una prueba para ver hasta dónde se podían impulsar las transformaciones 3D SVG y CSS. Este es el artículo al respecto.

    Portadas: un experimento JS/CSS Ahora, eso sí que es todo un experimento: ¿qué pasaría si combináramos una canción musical, una hoja de estilo y un detector de ritmos para crear… portadas animadas? ¡Claro, podemos hacerlo con CSS3 y JavaScript! Cover hace exactamente eso. El resultado es interesante, ¿qué se puede hacer con este enfoque?

    Animación en la página de Apple John B. Hall explica la animación CSS en la página web de Apple para el iPhone 4S.

    Animaciones experimentales para transiciones de imágenes Una publicación sobre transiciones de imágenes experimentales en 3D que utilizan animaciones CSS3 y jQuery. Sólo se utilizan transformaciones CSS3.

    Mantener estados de estilo CSS usando retrasos de transición "infinitos" Esta demostración te permite mover el personaje con el D-pad y observar cómo siempre mantiene su posición después de que dejas de moverte. Esta demostración no utiliza JavaScript. El efecto es posible mediante el uso de un retraso de transición prácticamente infinito, de modo que las reglas CSS nunca vuelvan a su estado predeterminado. La figura quedará atrapada en una transición y se moverá solo cuando mantengas presionado un botón.

     

    Nubes CSS 3-D Un experimento para crear nubes similares a 3D con transformaciones CSS3 y un poco de JavaScript.

    Ventana emergente animada del cuadro de perfil Una técnica para un menú emergente de perfil animado, creado utilizando transiciones CSS.

    Efectos de desplazamiento CSS3 Una biblioteca de varios efectos de desplazamiento, como curvatura, onda, volteo, vuelo, sesgo y hélice, creada con CSS3 y, a veces, con JavaScript para darle vida al comportamiento de desplazamiento.

    Gira esos íconos con CSS3 Una técnica simple para crear un efecto elegante que hace girar íconos sociales con la ayuda de una transformación y transición cuando pasas el cursor sobre ellos. Por Tom Kenny.

    Desplazamiento del eje Z con transformaciones CSS 3D Este artículo explica cómo crear el efecto de desplazamiento z paso a paso.

    Técnicas CSS útiles y prácticas

    Árbol genealógico CSS3 Muestra datos organizacionales o un árbol genealógico usando solo CSS, sin Flash ni JavaScript. El marcado es muy simple y utiliza solo listas anidadas. Se utilizan pseudoelementos para dibujar los conectores. También tiene efectos de desplazamiento: coloque el cursor sobre un elemento principal y se estilizará todo el linaje. Asegúrese de consultar la Introducción a los trucos de pseudoelementos CSS de Nicolas Gallagher .

    Ventana emergente estilo iOS Una técnica simple para casillas de verificación personalizadas al estilo iOS y un sutil efecto de desplazamiento. La técnica tiene algunos errores, pero es un buen punto de partida en caso de que la necesite. Además, consulte un extracto de la charla de Lea Verou sobre casillas de verificación personalizadas y su artículo sobre filtrado de reglas basado en la compatibilidad con selectores específicos .

    Comentarios estilo línea de tiempo Nicolas Gallagher desarrolló una técnica simple y limpia para presentar comentarios en una descripción general similar a una línea de tiempo.

    CSS Table Grid Esta es una buena técnica para alinear columnas en una tabla, construyendo una especie de "sistema de cuadrícula de tabla". La idea es aplicar clases a colelementos de una tabla colgroup; siempre se deja uno colsin clase para que permanezca fluido y pueda "absorber" los efectos de cualquier rotura en otras partes de la tabla.

    Botones de comentarios de confirmación Este artículo explica cómo crear botones que adoptan diferentes estados según la interacción del usuario. Este tipo de interacción es especialmente útil en enlaces como "Comprar" y "Eliminar", para los cuales es aconsejable confirmar que el usuario realmente desea realizar la acción específica. Sin embargo, se parece demasiado a un botón de iTunes.

    Un calendario en CSS3 y jQuery Un tutorial paso a paso sobre cómo crear un calendario CSS3 con alguna animación jQuery. Además, consulte la demostración del calendario adaptable de David Bushell .

    Eliminar propiedades para depurar CSS Supongamos que está experimentando con CSS o código de depuración. Agrega propiedades para descubrir cómo encajan las cosas. ¿Con qué frecuencia te olvidas de eliminarlos todos? Una técnica sencilla para esto es marcar una propiedad CSS como propiedad temporal o de depuración quitándole sangría y colocándola en la columna 0 del archivo. Un pequeño truco que puede ahorrar mucho tiempo.

     

    Mostrar marcado en comentarios CSS Chris Coyier analiza la idea de incluir el marcado básico que diseñará como comentario en la parte superior de su archivo CSS.

    Visualización selectiva de datos Esta técnica muestra cómo mostrar selectivamente contenido en una tabla y agregar puntos de interrupción responsivos para crear una tabla responsiva y compleja de varias columnas.

    Eliminar márgenes para el primer/último elemento Si alguna vez quiso eliminar el margen superior o izquierdo del primer elemento de un contenedor, o el margen derecho o inferior del último elemento de un contenedor, puede hacerlo utilizando pseudoselectores :first-childy :last-child.

    Hoja de estilo de diagnóstico CSS Un fragmento muy útil para tener a mano cuando depuras tu CSS o quieres encontrar errores en HTML.

    Botones de opción con exclusividad bidireccional Obtenga información sobre el :emptyselector de pseudoclase y jQuery para garantizar que cuando se hace clic en un botón de opción, se determina el área y todos los demás botones de opción en esa columna se desactivan y luego se vuelven a activar cuando se hace clic. en.

    Navegación con pestañas con CSS Un elegante menú de navegación con pestañas con menús desplegables, sin JavaScript, por supuesto. Nada nuevo, pero es una solución bastante limpia.

    Menú con insignias de notificación con CSS Un fragmento listo para usar para un menú de navegación con insignias de notificación.

    Estilo basado en el número de hermanos (diapositivas) Una descripción general fantástica de las posibilidades de estilo según el número de hermanos. Además, asegúrese de hacer clic en el resto de la presentación de diapositivas: técnicas valiosas y útiles. Asegúrate de ver también la presentación de Lea Verou .

    Cosas que puedes hacer con el “truco de casilla de verificación” Con el “truco de casilla de verificación”, utilizas una etiqueta conectada y una entrada de casilla de verificación y, por lo general, algún otro elemento que intentas controlar. Aprende lo que puedes hacer con él.

    Botones CSS3 de Facebook Nicolas Gallagher presenta un conjunto de botones CSS3 para Facebook con diferentes colores e iconos. Es posible que desee consultar los botones de inicio de sesión social CSS3 de Nicolas , así como los botones sociales CSS3 gratuitos que lanzamos anteriormente.

    Botones emergentes de YouTube Este artículo explora el estado predeterminado de los botones de YouTube, que tienen un bisel muy sutil pero aparecen :hovery :focusaparecen ansiosos por ser presionados.

    Centrarse en lo desconocido Cuando se trata de centrar cosas en diseño web, cuanta más información tenga sobre el elemento que se centra y su elemento principal, más fácil será. Chris Coyier muestra cómo hacerlo cuando no sabes nada.

    La vieja caja acolchada del tío Dave ¿ Qué pasaría si combinaras las proporciones intrínsecasbackground-size: cover de Thierry Koblentz ? El resultado son imágenes y vídeos que mantienen su relación de aspecto; pero también puedes usarlo para cambiar la relación de aspecto y el recorte automático de imágenes con solo un poco de CSS. Y la buena noticia es que la propiedad es compatible con todos los navegadores modernos y coincide exactamente con el soporte de consultas de medios.background-size: cover

     

    Micro Clearfix: Obligar a los elementos a autolimpiar a sus hijos Chris Coyier presenta varias técnicas para forzar a los elementos a autolimpiar a sus hijos, incluido el fragmento de código corto de Nicolas Gallagher de 2011.

    CSS condicional Una técnica inteligente de Jeremy Keith para cargar contenido adicional de forma condicional. La idea es que una vez que se activa una consulta de medios, el contenido del bodyelemento se genera y puede ser detectado por JavaScript, lo que provoca que se cargue contenido adicional.

    * { box-sizing: border-box } FTW Una vez que comienzas a mezclar y combinar varias unidades en CSS, como %el ancho del contenedor, emel relleno y pxel borde, te encuentras directamente con el problema del modelo de caja porque el ancho del El contenedor no incluye relleno ni borde. Podemos resolver esto fácilmente usando box-sizing: border-box. Y la mejor parte: incluso es compatible con IE 8.

    Valores de atributos múltiples Cómo tratar valores múltiples en atributos en lugar de clases.

    Sprites CSS diagonales Si construyes un sprite en diagonal, no habrá componentes debajo o a la derecha del componente que estás mostrando. Esto te permite hacer que el elemento que utiliza el sprite sea tan ancho o alto como sea necesario, sin preocuparte por exponer el siguiente componente. Consulte también el artículo de David Storey sobre sprites CSS para la era moderna .

    Doble clic en CSS ¿Existe alguna forma de detectar si se toca o se hace doble clic en un enlace en dispositivos móviles? De hecho, podemos. Sin embargo, el código requiere algo de nerd de CSS. Además, consulte Eventos en los que se puede hacer clic en CSS puro sin: objetivo de Ryan Collins.

    Reemplazar el truco -9999px (reemplazo de imagen nueva) Al principio era FIR (reemplazo de imagen de Fahrner). Scott Kellum, director de diseño de Treesaver, ha desarrollado este código refactorizado para ocultar texto. Autoclave de vapor Blog

    Luchando contra el espacio entre elementos de bloque en línea Una serie de elementos de bloque en línea formateados como lo haría normalmente con HTML tendrán espacios entre ellos. Pero a menudo queremos que los elementos choquen entre sí, evitando así, en el caso de la navegación, esos pequeños e incómodos espacios en los que no se puede hacer clic. ¿Cómo lo solucionas? Chris Coyier ha encontrado un par de soluciones.

    Eventos de puntero CSS y información sobre herramientas de animación CSS3 pura La propiedad eventos de puntero le permite especificar cómo interactúa el mouse con el elemento que está tocando. Vea qué puede hacer con él y qué considerar al usarlo.

    Anatomía de un diseño web responsivo que prioriza los dispositivos móviles Un excelente artículo de Brad Frost sobre las diferentes consideraciones para los diseños responsivos. ¿Cómo empiezas? ¿Qué características implementarías y cómo? ¿Qué pasa con la optimización avanzada como LocalStorage o AppCache? Este artículo proporciona una guía excelente para comenzar con diseños responsivos aptos para el futuro.

     

    Flujo de trabajo de mejora progresiva de SouthStreet Un artículo fantástico de Scott Jehl y Filament Group en el que presentan un conjunto de herramientas que forman el núcleo de un flujo de trabajo de diseño responsivo avanzado. Definitivamente es útil tenerlo en cuenta para su próximo proyecto de diseño responsivo.

    Tipografía y texto con CSS

    Las técnicas avanzadas de CSS nos brindan opciones notables para diseñar el texto de maneras muy diferentes. No sólo podemos hacer que la tipografía luzca más nítida y hermosa en la Web con herramientas como Lettering.js , Kerning.js y FitText ; también podemos jugar con glifos, saltos de línea, tamaño de fuente, truncar texto y diseñar listas. La tipografía se puede ajustar y mejorar con sólo un par de enfoques prácticos.

    Efectos de tipografía interactiva con HTML5 Esta técnica utiliza canvasJavaScript para crear un efecto de tipografía interactiva. Los usuarios pueden interactuar con los glifos y, como diseñador, puede definir formas de la palabra que desea presentar y cómo desea que cambien al pasar el mouse. ¡Elegante!

    Letras oscilantes con CSS3 y jQuery Una animación sencilla de letras con CSS3 y jQuery.

    Tipografía CSS 3D ¿Qué tal integrar rayas en glifos y ajustar la sombra al pasar el mouse? Esta técnica utiliza precisamente eso: crear un efecto visual agradable, sutil pero atractivo. Puede encontrar experimentos tipográficos más interesantes en CSS3type Showcase .

    Animación CSS3 y texto enmascarado Chandler Van De Water tuvo un desafío para Trent Walton después de ver la animación del encabezado en su publicación "CSS3 en transición". Al darse cuenta de que usaba un archivo de imagen PNG con transparencia eliminada, quiso hacer la misma animación CSS con texto seleccionable. ¡Trent estuvo feliz de hacerlo! Por el momento, esto sólo funciona en Safari y Chrome.

    Imagen y texto de máscara CSS que Trent Walton utiliza background-clip: texty mask-imagepara implementar un sutil efecto de textura con motas grises sobre texto blanco. Pase el cursor sobre el cuadro para ver cómo se degrada en navegadores no compatibles. Asegúrese de consultar también “ Enmascaramiento de texto: a la manera de los estándares ” de Lea Verou.

    Negrita falsa en fuentes web La mayoría de los navegadores simulan pesos en negrita para fuentes que en realidad no los tienen. Por ejemplo, Helvetica Neue Light no tiene peso en negrita. Si lo usara font-weight: bold, los navegadores crearían artificialmente un peso en negrita. Este artículo explica cómo evitar la negrita falsa en las fuentes web en sus diseños. Por Divya Manian.

    El tipo Web del mañana hoy: dígalo con un swash La excelente serie “El tipo Web del mañana hoy” de Elliot Jay Stocks proporciona información sobre lo que pronto será posible con la tipografía Web, por ejemplo, los caracteres swash. De hecho, ya puedes usarlos hoy si incluyes un subconjunto swash de una fuente para lograr el efecto deseado.

    Internacionalización Lenguaje CSS Un nippet CSS muy útil con comillas específicas del idioma. Perfecto para proyectos internacionales y multilingües.

    Experimentos conbackground-clip: text Con la propiedad CSS background-clip: text, podemos agregar una imagen de fondo a un elemento de texto.

     

    Un llamado a ::nth-everything Con CSS3, tenemos selectores de pseudoclases posicionales para ayudarnos a seleccionar un elemento en particular cuando no tiene características distintivas aparte de dónde se encuentra en el DOM en relación con sus hermanos.

    Fuente suave usando la propiedad text-shadow Un problema común: ¿hay alguna manera de suavizar la apariencia de los glifos en máquinas más antiguas, especialmente Windows XP (modo de representación estándar/ClearType)? Sí quizás. Puedes probar la text-shadowpropiedad que agrega sombra de texto en la parte superior izquierda y en la parte inferior derecha para suavizar el texto.

    Fluid Type Trent Walton explica su enfoque de la tipografía fluida en el que se pregunta cómo podemos asegurarnos de que el ancho del navegador y las configuraciones tipográficas, como la medida o el tamaño de fuente, y cómo debemos manejar las ventanas panorámicas. Un artículo interesante, especialmente si utilizas un enfoque tipográfico en tus diseños.

    Tamaño de fuente pragmático y práctico en CSS Harry Roberts comparte sus ideas sobre cómo cambiar el tamaño de las fuentes de manera más eficiente, escribiendo su CSS de manera diferente en el proceso.

    Saltos de línea automáticos con guiones CSS3 y ajuste de palabras Roger Johansson muestra cómo resolver un problema común: a medida que las columnas de texto se vuelven más estrechas, aumenta el riesgo de que una sola palabra sea más larga que el ancho de la columna. Cuando eso sucede, el texto normalmente se extiende más allá de la columna. Afortunadamente, CSS ofrece dos propiedades para mejorar la situación: word-wrapy hyphens.

    Interlineado fundido (o altura de línea fluida) Cuando una composición responsiva se encuentra con una ventana gráfica, hay diferentes maneras de llenar el espacio. Ajustar cualquier elemento sin ajustar también los demás es una receta para una lectura incómoda, que es una de las razones por las que los diseñadores tienen tantas dificultades con diseños web fluidos. Tim Brown inició una discusión sobre este tema y proporciona un par de técnicas de optimización.

    Evite que las URL largas se salgan del contenedor Otro fragmento de Chris Coyier para mantener las URL largas dentro del contenedor. word-wrapy word-breakpropiedades hyphensen uso. Además, aprenda cómo evitar que los superíndices y subíndices afecten la altura de la línea .

    Tipografía del tamaño de la ventana gráfica Esta técnica utiliza nuevos valores CSS para dimensionar elementos en relación con el tamaño actual de la ventana gráfica vw: vhy vmin. Esto le permite acoplar el tamaño de, digamos, un título tipográfico al espacio disponible en la pantalla. La compatibilidad con el navegador es bastante deficiente por ahora, así que si buscas una alternativa, consulta FitText.js .

    Anchos mínimos de párrafo en diseños fluidos Este artículo muestra cómo resolver el problema de los párrafos que son demasiado estrechos implementando un ancho mínimo de párrafo. Si el espacio que queda en la imagen flotante es menor que este ancho, entonces todo el párrafo se mueve debajo de la imagen.

     

    Aplicar estilo a números de listas ordenadas Roger Johansson muestra cómo podemos aplicar estilos a números de listas ordenadas con el :beforepseudoelemento, que puede tomar un contador como valor a través de la contentpropiedad. Consulte también la publicación de Chris Coyier y los contadores CSS de Louis Lazaris: contraincremento y amigos .

    Listas ordenadas inversamente en HTML5 El atributo inverso le permite escribir una lista descendente de elementos numerados. Louis Lazaris resume lo que hace y ofrece una solución para solucionar la falta de soporte del navegador para este atributo.

    Preservar espacios en blanco con tamaño de pestaña CSS3 De forma predeterminada, las páginas HTML ignoran cualquier cosa que no sea un espacio y las contraen. Pero hay ocasiones en las que querrás preservar este espacio mediante una de varias técnicas posibles.

    Truncar texto usando solo CSS Este fragmento de código se puede usar para acortar una línea de texto usando nada más que CSS.

    Nuevas propiedades CSS3 para manejar texto y ajuste de palabras Louis Lazaris explica las posibilidades y los problemas de ajuste de texto, ajuste de desbordamiento, salto de línea y salto de palabra, desbordamiento de texto y guiones. También vale la pena leer: Kenneth Auchenberg analiza las opciones de ajuste de palabras y separación de palabras en combinación con elementos de ancho dinámico.

    Finalizar artículos con Ivy Leaf Una técnica inteligente para añadir un toque extra al final de tus artículos. :last-childy :afteren contentuso.

    Efectos de desplazamiento y menús de navegación con CSS

    Estamos acostumbrados a los patrones de navegación clásicos, como la navegación con pestañas o los menús desplegables, pero podemos hacer mucho más para darle vida a nuestros menús de navegación con agradables efectos de desplazamiento, a menudo sin imágenes adicionales. Especialmente si desea agregar un poco más de brillo a su portafolio, galería o sitio web de comercio electrónico, estas técnicas pueden resultar muy útiles. ¿Qué pasa con el efecto de desplazamiento "por encima" de sus enlaces?

    Efecto de navegación circular con CSS3 Una vista previa en miniatura en forma de burbuja para su navegación con CSS3.

    Cree una galería de imágenes CSS3 con una animación de caja de luz 3D Tom Kenny ha ampliado una galería de caja de luz CSS agregando algunos efectos de desplazamiento a la cuadrícula de la galería y una rotación 3D al contenido de la caja de luz, todo con CSS.

    Galería 3D con CSS3 y jQuery Este artículo comparte una galería experimental que utiliza transformaciones CSS 3D. La idea es crear una galería circular con una imagen en el centro y dos a los lados. Debido a que se utiliza la perspectiva, las dos imágenes laterales aparecerán tridimensionales cuando se giren.

    Menús creativos de animación CSS3 Mary Lou presenta un par de efectos de desplazamiento creativos en el menú de navegación. La idea es tener una composición simple de elementos, un ícono, un título principal y un título secundario que se animarán al pasar el mouse usando solo transiciones y animaciones CSS.

    Cómo darle vida a tu menú con CSS3 Sí, otra técnica de Tympanus: este consejo muestra cómo darle vida a un menú agregándole un elegante efecto de desplazamiento. La idea es deslizar una imagen hacia la derecha cuando se pasa el cursor sobre el elemento del menú.

     

    Cree una interfaz de usuario ampliable David DeSandro revela cómo utilizar transformaciones CSS para crear una interfaz de usuario ampliable similar a la de Beercamp 2011 . En este tutorial, también aprenderá cómo usar JavaScript para secuestrar el desplazamiento y manipular el zoom.

    Navegación Flipboard Un diseño de página experimental inspirado en la interfaz de Flipboard.

    Desplazamiento multidireccional Este elemento muestra diferentes efectos de desplazamiento cuando se desplaza desde diferentes direcciones.

    Efectos de desplazamiento experimentales Efectos de desplazamiento originales e innovadores descubiertos a través de Twitter en lo que parece ser un sitio web japonés para compartir códigos.

    Efecto de desplazamiento por encima Una técnica de CSS y JavaScript para crear un efecto de desplazamiento por encima utilizando las transform-origin transform-stylepropiedades y las transformaciones 3D.

    Acordeón Con CSS3 Mary Lou experimenta con el combinador de hermanos adyacente y general y la :checkedpseudoclase. Utilizando entradas y etiquetas ocultas, crea un acordeón que anima las áreas de contenido al abrirse y cerrarse.

    Áreas de texto expandibles más elegantes Un área de texto expandible es una buena opción cuando no sabes cuánto texto escribirá el usuario y deseas mantener el diseño compacto. En este artículo, Neil Jenkins explica cómo hacer esto de forma sencilla. Además, es posible que desees echar un vistazo a Textarea Auto Resize , otra técnica de Louis Lazaris, que utiliza un elemento de clonación oculto.

    Funcionalidad de filtro con CSS3 Usando el combinador de hermanos general y la :checkedpseudoclase, podemos alternar estados de otros elementos marcando una casilla o un botón de opción. Este tutorial explora esas propiedades CSS3 mediante la creación de un filtro de cartera experimental que alterna los estados de elementos de un tipo específico.

    Un menú de selección personalizado accesible y compatible con el teclado. Un nuevo enfoque para una mayor accesibilidad de Roger Johansson. Él estiliza sólo el selectelemento.

    Técnicas Visuales con CSS

    Solíamos basarnos mucho en imágenes y elementos visuales para crear efectos visuales básicos en la Web. Con CSS3 no sólo podemos mejorar la velocidad de carga del contenido, sino también hacer que nuestros elementos visuales sean más flexibles y adaptables. Echemos un vistazo a un par de ejemplos de cómo podemos lograrlo.

    Cree la ilusión de elementos apilados con pseudoelementos CSS3 Tom Kenny muestra cómo crear una apariencia "apilada" simple para un grupo de imágenes.

    CSS3 Unfold Map con pines Un fragmento útil para colocar pines en un mapa. El código parece un poco detallado, por lo que es posible que desees eliminar un par de elementos visuales "agradables de tener".

    Convierta imágenes en sellos postales con CSS3 border-image Dudley Storey muestra una manera sencilla de crear un sello postal a partir de una imagen simple con border-image.

    Los elementos descuidados con CSS3 Las formas en ángulo y las líneas diagonales pueden crear un flujo visual interesante y agregar algo de emoción inesperada. Este tutorial muestra algunos ejemplos simples y formas de crear elementos descuidados y sesgados solo con CSS.

    CSS Flip Clock Un fragmento de código para mostrar una visualización de la hora similar a un reloj invertido usando CSS.

    Estilos de imagen CSS3 Al aplicar un inserto CSS3 box-shadowo border-radiusdirectamente a un elemento de imagen, el navegador no representará el estilo CSS perfectamente. Aquí hay un tutorial rápido sobre cómo usar jQuery para crear dinámicame






    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

    99 nuevas y poderosas técnicas de CSS y JavaScript

    99 nuevas y poderosas técnicas de CSS y JavaScript

    Anuncie en la revista Smashing Implemente rápidamente. Implementar inteligentemente Índice Lecturas adic

    programar

    es

    https://pseint.es/static/images/programar-99-nuevas-y-poderosas-tecnicas-de-css-y-javascript-799-0.jpg

    2024-04-04

     

    99 nuevas y poderosas técnicas de CSS y JavaScript
    99 nuevas y poderosas técnicas de CSS y 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