Me.css v4 beta + sass Variables, Mixins and conditionals xxl optional xxxl optional Optional mixins Optional media query styles...
CSS3 Gradient Backgrounds
CSS3 nos aporta entre otras novedades la propiedad gradient, que nos permite mostrar transiciones suaves entre dos o más colores.
Antes, teníamos que utilizar imágenes para conseguir estos efectos, sin embargo, mediante el uso de la propiedad gradient, podemos reducir el tiempo de carga de la página y el uso de ancho de banda. Además, los elementos con gradient se ven mejor cuando se hace zoom, debido a que el gradiente es generado por el navegador.
CSS3 define dos tipos de gradientes:
linear-gradient
Los gradientes lineales (arriba / abajo / izquierda / derecha / diagonal)
radial-gradient
Los gradientes radiales (definido por su centro)
En la web de W3Schools podemos encontrar una referencia completa de esta nueva propiedad de CSS3
CSS3 Gradient (W3Schools)
Ejemplos gradient CSS3
background: linear-gradient(45deg, #99DDDD 2%, #99CCFF 60%);
background-size: 25px 25px;
CRYSTAL 2
background:
linear-gradient(-45deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%, transparent 75%) 0 0,
linear-gradient(45deg, transparent 50%, rgba(0, 0, 0, 0.1) 50%, transparent 75%) 0 0;
background-color: #99CCFF;
background-size: 25px 25px;
CRYSTAL 3
background-color: #5599FF;
background-image:
linear-gradient(45deg, transparent 10%, rgba(255,255,233,.12)100%);
background-size: 100px;
STEEL 1
background:
linear-gradient( hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, #CCCCCC) 0 0,
linear-gradient( hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 30%, #CCCCCC) 0 0;
background-color: #444444;
background-size: 30px 30px;
STEEL 2
background:
linear-gradient(90deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 50%, #CCCCCC) 0 0,
linear-gradient(-90deg, hsla(0, 100%, 20%, 0) 49%, hsla(0, 100%, 0%, 1) 30%, #CCCCCC) 0 0;
background-color: #222222;
background-size: 40px;
STEEL 3
background:
linear-gradient(0deg, hsla(0, 90%, 20%, 0) 50%, hsla(0, 100%, 0%, 1) 50%, #CCCCCC) 0 0,
linear-gradient(-90deg, hsla(0, 90%, 20%, 0) 50%, hsla(0, 100%, 0%, 1) 30%, #CCCCCC) 0 0;
background-color: #333333;
background-size: 60px 60px;
PINK GUM 1
background:
radial-gradient( circle, #FFFFCC, #FFCCCC 80%, #FAFAFA);
background-size: 20px 20px;
STARS 1
background-color: #CC99CC;
background-size: 50px 50px;
background-image:
linear-gradient(135deg, rgba(0, 0, 0, 0.05) 25%,
transparent 25%,
transparent 75%,
rgba(0, 0, 0, 0.1) 75%);
WARM 1
background:
linear-gradient( 10deg,
#FF3300 0%,
#FF6600 25%,
#FF9900 50%,
#FFCC00 75%,
#FFFF66 100%);
background-size: 100%;
background-color: #840b2a;
SILKY 1
background:
linear-gradient( 40deg,
#9933CC 0%,
#6666FF 25%,
#669999 50%,
#66CC66 75%,
#33FFCC 100%);
background-size: 100%;
background-color: #840b2a;
LINES 1
background-color: #FFCC99;
background-image: linear-gradient(90deg,
transparent 50%,
rgba(255,255,255,.2) 50%);
background-size: 30px 30px;
LINES 2
background: repeating-linear-gradient(-45deg,
#FFCCCC,
#FFCCCC 10px,
#CCCCFF 10px,
#CCCCFF 20px);
LINES 3
background-color: #99FFCC;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.2) 50%);
background-size: 30px 30px;
LINES 4
background: repeating-linear-gradient(-45deg,
#85c2ff,
#99CCFF 10px,
#85c2ff 10px,
#99CCFF 20px);
FABRIC 1
background-color:#FFFFFF;
background-image:
linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%),
linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%);
background-size:50px 50px;
FABRIC 2
background-color: #2e492c;
background-image:
repeating-linear-gradient(90deg, transparent, transparent 50px,
rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px,
rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px,
rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
repeating-linear-gradient(0deg, transparent, transparent 50px, rgba(255, 127, 0, 0.25) 50px,
rgba(255, 127, 0, 0.25) 56px, transparent 56px, transparent 63px, rgba(255, 127, 0, 0.25) 63px,
rgba(255, 127, 0, 0.25) 69px, transparent 69px, transparent 116px, rgba(255, 206, 0, 0.25) 116px,
rgba(255, 206, 0, 0.25) 166px);
FABRIC 3
background-color:#FFCC66;
background-image:
radial-gradient(#FFFFFF 10%, transparent 10%),
radial-gradient(#FFFFFF 10%, transparent 10%);
background-size:50px 50px;
background-position: 0 0, 25px 25px;
FABRIC 4
background-color: #FFCC99;
background-image:
repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 10px,
rgba(143, 77, 63, 0.25) 20px),
repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(143, 77, 63, 0.25) 10px,
rgba(143, 77, 63, 0.25) 20px);
CIRCLE 1
background: repeating-radial-gradient(
circle,
#FF7777,
#FF7777 10px,
#FF8777 10px,
#FF8777 20px;
DARK 1
background:
radial-gradient(#FFFFFF 1%, transparent 2%) 0 0,
radial-gradient(rgba(255,255,255,.1) 5%, transparent 30%) 0 1px;
background-color:#111111;
background-size:25px 25px;
CHESS 1
background-color: #FFCC99;
background-size: 50px 50px;
background-image:
linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000),
linear-gradient(135deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000);
SQUARE 1
background-color: #FF9966;
background-image:
linear-gradient(-45deg, transparent 50%, rgba(255,255,255,.2) 50%),
linear-gradient(-90deg, transparent 50%, rgba(255,255,255,.2) 50%),
linear-gradient(-135deg, transparent 50%, rgba(255,255,255,.2) 50%),
linear-gradient(-180deg, transparent 50%, rgba(255,255,255,.2) 50%);
background-size: 30px 30px;
Quizás te interese ...
Google Fonts se ha convertido es una herramienta de referencia para los diseñadores web, pero por cada fuente que agregamos a nuestro sitio...
me.css v4 beta ya disponible! https://didesweb.com/css/me-css-sass/ 35.4kb unminified Me.css es una librería css basada en Emmet muy...
W3.CSS es un framework CSS que podemos encontrar y descargar en el sitio oficial de W3Schools, según el propio sitio “Inspired by...
Valoraciones
Sé el primero en valorar