Sencillos cambios y ajustes con CSS

Uno de los básicos que hay que saber a la hora de hacer modificaciones con CSS es elegir el selector adecuado. También debemos saber evitar que nuestro código se sobreescriba por otro más específico. Veamos estas dos cosas en este vídeo 🙂

Antes de empezar a cambiar los colores de diferentes elementos, veamos qué sintaxis podemos utilizar a la hora de trabajar con ellos

Otro truco que cualquiera debería saber es cómo ocultar elementos de su web por completo o de páginas concretas. Una vez que tienes elegido el selector correcto (y si no sabes hacerlo mira la primera sección de la guía) vamos a ver cómo lo podemos ocultar de diferentes formas.

En este apartado veremos cómo poner algunos elementos delante o detrás de otros para crear diseños interesantes como este de aquí:

En pocas palabras, lo que intentamos conseguir es algo como esto:

Lo que hacemos es que el header de nuestra web (normalmente solo en la home) esté flotando encima de la primera sección de la web, que puede contener un color de fondo, una imagen, lo que sea. Es algo que me habéis pedido mucho y es realmente sencillo de conseguir. ¡Vamos allá!

Vamos a ver cómo cambiar el ancho de las páginas, entradas etc, para ajustarlas a nuestro diseño o porque algunos themes lo traen muy estrecho por defecto.

Veremos cómo crear secciones que tengan un fondo a ancho completo sin afectar el contenido de dentro

Seguro que has visto el típico botón o cualquier otro tipo de contenido que está pegado a una parte de la pantalla y te sigue con el scroll. ¿A que llama la atención? También para según qué cosas ayuda mucho al usuario en la navegación. Yo por ejemplo los uso para que siempre tengas a mano el botón de soporte y puedas contactarme cuando quieras:

Bueno, que te voy a enseñar cómo se hace. ¡Al lío!

Quería compartir contigo algo muy sencillito de hacer pero que a la vez da un toque muy elegante a la web. Se trata de crear unas sutiles animaciones en CSS que se van a ejecutar justo cuando un usuario entra en nuestra web.

Aquí vemos un truco muy curioso que nos permite dejar una parte de nuestro contenido pegada a la pantalla para que nos acompañe con el scroll.

Veamos cuál es la forma correcta de cargar y utilizar una fuente nueva en nuestra web, sustituyendo una fuente que viene por defecto con la plantilla.

Aquí vemos cómo trabajar con los pseudoelementos :before y :after para añadir nuevo contenido a diferentes elementos de nuestra web directamente desde CSS.

Es un poco complicado explicar de qué trata esto sin enseñarlo así que te recomiendo ver el vídeo lo antes posible 😀

Pero aún así voy a intentarlo: con este vídeo vamos a mejorar la usabilidad de aquellos botones de menú que no tienen enlace a una página propia pero sí que tienen un sub-menú con más elementos.