En esta entrada les voy a mostrar lo facíl que es obtener el gradiente con CSS3. la mayoria obtan por solo poner un sólo color,pues con CSS3 ahora podemos añadir colores múltiples combinaciones en un bloque,cuadro sin tener que depender de imágenes, lo que podrían ayudar a disminuir la solicitud HTTP en nuestro sitio , permitiendo que nuestra pagina se carge más rápido.
Los ejemplos que les voy a mostrar son muy facíl de implementar recuerden que estos van a ser <style> por lo cual van dentro de estas etiquetas <style> Aquí </style>
Estas etiquetas se colocan antes del </head> en sus plantilla.
Ahora debemos darles un ID a esto ,le damos uno que no se repitan en el blog,o el ID al cual se lo quieres añadir por ejemplo yo le pondre gradienteCSS3 y seria así
#gradienteCSS3
{
Ahora le colocamos a esta caja una posicion ,tamaño,altura,y un bordercito a esas esquinas entonces seria algo como así.
position: absolute;
width: 50%;
height: 100;
border-radius: 5px;
padding: 4em 4.5em;
Y le agregamos el codigo que va a dar el efecto gradiente de dos tonos.
background-image: -webkit-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -moz-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -ms-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -o-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: linear-gradient(top, #FF8c00 0%, #006400 100%);
Entonces colocamos las etiquetas <div></div>con el ID que le dimos en este caso yo le di gradienteCSS3
y les pongo un texto de ejemplo
Y seria así.
<div id="gradienteCSS3">
<h1>Efecto con CSS3 </h1>
</div>
Ahora si ponemos todo junto quedaria así.
<style>
#gradienteCSS3
{
position: absolute;
width: 50%;
height: 100;
border-radius: 5px;
padding: 4em 4.5em;
background-image: -webkit-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -moz-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -ms-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -o-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: linear-gradient(top, #FF8c00 0%, #006400 100%);
</style>
<div id="gradienteCSS3">
<Center><h1>Efecto con CSS3 </h1></center>
</div>
Si provamos este codigo en este provador ya podrian ver el efecto que toma solo copien el codigo y peguenlo en el cuadrito y click en convertir y veran el ejemplo.
facíl verdad solo cambian los colores a sus gustos y es todo de esto se trata.
Estos serian los colores :
#FF8c00
#006400
A continuacion les muestro otros ejemplos solo cambia el codigo que les brinde anteriormente que es el siguiente .
background-image: -webkit-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -moz-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -ms-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: -o-linear-gradient(top, #FF8c00 0%, #006400 100%);
background-image: linear-gradient(top, #FF8c00 0%, #006400 100%);
por este :
Ejemplo#2:
background-image: -moz-linear-gradient(45deg, #FF8c00, #006400 100%);
Ejemplo#3:
background-image: -moz-linear-gradient(top, #FF8c00 50%, #006400 51%);
Ejemplo#4:
background-image: -moz-linear-gradient(45deg, #FF8c00 50%, #006400 51%);
Ejemplo#5:
background-image: -moz-linear-gradient(top, red, orange, yellow, green, blue, indigo, black);
Ejemplo#6:
background-image: -moz-linear-gradient(45deg, red, orange, yellow, green, blue, indigo, black);
Ejemplo#7:
background-image: -moz-linear-gradient(180deg, red, orange, yellow, green, blue, indigo, black);
Ejemplo#8:
background-image: -moz-linear-gradient(280deg, red, orange, yellow, green, blue, indigo, black);
Ejemplo#9:
background-image: -moz-linear-gradient(10deg, red, orange, green);
Como pueden ver les muestro una variedad todo va en la imaginacion de cada cual, le pueden poner mas colores o menos como quieran .
:)
:(
;)
:D
;;-)
:-/
:-O
X(
B-)
#:-S
:((
:))
=))
~X(
:-t
8-
=P~
#-o
=D7
:-SS
:-q
:-bd
Me Encanto buen tuto gracias por compartirlo =D7 =D7 =D7
ResponderEliminarGracias a ti por tu visita,que bueno que te haya gustado.
Eliminar