5 formas sencillas de hacer magia con CSS

Sé lo que estás pensando, te has dejado la varita en Hogwarts, el perro te la ha mordisqueado, o peor aún: eres muggle. Descuida, esto es un post de SetUp Media, solo necesitarás un ratón, un teclado y muchas ganas de clicar y teclear.

Antes de empezar, vamos a definir qué es el CSS u hoja de estilo en cascada (Cascading Style Sheets en inglés). Básicamente es el lenguaje que se encarga de definir como se verá un documento HTML en nuestro navegador.

Así pues, gracias a las líneas de código escritas en cascada en la hoja de estilo, una web con una estructura HTML idéntica se puede ver completamente distinta. ¿Parece magia verdad? Puede que lo sea…

Ahora que ya brilla en tus ojos una chispa de curiosidad, vamos al lío! El CSS es “muy fácil”, solo se trata de dar propiedades a una serie de elementos predefinidos en nuestro HTML conocidos como “id” o “class”.

Ej:

#id o .class {

propiedades: mágicas;

}

Esto solo son 5 ejemplos de todo lo que podemos obtener con un pequeño y sutil toque de varita/teclado:

---

Cambiemos el tamaño de la letra:

.parrafoEj {

font-size: 16px;

}

---

Hagamos un círculo:

.círculoEj {

height: 200px;

width: 200px;

border-radius: 50%;

}

---

Démosle color:

.circuloEj {

background-color: red;

}

---

O que sea transparente:

.circuloEj {

background-color: transparent;

}

---

Y ahora… desaparece!

.circuloEj {

display: none;

}

Como ves, la magia corre por cada línea del CSS, y vale, deacuerdo, quizás no era tan fácil como lo pintábamos al principio, pero no desesperes joven aprendiz, en Set Up Media somos unos magos con muchos años de experiencia y varitas majestuosas, capaces de los mejores trucos.

Contacta con nosotros si quieres que le demos un poco de magia a tu proyecto, estaremos encantados de ayudarte J.