CSS

Cómo centrar un Div con CSS - 10 formas diferentes

Para los desarrolladores web, a veces centrar un div parece uno de los trabajos más difíciles del mundo. Pues ya no. En este artículo, aprenderás 10 formas diferentes de centrar un div. Exploraremos cómo centrar divs utilizando la propiedad CSS position, CSS Flexbox y CSS Grid. Después de leer todo este artículo,…

Category : Css   26-06-2023   by Janeth Kent

Nuevas unidades de ventana gráfica - CSS

'Intercop 2022' es un proyecto anunciado por Google, Microsoft, Apple y la fundación Mozzilla para que todos los navegadores ofrezcan la misma experiencia web. El proyecto tiene 15 áreas de enfoque y una de ellas es añadir más unidades de tamaño de la ventana gráfica, para que haya mayor compatibilidad entra…

Category : Css   22-06-2023   by Laura Celis Ballesta

Container queries: libera el poder de escribir media queries

El diseño web responsivo ha sido una práctica común durante años, permitiendo que los sitios se adapten y se vean bien en una variedad de dispositivos y tamaños de pantalla. Sin embargo, hay un desafío persistente: hacer que los componentes individuales dentro de un diseño respondan a su propio contexto…

Category : Css   29-05-2023   by Janeth Kent

El significado de los espacios vacíos en el diseño web

Como diseñadores debemos ayudar a los demás a entender por qué es importante mantener espacios en blanco dentro de nuestra web y por qué es importante para la experiencia del usuario. Ya desde la era Victoriana, Mario Praz, un crítico e investigador italiano asoció ese miedo con el término "Horror Vacui"…

Category : Css   12-05-2023   by Laura Celis Ballesta

¿Por qué no deberíamos usar el color negro?

A día de hoy es cada vez más frecuente que las páginas cuenten con la opción de ponerlas en modo oscuro, o que directamente basen su estética en los colores negros o con mucho contraste, pero la gran mayoría de personas siguen utilizando colores puros para implementar este tipo de…

Category : Css   12-05-2023   by Laura Celis Ballesta

Utilidades de los selectores :where y :is

Si aún no has oído hablar de estos selectores de pseudoclases, no te preocupes, aquí te explicamos el funcionamiento y dejamos varios usos que nos pueden ser muy útiles a la hora de diseñar.   :where() es un selector de pseudoclases funcional, que coge una lista de selectores como argumento y aplica…

Category : Css   16-03-2023   by Laura Celis Ballesta

4 cosas que no sabías sobre Grid CSS

Durante mucho tiempo, el CSS no contenía un gran número de sorpresas. Desarrollándose a un ritmo tranquilo, el lenguaje se conformaba con estilizar sus fuentes y hacer flotar sus divs, mientras que lenguajes como JavaScript hacían el trabajo pesado. Sin embargo, en los últimos años, el CSS ha vivido un etapa…

Category : Css   03-06-2022   by Janeth Kent

Explorando la API CSS Paint: Redondeo de formas parte 2

Vamos con la segunda parte de nuestro artícul sobre como manejar la API Paint para redondar bordes complejos   Control de los radios   En todos los ejemplos que hemos visto, siempre consideramos un radio aplicado a todas las esquinas de cada forma. Sería interesante que pudiéramos controlar el valor del radio de cada…

Category : Css   25-10-2021   by Silvia Mazzetta

Explorando la API de CSS Paint: Redondeo de formas parte 1

Añadir bordes a las formas complejas es un auténtico rollo (a veces), pero redondear las esquinas de las formas complejas es un suplicio jejeje. Por suerte, la API de pintura de CSS o CSS Paint API ha llegado a rescatarnos.   En general, cuando trabajamos con la API de pintura CSS seguimos…

Category : Css   25-10-2021   by Silvia Mazzetta

Las ventanas gráficas o viewports grandes, pequeñas y dinámicas

Recientemente se han introducido algunos cambios en materia de unidades de ventana gráfica o viewport. Las novedades -que forman parte de la especificación de valores y unidades CSS de nivel 4- definen varios tamaños de viewport: el Large, el Small y el Dynamic Viewport (Grande, Pequeño y Dinamico). Gracias a estas adiciones,…

Category : Css   02-09-2021   by Janeth Kent

Imágenes de fondo responsivas con relación de aspecto fijo o fluido

¿Cuál es la forma más fácil de escalar las imágenes de fondo en los diseños responsivos? Utilizamos una antigua técnica y la mejoramos para cambiar con fluidez la ratio de aspecto de las imágenes de fondo. Los diseños responsivos permiten escalar dinámicamente el ancho de un sitio web para que se…

Category : Css   06-05-2021   by Janeth Kent

Creación de un sencillo spinner-loader CSS

En el artículo de hoy mostraremos cómo animar un loader básico que gira cuando se define alguna acción predefinida, como cargar una imagen. Eso se puede utilizar en un sitio web, por ejemplo, cuando hay una solicitud en ejecución y el resultado aún no se recupera. ¿Qué son? Animación de carga, Loader,…

Category : Css   05-04-2021   by

Bootstrap 5 beta2. ¿Qué ofrece?

Dado que el lanzamiento de Bootstrap 4 es de tres años, en este artículo vamos a presentar lo que es nuevo en el marco más popular del mundo para la construcción de sitios responsivos y mobile-first. Si quieres saber cuáles son los cambios significativos que vienen con la próxima versión…

Category : Css   05-04-2021   by

Modo oscuro persistente con CSS y JS

Recientemente escribimos acerca de cómo hacer un modo de color o tema alternativo intercambiable, una característica muy útil y popular para los sitios web. El artículo de hoy tratará sobre cómo almacenar la configuración de un usuario en su sitio web, específicamente, cómo guardar la configuración del modo oscuro y…

Category : Css   25-12-2020   by

Modo oscuro en el sitio web usando CSS y JavaScript

En el artículo de hoy vamos a aprender a construir más o menos estándar en estos días en las páginas web y que es el modo de color alternativo y el cambio entre ellos. Esto es muy útil cuando durante la noche se quiere que el usuario no sufra por…

Category : Css   12-11-2020   by

Cómo superponer múltiples imágenes usando CSS?

CSS significa Hoja de Estilo en Cascada. Es un lenguaje de hojas de estilo que define la presentación del documento en un lenguaje de marcado como HTML. La hoja de estilo en cascada permite diferenciar el contenido y otras presentaciones visuales como los colores, el diseño, las fuentes y los temas.…

Category : Css   08-10-2020   by Janeth Kent

Cómo usar el Masking en CSS

Cuando recortas un elemento usando la propiedad de clip-path, el área recortada se vuelve invisible. Si en cambio quieres hacer opaca una parte de la imagen o aplicarle algún otro efecto, entonces necesitas usar un enmascaramiento. Este post explica cómo usar la propiedad mask-image en CSS, lo que te permite…

Category : Css   28-09-2020   by Silvia Mazzetta

Cómo hacer animaciones en CSS3

Las animaciones CSS son una alternativa más poderosa que las transiciones. En vez de confiar en el secuencia de un estado inicial a un estado final, las animaciones pueden tener cuantos estados se necesiten en medio del estado inicial y el estado final, ofreciendo un mayor control de cómo los…

Category : Css   01-06-2020   by Silvia Mazzetta

Guía de Flexbox: las bases

En este artículo aprenderemos a manejar los elementos de nuestra web de una manera más eficiente y eficaz, gracias a la propiedad Flexbox. Pero cuidado, no estamos hablando de una simple propiedad css, sino de un conjunto de ellas, que nos permitirán organizar, alinear y distribuir el espacio de los elementos…

Category : Css   23-05-2020   by Silvia Mazzetta

Transiciones y Transformaciones CSS : guia básica con ejemplos

Desde el lanzamiento de CSS3, las transiciones permiten a los diseñadores web y desarrolladores web front-end crear animaciones sin necesidad de usar JavaScript. A partir de este mismo año 2019, las transiciones son finalmente soportadas por todos los navegadores modernos. Si desea utilizar transiciones en navegadores antiguos, es necesario utilizar prefijos…

Category : Css   20-11-2019   by Silvia Mazzetta

Grid CSS: la unidad fraccionaria

La unidad fraccionaria (fr) es una nueva forma de medición en CSS, asociada en gran medida a la Grid CSS. Finjamos que nos olvidamos de la Grid CSS o de las unidades fraccionarias por un momento. Bien. Así que son días festivos. En parte es verdad...mañana es fiesta ;-). Por la ocasión, hemos preparado…

Category : Css   31-10-2019   by Silvia Mazzetta

CSS3: Selectores avanzados y pseudo clases. Descripción, uso y ejemplos

Ya sabemos que para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector se define como el código que identifica a uno o varios elementos HTML para aplicarle estilos de color, tamaño, separación, etc. Los selectores más comunes son aquellos que se asignan a clases (class), identificadores…

Category : Css   29-10-2019   by Silvia Mazzetta

Que son y Como funcionan las medidas VH y VW de CSS3

Que son y Como funcionan las medidas VH y VW de CSS3

  Seguro muchos de nosotros conocemos las unidades px, em, rem, % y pt, pero quizás no todos conocían o usan las unidades de medida vh y vw. Hoy vamos a conocer las unidades vh y vw, introducidas en la versión 3 de CSS. Qué son estas medidas y cómo usarlas en…

Category : Css   23-02-2017   by Janeth Kent

10 Snippets de los media queries

10 Snippets de los media queries

Si estáis desarrolando un sitio o aplicación web Responsive (adaptativa)  y todavía no sabes que Media Queries utilizar para los dispositivos que estás soportando el artículo de hoy te vendrá perfecto! Antes de todo...Que se entiende por Media Query Snippets? Se llaman Media Query Snippets  pequeños fragmentos de código elaborados con las media queries para detectar la mayoría…

Category : Css   30-08-2013   by Janeth Kent

15 increíbles tutoriales para generar efectos de texto con CSS3

15 increíbles tutoriales para generar efectos de texto con CSS3

Normalmente para añadir efectos sobre textos utilizamos algunos trucos y efectos de Photoshop, pero si hablamos de diseño web entonces podemos conseguir efectos realmente impresionantes tan solo aplicando algo de CSS3. La ventaja de este método es que la cantidad de datos que se tienen que descargar para visualizar una página…

Category : Css   20-08-2013   by Janeth Kent

Clicky