Los Temas más visitados de CSS

Listado de los Temas más visitados durante los últimos 30 días
Imágen de perfil

internetMaquetación con CSS Grid


115 visualizaciones el último mes

CSS

Publicado el 27 de Octubre del 2019 por Administrador
716 visualizaciones desde el 27 de Octubre del 2019
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

Screenshot_20191027_231348
Imágen de perfil

internetUn vistazo a las columnas responsive en HTML5 y CSS3


28 visualizaciones el último mes

HTML

,

CSS

Publicado el 30 de Septiembre del 2019 por Administrador
569 visualizaciones desde el 30 de Septiembre del 2019
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.

Screenshot_20190930_160958
Imágen de perfil

internetMaquetando un site en 3 columnas!! con CSS


25 visualizaciones el último mes

CSS

Actualizado el 1 de Mayo del 2013 por Administrador (Publicado el 22 de Febrero del 2012)
11.766 visualizaciones desde el 22 de Febrero del 2012
Aprende a maquetar tu site en 3 columnas con CSS.
Imágen de perfil

internetEstructuras de control en CSS mediante Sass


25 visualizaciones el último mes

CSS

Publicado el 14 de Junio del 2019 por Administrador
443 visualizaciones desde el 14 de Junio del 2019
Sass nos permite emplear estructuras de control en CSS gracias a las directivas de que proporciona pudiendo realizar variaciones en el estilo basándonos en una condición. Básicamente, podemos realizar condiciones if y bucles en CSS. Las directivas de control de flujo no son complejas si ya estas habituado a la programación ya que el uso de bucles y condiciones son el día a día.

Las estructuras de control en CSS están más centrados en los mixins, que son como funciones. La finalidad es dotar de mayor flexibilidad a la hoja de estilos cuando queremos agregar nuevas reglas.
Imágen de perfil

internetDiseño responsive: ¿cómo configurarlo correctamente?


25 visualizaciones el último mes

CSS

Publicado el 29 de Mayo del 2019 por Administrador
792 visualizaciones desde el 29 de Mayo del 2019
¡Cada día está más claro! El PC está perdiendo el combate contra la cantidad de dispositivos con los que podemos acceder hoy en día a la red, hasta tal punto que la venta de tablets y smartphones han superado a las ventas de los ordenadores tanto de sobremesa como portátiles.

Hasta hace algunos años era imprescindible utilizar el ordenador para navegar por internet; ahora en cambio, es muy probable que la mayoría de accesos se realicen desde plataformas mobile o móviles. Hoy en día todos llevamos un smartphone encima y nos comunicamos y buscamos información constantemente, por lo que se ha convertido en algo esencial optimizar los sitios web para un buen uso en estos tipos de dispositivos.

Screenshot_20190529_161800
Imágen de perfil

internetImprimir la web en el siglo XXI


24 visualizaciones el último mes

CSS

Publicado el 21 de Mayo del 2019 por Administrador
529 visualizaciones desde el 21 de Mayo del 2019
Hace poco tuve que afrontar en el trabajo una tarea poco habitual: «Dar la oportunidad al usuario de imprimir una web». Ante tan extraño reto y con total libertad para ejecutar este poco frecuente encargo, decidí ponerme a investigar. En el siguiente artículo transmitiré algunos consejos y sugerencias atesoradas durante este proceso.
Imágen de perfil

internetLa guía rápida para aprender CSS básico desde cero


22 visualizaciones el último mes

CSS

Publicado el 29 de Diciembre del 2015 por Administrador
2.549 visualizaciones desde el 29 de Diciembre del 2015
Sencilla guía de introducción a CSS nivel básico.
Contiene:
1. Aprender CSS es fácil si te lo planteas bien
2. ¿Cómo funcionan las hojas de estilo en cascada?
3. Los conceptos clave en las hojas de estilo CSS
3.1. Reglas, selectores y propiedades
3.2. La cascada: herencia, sobreescritura y conflictos de estilos
4. Un ejemplo práctico
5. Propiedades básicas que deberías conocer
5.1. Maquetación básica
5.2. Fuentes y texto
5.3. Color y fondos
5.4. Listas
5.5. Bordes
6. Vincular los estilos CSS a páginas HTML
6.1. Hojas de estilo CSS inline
6.2. Hojas de estilo CSS internas
6.3. Hojas de estilo CSS externas
7 Personalizar CSS en blogs: WordPress y Blogger
7.1. CSS en Blogger
7.2. CSS en WordPress.org
7.3. CSS en WordPress.com
8. Referencias para profundizar más
Imágen de perfil

internetCódigos CSS y HTML para editar tu página web en WordPress


22 visualizaciones el último mes

CSS

,

HTML

,

WordPress

Publicado el 13 de Febrero del 2019 por Administrador
833 visualizaciones desde el 13 de Febrero del 2019
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.
Imágen de perfil

internet¿Cómo limpiar estilos no usados de tu CSS para liberar espacio?


22 visualizaciones el último mes

CSS

Publicado el 13 de Febrero del 2019 por Administrador
649 visualizaciones desde el 13 de Febrero del 2019
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.
Imágen de perfil

internetCSS Grid. Solución a los problemas de Float y Flexbox


21 visualizaciones el último mes

CSS

Publicado el 15 de Septiembre del 2019 por Administrador
507 visualizaciones desde el 15 de Septiembre del 2019
Como solucionar los problemas que nos ofrece float y flexbox.

Screenshot_20190915_185826
Imágen de perfil

internetCrea tu propio framework CSS con Stylus


18 visualizaciones el último mes

CSS

Publicado el 30 de Enero del 2015 por Administrador
1.756 visualizaciones desde el 30 de Enero del 2015
Gracias a preprocesadores como Stylus podemos crear un CSS mucho más sencillo de mantener y editar. Aprovechando sus funciones podemos crear un pequeño framework a medida, nuestro propio Bootstrap, pero personalizado con las utilidades que necesitemos en nuestros proyectos.
Imágen de perfil

.pdfCSS Quick Reference Manual Cascading Style Sheets


17 visualizaciones el último mes

CSS

Publicado el 29 de Noviembre del 2010 por Administrador
3.449 visualizaciones desde el 29 de Noviembre del 2010
Hoja de referencia rápida de CSS. En formato pdf. Contiene 2 páginas.
Imágen de perfil

internetCambiando el diseño de las barras de scroll con CSS


17 visualizaciones el último mes

CSS

Publicado el 22 de Abril del 2019 por Administrador
542 visualizaciones desde el 22 de Abril del 2019
Una de las recomendaciones fundamentales para una buena usabilidad es no modificar en exceso el diseño de los elementos que forman parte de la interfaz de usuario del sistema operativo, tales como botones, elementos select, las barras de scroll, etc. Hacerlo complica el uso de tu sitio o aplicación web porque el usuario tiene que aprender a reconocerlos.

No obstante, como toda norma tiene sus excepciones, a veces puede ser necesario modificar estos elementos en algunos diseños muy especiales. Firefox 64, publicado en diciembre de 2018, añade entre sus nuevas funcionalidades la posibilidad de cambiar el diseño de las barras de scroll.

En concreto, lo hace a través del estándar CSS Scrollbars Module Level 1, que todavía se encuentra en fase de borrador y no es un estándar oficial. Los tres escenarios para los que se ha pensado este estándar son:

1.- Cambiar el color de las barras de scroll para adaptarlas al diseño de la aplicación o sitio web.
2.- Mostrar barras de scroll más finas de lo normal cuando un elemento lo requiera.
3.- Diseñar barras de scroll totalmente personalizadas si el diseño así lo requiere.

Para ello se han definido dos nuevas propiedades CSS (scrollbar-color y scrollbar-width) que se pueden aplicar a la página entera y también a cualquier elemento que soporte la propiedad overflow de CSS.
Imágen de perfil

internetCódigos CSS y HTML para editar tu página web en WordPress


16 visualizaciones el último mes

CSS

,

HTML

,

WordPress

Publicado el 5 de Noviembre del 2018 por Administrador
578 visualizaciones desde el 5 de Noviembre del 2018
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?
Imágen de perfil

internetDiseño y maquetación web para smartphones y tablets


15 visualizaciones el último mes

CSS

Publicado el 16 de Junio del 2014 por Administrador
2.221 visualizaciones desde el 16 de Junio del 2014
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.
Imágen de perfil

.htmlCapas


12 visualizaciones el último mes

CSS

Publicado el 17 de Junio del 2011 por Administrador
6.318 visualizaciones desde el 17 de Junio del 2011
Cómo usar las capas para dotar a las páginas de dinamismo y espectaculariadad y crear efectos especiales
Imágen de perfil

internetResponsive Slider utilizando FlexSlider


12 visualizaciones el último mes

CSS

Publicado el 8 de Mayo del 2013 por Administrador
13.361 visualizaciones desde el 8 de Mayo del 2013
En este pequeño tutorial vamos a crear un slider animado con jquery y lo vamos a hacer responsive, es decir que se adapte a cualquier dispositivo que el visitante este utilizando, para esto vamos a trabajar con un plugins que nos facilitara el trabajo, se trata de FlexSlider un plugins de Jquery de código abierto que nos facilitará este trabajo y lo optimiza para los dispositivos móviles.
Imágen de perfil

.pdfQuick Reference Guide of CSS3


11 visualizaciones el último mes

CSS

Publicado el 14 de Octubre del 2011 por Administrador
6.857 visualizaciones desde el 14 de Octubre del 2011
Guía de referencia rápida de CSS3 en formato pdf. Contiene 5 páginas.
Imágen de perfil

internetCómo hacer que tus imágenes sean Responsive


11 visualizaciones el último mes

CSS

Publicado el 19 de Mayo del 2016 por Administrador
1.275 visualizaciones desde el 19 de Mayo del 2016
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?
Imágen de perfil

.pdf2017 CSS3 CheatSheet


11 visualizaciones el último mes

CSS

Publicado el 4 de Diciembre del 2017 por Administrador
979 visualizaciones desde el 4 de Diciembre del 2017
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.
Imágen de perfil

internetInter UI, una nueva tipografía para interfaces


11 visualizaciones el último mes

CSS

Publicado el 14 de Abril del 2019 por Administrador
508 visualizaciones desde el 14 de Abril del 2019
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.)
Imágen de perfil

.pdfReferencia rápida de CSS3


10 visualizaciones el último mes

CSS

Publicado el 19 de Agosto del 2011 por Administrador
12.217 visualizaciones desde el 19 de Agosto del 2011
Guía rápida en formato PDF con todas las opciones de CSS3. En formato pdf. contiene 5 páginas.
Imágen de perfil

internetCSS. Menús flotantes


10 visualizaciones el último mes

CSS

Publicado el 22 de Mayo del 2015 por Administrador
1.438 visualizaciones desde el 22 de Mayo del 2015
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.
Imágen de perfil

.htmlPorqué diseñar con tablas es estúpido: problemas definidos


9 visualizaciones el último mes

CSS

Publicado el 10 de Mayo del 2007 por Administrador
5.926 visualizaciones desde el 10 de Mayo del 2007
Artículo que te explica como diseñar tablas en CSS.
Imágen de perfil

internetEl Modelo de Caja en CSS


9 visualizaciones el último mes

CSS

Publicado el 7 de Junio del 2007 por Administrador
6.140 visualizaciones desde el 7 de Junio del 2007
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.
Imágen de perfil

.htmlTraducción a porcentajes de 960.gs para Responsive Design


9 visualizaciones el último mes

CSS

Publicado el 18 de Enero del 2013 por Administrador
4.426 visualizaciones desde el 18 de Enero del 2013
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".
Imágen de perfil

internetCSS. Menús flotantes


9 visualizaciones el último mes

CSS

Publicado el 7 de Mayo del 2013 por Administrador
10.028 visualizaciones desde el 7 de Mayo del 2013
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
Imágen de perfil

internetUsando CSS en tablas


8 visualizaciones el último mes

CSS

Publicado el 20 de Septiembre del 2007 por Administrador
5.543 visualizaciones desde el 20 de Septiembre del 2007
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.
Imágen de perfil

.htmlFalsas columnas en CSS


8 visualizaciones el último mes

CSS

Publicado el 27 de Septiembre del 2007 por Administrador
5.867 visualizaciones desde el 27 de Septiembre del 2007
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.
Imágen de perfil

internetVentajas de CSS al posicionamiento Web


8 visualizaciones el último mes

CSS

Publicado el 18 de Febrero del 2008 por Administrador
5.127 visualizaciones desde el 18 de Febrero del 2008
Ventajas que ofrecen las CSS para un buen posicionamiento web.