Aprende CSS de manera visual

por:

Aprende CSS de manera visual

Uno de lo mayores problemas que solemos tener al utilizar CSS es que hay multitud de características, que se aplican de manera distinta a los navegadores y que no solemos saber exactamente que efecto tienen.

CSS de manera visual

A la hora de aprender CSS normalmente encontramos páginas donde explican cada una de las características de manera textual. Algunas incluyen además imágenes o gifs para ayudar al entendimiento. Sin embargo quizás la mejor manera de conseguir entender cómo funcionan es mediante una comparación de las visualizaciones de los distintos valores de una propiedad. Esta idea es la que siguen en CSS Reference.

CSS Reference nos permite ver exactamente representación visual se genera para cada valor de una propiedad, así podemos elegir la que más nos interesa.

Valores de la propiedad CSS border

 

De igual manera este enfoque nos permite encontrar la propiedad que tenemos que usar sin conocer su nombre, solo mirando las imágenes resultantes.

La propiedad de CSS align

Este acercamiento además ayuda mucho a la hora de entender las animaciones:

La propiedad animation de CSS

Espero que este recurso os ayude a entender cómo funcionan las propiedades de CSS.

Transformaciones vía CSS

Otra de las características añadidas en CSS3 es la capacidad de aplicar transformaciones a una entidad, como por ejempllo rotación o translación. Sin embargo, la mayoría de ellas son complejas a la hora de empezar a usarlas y más aún, si se quiere utilizar varias para conseguir un resultado muy elaborado. Es por ello que el siguiente recurso os ayudará muchísimo al permitir ver cómo afecta cada opción de manegra gráfica e interactiva.

Por ejemplo, el resultado de aplicar el siguiente estilo a un elemento es el siguiente:

element {
    transform: rotate(85deg)
        perspective(300px)
        scale(0.8)
        translate(60px,60px)
        skew(0deg,35deg);
    transform-origin: 44% center;
}

Transformaciones CSS de manera visual

Un saludo.

The following two tabs change content below.

Jorge Durán

Entusiasta de la tecnología desde los 10 años, desarrollador y creador de varios proyectos de software y autodidacta por naturaleza. Ingeniero Informático por la USAL

Deja una Respuesta