Los códigos más visitados de CSS

Listado de los códigos más visitados durante los últimos 30 días
Imágen de perfil
Val: 493
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Dibujar un estrella de cinco puntas con CSS


361 visualizaciones el último mes

CSS

Publicado el 20 de Septiembre del 2020 por Katas (47 códigos)
13.159 visualizaciones desde el 20 de Septiembre del 2020
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.

estrella-con-CSS
Imágen de perfil
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo de una web responsive


325 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(30)
Publicado el 13 de Junio del 2014 por Xavi (548 códigos)
148.410 visualizaciones desde el 13 de Junio del 2014
Simple código que muestra como hacer una web responsive a varias resoluciones de pantalla.
Imágen de perfil
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Input unicamente con la linea inferior


191 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 26 de Mayo del 2019 por Xve (294 códigos) (Publicado el 15 de Enero del 2019)
19.673 visualizaciones desde el 15 de Enero del 2019
Este simple código muestra como crear un formulario unicamente con una linea horizontal en la parte inferior del input.

1
Imágen de perfil
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Indicador de mínimo y máximo con aguja


154 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 21 de Septiembre del 2019 por Joel (150 códigos)
9.814 visualizaciones desde el 21 de Septiembre del 2019
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.

minimo-y-maximo-con-aguja


Se utiliza javascript para mover los grados de la aguja, la cual se gira con CSS utilizando transform:rotate().
Imágen de perfil
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Efecto de zoom en una imagen y texto con CSS3


140 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(32)
Actualizado el 8 de Diciembre del 2020 por Xavi (548 códigos) (Publicado el 18 de Enero del 2013)
158.112 visualizaciones desde el 18 de Enero del 2013
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
Imágen de perfil
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Dibujar medio contorno de un circulo con CSS


139 visualizaciones el último mes

CSS

Publicado el 20 de Septiembre del 2019 por Joel (150 códigos)
12.505 visualizaciones desde el 20 de Septiembre del 2019
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.

medio-contorno-circulo-css


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.
Imágen de perfil
Val: 17
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Código de Reset.css


138 visualizaciones el último mes

CSS

Publicado el 31 de Mayo del 2020 por Hdb Programming (46 códigos)
7.219 visualizaciones desde el 31 de Mayo del 2020
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/
Imágen de perfil
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Vídeo centrado y ajustado proporcional, con CSS Style


131 visualizaciones el último mes

CSS

Actualizado el 22 de Octubre del 2019 por Scriptshow (141 códigos) (Publicado el 14 de Septiembre del 2017)
14.537 visualizaciones desde el 14 de Septiembre del 2017
Como centrar y ajustar respetando las proporciones de un vídeo a distintas pantallas o dispositivos, con CSS Style compatible.

Espero sea útil.

Un saludo
Imágen de perfil
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Dibujar una flecha con html y css


95 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 21 de Julio del 2015 por Xve (294 códigos)
24.267 visualizaciones desde el 21 de Julio del 2015
Este código muestra como dibujar una flecha hacia la derecha, izquierda, abajo y arriba con HTML y CSS3 sin utilizar ninguna imagen.

flechas-html-css
Imágen de perfil
Val: 181
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Botón parar cerrar o esconder en un div


81 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 19 de Diciembre del 2018 por Joan (121 códigos)
14.827 visualizaciones desde el 19 de Diciembre del 2018
Este código muestro como poner dos tipos de botones para cerrar un div. Una de ellas es un simbolo de HTML y la otra es una imagen.

boton-cerrar
Imágen de perfil
Val: 181
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Imagen que sobresale del div


78 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 5 de Agosto del 2019 por Joan (121 códigos)
6.934 visualizaciones desde el 5 de Agosto del 2019
Este código muestra como mostrar una imagen que sobresalga del div por la parte superior, pudiendo especificar diferentes tamaños y colores.

imagen-sobresale-div
Imágen de perfil
Val: 493
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Separador en forma de sierra con CSS


76 visualizaciones el último mes

CSS

Publicado el 28 de Marzo del 2021 por Katas (47 códigos)
2.796 visualizaciones desde el 28 de Marzo del 2021
Este estilo utiliza una forma SVG para separar dos bloques diferentes para crear una apariencia visual más interesante en comparación con la separación horizontal estándar.

css-separador


background-image: url (...) agrega la forma SVG (un triángulo de 24x12) como imagen de fondo del pseudo elemento, que se repite por defecto
Imágen de perfil

Engranaje girando


72 visualizaciones el último mes

CSS

Publicado el 26 de Marzo del 2020 por Administrador (718 códigos)
4.437 visualizaciones desde el 26 de Marzo del 2020
Código que muestra un engranaje girando utilizando una imagen SVG

engranaje-rodando
Imágen de perfil
Val: 493
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Dibujar un hexagono con CSS


69 visualizaciones el último mes

CSS

Publicado el 20 de Septiembre del 2020 por Katas (47 códigos)
3.141 visualizaciones desde el 20 de Septiembre del 2020
Ejemplo de como dibujar un hexagono con CSS.

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

Versión 1
Se utiliza un ractangulo para el medio, en :before y :after se crea una pirámide o triangulo

Versión 2
Se utilizan dos formas trapezoidales opuestas, la segunda forma esta en el :after

hexagon-en-CSS
Imágen de perfil
Val: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo de movimiento de un div de abajo hacia arriba con transition de css3


67 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 2 de Enero del 2018 por Xavi (548 códigos)
6.121 visualizaciones desde el 2 de Enero del 2018
Este código es una modificación del código ya publicado (https://www.lawebdelprogramador.com/codigo/CSS/2702-Ejemplo-del-movimiento-de-un-div-con-transition-de-css3.html), el cual muestra como sube una capa de abajo hacia arriba al pasar el ratón por encima de la imagen.

transition