Estructuras de control en CSS mediante Sass

Sass nos permite emplear estructuras de control en CSS  gracias a las directivas de que proporciona pudiendo realizar variaciones en el estilo basándonos en una condición. Básicamente, podemos realizar condiciones if y bucles en CSS. Las directivas de control de flujo no son complejas si ya estas habituado a la …

Operaciones aritméticas en CSS empleando Sass

Como llevo comentado en los tutoriales de Sass, este preprocesador dota de capacidades a CSS siendo una de ellas las operaciones aritméticas en CSS (si obviamos la función calc). Esta característica va dentro de capacidades lógicas de Sass ya que además de poder hacer cálculos también podremos hacer condiciones y …

Cómo ordenar código CSS con el preprocesador Sass

En este post explicaré cómo podemos ordenar código CSS con el preprocesador Sass. Para ello anidaremos propiedades, usaremos la interpolación y selectores posición para conseguir unas reglas mucho más sencillas y ordenadas. Si es la primera vez que escuchas hablar de Sass te recomiendo este post y compruebes que es …

Cómo instalar Sass y empezar a usarlo

En el post anterior hablé un poco en qué consistía los preprocesadores de CSS. En este post voy a explicar cómo instalar Sass y un par de ejemplos sencillos con variables para ver cómo se usa. Instalar Sass Hay 2 maneras instalar SASS, una de ellas es mediante una aplicación. …

Qué es un preprocesador de CSS y sus ventajas

Seguramente si te digo preprocesador de CSS no te suene pero si las palabras SASS, LESS o Compass. Estos son preprocesadors de CSS y en este post voy hablar un poco sobre que consisten, algunas de sus características y ventajas de usar un preprocesador de CSS. Qué es un prepcoresador …

Qué son las animaciones en CSS y cómo aplicarlas

Como explique anteriormente, las transiciones animan elementos en el tiempo. Sin embargo a diferencia de las animaciones, las transiciones son mucho más limitadas ya que sólo definimos el estado principio y el final cuando en las animaciones poder tener el control de los estados que estén en el medio. Las …

Cómo manejar varias transiciones en CSS3

En esta ocasión voy a mostrar como emplear varias transiciones en CSS sobre un mismo elemento. Sin embargo, antes de entrar en materia, será recomendable saber cómo funciona el atajo transition para que en caso de realizar varias transiciones, no quede un CSS con tantas líneas. El atajo transition A …

Transiciones en CSS: Cómo controlar el ritmo y el inicio

En este post continuaré con las transiciones en CSS, concretamente en el ritmo y el retraso que podemos aplicar a nuestra transición. Recordemos que una transición en CSS consiste en una animación sencilla que muestra el cambio gradual de las propiedades modificadas de un elemento. Transition-timing-function Se puede controlar el ritmo de …

Transiciones en CSS: transition-property y transition-duration

Las transiciones o la propiedad transition permiten cambiar  las propiedades CSS de un elemento a través del tiempo proporcionando animaciones sencillas. Por ejemplo, si el ratón pasa por encima de un hipervínculo y este cambia de color, se puede hacer el cambio de manera gradual. Para sacar un mayor partido a las …