About Gradient

The absolute css3 gradient

The absolute css3 gradient

Last Modif at November 16th, 2014

Source Code

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gradient Collection</title>
<meta content="indam" name="author"/>
<meta content="url" name="http://indaam.net"/>
<style>
.gradient-child{
position: relative;
}
.gradient-child:after{
content: '';
display: block;
position: absolute;
background-color: rgba(255, 255, 255, .7);
height: 1px;
left: 40px;
right: 40px;
bottom: 40px;
display: none;
}
</style>
</head>
<body>
<!-- This Target -->
<div id="gradient-cont"></div>
<!-- This Dont Remove -->
<script>
/*
| Original Source by : https://github.com/Ghosh/uiGradients
| Loop by : http://indaam.net
*/
var setGradient = {
targetID: document.getElementById("gradient-cont"),
setHeight: window.screen.availHeight,
listColors :
[{
"name": "Emerald Water",
"colour1": "#348F50",
"colour2": "#56B4D3"
}, {
"name": "Lemon Twist",
"colour1": "#3CA55C",
"colour2": "#B5AC49"
}, {
"name": "Horizon",
"colour1": "#003973",
"colour2": "#E5E5BE"
}, {
"name": "Rose Water",
"colour1": "#E55D87",
"colour2": "#5FC3E4"
}, {
"name": "Frozen",
"colour1": "#403B4A",
"colour2": "#E7E9BB"
}, {
"name": "Mango Pulp",
"colour1": "#F09819",
"colour2": "#EDDE5D"
}, {
"name": "Bloody Mary",
"colour1": "#FF512F",
"colour2": "#DD2476"
}, {
"name": "Aubergine",
"colour1": "#AA076B",
"colour2": "#61045F"
}, {
"name": "Aqua Marine",
"colour1": "#1A2980",
"colour2": "#26D0CE"
}, {
"name": "Sunrise",
"colour1": "#FF512F",
"colour2": "#F09819"
}, {
"name": "Purple Paradise",
"colour1": "#1D2B64",
"colour2": "#F8CDDA"
}, {
"name": "Sea Weed",
"colour1": "#4CB8C4",
"colour2": "#3CD3AD"
}, {
"name": "Pinky",
"colour1": "#DD5E89",
"colour2": "#F7BB97"
}, {
"name": "Cherry",
"colour1": "#EB3349",
"colour2": "#F45C43"
}, {
"name": "Mojito",
"colour1": "#1D976C",
"colour2": "#93F9B9"
}, {
"name": "Juicy Orange",
"colour1": "#FF8008",
"colour2": "#FFC837"
}, {
"name": "Mirage",
"colour1": "#16222A",
"colour2": "#3A6073"
}, {
"name": "Steel Gray",
"colour1": "#1F1C2C",
"colour2": "#928DAB"
}, {
"name": "Kashmir",
"colour1": "#614385",
"colour2": "#516395"
}, {
"name": "Electric Violet",
"colour1": "#4776E6",
"colour2": "#8E54E9"
}, {
"name": "Venice Blue",
"colour1": "#085078",
"colour2": "#85D8CE"
}, {
"name": "Bora Bora",
"colour1": "#2BC0E4",
"colour2": "#EAECC6"
}, {
"name": "Moss",
"colour1": "#134E5E",
"colour2": "#71B280"
}, {
"name": "Shroom Haze",
"colour1": "#5C258D",
"colour2": "#4389A2"
}, {
"name": "Mystic",
"colour1": "#757F9A",
"colour2": "#D7DDE8"
}, {
"name": "Midnight City",
"colour1": "#232526",
"colour2": "#414345"
}, {
"name": "Sea Blizz",
"colour1": "#1CD8D2",
"colour2": "#93EDC7"
}, {
"name": "Opa",
"colour1": "#3D7EAA",
"colour2": "#FFE47A"
}, {
"name": "Titanium",
"colour1": "#283048",
"colour2": "#859398"
}, {
"name": "Mantle",
"colour1": "#24C6DC",
"colour2": "#514A9D"
}, {
"name": "Dracula",
"colour1": "#DC2424",
"colour2": "#4A569D"
}, {
"name": "Peach",
"colour1": "#ED4264",
"colour2": "#FFEDBC"
}, {
"name": "Moonrise",
"colour1": "#DAE2F8",
"colour2": "#D6A4A4"
}, {
"name": "Clouds",
"colour1": "#ECE9E6",
"colour2": "#FFFFFF"
}, {
"name": "Stellar",
"colour1": "#7474BF",
"colour2": "#348AC7"
}, {
"name": "Bourbon",
"colour1": "#EC6F66",
"colour2": "#F3A183"
}, {
"name": "Calm Darya",
"colour1": "#5f2c82",
"colour2": "#49a09d"
}, {
"name": "Influenza",
"colour1": "#C04848",
"colour2": "#480048"
}, {
"name": "Shrimpy",
"colour1": "#e43a15",
"colour2": "#e65245"
}, {
"name": "Army",
"colour1": "#414d0b",
"colour2": "#727a17"
}, {
"name": "Miaka",
"colour1": "#FC354C",
"colour2": "#0ABFBC"
}, {
"name": "Pinot Noir",
"colour1": "#4b6cb7",
"colour2": "#182848"
}, {
"name": "Day Tripper",
"colour1": "#f857a6",
"colour2": "#ff5858"
}, {
"name": "Namn",
"colour1": "#a73737",
"colour2": "#7a2828"
}, {
"name": "Blurry Beach",
"colour1": "#d53369",
"colour2": "#cbad6d"
}, {
"name": "Vasily",
"colour1": "#e9d362",
"colour2": "#333333"
}, {
"name": "A Lost Memory",
"colour1": "#DE6262",
"colour2": "#FFB88C"
}, {
"name": "Petrichor",
"colour1": "#666600",
"colour2": "#999966"
}, {
"name": "Jonquil",
"colour1": "#FFEEEE",
"colour2": "#DDEFBB"
}, {
"name": "Sirius Tamed",
"colour1": "#EFEFBB",
"colour2": "#D4D3DD"
}, {
"name": "Kyoto",
"colour1": "#c21500",
"colour2": "#ffc500"
}, {
"name": "Misty Meadow",
"colour1": "#215f00",
"colour2": "#e4e4d9"
}, {
"name": "Aqualicious",
"colour1": "#50C9C3",
"colour2": "#96DEDA"
}, {
"name": "Moor",
"colour1": "#616161",
"colour2": "#9bc5c3"
}, {
"name": "Almost",
"colour1": "#ddd6f3",
"colour2": "#faaca8"
}, {
"name": "Forever Lost",
"colour1": "#5D4157",
"colour2": "#A8CABA"
}, {
"name": "Winter",
"colour1": "#E6DADA",
"colour2": "#274046"
}, {
"name": "Autumn",
"colour1": "#DAD299",
"colour2": "#B0DAB9"
}, {
"name": "Candy",
"colour1": "#D3959B",
"colour2": "#BFE6BA"
}, {
"name": "Reef",
"colour1": "#00d2ff",
"colour2": "#3a7bd5"
}, {
"name": "The Strain",
"colour1": "#870000",
"colour2": "#190A05"
}, {
"name": "Dirty Fog",
"colour1": "#B993D6",
"colour2": "#8CA6DB"
}, {
"name": "Earthly",
"colour1": "#649173",
"colour2": "#DBD5A4"
}, {
"name": "Virgin",
"colour1": "#C9FFBF",
"colour2": "#FFAFBD"
}, {
"name": "Ash",
"colour1": "#606c88",
"colour2": "#3f4c6b"
}, {
"name": "Shadow Night",
"colour1": "#000000",
"colour2": "#53346D"
}, {
"name": "Cherryblossoms",
"colour1": "#FBD3E9",
"colour2": "#BB377D"
}, {
"name": "Parklife",
"colour1": "#ADD100",
"colour2": "#7B920A"
}, {
"name": "Dance To Forget",
"colour1": "#FF4E50",
"colour2": "#F9D423"
}, {
"name": "Starfall",
"colour1": "#F0C27B",
"colour2": "#4B1248"
}, {
"name": "Red Mist",
"colour1": "#000000",
"colour2": "#e74c3c"
}, {
"name": "Teal Love",
"colour1": "#AAFFA9",
"colour2": "#11FFBD"
}, {
"name": "Neon Life",
"colour1": "#B3FFAB",
"colour2": "#12FFF7"
}, {
"name": "Man of Steel",
"colour1": "#780206",
"colour2": "#061161"
}, {
"name": "Amethyst",
"colour1": "#9D50BB",
"colour2": "#6E48AA"
}, {
"name": "Cheer Up Emo Kid",
"colour1": "#556270",
"colour2": "#FF6B6B"
}, {
"name": "Shore",
"colour1": "#70e1f5",
"colour2": "#ffd194"
}, {
"name": "Facebook Messenger",
"colour1": "#00c6ff",
"colour2": "#0072ff"
}, {
"name": "SoundCloud",
"colour1": "#fe8c00",
"colour2": "#f83600"
}, {
"name": "Behongo",
"colour1": "#52c234",
"colour2": "#061700"
}, {
"name": "ServQuick",
"colour1": "#485563",
"colour2": "#29323c"
}, {
"name": "Friday",
"colour1": "#83a4d4",
"colour2": "#b6fbff"
}, {
"name": "Martini",
"colour1": "#FDFC47",
"colour2": "#24FE41"
}, {
"name": "Metallic Toad",
"colour1": "#abbaab",
"colour2": "#ffffff"
}, {
"name": "Between The Clouds",
"colour1": "#73C8A9",
"colour2": "#373B44"
}, {
"name": "Crazy Orange I",
"colour1": "#D38312",
"colour2": "#A83279"
}, {
"name": "Hersheys",
"colour1": "#1e130c",
"colour2": "#9a8478"
}, {
"name": "Talking To Mice Elf",
"colour1": "#948E99",
"colour2": "#2E1437"
}, {
"name": "Purple Bliss",
"colour1": "#360033",
"colour2": "#0b8793"
}, {
"name": "Predawn",
"colour1": "#FFA17F",
"colour2": "#00223E"
}, {
"name": "Endless River",
"colour1": "#43cea2",
"colour2": "#185a9d"
}, {
"name": "Pastel Orange at the Sun",
"colour1": "#ffb347",
"colour2": "#ffcc33"
}, {
"name": "Twitch",
"colour1": "#6441A5",
"colour2": "#2a0845"
}, {
"name": "Instagram",
"colour1": "#517fa4",
"colour2": "#243949"
}, {
"name": "Flickr",
"colour1": "#ff0084",
"colour2": "#33001b"
}, {
"name": "Vine",
"colour1": "#00bf8f",
"colour2": "#001510"
}, {
"name": "Turquoise flow",
"colour1": "#136a8a",
"colour2": "#267871"
}, {
"name": "Portrait",
"colour1": "#8e9eab",
"colour2": "#eef2f3"
}, {
"name": "Virgin America",
"colour1": "#7b4397",
"colour2": "#dc2430"
}, {
"name": "Koko Caramel",
"colour1": "#D1913C",
"colour2": "#FFD194"
}, {
"name": "Fresh Turboscent",
"colour1": "#F1F2B5",
"colour2": "#135058"
}],
create: function () {
for (var i = 0; i < this.listColors.length; i++) {
var lineChild = document.createElement("div");
var gradientValue = ""+this.listColors[i].colour1+" 0%, "+this.listColors[i].colour2+" 100%";
lineChild.classList.add('gradient-child');
lineChild.setAttribute("style",
"background-image: -moz-linear-gradient(left center, "+gradientValue+");"+
"background-image: -webkit-linear-gradient(left, "+gradientValue+");"+
"background-image: -ms-linear-gradient(left "+gradientValue+");"+
"background-image: -o-linear-gradient(left "+gradientValue+");"+
"background-image: linear-gradient(to right"+gradientValue+");");
this.targetID.appendChild(lineChild);
}
},
getCss: function(){
document.write('<style>');
document.write('.gradient-child{' );
document.write( 'height: ' + this.setHeight + 'px;');
document.write('}');
document.write('</style>');
}
};
setGradient.create();
setGradient.getCss();
</script>
</body>
</html>

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-