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 flexbox


35 visualizaciones el último mes

CSS

Publicado el 11 de Marzo del 2020 por Administrador
544 visualizaciones desde el 11 de Marzo del 2020
¿Todavía usando tablas para maquetar? ¿Harto de usar floats? ¿Ni pajolera idea de cómo alinear verticalmente elementos? Pues con flexbox todo se hace más fácil.

Índice de Contenidos:
1.- Historia de la maquetación
2.- Introducción a flexbox
3.- Contenedor
4.- Hijos
5.- Responsividad avanzada
6.- Comparativa
7.- Conclusión

Screenshot_20200311_130112
Imágen de perfil

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


32 visualizaciones el último mes

CSS

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

.pdf2017 CSS3 CheatSheet


28 visualizaciones el último mes

CSS

Publicado el 4 de Diciembre del 2017 por Administrador
1.111 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

internetComo hacer un formulario estilo Material Design con HTML, CSS y Javascript


27 visualizaciones el último mes

HTML

,

CSS

,

JavaScript

Publicado el 2 de Febrero del 2020 por Administrador
817 visualizaciones desde el 2 de Febrero del 2020
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.

Screenshot_20200202_202925
Imágen de perfil

internetCómo crear tooltips modernos solamente con CSS


26 visualizaciones el último mes

CSS

Publicado el 20 de Abril del 2016 por Administrador
1.159 visualizaciones desde el 20 de Abril del 2016
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.
Imágen de perfil

internet7 consejos para hacer buen responsive design


24 visualizaciones el último mes

CSS

Publicado el 17 de Enero del 2013 por Administrador
5.496 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

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


24 visualizaciones el último mes

CSS

Publicado el 29 de Diciembre del 2015 por Administrador
2.655 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

internetResponsive Slider utilizando FlexSlider


23 visualizaciones el último mes

CSS

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

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


22 visualizaciones el último mes

CSS

Publicado el 23 de Julio del 2013 por Administrador
22.298 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

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


22 visualizaciones el último mes

CSS

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

.htmlCapas


21 visualizaciones el último mes

CSS

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

.pdfReferencia rápida de CSS3


21 visualizaciones el último mes

CSS

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


21 visualizaciones el último mes

CSS

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

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


21 visualizaciones el último mes

CSS

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

.pdfCSS Quick Reference Manual Cascading Style Sheets


19 visualizaciones el último mes

CSS

Publicado el 29 de Noviembre del 2010 por Administrador
3.595 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

.videoResponsive menu responsive website with HTML / CSS / BOOTSTRAP


19 visualizaciones el último mes

Bootstrap

,

HTML

,

CSS

Publicado el 13 de Abril del 2020 por Monica
280 visualizaciones desde el 13 de Abril del 2020
navbar-bootstrap-2020-css
Imágen de perfil

internetClases nativas que te harán más productiva(o) en Bootstrap 4


19 visualizaciones el último mes

Bootstrap

,

CSS

Publicado el 26 de Abril del 2020 por Administrador
407 visualizaciones desde el 26 de Abril del 2020
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.

Screenshot_20200426_174239
Imágen de perfil

internetAnimate css - Cómo crear animaciones CSS rápido


18 visualizaciones el último mes

CSS

Publicado el 29 de Enero del 2020 por Administrador
577 visualizaciones desde el 29 de Enero del 2020
¿Tienes una web y no sabes cómo crear animaciones para darle ese toque diferenciador? Pues sigue leyendo, porque en este artículo veremos cómo crear animaciones con CSS con poco esfuerzo. Si no tienes conocimientos previos de CSS no te preocupes porque en este articulo veremos una manera de tener animaciones sin tener que tocar nada de CSS ¿mola no?

Lo primero que vamos a ver es una librería CSS que nos da animaciones ya creadas, las típicas, por ejemplo, fade, slide, bounce, etc

Si esto te parece poco y quieres crear tu mismo las animaciones, no te preocupes, porque también las vamos a crear de manera manual animaciones CSS, para que tengas un control total de las animaciones de tu página web.

Screenshot_20200129_184205
Imágen de perfil

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


17 visualizaciones el último mes

CSS

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

internetOptimización CSS para mejorar el rendimiento de tu web


17 visualizaciones el último mes

CSS

Publicado el 23 de Enero del 2020 por Administrador
649 visualizaciones desde el 23 de Enero del 2020
El objetivo más importante de cualquier sitio web es lograr la conversión y el modo de componer y estructurar contenidos de calidad es la principal clave para el éxito. En la mayoría de los casos en que una web no alcanza los objetivos deseados —a pesar de existir muchas causas que pueden desfavorecer la tasa de conversión— el diseño de la landing page tiene mucho que ver. Todos sabemos que un gran diseño web y las conversiones suelen ir de la mano.

Screenshot_20200123_130944
Imágen de perfil

internetMaquetando un site en 3 columnas!! con CSS


16 visualizaciones el último mes

CSS

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

internetCómo usar las nuevas variables CSS


16 visualizaciones el último mes

CSS

Publicado el 18 de Abril del 2016 por Administrador
1.258 visualizaciones desde el 18 de Abril del 2016
Las variables CSS, técnicamente llamadas "propiedades CSS no estándar", simplifican tus archivos CSS y permiten crear efectos tan interesantes como cambiar dinámicamente los estilos aplicados en una página y mejorar las características de las propiedades CSS estándar.
Google Chrome era el único navegador importante que todavía no soportaba estas variables CSS. Sin embargo, a partir de su versión 49 ya están disponibles, por lo que ya es seguro usar variables CSS si tus usuarios usan navegadores modernos (Firefox 43+, Safari 9.1+, iOS Safari 9.3+, Chrome 49+).
Imágen de perfil

internetMaquetación con CSS Grid


16 visualizaciones el último mes

CSS

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

.pdfQuick Reference Guide of CSS3


15 visualizaciones el último mes

CSS

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

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


15 visualizaciones el último mes

CSS

Publicado el 18 de Enero del 2013 por Administrador
4.518 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

internetSelector de ventanas de Opera Mobile con CSS y Jquery


13 visualizaciones el último mes

CSS

Publicado el 2 de Noviembre del 2011 por Administrador
6.282 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

internetEstructuras de control en CSS mediante Sass


13 visualizaciones el último mes

CSS

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

internetAgregar íconos a los links con CSS3


12 visualizaciones el último mes

CSS

Publicado el 28 de Enero del 2013 por Administrador
6.346 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

internet8 técnicas CSS que deberías de conocer


12 visualizaciones el último mes

CSS

Publicado el 12 de Abril del 2013 por Administrador
10.370 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

internetAprende Sass en 15 minutos


12 visualizaciones el último mes

CSS

Publicado el 28 de Abril del 2016 por Administrador
1.135 visualizaciones desde el 28 de Abril del 2016
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.