Los Temas más visitados de CSS

En la versión 4 del popular framework para Frontends existen clases CSS que te pueden facilitar la maquetación de tu proyecto, solo es cuestión que las pongas en práctica y las uses hasta que las hagas parte de tu trabajo en maquetación y veras lo rápido que avanzarás, estas clases te ahorran muchas líneas de código CSS que sueles escribir para darle cierto aspecto a un elemento del proyecto. Veamos las clases en el siguiente tutorial.

Algo que es muy útil y recurrente dentro de mis proyectos es el menú desplegable, este elemento le da un toque moderno a nuestras webs, además de ahorrar espacio sobre todo cuando se trata de diseños para dispositivos móviles. Hacemos clic sobre un botón y que despliega el contenido que queremos ver en lugar de llenar la página de texto y tener que hacer scroll hasta encontrar lo que se busca. Por lo que también estamos aportando usabilidad a nuestra página web.

Este artículo muestra como crear un menú, pero podría ser simplemente un botón que despliega un contenido como las características de un producto por ejemplo y la acción podría dispararse al pasar el ratón por encima.

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?

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.

Articulo en formato pdf de las referencias CSS más importantes. Esquematizado en tres columnas: Propiedad, descripción y valores.

Este es un artículo que te servirá de guía para crear formularios totalmente accesibles usando XHTML y hojas de estilo en cascada (css) para darle formato.

Aprenderás como hacer un formulario con el famoso estilo de google conocido como Material Design.

Puedes utilizar este diseño de formulario para cualquier cosa, ya sea un formulario para registrar usuarios o un formulario de contacto, ademas este formulario es adaptable a dispositivos móviles por lo que es una buena alternativa a los formularios tradicionales y aburridos.

Ventajas que ofrecen las CSS para un buen posicionamiento web.

Artículo que te explica como diseñar tablas en CSS.

Una de las cuestiones que más me preguntan sobre el diseño de mi sitio personal es la siguiente: ¿Cómo consigues que el fondo de color de la columna derecha se extienda hasta abajo del todo en la página?. Es un concepto sencillo, realmente es uno que muchos ya conocerán. Pero para aquellos que todavía no lo conocen, esta técnica puede ser un truco útil.

Google Maps, se ha convertido en un elemento prácticamente imprescindible en nuestras aplicaciones webs, para que todos nuestros usuarios puedan saber donde nos encontramos. Pero que pensaríais si os damos la opción de ponerlo como fondo de nuestra web.

Los estilos CSS es lo que nos permite dar la apariencia que deseamos a nuestros desarrollos, por lo que forma parte fundamental de estos. Hoy vamos a ver un listado de 8 técnicas que nos pueden servir a la hora de realizar nuestros desarrollos.
1. Trabajar con medidas relativas
2. Utilizando columnas múltiples
3. Evitando el salto de línea
4. Rotando imágenes
5. Rotando texto
6. Estilizando enlaces según su destino
7. Centrando un elemento
8. Sombra interna

La maquetación con CSS siempre ha sido… inesperada. Llena de tablas con infinitas columnas y filas, incontables floats y clears sin ton ni son. Y por supuesto con Bootstrap, aunque claro, si querías salir de lo establecido mucha suerte. Todo esto cambia con Grid.

Índice de Contenidos:
CSS Grid
Colocar elementos en la grilla
Layouts con grid-template-areas
Repeat
Responsividad avanzada
Conclusión

Muchas son las propuestas para insertar menús en nuestras páginas Web, típicamente se han utilizado desde simples esquemas con hipervínculos, listas numeradas, rutinas en JavaScript, applets de Java, plug-ins de Abobe Flash, … por citar algunas soluciones populares.
En el presente artículo presentamos una alternativa que consideramos solvente y muy eficiente en varios aspectos, como su apariencia totalmente personalizable y facilidad de programación, o como en el escaso sobrecosto que puede suponer para el transito a través de Internet, tanto en tamaño, como en código potencialmente peligroso. Lo que entraría en el ámbito más general de la optimización de código HTML.
Nos basaremos en la aplicación de estilos a listas no ordenadas de entradas con hipervínculos –que serán las opciones del menú resultante-, convirtiendo dichas listas en verdaderos menús flotantes, con la toda la apariencia y prestaciones de los habitualmente utilizados.
A modo de resumen, trataremos:
1. La aplicación de los estilos básicos para la conversión en un menú
2. Control de anchos, fuentes y cursores
3. Menús horizontales y verticales
4. Menús con efectos de bordeados, sombras, centrados y demás

Simple y llano. Aprende a optimizar tus códigos CSS a través de estos 12 consejos y 4 herramientas.

Una de las cosas que más echábamos de menos los diseñadores al pasarnos de print a web en épocas pretéritas, era la posibilidad de dividir el texto en columnas.

Por suerte, todo esto cambió con la llegada de CSS3. Usando CSS3 tenemos la posibilidad de organizar los contenidos de una página web en columnas sin tener que crear elementos HTML extra, algo muy útil si estamos maquetando una web con mucho contenido o donde la longitud de línea nos pueda quedar demasiado grande (como periódicos o revistas digitales). Antes, hacer esto era totalmente impensable sin la ayuda de JavaScript.

Tener esta posibilidad de dividir los contenidos en columnas nos abre un mundo de posibilidades para jugar con el layout de los contenidos sin tener que rompernos demasiado la cabeza. Por otro lado, hay que tener cuidado con la altura final del contenido, porque la experiencia del usuario se puede degradar al tener que ir haciendo scroll de arriba para bajo para poder leer todo.

Por cierto, hablamos de columnas en los contenidos. Para organizar la maquetación general de la página hay otras técnicas más adecuadas, como crear un grid responsive a base de floats, o usar técnicas como Flexbox o CSS Grid Layout. Y si no, siempre te quedará Bootstrap o frameworks CSS similares.

La vía principal para transmitir un mensaje son las palabras y tener una tipografía fácil de leer y elegante, lo cual le da una personalidad a lo que quieres decir. Así que si quieres retocar tu estilo un poco, este artículo es para ti. Hoy te presento la forma más fácil de usar las tipografías correctas en tu blog, página web o app con Google Fonts desde hoy mismo.

Hoy te mostraré la importancia de usar la tipografía correcta en tu diseño de marca y la opción de Google Font. Aprenderás a instalar cualquier fuente disponible en tu web y algunos consejos para parecer más profesional.

Muchos gurus de los estándares hacen parecer el uso de tablas como cosa del demonio. Mientras que lo mejor es separar la estructura del contenido y utilizar CSS exclusivamente, para muchos diseñadores los layouts con tablas son una realidad y una necesidad práctica. Podemos aprovechar la versatilidad de CSS para nuestras páginas aun cuando usemos tablas.

Es muy fácil maquetar una página que tenga un mapa de Google, simplemente debemos utilizar maquetación y posicionamiento CSS.

En este artículo quiero comentar una de las formas de presentar un formulario web sin tener que utilizar tablas para que todos sus campos se vean correctamente. Utilizaremos CSS.

Hoja de referencia rápida de CSS. En formato pdf. Contiene 2 páginas.

Aprende a maquetar tu site en 3 columnas con CSS.

Aprende a hacer menús desplegables con CSS3

Los pseudo-elementos :before y :after se utilizan junto con la propiedad content para añadir contenidos antes o después del contenido original de un elemento. En este artículo vamos a ver a fondo qué son los pseudo-elementos :before y :after, y cómo sacarles el máximo partido en nuestros diseños web.
A pesar que la W3C incluye otros pseudo-elementos, como son los conocidos :link, :hover o no tan conocido :first-child, en este artículo nos vamos a centrar exclusivamente en los pseudo-elementos :after y :before y explorar algunas de las cosas que podemos hacer con ellos para enriquecer nuestros diseños.

En este artículo os mostraré como maquetar una web para que se adapte a diferentes resoluciones de pantallas, smartphones y tablets. Tendencia que en inglés se llama Responsive Design.

Aprende a incluir en tus proyectos web cualquier tipo de fuente sea ttf, eot, otf o svg

Posiblemente la regla que más impacto negativo ha tenido en los resultados de Page Speed en la gran mayoría de Blogs de Blogger ha sido la que vamos a tratar y resolver en esta guía: los problemas de generación con bloqueos de Javascript y CSS.

Los tooltips son los "globos de ayuda" que aparecen al posicionar el ratón sobre un determinado elemento. Últimamente se están poniendo de moda en el diseño web porque permiten añadir mucha información útil a un sitio o aplicación web sin tener que "ensuciar" demasiado la interfaz.
Siempre ha sido posible crear tooltips solamente con CSS, sin necesidad de utilizar ninguna librería JavaScript. Sin embargo, antes de CSS 3 este tipo de tooltips eran muy rudimentarios y por eso muchos diseñadores recurrían a soluciones basadas en JavaScript. En este artículo vamos a hablar sobre Hint.css la librería para crear tooltips modernos exclusivamente con CSS.

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.