Forhad Hossaincodeforhad.hashnode.dev·7 hours agoCreating Beautiful Animated Gradient Border Components in ReactFull code example import React from 'react'; import { Percent, Heart, Star, Send } from 'lucide-react'; const GradientBorderExamples = () => { return ( <div className="space-y-8 p-6"> {/* Basic Button */} <div className="space-y-2"...gradients in CSS
Michael Andreuzzamichaelandreuzza.hashnode.dev·Dec 16, 2024We have built a new tool to create background and text gradients with Tailwind CSSMake Tailwind CSS Gradients the Easy Way Working with Tailwind CSS is awesome, but creating gradients for backgrounds or text can sometimes be a bit tricky. That’s where the Tailwind CSS Gradient Generator comes in! This handy tool helps you design g...Tailwind CSS
Nehal Fathemasafaranokhi.hashnode.dev·Nov 13, 2024Adding Life to Your Borders: CSS Border AnimationsAnimating borders in CSS can bring your website elements to life, adding a subtle, interactive touch that enhances the user experience. In this article, we’ll explore the essentials of CSS border animations and see how to make them fun and accessible...border
Eva Chenim1010ioio.hashnode.dev·Sep 20, 2024#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)↓ 今日學習重點 ↓ 學習 CSS filter blur() 特效 使用偽元素 ::before / ::after 製作裝飾元素 使用 box-shadow 製作裝飾元素 在平面設計中，還有一種很常見的漸層，既不是線性漸層，也不屬於圓形/圓錐漸層，是任意形狀漸層漸層，也有人稱之為流動 (Fluid gradient) 或暈染漸層，就像本系列文的封面圖。 這個封面我是使用 Figma 的套件「Noisy Gradients」產出的，另外這個套件還有在漸層上加上了噪點，讓平滑的顏色增...142 readsSuper Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯CSS
Eva Chenim1010ioio.hashnode.dev·Sep 19, 2024#39 CSS 幾何背景：條紋、格子、點點、棋盤格子背景 (CSS background)↓ 今日學習重點 ↓ 學會繪製各種條紋、格子背景 學會繪製各種點點背景 學會繪製各種棋盤格背景 除了單純的漸層色外，漸層還能夠延伸畫出其他的圖案：如條紋、格子、點點、棋盤格背景等等，很神奇吧！這些特殊背景是我從一本 CSS 好書「CSS Secrets」中學到的，這本書裡面還有很多神奇 CSS 小知識，大家可以去借來看看。 延伸閱讀：csssecrets 不過因為書是 2016 年出的，有些語法當初不支援，但現在已支援了，本篇文章以現在的為主，省去了一些過去的作法。 在看本篇文章...41 readsSuper Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯CSS
Eva Chenim1010ioio.hashnode.dev·Sep 16, 2024#37 CSS 基本漸層：線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)↓ 今日學習重點 ↓ 學會使用線性/放射/圓錐漸層 了解如何設定漸層的色彩空間 除了背景圖片，漸層色也是屬於 CSS 的背景一種，今天我們就來練習畫各種漂亮漸層吧！ 單純用漸層色就能夠表現出許多漂亮的視覺效果，例如模仿大自然中天空的顏色等等。 來源：27pt(クリスタ素材) / X 而在 CSS 中，漸層分為三種，分別是：線性、放射與圓錐漸層： 其實我們之前在特效文字的時候已經有偷偷用過了一些了，只不過沒有深入探討。 延伸閱讀：#29 CSS 立體字、霓虹字、外框字、漸層字...Super Easy CSS，極度簡單：寫出好的 CSS，從零開始前端生涯2Articles1Week
Kemi Owoyelekemi-owoyele.hashnode.dev·Jun 28, 2024Mastering Gradients in CSS: A Beginner's GuideGradients are gradual transition between two or more colors. They are used to create a smooth continuous change from one color to another. Gradients are used to add colored stripes and blends to backgrounds. They are usually treated as value to backg...backgrounds
Gorithmgorithm.hashnode.dev·Feb 16, 2024Create a Gradient Border with CSS [Just 2 Lines]The Problem with border-color and border-image: When you try to add a gradient as a property value to the border-color or to the border itself (same) you will see nothing, the border is completely vanished, this happens because CSS border property do...CSS
himanshugopalkdwivedi.hashnode.dev·Nov 20, 2023Gradients / transition in css (lt.19)CSS gradients are a way to display smooth transitions between two or more specified colors. They are a powerful tool for applying dynamic effects on web pages. To apply gradient we have to use background image. There are three primary types of gradie...10 likesgradients in CSS
Arindam Chowdhuryarindamchowdhury.hashnode.dev·Sep 20, 2023How to Make Your Website Pop with a Floating Gradient Blob in the BackgroundHave you ever visited a website and been mesmerized by a beautifully designed background that seems to flow and morph like a floating blob? If you're looking to add a touch of creativity and uniqueness to your web projects, you might want to conside...383 readsCSS
![Create a Gradient Border with CSS [Just 2 Lines]](https://cdn.hashnode.com/res/hashnode/image/upload/v1708296239848/eb4903fb-8086-4219-93ac-04a5dfe69eca.avif?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
