From e4f65ebd4e08f2b9f1ec9e0464f81fb20172fe10 Mon Sep 17 00:00:00 2001 From: Haider Mukhtar Date: Wed, 1 Jan 2025 13:41:12 +0500 Subject: [PATCH 1/4] Hover Grayscale Effect - CSS --- public/data/css.json | 29 +++++++++++++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/public/data/css.json b/public/data/css.json index cf65a6a1..5edf0cd3 100644 --- a/public/data/css.json +++ b/public/data/css.json @@ -243,6 +243,35 @@ ], "tags": ["css", "hover", "glow", "effects"], "author": "dostonnabotov" + }, + { + "title": "Hover Grayscale Effect", + "description": "Applies a grayscale effect to the image on hover.", + "code": [ + ".card {", + " height: 300px;", + " width: 200px;", + " border-radius: 5px;", + " overflow: hidden;", + "}", + "", + ".card img{", + " height: 100%;", + " width: 100%;", + " object-fit: cover;", + " filter: grayscale(100%);", + " transition: all 0.3s;", + " transition-duration: 200ms;", + " cursor: pointer;", + "}", + "", + ".card:hover img {", + " filter: grayscale(0%);", + " scale: 1.05;", + "} " + ], + "tags": ["css", "hover", "image", "effects"], + "author": "Haider-Mukhtar" } ] } From ffd7bfa88ba21e800242b72dc93d4cf72978e5f2 Mon Sep 17 00:00:00 2001 From: Haider Mukhtar Date: Wed, 1 Jan 2025 15:05:46 +0500 Subject: [PATCH 2/4] Hover Grayscale Effect - CSS --- public/data/css.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/public/data/css.json b/public/data/css.json index 5edf0cd3..a9241f4f 100644 --- a/public/data/css.json +++ b/public/data/css.json @@ -245,8 +245,8 @@ "author": "dostonnabotov" }, { - "title": "Hover Grayscale Effect", - "description": "Applies a grayscale effect to the image on hover.", + "title": "Hover to Reveal Color", + "description": "A card with an image that transitions from grayscale to full color on hover.", "code": [ ".card {", " height: 300px;", From b3ab36b41e05d336572dfdc39680b7fae0ffff77 Mon Sep 17 00:00:00 2001 From: Haider Mukhtar Date: Wed, 1 Jan 2025 16:05:47 +0500 Subject: [PATCH 3/4] Text Transformation - CSS --- public/data/css.json | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/public/data/css.json b/public/data/css.json index a9241f4f..601a9ca2 100644 --- a/public/data/css.json +++ b/public/data/css.json @@ -15,6 +15,25 @@ "code": ["p {", " letter-spacing: 0.05em;", "}"], "tags": ["css", "typography", "spacing"], "author": "dostonnabotov" + }, + { + "title": "Text Transformation", + "description": "It can be used to turn text into uppercase or lowercase letters, or capitalize the first letter of each word", + "code": [ + "p.uppercase {", + " text-transform: uppercase;", + "}", + "", + "p.lowercase {", + " text-transform: lowercase;", + "}", + "", + "p.capitalize {", + " text-transform: capitalize;", + "}" + ], + "tags": ["css", "typography", "text"], + "author": "Haider-Mukhtar" } ] }, From df4a2bf6fcfd5e6cb861192d228c2a5650367c3d Mon Sep 17 00:00:00 2001 From: GitHub Action Date: Fri, 3 Jan 2025 10:23:47 +0000 Subject: [PATCH 4/4] Update consolidated snippets --- public/consolidated/css.json | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/public/consolidated/css.json b/public/consolidated/css.json index b759c611..339e3fc2 100644 --- a/public/consolidated/css.json +++ b/public/consolidated/css.json @@ -38,6 +38,19 @@ ], "contributors": [], "code": ".button {\n font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,;\n background: #0a85ff;\n color: #fff;\n padding: 8px 12px;\n border: none;\n margin: 4px;\n border-radius: 10px;\n cursor: pointer;\n box-shadow: inset 0 1px 1px #fff2, 0px 2px 3px -2px rgba(0, 0, 0, 0.3) !important; /*This is really performance heavy*/\n font-size: 14px;\n display: flex;\n align-items: center;\n justify-content: center;\n text-decoration: none;\n transition: all 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n.button:hover {\n background: #0974ee;\n color: #fff\n}\n" + }, + { + "title": "Switch Button", + "description": "A switch button with a beautiful style and effect.", + "author": "Haider-Mukhtar", + "tags": [ + "button", + "switch", + "toggle", + "slider" + ], + "contributors": [], + "code": "/* The switch - the box around the slider */\n.switch {\n font-size: 17px;\n position: relative;\n display: inline-block;\n width: 3.5em;\n height: 2em;\n}\n\n/* Hide default HTML checkbox */\n.switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n/* The slider */\n.slider {\n position: absolute;\n cursor: pointer;\n inset: 0;\n background: #d4acfb;\n border-radius: 50px;\n transition: all 0.4s cubic-bezier(0.23, 1, 0.320, 1);\n}\n\n.slider:before {\n position: absolute;\n content: \"\";\n height: 1.4em;\n width: 1.4em;\n left: 0.3em;\n bottom: 0.3em;\n background-color: white;\n border-radius: 50px;\n box-shadow: 0 0px 20px rgba(0,0,0,0.4);\n transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.switch input:checked + .slider {\n background: #b84fce;\n}\n\n.switch input:focus + .slider {\n box-shadow: 0 0 1px #b84fce;\n}\n\n.switch input:checked + .slider:before {\n transform: translateX(1.6em);\n width: 2em;\n height: 2em;\n bottom: 0;\n}\n\n/* HTML */\n\n" } ] },