para - Bordes de gradiente CSS3
gradient generator css online (14)
Estoy tratando de aplicar un gradiente a un borde, pensé que era tan simple como hacer esto:
border-color: -moz-linear-gradient(top, #555555, #111111);
Esto no funciona, ¿alguien sabe cuál es la forma correcta de hacer gradientes de borde?
Mozilla actualmente solo admite gradientes de CSS como valores de la propiedad de imagen de fondo, así como dentro del fondo abreviado.
- https://developer.mozilla.org/en/CSS/-moz-linear-gradient
Example 3 - Gradient Borders
border: 8px solid #000;
-moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
-moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
padding: 5px 5px 5px 15px;
border-image-slice ampliará un gradiente de imagen de borde CSS
Esto (como lo entiendo) evita el corte predeterminado de la "imagen" en secciones; sin ella, no aparece nada si el borde está solo en un lado, y si está alrededor del elemento completo, aparecen cuatro pequeños gradientes en cada esquina.
border-bottom: 6px solid transparent;
border-image: linear-gradient(to right, red , yellow);
border-image-slice: 1;
Bordes de degradado de Css-Tricks: http://css-tricks.com/examples/GradientBorder/
.multbg-top-to-bottom {
border-top: 3px solid black;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
background-image: -webkit-linear-gradient(#000, transparent);
background-image:
-moz-linear-gradient(#000, transparent),
-moz-linear-gradient(#000, transparent);
background-image:
-o-linear-gradient(#000, transparent),
-o-linear-gradient(#000, transparent);
background-image:
linear-gradient(#000, transparent),
linear-gradient(#000, transparent);
-moz-background-size: 3px 100%;
background-size: 3px 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
}
En lugar de bordes, usaría degradados de fondo y relleno. Mismo aspecto, pero mucho más fácil, más soportado.
un ejemplo simple:
<div class="g">
<div>bla</div>
</div>
CSS:
.g {
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.33, rgb(14,173,173)), color-stop(0.67, rgb(0,255,255)));
background-image: -moz-linear-gradient(center bottom, rgb(14,173,173) 33%, rgb(0,255,255) 67% );
padding: 2px;
}
.g > div { background: #fff; }
JsFiddle
EDITAR: También puede aprovechar el :before selector como @WalterSchwarz señalado en este jsFiddle
Es un truco, pero puede lograr este efecto en algunos casos utilizando la imagen de fondo para especificar el gradiente y luego enmascarar el fondo real con una sombra de cuadro. Por ejemplo:
p {
display: inline-block;
width: 50px;
height: 50px;
/* The background is used to specify the border background */
background: -moz-linear-gradient(45deg, #f00, #ff0);
background: -webkit-linear-gradient(45deg, #f00, #ff0);
/* Background origin is the padding box by default.
Override to make the background cover the border as well. */
-moz-background-origin: border;
background-origin: border-box;
/* A transparent border determines the width */
border: 4px solid transparent;
border-radius: 8px;
box-shadow:
inset 0 0 12px #0cc, /* Inset shadow */
0 0 12px #0cc, /* Outset shadow */
inset -999px 0 0 #fff; /* The background color */
}
Esta es una buena forma de semi navegador para tener bordes degradados que se desvanecen hasta la mitad. Simplemente ajustando el paro de color a rgba(0, 0, 0, 0)
.fade-out-borders {
min-height: 200px; /* for example */
-webkit-border-image: -webkit-gradient(linear, 0 0, 0 50%, from(black), to(rgba(0, 0, 0, 0))) 1 100%;
-webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
-o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0) 50%) 1 100%;
border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0) 50%) 1 100%;
}
<div class="fade-out-border"></div>
Uso explicado:
Formal grammar: linear-gradient( [ <angle> | to <side-or-corner> ,]? <color-stop> [, <color-stop>]+ )
/---------------------------------/ /----------------------------/
Definition of the gradient line List of color stops
Más aquí: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient
Estoy de acuerdo con szajmon. El único problema con sus respuestas y las de Quentin es la compatibilidad entre navegadores.
HTML:
<div class="g">
<div>bla</div>
</div>
CSS:
.g {
background-image: -webkit-linear-gradient(300deg, white, black, white); /* webkit browsers (Chrome & Safari) */
background-image: -moz-linear-gradient(300deg, white, black, white); /* Mozilla browsers (Firefox) */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=''#ffffff'', endColorstr=''#000000'', gradientType=''1''); /* Internet Explorer */
background-image: -o-linear-gradient(300deg,rgb(255,255,255),rgb(0,0,0) 50%,rgb(255,255,255) 100%); /* Opera */
}
.g > div { background: #fff; }
Intenta esto, funcionó para mí.
.yourDivClass {
border: 1px solid transparent;
border-image: linear-gradient(to top, #3a4ed5 0%, #f2f2f2 100%);
border-image-slice: 1;
}
El enlace es al violín https://jsfiddle.net/yash009/kayjqve3/1/ espero que esto ayude
Otro truco para lograr el mismo efecto es utilizar múltiples imágenes de fondo, una característica que es compatible con IE9 +, Firefox de nueva versión y la mayoría de los navegadores basados en WebKit: http://caniuse.com/#feat=multibackgrounds
También hay algunas opciones para usar múltiples fondos en IE6-8: http://www.beyondhyper.com/css3-multiple-backgrounds-in-non-supportive-browsers/
Por ejemplo, suponga que desea un borde izquierdo de 5 píxeles de ancho que sea un degradado lineal de azul a blanco. Crea el gradiente como una imagen y exporta a un PNG. Enumere cualquier otro fondo de CSS después del de gradiente del borde izquierdo:
#theBox { background: url(/images/theBox-leftBorderGradient.png) left no-repeat, ...; }
Puede adaptar esta técnica a los gradientes de borde superior, derecho e inferior cambiando la parte de la posición de background propiedad de background taquigrafía.
Aquí hay un jsFiddle para el ejemplo dado: http://jsfiddle.net/jLnDt/
Para la compatibilidad con varios navegadores, también puede intentar imitar un borde degradado con :before o :after pseudo elementos, depende de lo que desee hacer.
Prueba esto, funciona bien en web-kit.
.border {
width: 400px;
padding: 20px;
border-top: 10px solid #FFFF00;
border-bottom:10px solid #FF0000;
background-image:
linear-gradient(#FFFF00, #FF0000),
linear-gradient(#FFFF00, #FF0000)
;
background-size:10px 100%;
background-position:0 0, 100% 0;
background-repeat:no-repeat;
}
<div class="border">Hello!</div>
WebKit ahora (y al menos Chrome 12) admite gradientes como imagen de borde:
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 21 30 30 21 repeat repeat;
Prooflink - http://www.webkit.org/blog/1424/css3-gradients/
Soporte del navegador: http://caniuse.com/#search=border-image
prueba este código
.gradientBoxesWithOuterShadows {
height: 200px;
width: 400px;
padding: 20px;
background-color: white;
/* outer shadows (note the rgba is red, green, blue, alpha) */
-webkit-box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 6px rgba(23, 69, 88, .5);
/* rounded corners */
-webkit-border-radius: 12px;
-moz-border-radius: 7px;
border-radius: 7px;
/* gradients */
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%, white), color-stop(15%, white), color-stop(100%, #D7E9F5));
background: -moz-linear-gradient(top, white 0%, white 55%, #D5E4F3 130%);
}
o tal vez consulte este violín: http://jsfiddle.net/necolas/vqnk9/
http://www.webkit.org/blog/1424/css3-gradients/ y ahora acepta el gradiente en el formato Mozilla.
Firefox afirma que admite gradientes de dos maneras:
- Usando borde-imagen con borde-imagen-fuente
- Usando colores de borde derecho (derecha / izquierda / arriba / abajo)
IE9 no tiene soporte.