From 82e1657a293ea5b6e7e86112e90a07459bb8b758 Mon Sep 17 00:00:00 2001 From: shyamtala003 Date: Tue, 18 Oct 2022 18:21:21 +0530 Subject: [PATCH] 8 new mesh gradient color added --- README.md | 1 + constants/gradientCard.js | 69 ++++----- constants/meshGradientCard.js | 155 ++++++++++++++++++++ index.html | 264 +++++++++++++++++++++------------- 4 files changed, 353 insertions(+), 136 deletions(-) create mode 100644 constants/meshGradientCard.js diff --git a/README.md b/README.md index 5dcf055..6bc7cea 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,3 @@ # gradient_container ✨Explore a constantly updated library of gradients, curated by the community + diff --git a/constants/gradientCard.js b/constants/gradientCard.js index a20d53a..1749ec3 100644 --- a/constants/gradientCard.js +++ b/constants/gradientCard.js @@ -1,208 +1,209 @@ +// let autoId = 0; this variable value comes from meshgradientcard.js let gradientCards = [{ - id: 1, + id: ++autoId, colors: ['#6d28d9', '#db2777'], gradientColor: 'linear-gradient(to right, #6d28d9, #db2777)', gradientName: 'daring new color monster', gradientMaker: 'ShyamTala' }, { - id: 2, + id: ++autoId, colors: ['#f12711', '#f5af19'], gradientColor: 'linear-gradient(to right, #f12711,#f5af19)', gradientName: 'flare', gradientMaker: 'ShyamTala' }, { - id: 3, + id: ++autoId, colors: ['#12c2e9', '#c471ed', '#f64f59'], gradientColor: 'linear-gradient(to right, #12c2e9,#c471ed,#f64f59)', gradientName: 'jshine', gradientMaker: 'ShyamTala' }, { - id: 4, + id: ++autoId, colors: ['#00b09b', '#96c93d'], gradientColor: 'linear-gradient(to right, #00b09b, #96c93d)', gradientName: 'ohhappiness', gradientMaker: 'ShyamTala' }, { - id: 5, + id: ++autoId, colors: ['#c0392b', '#8e44ad'], gradientColor: 'linear-gradient(to right, #c0392b, #8e44ad)', gradientName: 'mello', gradientMaker: 'ShyamTala' }, { - id: 6, + id: ++autoId, colors: ['#ad8cea', '#50dfb2'], gradientColor: 'linear-gradient(to right, #ad8cea, #50dfb2)', gradientName: 'emeald', gradientMaker: 'ShyamTala' }, { - id: 7, + id: ++autoId, colors: ['#f9e7fe', '#dafcfc'], gradientColor: 'linear-gradient(to right, #f9e7fe, #dafcfc)', gradientName: 'almost', gradientMaker: 'ShyamTala' }, { - id: 8, + id: ++autoId, colors: ['#6a11cb', '#fc6767'], gradientColor: 'linear-gradient(to right, #6a11cb, #fc6767)', gradientName: 'galaxy', gradientMaker: 'ShyamTala' }, { - id: 9, + id: ++autoId, colors: ['#ff1f01', '#ffc700'], gradientColor: 'linear-gradient(to right, #ff1f01, #ffc700)', gradientName: 'sol', gradientMaker: 'ShyamTala' }, { - id: 10, + id: ++autoId, colors: ['#d0dae0', '#8a2eff'], gradientColor: 'linear-gradient(to right, #d0dae0, #8a2eff)', gradientName: 'mikyway', gradientMaker: 'ShyamTala' }, { - id: 11, + id: ++autoId, colors: ['#e3d2c4', '#fcfcfb'], gradientColor: 'linear-gradient(to right, #e3d2c4, #fcfcfb)', gradientName: 'gold dust', gradientMaker: 'ShyamTala' }, { - id: 12, + id: ++autoId, colors: ['#1e130c', '#9a8478'], gradientColor: 'linear-gradient(to right, #1e130c, #9a8478)', gradientName: 'coffee', gradientMaker: 'ShyamTala' }, { - id: 13, + id: ++autoId, colors: ['#1a2980', '#26d0ce'], gradientColor: 'linear-gradient(to right, #1a2980, #26d0ce)', gradientName: 'aqua', gradientMaker: 'ShyamTala' }, { - id: 14, + id: ++autoId, colors: ['#4158D0', '#C850C0', 'FFCC70'], gradientColor: 'linear-gradient(43deg, #4158D0,#C850C0,#FFCC70)', gradientName: 'smesh', gradientMaker: 'ShyamTala' }, { - id: 15, + id: ++autoId, colors: ['#00DBDE', '#FC00FF'], gradientColor: 'linear-gradient(90deg, #00DBDE, #FC00FF)', gradientName: 'smoothy', gradientMaker: 'ShyamTala' }, { - id: 16, + id: ++autoId, colors: ['#3a6186', '#89253e'], gradientColor: 'linear-gradient(90deg, #3a6186, #89253e)', gradientName: 'love couple', gradientMaker: 'ShyamTala' }, { - id: 17, + id: ++autoId, colors: ['#FD297A', '#9424F0'], gradientColor: 'linear-gradient(90deg, #FD297A, #9424F0)', gradientName: 'cripy', gradientMaker: 'ShyamTala' }, { - id: 18, + id: ++autoId, colors: ['#FED54A', '#FF9347'], gradientColor: 'linear-gradient(90deg, #FED54A, #FF9347)', gradientName: 'sunset', gradientMaker: 'ShyamTala' }, { - id: 19, + id: ++autoId, colors: ['#70e1f5', '#ffd194'], gradientColor: 'linear-gradient(90deg, #70e1f5, #ffd194)', gradientName: 'shore', gradientMaker: 'ShyamTala' }, { - id: 20, + id: ++autoId, colors: ['#00c6ff', '#0072ff'], gradientColor: 'linear-gradient(90deg, #00c6ff, #0072ff)', gradientName: 'Facebook Messenger', gradientMaker: 'ShyamTala' }, { - id: 21, + id: ++autoId, colors: ['#d38312', '#a83279'], gradientColor: 'linear-gradient(90deg, #d38312, #a83279)', gradientName: 'Crazy Orange!', gradientMaker: 'ShyamTala' }, { - id: 22, + id: ++autoId, colors: ['#43cea2', '#185a9d'], gradientColor: 'linear-gradient(90deg, #43cea2, #185a9d)', gradientName: 'Endless river!', gradientMaker: 'ShyamTala' }, { - id: 23, + id: ++autoId, colors: ['#ffb347', '#ffcc33'], gradientColor: 'linear-gradient(90deg, #ffb347, #ffcc33)', gradientName: 'Crazy Orange!', gradientMaker: 'ShyamTala' }, { - id: 24, - colors: ['#FEAC5E', '#C779D0','#4BC0C8'], + id: ++autoId, + colors: ['#FEAC5E', '#C779D0', '#4BC0C8'], gradientColor: 'linear-gradient(90deg,#FEAC5E, #C779D0, #4BC0C8)', gradientName: 'Atlas!', gradientMaker: 'ShyamTala' }, { - id: 25, + id: ++autoId, colors: ['#7b4397', '#dc2430'], gradientColor: 'linear-gradient(90deg,#7b4397, #dc2430)', gradientName: 'virgin america', gradientMaker: 'ShyamTala' }, { - id: 26, + id: ++autoId, colors: ['#fc00ff', '#00dbde'], gradientColor: 'linear-gradient(90deg,#fc00ff, #00dbde)', gradientName: 'timber', gradientMaker: 'ShyamTala' }, { - id: 27, + id: ++autoId, colors: ['#f46b45', '#eea849'], gradientColor: 'linear-gradient(90deg,#f46b45, #eea849)', gradientName: 'master card', gradientMaker: 'ShyamTala' }, { - id: 28, + id: ++autoId, colors: ['#00C9FF', '#92FE9D'], gradientColor: 'linear-gradient(90deg,#00C9FF, #92FE9D)', gradientName: 'back to earth', gradientMaker: 'ShyamTala' }, { - id: 29, + id: ++autoId, colors: ['#fd746c', '#ff9068'], gradientColor: 'linear-gradient(90deg,#fd746c, #ff9068)', gradientName: 'haikus', gradientMaker: 'ShyamTala' }, { - id: 30, + id: ++autoId, colors: ['#3434e6', '#ec6ead'], gradientColor: 'linear-gradient(90deg,#3434e6, #ec6ead)', gradientName: 'vice city', @@ -211,13 +212,13 @@ let gradientCards = [{ ]; -let gradientContaier = document.querySelector('.gradient_container'); +let gradientContaier1 = document.querySelector('.gradient_container'); gradientCards.forEach((element) => { let gradientCard = document.createElement("div"); gradientCard.classList.add('gradient_card'); - gradientCard.setAttribute("style", `background:${element.gradientColor}`); + gradientCard.setAttribute("style", `background-image:${element.gradientColor}`); let gradientInfo = document.createElement('div'); gradientInfo.classList.add('gradient_info'); @@ -263,6 +264,6 @@ gradientCards.forEach((element) => { gradientCard.append(gradientInfo); - gradientContaier.append(gradientCard); + gradientContaier1.append(gradientCard); }) \ No newline at end of file diff --git a/constants/meshGradientCard.js b/constants/meshGradientCard.js new file mode 100644 index 0000000..481e8e9 --- /dev/null +++ b/constants/meshGradientCard.js @@ -0,0 +1,155 @@ +let autoId = 0; +let meshGradientCards = [{ + id: ++autoId, + colors: ['#aeffbe', '#94fff1', '#ffe48a', '#ff9ebe'], + backgroundColor: '#b3ff99', + gradientColor: `radial-gradient(at 43% 0%, hsla(97,75%,68%,1) 0px, transparent 50%), + radial-gradient(at 100% 1%, hsla(176,100%,79%,1) 0px, transparent 50%), + radial-gradient(at 14% 99%, hsla(50,100%,77%,1) 0px, transparent 50%), + radial-gradient(at 100% 98%, hsla(344,100%,80%,1) 0px, transparent 50%)`, + gradientName: 'mesh gradient', + gradientMaker: 'ShyamTala' + }, + { + id: ++autoId, + colors: ['#ac9dff', '#9384ff', '#ff93c4', '#ff80cd'], + gradientColor: `radial-gradient(at 100% 0%, hsla(249,100%,80%,1) 0px, transparent 50%), + radial-gradient(at 9% 89%, hsla(247,100%,75%,1) 0px, transparent 50%), + radial-gradient(at 99% 98%, hsla(332,100%,78%,1) 0px, transparent 50%), + radial-gradient(at 0% 0%, hsla(323,100%,75%,1) 0px, transparent 50%)`, + backgroundColor: '#b3ff99', + gradientName: 'killer mesh gradie', + gradientMaker: 'ShyamTala' + }, + { + id: ++autoId, + colors: ['#ff8fcd', '#c6fcfe', '#95f3ff', '#b8ffbb'], + gradientColor: `radial-gradient(at 100% 100%, hsla(326,100%,78%,0.73) 0px, transparent 50%), + radial-gradient(at 100% 0%, hsla(182,100%,88%,1) 0px, transparent 50%), + radial-gradient(at 0% 99%, hsla(186,100%,79%,1) 0px, transparent 50%), + radial-gradient(at 1% 0%, hsla(122,100%,86%,1) 0px, transparent 50%)`, + backgroundColor: '#b3ff99', + gradientName: 'smoothy mesh gradient', + gradientMaker: 'ShyamTala' + }, + { + id: ++autoId, + colors: ['#9bffe1', '#a8c5ff', '#ccedff', '#cbbcfc'], + gradientColor: `radial-gradient(at 100% 0%, hsla(162,100%,80%,1) 0px, transparent 50%), + radial-gradient(at 9% 89%, hsla(219,100%,82%,1) 0px, transparent 50%), + radial-gradient(at 99% 98%, hsla(201,100%,90%,1) 0px, transparent 50%), + radial-gradient(at 0% 0%, hsla(254,91%,86%,1) 0px, transparent 50%)`, + backgroundColor: '#b3ff99', + gradientName: 'staunch mesh gradie', + gradientMaker: 'ShyamTala' + }, + { + id: ++autoId, + colors: ['#f2ffa3', '#deffa8', '#ff99da', '#affefb'], + gradientColor: `radial-gradient(at 0% 0%, hsla(68,97%,83%,1) 0px, transparent 50%), + radial-gradient(at 100% 0%, hsla(82,100%,82%,1) 0px, transparent 50%), + radial-gradient(at 0% 99%, hsla(321,100%,80%,1) 0px, transparent 50%), + radial-gradient(at 99% 98%, hsla(177,97%,84%,1) 0px, transparent 50%)`, + backgroundColor: '#b3ff99', + gradientName: 'mesh gradient', + gradientMaker: 'ShyamTala' + }, + { + id: ++autoId, + colors: ['#da99fd', '#fffd90', '#9b96f9', '#ffa694'], + gradientColor: `radial-gradient(at 0% 0%, hsla(279,96%,79%,1) 0px, transparent 50%), + radial-gradient(at 100% 0%, hsla(58,100%,78%,1) 0px, transparent 50%), + radial-gradient(at 9% 89%, hsla(243,89%,78%,1) 0px, transparent 50%), + radial-gradient(at 99% 98%, hsla(10,100%,79%,1) 0px, transparent 50%)`, + backgroundColor: '#b3ff99', + gradientName: 'sun-shine mesh gradie', + gradientMaker: 'ShyamTala' + }, + { + id: ++autoId, + colors: ['#ccbeff', '#c8f9fe', '#8d85ff', '#ffbec6'], + gradientColor: `radial-gradient(at 0% 0%, hsla(252,100%,87%,1) 0px, transparent 50%), + radial-gradient(at 100% 0%, hsla(185,96%,89%,1) 0px, transparent 50%), + radial-gradient(at 9% 89%, hsla(243,100%,76%,1) 0px, transparent 50%), + radial-gradient(at 99% 98%, hsla(352,100%,87%,1) 0px, transparent 50%)`, + backgroundColor: '#b3ff99', + gradientName: 'beautiful mesh gradie', + gradientMaker: 'ShyamTala' + }, + { + id: ++autoId, + colors: ['#f9bcff', '#98efff', '#ffa29a', '#be99ff'], + gradientColor: `radial-gradient(at 0% 0%, hsla(294,100%,86%,1) 0px, transparent 50%), + radial-gradient(at 100% 0%, hsla(189,100%,79%,1) 0px, transparent 50%), + radial-gradient(at 9% 89%, hsla(4,100%,80%,1) 0px, transparent 50%), + radial-gradient(at 99% 98%, hsla(261,100%,80%,1) 0px, transparent 50%)`, + backgroundColor: '#b3ff99', + gradientName: 'radial mesh gradie', + gradientMaker: 'ShyamTala' + }, + + + +]; + + +let gradientContaier = document.querySelector('.gradient_container'); + +meshGradientCards.forEach((element) => { + + let gradientCard = document.createElement("div"); + gradientCard.classList.add('gradient_card'); + gradientCard.setAttribute("style", `background:${element.backgroundColor};background-image:${element.gradientColor}`); + + let gradientCanvas = document.createElement('div'); + gradientCanvas.classList.add("gradient_canvas"); + gradientCanvas.setAttribute("style", `height: 75%;background:${element.backgroundColor};background-image:${element.gradientColor}`); + + let gradientInfo = document.createElement('div'); + gradientInfo.classList.add('gradient_info'); + + let colors = document.createElement("div"); + colors.classList.add("colors"); + + + element.colors.forEach((color) => { + let colorInput = document.createElement('input'); + colorInput.classList.add("color") + colorInput.setAttribute("type", "color"); + colorInput.setAttribute("value", color) + colors.append(colorInput) + }) + + let titleWithCopyBtn = document.createElement('div'); + titleWithCopyBtn.classList.add("title_with_copy_btn"); + + let gradientTitle = document.createElement('h1'); + gradientTitle.classList.add('gradient_title'); + gradientTitle.textContent = element.gradientName; + gradientTitle.setAttribute("style", `background:${element.backgroundColor};background-image:${element.gradientColor};-webkit-background-clip: text; + -webkit-text-fill-color: rgba(0,0,0,.2);`); + + let coptToClipBoard = document.createElement('button'); + coptToClipBoard.classList.add('copy_to_clipboard'); + coptToClipBoard.setAttribute("data-clipboard-text", `background:${element.backgroundColor};\nbackground-image:${element.gradientColor};`) + coptToClipBoard.innerHTML = ``; + + let gradientAuther = document.createElement('p'); + gradientAuther.classList.add("gradient_maker"); + gradientAuther.textContent = `by ${element.gradientMaker}`; + + + // append elements + titleWithCopyBtn.append(gradientTitle); + titleWithCopyBtn.append(coptToClipBoard); + + gradientInfo.append(colors) + gradientInfo.append(titleWithCopyBtn); + gradientInfo.append(gradientAuther); + + gradientCard.append(gradientCanvas) + gradientCard.append(gradientInfo); + + gradientContaier.append(gradientCard); + +}) \ No newline at end of file diff --git a/index.html b/index.html index a6bcf4c..51fe9c8 100644 --- a/index.html +++ b/index.html @@ -1,147 +1,207 @@ - - - - - + + + + - - - + + + 🌈Monogradients🎉 - + - - - - - - + + +
-
- + +
+
+ - -
-
- - - -
+ + +
-
- -
-
+
+ +
+
color copied!
+ - - -
-

Beautiful hand-crafted gradients,

-

curated by the community.

- -
- - - Make Your Own - - - View on Github - -
- -
+
+

Beautiful hand-crafted gradients,

+

curated by the community.

+
+ + + Make Your Own + + + View on Github + +
+
- - - - + + +
- - - + + - + - - - \ No newline at end of file + +