Los códigos más visitados de CSS

Este código muestra como crear un gráfico de barras tanto horizontal como vertical utilizando unicamente HTML y CSS.

Código que muestra como cambiar el estilo de varios div para esconder y mostrar un listado de divs utilizando JavaScript y estilos CSS.
Probado con IE 5,6 y 7, Firefox 2.0, Opera 9.60 y Safari 3.

Código que muestra como utilizar pestañas sin utilizar ninguna imagen, únicamente con estilos y un poco de javaScript.
Probado con IE 5.5, 6, 7 Konqueror, Firefox y Safari.

Simple ejemplo que muestra como utilizar el estilo :hover para mostrar un div oculto sin utilizar javascript

Código que muestra como utilizando una página en HTML5 mostramos siempre el pie de página o footer en al parte de abajo del navegador.

Este simple código muestra como poner un elemento <div> encima de otro elemento <div> con CSS

Este código muestra como mover las flechas hacia la derecha al poner el puntero del ratón encima del elemento.

Código que muestra un engranaje girando utilizando una imagen SVG

Simple código que muestra como hacer una web responsive a varias resoluciones de pantalla.

Siguiendo el código https://www.lawebdelprogramador.com/codigo/CSS/3523-Checkbox-con-formato.html, he realizado una modificación para mostrarlo en círculos.

WEB Simple by 2K code

Una estructura HTML y CSS para Web muy simple y compatible...

Mejor con 2K max.

Aquí les muestro una manera de crear un indicador con mínimo y máximo utilizando únicamente CSS para crear el dibujo.
A diferencia del código: https://www.lawebdelprogramador.com/codigo/CSS/5542-Indicador-de-minimo-y-maximo-con-aguja-que-cambia-de-color.html, este no cambia el color de la aguja.
Se puede utilizar con % o un valor mínimo y máximo.



Se utiliza javascript para mover los grados de la aguja, la cual se gira con CSS utilizando transform:rotate().

Este código muestra como dibujar una flecha hacia la derecha, izquierda, abajo y arriba con HTML y CSS3 sin utilizar ninguna imagen.

Ejemplo de como dibujar una estrella de cinco puntas con CSS.
La manera que se utiliza, es crear una pirámide o triangulo rotada 35 grados a la derecha, en :after se crea otro triangulo rotado 35 grados a la izquierda, y en :before se crea un pequeña pirámide en la parte superior.

Código que muestra como generar un efecto de zoom sobre una imagen y texto al pasar el ratón por encima.


La misma versión permo haciendo zoom a los dos elementos a la vez: https://www.lawebdelprogramador.com/codigo/CSS/6759-Efecto-de-zoom-ha-varios-elementos-con-un-evento-hover-con-CSS3.html

Ejemplo de como dibujar un diamante con CSS.

Aquí se muestran dos versiones de como hacer el diamante:

Versión 1
Se utiliza un triangulo o pirámide y en el :after se crea otro triangulo o diamante invertido

Versión 2
Se utiliza un cuadrado y se rota 45º

PoPup Simple by 2K code

Popup / Modal por focus en puro CSS. No utiliza JavaScript.

Mejor con 2K max.

Botón de CSS con animación de una cortina que sube desde abajo hasta arriba al pasar el ratón por encima.

Código que muestra como centrar un elemento verticalmente utilizando el display flex

Código de CSS que muestra tres pelotas rebotando que se puede utilizar mientras se carga un contenido.

Siguiendo el ejemplo del código https://www.lawebdelprogramador.com/codigo/CSS/5537-Dibujar-el-contorno-de-un-circulo-con-CSS.html, en este solo se muestra media circunferencia.



En este código se utiliza el ::before para dibujar un circulo mas pequeño en el interior y el ::after para tapar la otra mitad del circulo.

En este ejemplo se numeran varias listas encadenadas, pero se puede utilizar con cualquier tipo de elemento de tu web.



https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Lists_and_Counters/Using_CSS_counters

counter-reset: Inicializa el contador y define el nombre del contador. Por defecto empieza en 0

counter-increment: incrementa o decrementa el contador

counter: muestra el contador

Este código muestra el uso del tag CSS scroll-behavior para mostrar el desplazamiento suave y progresivo entre varios puntos (anchors) de una pagina web.
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior

Simple código que muestra como poner una imagen en un input type="submit"

Este código muestra como cambiar una imagen con una simple animación de opacidad al poner el ratón encima de la imagen.

Este simple código, muestra los diferentes efectos que generan los diferentes estilos filter sobre una imágen (grayscale, sepia, saturate, opacity, blur, brightness, contrast, invert, hue-rotate)

Este es el código fuente de la popular hoja de estilos Reset.css con la cual podrás resetear tu html para todos los navegadores. Este código fue sacado de https://meyerweb.com/eric/tools/css/reset/

Este simple código muestra como poner un icono dentro de in un <input>

Ejemplo que muestra todos los tipos de bordes posibles en CSS