TEMAS de CSS

En la actualidad, gracias en parte a la influencia de Bootstrap, es habitual utilizar en los sitios y aplicaciones web las tipografías base de cada sistema operativo para los elementos de la interfaz (botones, menús, etc.)

Quiero compartir con vosotros una técnica realmente útil para tener vuestro blog o web como los chorros del oro. Personalmente me parece interesante ya que he estado tiempo buscando cómo podría hacer esto y al final he visto una solución que puede resultar bastante efectiva. Voy a contar de qué se trata y cómo usarlo.

Los gestores de contenido como WordPress permiten hacer casi todo muy fácil sin necesidad de saber código web, pero en ocasiones resulta interesante poder hacer cosas muy concretas con tu plantilla para ir un poco más allá en cuanto a la personalización del tema y conseguir un resultado aún mejor que el que a priori podrías lograr.

Los gestores de contenido como WordPress permiten hacer casi todo muy fácil sin necesidad de saber código web, pero en ocasiones resulta interesante poder hacer cosas muy concretas con tu plantilla para ir un poco más allá en cuanto a la personalización del tema y conseguir un resultado aún mejor que el que a priori podrías lograr. ¡Te lo cuento en este post!

Si vas a tu web y das a botón derecho y a continuación Ver código fuente de la página, lo que verás es el código HTML y CSS con el que está construido tu sitio. Estos códigos los crea automáticamente tu CMS para que tu web pueda verse en internet. Si trabajas con un gestor de contenidos no tienes que implementarlos manualmente, pero conociéndolos un poco puedes hacer verdaderas maravillas.

Las plantillas premium suelen tener una amplia sección de opciones para modificar fácilmente casi todos los elementos de tu web, como colores, fondos, estilos de letra, etc. Pero, ¿y si hay elementos y zonas de la plantilla que no puedes modificar porque no vienen incluidos en las opciones?

Estoy segura de que muchos de vosotros, alguna vez, habéis tenido algún tipo de problema a la hora de ajustar el tamaño de tablas HTML. Quienes habitualmente maquetamos, sabemos de sobra lo complicado que es controlar los tamaños de una tabla, son uno de los elementos del diseño web que más quebraderos de cabeza nos trae a la hora de desarrollar una maquetación responsive.

Nueva edición (2017) de la CSS3 Cheatsheet (lenguaje de hojas de estilo) en formato PDF, incluyendo nuevos módulos como Flexbox, Grid o Motion Paths.

Estoy segura de que muchos de vosotros, alguna vez, habéis tenido algún tipo de problema a la hora de ajustar el tamaño de tablas HTML. Quienes habitualmente maquetamos, sabemos de sobra lo complicado que es controlar los tamaños de una tabla, son uno de los elementos del diseño web que más quebraderos de cabeza nos trae a la hora de desarrollar una maquetación responsive.

Aprende como optimizar tus hojas de estilos para mejorar el rendimiento de tu sitio web.

Actualmente tenemos gran variedad de dispositivos desde los que accedemos a internet. Smartphones, tablets, laptops, desktops, televisores, incluso relojes.
Todos ellos tienen un tamaño de pantalla diferente y también una resolución diferente. Una imagen en un smartphone puede verse muy nítida, pero ese mismo archivo en un monitor de alta resolución se verá pixelada.
Lo ideal sería tener la misma imagen pero en varios tamaños y que el navegador eligiese cual presentar en cada momento.
¿Es esto posible?

Si picas a mano multitud de código CSS, un pre-procesador puede ayudarte a disminuir en gran medida los niveles de estrés y sobre todo a ahorrarte un montón de tiempo, que puede utilizar para hacer otras cosas. El uso de herramientas como Sass, Less, Stylus o PostCSS hace que las hojas de estilo extensas y difíciles de entender sean más asequibles y gestionables. Gracias a características como el uso de variables, funciones o los mixins, tu código estará mejor organizado. Lo que te permite desarrollar mucho más rápido y cosechar menos errores.
En este artículo vamos a explicarte cómo utilizar Sass y te enseñaremos algunas de sus características.