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: 560
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ejemplo de una web responsive


536 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(30)
Publicado el 13 de Junio del 2014 por Xavi (548 códigos)
145.895 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: 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


269 visualizaciones el último mes

CSS

Publicado el 20 de Septiembre del 2020 por Katas (47 códigos)
11.245 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: 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


251 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)
18.443 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: 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


226 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)
157.210 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: 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


182 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 21 de Julio del 2015 por Xve (294 códigos)
23.564 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: 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


180 visualizaciones el último mes

CSS

Actualizado el 22 de Octubre del 2019 por Scriptshow (141 códigos) (Publicado el 14 de Septiembre del 2017)
13.687 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: 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


174 visualizaciones el último mes

CSS

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


162 visualizaciones el último mes

CSS

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


148 visualizaciones el último mes

CSS

Publicado el 31 de Mayo del 2020 por Hdb Programming (46 códigos)
6.276 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/
sin imagen de perfil
Val: 8
Ha aumentado 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Slider con imagenes diferente tamaño o altura


128 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 4 de Diciembre del 2019 por Leonardo
3.026 visualizaciones desde el 4 de Diciembre del 2019
Es un slider bootstrap css, es un codigo que no encontre en meses y la solucion era mas facil de lo que esperaba. dentro de todo este codigo lo que me interesa es el id="after" al final, que es lo que da tamaño al slider y lo deja fijo para que no se mueva lo que esta debajo.
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


128 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 19 de Diciembre del 2018 por Joan (121 códigos)
14.193 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: 493
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Poner una imagen en un botón submit


112 visualizaciones el último mes

CSS

Publicado el 14 de Abril del 2020 por Katas (47 códigos)
6.919 visualizaciones desde el 14 de Abril del 2020
Simple código que muestra como poner una imagen en un input type="submit"

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
input[type=submit] {
    background: url('buttonSend.jpg');
    border: 0;
    display: block;
    height: 50px;
    width: 155px;
}
</style>
 
<form>
    <input type="submit" value="" name="submit">
</form>
Imágen de perfil
Val: 624
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Crear un salto de pagina al imprimir nuestra web


101 visualizaciones el último mes

CSS

estrellaestrellaestrellaestrellaestrella(8)
Publicado el 19 de Marzo del 2016 por Xve (294 códigos)
27.097 visualizaciones desde el 19 de Marzo del 2016
En este simple código, se visualiza como crear un salto de página cuando vayamos a imprimir nuestros reportes o documentos desde nuestra página web
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 Normalize.css


97 visualizaciones el último mes

CSS

Publicado el 31 de Mayo del 2020 por Hdb Programming (46 códigos)
3.548 visualizaciones desde el 31 de Mayo del 2020
Este es el código fuente de la popular hoja de estilos Normalize.css con la cual podrás normalizar tu html para todos los navegadores. Este código fue sacado de https://necolas.github.io/normalize.css/ y también puede ser instalado con npm mediante npm install normalize.css