RSS CSS-Tricks Seguir CSS Tricks es un sitio web popular dedicado a brindar trucos, técnicas y recursos útiles para los desarrolladores web, con un enfoque particular en CSS y tecnologías relacionadas. RSS css-tricks.com CSS-Tricks css-tricks.com
Lo que necesitas saber sobre la interpolación de color CSS ¿Colorear qué? Sunkanmi Fafowora explica cómo una tarea cotidiana para CSS puede usarse para crear mejores experiencias de color. What You Need to Know About CSS Color Interpolation css-tricks.com
¿Debería la función CSS `light-dark()` admitir más de los valores claro y oscuro? La función light-dark() está actualmente diseñada para soportar solo dos esquemas de color. ¿Debería soportar otros? Sunkanmi Fafowora dice que sí y que no. Should the CSS light-dark() Function Support More Than Light and Dark Values? css-tricks.com
CSS Elevator: Una Máquina de Estados Pura en CSS con Navegación de Pisos En este artículo, el autor Chris Sabourin explica cómo las características modernas de CSS pueden construir un ascensor totalmente funcional e interactivo que sabe dónde está, a dónde se dirige y cuánto tiempo tardará en llegar allí. No se requiere JavaScript. CSS Elevator: A Pure CSS State Machine With Floor Navigation css-tricks.com
Un truco para el carrito de compras con botones de radio Aquí tienes un enfoque para animar los productos añadidos a un carrito de la compra que maneja un número infinito de artículos utilizando una variación del viejo "truco de la casilla de verificación". A Radio Button Shopping Cart Trick css-tricks.com
Ser creativo con imágenes en contenido de formato largo Las imágenes en contenido de larga forma pueden (y a menudo deberían) hacer más que ilustrar. Ayudan a establecer el ritmo, influir en cómo se sienten los lectores y agregar carácter que las palabras solas no siempre pueden transmitir. Getting Creative With Images in Long-Form Content css-tricks.com
Texto 3D en Capas: Interactividad y Dinamismo En este tercer y último capítulo, estamos dando el paso hacia la interactividad agregando JavaScript, comenzando con un simple efecto :hover y terminando con un texto abultado completamente responsivo que sigue al cursor del ratón en tiempo real. 3D Layered Text: Interactivity and Dynamicism css-tricks.com
Texto en capas 3D: Movimiento y variaciones En este capítulo, exploraremos formas de animar el efecto, agregar transiciones y jugar con diferentes variaciones. Veremos cómo el movimiento puede realzar la profundidad y cómo ajustes sutiles pueden crear una vibra completamente nueva. 3D Layered Text: Motion and Variations css-tricks.com
Texto en Capas 3D: Lo Básico Un cliente me pidió que creara un efecto de texto abultado. Con un poco de ingenio y CSS avanzado, logré un resultado del que estoy realmente orgulloso, y que se cubre en esta serie de tres partes. 3D Layered Text: The Basics css-tricks.com
Cubriendo oculto=hasta que se encuentra Historia corta: Agregar hidden=until-found a un elemento en HTML permite que cualquier contenido oculto dentro del elemento sea buscable en el navegador con la búsqueda en la página. Covering hidden=until-found css-tricks.com
Unas cuantas cosas sobre el elemento ancla href que tal vez no sabías Es fácil dar por sentadas las superpoderes de URL, incluso si ya tienes estos patrones bajo tu cinturón. A Few Things About the Anchor Element’s href You Might Not Have Known css-tricks.com
"Sobre Conformidad de Accesibilidad, Sistemas de Diseño y Unidades "Base" de CSS" "Mi cerebro no puede evitar intentar hacer conexiones entre ideas aparentemente dispares. Y eso es lo que sucedió ayer cuando leí: "¿Pueden los componentes cumplir con las WCAG?" de Hidde "Automatizando sistemas de diseño" de Joas "Podríamos necesitar algo entre raíz y relativo" de Zell On Accessibility Conformance, Design Systems, and CSS “Base” Units css-tricks.com
Es posible que necesitemos algo entre las unidades de CSS raíz y relativas para los “Elementos Base” Me he dado cuenta de que quizás necesitamos tener una unidad entre los valores raíz y los valores relativos. Esto abriría toda una nueva posibilidad a la hora de crear componentes reutilizables. We Might Need Something Between Root and Relative CSS Units for “Base Elements” css-tricks.com
Preguntas CSS CSS-Questions es un minisitio donde puedes poner a prueba tus conocimientos de CSS con más de 100 preguntas. CSS-Questions css-tricks.com
Taller Práctico de Diseño de Layout: Tonterías y Cosas Sin Sentido El veterano diseñador web Andy Clarke ofrece un taller de dos horas sobre cómo crear diseños de página prácticos y creativos este 18 de septiembre. Regístrate y ahorra algo de dinero con un código de cupón. Stuff & Nonsense Practical Layout Workshop css-tricks.com
Ser Creativo con Citas ¿Cómo se diseñan citas en bloque y citas destacadas para reflejar la identidad visual de una marca y ayudar a contar su historia? Aquí te muestro cómo lo hago estilizando el elemento HTML blockquote con bordes, marcas de cita decorativas, formas personalizadas y algunas propiedades inesperadas. Getting Creative With Quotes css-tricks.com
Devuelve el paralaje con animaciones CSS impulsadas por desplazamiento El paralaje es un patrón en el que diferentes elementos de una página web se mueven a diferentes velocidades a medida que el usuario se desplaza, creando una apariencia tridimensional y en capas. Antes requería JavaScript. Ahora tenemos animaciones controladas por desplazamiento en CSS, que están libres del bloqueo del hilo principal que puede afectar a las animaciones de JavaScript. Bringing Back Parallax With Scroll-Driven CSS Animations css-tricks.com
Pensando Profundamente en Temas y Nombres de Colores Hoy, quiero discutir un par de patrones de nomenclatura para paletas de colores que la comunidad está utilizando, y cómo propongo que podemos mejorar, para que logremos tanto flexibilidad como belleza. Thinking Deeply About Theming and Color Naming css-tricks.com
La belleza está en el ojo de quien la ve ¡Genial, vamos a saltar a text-wrap: aterrizaje aterrizaje en Safari Technology Preview! Pero ten cuidado, ya que es diferente a cómo funciona en navegadores de Chromium. “Pretty” is in the eye of the beholder css-tricks.com
Así que, ¿quieres renunciar a los pre y post-procesadores CSS...? Hubo un tiempo en que el CSS nativo carecía de muchas funcionalidades esenciales, lo que obligó a los desarrolladores a idear todo tipo de métodos para facilitar la escritura de CSS a lo largo de los años. So, You Want to Give Up CSS Pre- and Post-Processors… css-tricks.com
Usando `backdrop-filter` de CSS para efectos de interfaz de usuario Consejos y trucos para utilizar la propiedad `backdrop-filter` de CSS en el diseño de interfaces de usuario. Aprenderás a superponer filtros de fondo entre múltiples elementos e integrarlos con otros efectos gráficos CSS para crear diseños elaborados. Using CSS backdrop-filter for UI Effects css-tricks.com
Estilismo de cursor CSS de nivel avanzado Los cursores personalizados con CSS son geniales, pero podemos llevar las cosas al siguiente nivel con JavaScript. Utilizando JavaScript, podemos transicionar entre estados de cursor, colocar texto dinámico dentro del cursor, aplicar animaciones complejas y aplicar filtros. Next Level CSS Styling for Cursors css-tricks.com
Crónicas de CSS-Tricks XLIII Esta actualización de CSS-Tricks destaca el progreso significativo en el Almanaque, las recientes apariciones en podcasts, una nueva guía sobre contadores CSS, y la incorporación de varios autores nuevos que contribuyen con contenido valioso. CSS-Tricks Chronicles XLIII css-tricks.com
La función @apply de Tailwind es mejor de lo que parece La mayoría de las veces, la gente muestra la función `@apply` de Tailwind con una de las utilidades de una sola propiedad de Tailwind (que cambia una única declaración CSS). Cuando se muestra de esta manera, `@apply` no suena nada prometedor. Así que, obviamente, nadie quiere usarla. Personalmente, creo que la función `@apply` de Tailwind es mejor de lo que se describe. Tailwind’s @apply Feature is Better Than it Sounds css-tricks.com
Diseños en cascada: Un taller sobre diseños de CSS resilientes Si estuviera empezando con CSS hoy por primera vez, querría dedicar tiempo a entender los modos de escritura porque es un excelente punto para entender la dirección y el flujo del documento. Pero justo después de eso,... Cascading Layouts: A Workshop on Resilient CSS Layouts css-tricks.com
Carruseles CSS Chrome ha prototipado estas características y las ha lanzado en Chrome 135. Adam Argyle tiene una explicación maravillosa en el blog de desarrolladores de Chrome. Kevin Powell tiene un video igualmente maravilloso donde sigue la explicación. Esta publicación es mi toma de notas de ellos. CSS Carousels css-tricks.com
Sintiendo que no tengo salida: Un camino hacia despliegues sanos Implementar como un idiota se reduce a una discrepancia entre las herramientas que usas para implementar y la recompensa en complejidad reducida frente a la complejidad añadida. Feeling Like I Have No Release: A Journey Towards Sane Deployments css-tricks.com
Un nuevo informe de 'Preparación para la Web' HTML5 Readiness era un sitio que mostraba, a través de un arcoíris de colores, el soporte de los navegadores para varias funciones web. ¿Qué hay de una nueva versión? A New “Web” Readiness Report css-tricks.com
Texto Alternativo: No Siempre Necesario La mayoría de las imágenes requieren una descripción para claridad, pero hay excepciones. Este conjunto de notas examina diferentes situaciones y contextos en los que el texto alternativo puede no ser necesario y qué hacer en esos casos. Alt Text: Not Always Needed css-tricks.com
Resuelto con CSS: Ámbitos de Donas El alcance de donut aborda el desafío de prevenir que los estilos de los padres se filtren a los contenidos anidados. Originado en un concepto de 2011 de Nicole Sullivan, el problema ha evolucionado, culminando en la regla de @scope de 2024. Esto permite un estilo CSS más preciso, protegiendo el contenido de la herencia no deseada mientras se manejan complejidades CSS globales. Solved by CSS: Donuts Scopes css-tricks.com
Comandos de Invocador: Formas adicionales de trabajar con Diálogo, Emergente… y más? Los navegadores web están experimentando con dos atributos HTML — técnicamente, se les llama "comandos invocadores" — que están diseñados para invocar popovers, diálogos y más adelante, todo tipo de acciones sin escribir JavaScript. Aunque, si llegas a utilizar JavaScript, los nuevos atributos vienen con algunos nuevos eventos que podemos escuchar. Invoker Commands: Additional Ways to Work With Dialog, Popover… and More? css-tricks.com
Curso completo de CSS ¿Te suscribes a Piccalilli? Deberías. Si estás leyendo ese nombre por primera vez, no es otro que Andy Bell al mando y ha reinventado el sitio desde cero después de salir de su hibernación este año. Probablemente estés familiarizado con la excelente escritura de Andy aquí en CSS-Tricks. Complete CSS Course css-tricks.com
Anchoreum: Un nuevo juego para aprender la posición de ancla ¿Has jugado a Flexbox Froggy anteriormente, ¿verdad? ¿O tal vez Grid Garden? Ambos son absolutamente necesarios para aprender los conceptos básicos del diseño moderno de CSS usando Flexbox y CSS Grid. Thomas Park los creó y ha vuelto con otro juego: Anchoreum. Anchoreum: A New Game for Learning Anchor Positioning css-tricks.com
Tim Brown: Flexible Typesetting ahora es tuyo, gratis Otro título de A Book Apart ha sido reeditado de forma gratuita. El más reciente? El de Tim Brown, 'Tipografías flexibles'. Puede que no sea el máximo experto en tipografía y sus mejores prácticas, pero recuerdo leer este libro (todavía está en la estantería al lado mío) pensando que tal vez, solo tal vez, podría mantener una conversación sobre ello con Robin cuando terminé. Tim Brown: Flexible Typesetting is now yours, for free css-tricks.com
Las formas diferentes (y modernas) de alternar contenido Vamos a dedicar un tiempo a examinar las revelaciones, la API de diálogo, la API de popover y más. Veremos el momento adecuado para utilizar cada una dependiendo de tus necesidades. ¿Modal o no modal? ¿JavaScript o HTML/CSS puro? ¿No estás seguro? No te preocupes, lo exploraremos todo. The Different (and Modern) Ways to Toggle Content css-tricks.com
Comentarios emergentes con posicionamiento de anclaje CSS y animaciones impulsadas por la vista La encuesta 'El Estado del CSS 2024' ha finalizado y los resultados son interesantes, como siempre. Aunque cada sección vale la pena analizar, normalmente estamos más emocionados con la sección sobre las características de CSS más utilizadas. Y si tú... Popping Comments With CSS Anchor Positioning and View-Driven Animations css-tricks.com
Todo lo demás es fluido Podemos aplicar el concepto de tipografía fluida a casi cualquier cosa. De esta manera, podemos tener un diseño que cambia fluidamente con el tamaño de su contenedor principal. Pocos usuarios verán la transición, pero todos apreciarán los resultados. Honestamente, lo harán. Fluid Everything Else css-tricks.com
Web-Slinger.css: Al igual que Wow.js, pero con animaciones de scroll CSS-y ¿Podemos recrear una biblioteca de JavaScript para animaciones de scroll con un enfoque moderno de CSS usando Animaciones de Scroll Driven por CSS? Sí. Sí, podemos. Web-Slinger.css: Like Wow.js But With CSS-y Scroll Animations css-tricks.com
Resultados del Estado del CSS 2024 Los resultados de esta encuesta del año son bastante frescos de la imprenta. Nos tomamos un poco de tiempo para sentarnos con ellos y anotar algunas cosas que notamos y encontramos interesantes. State of CSS 2024 Results css-tricks.com
Prácticas recomendadas para la información sobre herramientas ¿Qué son exactamente las tooltips? Hay dos tipos y el que uses tiene implicaciones en la experiencia del usuario, como Zell ilustra en este explicador sobre las mejores prácticas. Tooltip Best Practices css-tricks.com
Ven al lado oscuro-luz Te perdonarían por pensar que codificar tanto un modo oscuro como uno claro al mismo tiempo es mucho trabajo. Tienes que recordar las consultas de medios (@media) basadas en prefers-color-scheme, así como las complicaciones adicionales que surgen al dejar que los visitantes... Come to the light-dark() Side css-tricks.com
Diseño de medio izquierdo y medio derecho – Muchas maneras diferentes Hace un montón de años, publicamos esta idea aquí en CSS-Tricks. Pensamos que era hora de actualizarla y hacerle justicia al tema. Imagina un escenario en el que necesitas dividir un diseño por la mitad. Contenido... Left Half and Right Half Layout – Many Different Ways css-tricks.com
Puedes usar text-wrap: balance; en iconos Terence Eden sobre el uso de text-wrap: balance para más que títulos: Pero creo que el nombre es un poco engañoso. No solo funciona en texto. Funcionará en cualquier contenido. Por ejemplo - tengo una fila de iconos en You can use text-wrap: balance; on icons css-tricks.com
Aclarar la relación entre emergentes y diálogos La diferencia entre Emergentes (es decir, el atributo emergente) y Diálogos (es decir, tanto el elemento como el papel de diálogo accesible) es increíblemente confusa — tanto que muchos artículos (como este, este y este) han intentado ... Clarifying the Relationship Between Popovers and Dialogs css-tricks.com
¡Bloquealo! Extensión de VS Code Hay mucha matemática detrás de la tipografía fluida. CSS hace que la matemática sea mucho más fácil en estos días, pero incluso si estás cómodo con eso, escribir la declaración completa puede ser verbosa y difícil de recordar. Sé que yo a menudo … Clamp it! VS Code extension css-tricks.com
Desbloquea el Poder de las Animaciones Impulsadas por Desplazamiento Estoy completamente atrasado en aprender sobre animaciones impulsadas por desplazamiento, aparte de los experimentos de 'barra de progreso de lectura' que abundan en CodePen. Bueno, no soy exactamente 'novato' en el tema; hemos publicado un puñado de artículos sobre ello, incluyendo este artículo chulo de Lee... Unleash the Power of Scroll-Driven Animations css-tricks.com
