Los Temas más visitados de CSS
Listado de los Temas más visitados durante los últimos 30 días
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?
Este 2012 es el año de la prima de riesgo, Lana del Rey, las pelis de superhéroes y el diseño sensible o responsive design (amigo lector, esto es sólo la intro del post, no centres tus iras en ella…). Por eso, cuando he visto un post en uno de mis blogs de desarrollo de cabecera, Cats who Code, con una serie de consejos o tips para crear diseños responsive de calidad, me he visto en la obligación ética y moral de compartirlo con toda la comunidad de Genbeta Dev. En total son 7 consejos para hacer buen responsive design y tengo que reconocer que los comparto todos y cada uno.
Aprende como optimizar tus hojas de estilos para mejorar el rendimiento de tu sitio web.
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.
En la siguiente tabla se encuentran las equivalencias entre las distintas unidades de medida que podemos encontrar en CSS (la equivalencia es aproximada, no exacta, en última estancia depende de la fuente, el navegador y el sistema operativo).
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 utilización del estándar de marcado CSS (en español Hojas de Estilo en Cascada) definido por el World Wide Web Consortium (W3C) permite a diseñadores y programadores definir estilos coherentes para páginas web y aplicar la plantilla a varias páginas. Un aspecto especialmente relevante de CSS es el Modelo de Caja. Este artículo brinda una primera aproximación a su arquitectura y a las distintas posibilidades que ofrece.
Colección de 15 artículos básicos de CSS para programadores principiantes.
Ventajas que ofrecen las CSS para un buen posicionamiento web.
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.
La técnica de los sprites, consiste en sustituir el mayor número de imagenes posibles de una página web, por una sola. La idea, es unir todas las imágenes que aparecen en un web condensadas en una sola, para aumentar la velocidad de carga de un web. No parece lógico que cinco imágenes pequeñas, tarden (por ejemplo) más en cargar que una sola imagen grande que las contenga a todas ellas, pero es así.
Para fijar las dimensiones de las fuentes de textos, disponemos de un buen grupo de unidades de medida estandarizadas en CSS 3. Este artículo te explica como usarlas.
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.
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.
Imprimir de manera organizada. En este taller conocerá cómo controlar saltos de página en la impresión de un documento HTML.
Manual básico de como usar el Validador de CSS de W3C.
Artículo que te explica como diseñar tablas en CSS.
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.
HTML5 nos ha brindado nuevas propiedades para background, convirtiendo a esta etiqueta en una herramienta realmente potente, que nos va a permitir crear diseños realmente impresionanetes, usando simplemente CSS3.
La utilización del estándar de marcado CSS (en español Hojas de Estilo en Cascada) definido por el World Wide Web Consortium (W3C) permite a diseñadores y programadores definir estilos coherentes para páginas web y aplicar la plantilla a varias páginas. Un aspecto especialmente relevante de CSS es el Modelo de Caja.
Esta propiedad de css3 nos va a permitir extender el contenido de un elemento html en múltiples columnas, igual como se utilizan en los periódicos y revistas. Esto sirve para no hacer ver una columna de texto muy larga y tediosa a la vista, si no que al insertar múltiples columnas vamos a poder ver un solo artículo en un tamaño determinado en un solo pantallazo del navegador, y así no evitamos el hacer scroll, que a mucha gente aburre.
Con CSS3 Columns el navegador determina cuando pone fin a una columna y comienza la siguiente columna, sin necesidad de algún código extra vamos a conservar la flexibilidad para cambiar el número de columnas así como sus anchuras.
Matt Berseth nos enseña una técnica que podemos usar con CSS para crear imagenes Sprite con el tema XP.
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.
Es muy fácil maquetar una página que tenga un mapa de Google, simplemente debemos utilizar maquetación y posicionamiento CSS.
Esta página muestra como usar la propriedad float de CSS para hacer páginas con dos o tres columnas, sin usar tablas (el elemento table del HTML, que se debe usar solo para datos tabulados)..
Cómo usar las capas para dotar a las páginas de dinamismo y espectaculariadad y crear efectos especiales
Archivos CSS del framework CSS 960 Grid System, pero traducidos a porcentajes, en lugar de medidas en píxeles, pensando en el "Responsive Web Design".
En este artículo vamos a ver una forma de emplear los pseudo-elementos ":before" y ":after", en combinación con la propiedad content y los selectores de atributos, para agregar un ícono a nuestros enlaces de manera selectiva, dependiendo del contenido al que apunte el enlace. Con esto no solo podemos darle un estilo fresco al diseño del sitio, sino que también vamos a mejorar la usabilidad del mismo ya que le evitamos sorpresas al usuario al indicarle de antemano el tipo de contenido que está por abrir, sobre todo si se trata de documentos de Office o archivos PDF que solicitan la descarga del mismo.
El principal cambio de conceptualización que ha traído el diseño web responsive ha sido sin duda la sustitución del pixel por unidades relativas. Es cierto, antes ligábamos todos los elementos del diseño (tamaño de tipografía, contenedores, imágenes, márgenes…) a una unidad fija. El pixel. Pero con el responsive todo es distinto. Trabajamos con unidades relativas: porcentajes (%), ems, rems…y las imágenes sin duda son uno de los elementos más afectados.
En este tutorial vamos a explicar, de una manera más o menos gráfica, cómo se disponen los componentes visuales que pueden ir dentro del código HTML de una página web, con el soporte de hojas de estilo CSS.
El nivel de complejidad del tutorial es básico, sobre todo si los comparamos con otros publicados recientemente sobre Responsive CSS, pero hay que empezar por abajo, es capital tener las siguientes nociones claras para evitar problemas de renderización de componentes entre distintos navegadores y versiones de los mismos.