Promedio de descarga/visualización de los códigos de CSS

Listado de los códigos con más promedio de visualizaciones realizadas por día desde su publicación en la web.
Imágen de perfil

internetMaquetación con CSS Grid


30 visualizaciones de promedio por día

CSS

Actualizado el 28 de Octubre del 2019 por Administrador (Publicado el 27 de Octubre del 2019)
660 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


11 visualizaciones de promedio por día

HTML

,

CSS

Publicado el 30 de Septiembre del 2019 por Administrador
552 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

internetAprende a usar los pseudo-elementos :before y :after en CSS


10 visualizaciones de promedio por día

CSS

Publicado el 23 de Julio del 2013 por Administrador
22.128 visualizaciones desde el 23 de Julio del 2013
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.
Imágen de perfil

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


8 visualizaciones de promedio por día

CSS

Publicado el 15 de Septiembre del 2019 por Administrador
493 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

internetResponsive Slider utilizando FlexSlider


6 visualizaciones de promedio por día

CSS

Publicado el 8 de Mayo del 2013 por Administrador
13.351 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

internetOptimizar CSS, 12 consejos y 4 herramientas


5 visualizaciones de promedio por día

CSS

Publicado el 24 de Mayo del 2013 por Administrador
11.814 visualizaciones desde el 24 de Mayo del 2013
Simple y llano. Aprende a optimizar tus códigos CSS a través de estos 12 consejos y 4 herramientas.
Imágen de perfil

internetGoogle Font Directory: tipografías libres para la web


5 visualizaciones de promedio por día

CSS

Publicado el 17 de Abril del 2013 por Administrador
11.661 visualizaciones desde el 17 de Abril del 2013
Vamos a ver como embeber una tipografía en tu página desde Google para que el usuario vea la web tal y como la diseñes, aunque no sea una fuente de uso común.
Imágen de perfil

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


4 visualizaciones de promedio por día

CSS

Publicado el 29 de Mayo del 2019 por Administrador
772 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

internet8 técnicas CSS que deberías de conocer


4 visualizaciones de promedio por día

CSS

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

internetCSS. Menús flotantes


4 visualizaciones de promedio por día

CSS

Publicado el 7 de Mayo del 2013 por Administrador
10.020 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

internetRecopilación de siete tutoriales sorprendentes de CSS3


4 visualizaciones de promedio por día

CSS

Publicado el 19 de Junio del 2013 por Administrador
9.778 visualizaciones desde el 19 de Junio del 2013
Para los que están pensando en iniciar el año aprendiendo CSS3, aquí tenéis un recopilatorio de tutoriales que muestran diferentes aspectos o funcionalidades que podemos aplicar en nuestros proyectos. No hace falta explicar la importancia que tiene CSS para el desarrollo web. En ocasiones he encontrado soluciones utilizando muchas y engorrosas líneas en JavaScript que fácilmente se podrían haber resuelto conociendo debidamente las funcionalidades de CSS.
1. Botones CSS con pseudo-elementos.
2. Diseños angulares.
3. Banners animados.
4. Lightbox con transición.
5. Estados por filtrado de imagenes.
6. Diapositivas 3D.
7. Botones YouTube.
Imágen de perfil

internetMaquetando un site en 3 columnas!! con CSS


4 visualizaciones de promedio por día

CSS

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

internetMover las cosas con animaciones CSS


4 visualizaciones de promedio por día

CSS

Publicado el 20 de Junio del 2013 por Administrador
9.591 visualizaciones desde el 20 de Junio del 2013
Tradicionalmente, la web era un lugar muy estático. Animace no era posible de ninguna manera cuerda hasta la llegada de JavaScript, los GIFs animados y Flash, momento en el que nos regocijamos y aplaudimos la gran cantidad resultante de 'saltar intro' y horribles animaciones molestas.

Estaba todo muy bien, pero seguía sin haber manera para que los no desarrolladores creasen animaciones con estándares abiertos. Puedes dar salida a todos los argumentos religiosos que desees sobre que la animación que pertenece a la capa de comportamiento, y no a la capa de presentación, pero creo que la animación definitivamente cae en el ámbito del diseño. Y ahora, con las transiciones y animaciones CSS3, se pueden animar los elementos de nuestro sitio web. ¡Diseño web basado en estándares con más diversión! Y más 'saltar intro', si lo prefieres…

Opera tiene soporte para transiciones desde hace mucho tiempo, y ya hemos escrito sobre ellos en CSS3 transitions and 2D transforms. Este artículo se centra en la otra manera de animar las cosas usando hojas de estilo: las animaciones CSS. A continuación daremos una introducción concreta incluyendo el estado de la especificación y el soporte en navegadores, las diferencias entre animaciones y transiciones, la sintaxis básica, y una lista de ejemplos.
Imágen de perfil

.pdfReferencia rápida de CSS3


4 visualizaciones de promedio por día

CSS

Publicado el 19 de Agosto del 2011 por Administrador
12.212 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

internetCSS3 Dropdown Menu


3 visualizaciones de promedio por día

CSS

Publicado el 29 de Enero del 2013 por Administrador
7.877 visualizaciones desde el 29 de Enero del 2013
Aprende a hacer menús desplegables con CSS3
Imágen de perfil

internetGuía de Referencia Rápida de CSS 3


3 visualizaciones de promedio por día

CSS

Publicado el 22 de Agosto del 2011 por Administrador
9.256 visualizaciones desde el 22 de Agosto del 2011
Completa guía de referencia en formato HTML de CSS 3.
Imágen de perfil

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


3 visualizaciones de promedio por día

CSS

,

HTML

,

WordPress

Publicado el 13 de Febrero del 2019 por Administrador
814 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

internetIntroducción al Diseño Web Adaptable o Responsive Web Design


3 visualizaciones de promedio por día

CSS

Publicado el 5 de Febrero del 2013 por Administrador
7.063 visualizaciones desde el 5 de Febrero del 2013
Hoy en día los usuarios de nuestras páginas web o tiendas online pueden acceder a las mismas desde diferentes medios: un ordenador de sobremesa con pantalla panorámica, un móvil, una tableta… Partiendo de la base de que el diseño de una web, para que funcione, tiene que estar centrada en el usuario (y no en el diseñador, en el programador o en el dueño de la web), es importante que la experiencia que tiene el usuario con nuestra web sea lo más placentera posible con independencia de qué medio esté usando para verla. Es por ello que últimamente tantos sitios webs están utilizando lo que se llama Responsive Web Design o Diseño Web adaptable.
Imágen de perfil

internetImprimir la web en el siglo XXI


3 visualizaciones de promedio por día

CSS

Publicado el 21 de Mayo del 2019 por Administrador
511 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

internetEstructuras de control en CSS mediante Sass


3 visualizaciones de promedio por día

CSS

Publicado el 14 de Junio del 2019 por Administrador
424 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

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


3 visualizaciones de promedio por día

CSS

Publicado el 22 de Abril del 2019 por Administrador
530 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

internetAgregar íconos a los links con CSS3


3 visualizaciones de promedio por día

CSS

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

.pdfQuick Reference Guide of CSS3


2 visualizaciones de promedio por día

CSS

Publicado el 14 de Octubre del 2011 por Administrador
6.848 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

internetInter UI, una nueva tipografía para interfaces


2 visualizaciones de promedio por día

CSS

Publicado el 14 de Abril del 2019 por Administrador
501 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

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


2 visualizaciones de promedio por día

CSS

Publicado el 13 de Febrero del 2019 por Administrador
633 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

internet15 artículos de CSS para principiantes


2 visualizaciones de promedio por día

CSS

Publicado el 12 de Mayo del 2011 por Administrador
6.873 visualizaciones desde el 12 de Mayo del 2011
Colección de 15 artículos básicos de CSS para programadores principiantes.
Imágen de perfil

internet7 consejos para hacer buen responsive design


2 visualizaciones de promedio por día

CSS

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

internetSelector de ventanas de Opera Mobile con CSS y Jquery


2 visualizaciones de promedio por día

CSS

Publicado el 2 de Noviembre del 2011 por Administrador
6.170 visualizaciones desde el 2 de Noviembre del 2011
Con JQuery podemos crear cosas realmente sorprendentes y divertidas, como menús, carruseles o pestañas . Es muy enorgullecedor recrear algo que ya existe y con lo que estás disfrutando, pero realizarlo con otro lenguaje. Con JQuery podemos crear el selector de ventanas de Opera Mobile, así, varias ventanas que están superpuestas una debajo de otra,teniendo sólo una porción de estas visibles. La que está en la parte superior es la única que se encuentra visible. Al elegir otra ventana, veremos un bonito efecto.
Imágen de perfil

.htmlCapas


2 visualizaciones de promedio por día

CSS

Publicado el 17 de Junio del 2011 por Administrador
6.308 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

internetColocar un mapa de Google Maps como imagen de fondo de tu web


2 visualizaciones de promedio por día

CSS

Publicado el 22 de Abril del 2011 por Administrador
5.839 visualizaciones desde el 22 de Abril del 2011
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.