From 2b05036c63c5e9447dd7ff536872f0d53ab20d54 Mon Sep 17 00:00:00 2001 From: Ajay Dhangar Date: Sat, 29 Nov 2025 20:56:52 +0530 Subject: [PATCH] Done css effects --- docs/css/effects/backdrops.mdx | 79 +++++++++++++++- docs/css/effects/clip-path.mdx | 117 +++++++++++++++++++++++- docs/css/effects/filters-and-blend.mdx | 118 +++++++++++++++++++++++- docs/css/effects/mask.mdx | 119 ++++++++++++++++++++++++- docs/css/effects/opacity.mdx | 103 ++++++++++++++++++++- 5 files changed, 531 insertions(+), 5 deletions(-) diff --git a/docs/css/effects/backdrops.mdx b/docs/css/effects/backdrops.mdx index e345ed2..c586bf4 100644 --- a/docs/css/effects/backdrops.mdx +++ b/docs/css/effects/backdrops.mdx @@ -1 +1,78 @@ - \ No newline at end of file +--- +title: "The backdrop-filter Property" +description: "Master the CSS backdrop-filter property, which applies graphical effects (like blur, grayscale, and contrast) to the area behind a transparent element, enabling the Frosted Glass effect." +keywords: [CSS backdrop filter, frosted glass, blur behind, visual effects, UI design, transparency] +tags: [CSS backdrop-filter, frosted glass, blur behind, visual effects, UI design, transparency] +sidebar_label: "backdrop-filter" +--- + +The `backdrop-filter` property is one of the most visually striking and modern CSS features. It allows you to apply any of the standard CSS filter functions (like `blur`, `grayscale`, `sepia`, etc.) to the content that sits *behind* the element. + +This is the key to creating the "Frosted Glass" or "Aero Glass" effect commonly seen in modern operating systems and user interfaces. + + +
+ +## 1. `backdrop-filter` vs. `filter` + +It is crucial to distinguish between the two filter properties: + +| Property | Target of the Effect | Use Case | +| :--- | :--- | :--- | +| **`filter`** | The element itself and all of its content. | Making an image grayscale or blurring a photo. | +| **`backdrop-filter`** | The background content visible *through* the element's transparent areas. | Creating a translucent, blurred overlay panel. | + +## 2. Prerequisites for `backdrop-filter` + +For `backdrop-filter` to have any visual effect, the element it is applied to **must be transparent or translucent**. If the element is fully opaque (`background-color: white;`), you won't see the content behind it, and therefore, the filter will be invisible. + +The necessary ingredients for a successful frosted glass effect are: + +1. **A background element** (the content that needs to be blurred). +2. **A foreground element** positioned above the background. +3. The foreground element must have a **semi-transparent background** (e.g., `rgba(255, 255, 255, 0.2)`). +4. The foreground element must have the `backdrop-filter` applied. + +## 3. Applying the Frosted Glass Effect + +The syntax for `backdrop-filter` is identical to the standard `filter` property; you simply use the same filter functions. + +### Example: Creating a Blur Effect + +```css title="title="styles.css" +.frosted-panel { + /* Step 1: Make the element translucent */ + background-color: rgba(255, 255, 255, 0.15); + border: 1px solid rgba(255, 255, 255, 0.4); /* Add a light border for definition */ + + /* Step 2: Apply the filter to the content behind the panel */ + backdrop-filter: blur(12px) saturate(1.5); + + /* Optional: Ensure cross-browser support */ + -webkit-backdrop-filter: blur(12px) saturate(1.5); +} +``` + + +
+ +## 4. Common `backdrop-filter` Functions + +You can combine multiple filters for unique looks: + +| Effect | Function | Description | +| :--- | :--- | :--- | +| **Blur** | `blur(10px)` | Creates the classic frosted glass look. | +| **Inversion** | `invert(1)` | Inverts colors behind the element (e.g., for a "dark mode" effect on bright content). | +| **Grayscale** | `grayscale(0.8)` | Desaturates the background content behind the element. | +| **Hue Rotation** | `hue-rotate(90deg)` | Shifts the colors of the content behind the element. | +| **Contrast** | `contrast(0.7)` | Makes the background content less distinct. | + +## Interactive `backdrop-filter` Demo + +In this demo, the background image is static. The `.overlay-card` is semi-transparent, and the `backdrop-filter: blur()` applied to it makes the image visible through the card look blurred, while the text inside the card remains sharp and clear. + + \ No newline at end of file diff --git a/docs/css/effects/clip-path.mdx b/docs/css/effects/clip-path.mdx index e345ed2..407f9a4 100644 --- a/docs/css/effects/clip-path.mdx +++ b/docs/css/effects/clip-path.mdx @@ -1 +1,116 @@ - \ No newline at end of file +--- +title: "The clip-path Property" +description: "Learn how to use the CSS clip-path property to clip an element to a specific shape (circle, polygon, inset), creating complex, non-rectangular designs." +keywords: [CSS clip-path, clipping, shape-masking, polygon, circle, inset, transitions] +tags: [CSS clip-path, clipping, shape-masking, polygon, circle, inset, transitions] +sidebar_label: "clip-path" +--- + +The `clip-path` property allows you to define a specific geometric shape that an element's content should be clipped to. Only the part of the element that is inside the shape is visible; everything outside is completely cut off. + +This powerful property moves CSS beyond the constraints of the rectangular box model, enabling the creation of custom, dynamic shapes for images, containers, and interactive elements. + + +
+ +## 1. Core Concept + +`clip-path` uses various shape functions to define a clipping region. Anything outside this region is treated as transparent and non-interactive. + +### `clip-path` vs. `overflow: hidden` + +* **`overflow: hidden`:** Hides content that exceeds the rectangular boundaries of the element's box. The box itself remains a rectangle. +* **`clip-path`:** Changes the *visible shape* of the element itself, even if the content remains within the original box's boundaries. The element's background, borders, and content are all clipped to the shape. + + +## 2. Supported Shape Functions + +`clip-path` accepts several built-in shape functions, with `polygon()` being the most versatile. + +### 2.1. `inset()` (The Rounded Rectangle) +Clips the element inward from its edges. This is similar to a padded box, but it clips the visual output. + +```css title="styles.css" +/* Clips 10px from top, 20px from right, 30px from bottom, 40px from left */ +clip-path: inset(10px 20px 30px 40px); + +/* Can also be combined with border-radius */ +clip-path: inset(10% round 15px); +``` + +### 2.2. `circle()` + +Clips the element to a circular shape. + +```css title="styles.css" +/* Creates a circle with a radius of 50% centered at 50% 50% */ +clip-path: circle(50% at 50% 50%); +``` + + +
+ +### 2.3. `ellipse()` + +Clips the element to an oval shape, defined by two radii (X and Y). + +```css title="styles.css" +/* Creates an ellipse with horizontal radius 30% and vertical radius 40%, centered at 50% 50% */ +clip-path: ellipse(30% 40% at 50% 50%); +``` + +### 2.4. `polygon()` (Custom Shapes) + +This is the function used for complex and custom shapes. It requires a list of coordinates (X Y pairs) that define the vertices (corners) of the shape. Coordinates are relative to the top-left corner of the element (0% 0%). + +```css title="styles.css" +/* Creates a basic downward arrow shape */ +clip-path: polygon( + 50% 0%, /* Top Center */ + 100% 100%, /* Bottom Right */ + 0% 100% /* Bottom Left */ +); +``` + +## 3. Animating with `clip-path` + +One of the most powerful uses of `clip-path` is for transitions and animations. As long as the two states (start and end) have the same number of points in their `polygon()` definitions, the browser can smoothly interpolate between the shapes. + +### Example: Rectangle to Starburst + +```css title="styles.css" +.starburst-box { + /* Starting shape: a simple rectangle (4 points) */ + clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%); + transition: clip-path 0.5s ease; +} + +.starburst-box:hover { + /* Ending shape: A starburst/diamond shape (4 points) */ + clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); +} +``` + +:::warning Point Count is Key +If you are transitioning between two `polygon()` shapes, they **must** define the same number of coordinates. For instance, transitioning from a triangle (3 points) to a hexagon (6 points) will typically fail or produce unpredictable results. +::: + + +
+ +## 4. Interaction Caveats + +When you clip an element, the invisible clipped area is also **non-interactive**. + +If you clip an image into a circle, only the pixels within the circle will respond to mouse events (like `click` or `hover`). The corners of the original rectangle, though still technically taking up space in the layout, are completely inert. + +This is a crucial difference from using transparent backgrounds, where the mouse still interacts with the full bounding box. + +## Interactive `clip-path` Demo + +Use the hover state to see a smooth transition between a square and a diamond/starburst shape using `polygon()`. + + \ No newline at end of file diff --git a/docs/css/effects/filters-and-blend.mdx b/docs/css/effects/filters-and-blend.mdx index e345ed2..a99ae3c 100644 --- a/docs/css/effects/filters-and-blend.mdx +++ b/docs/css/effects/filters-and-blend.mdx @@ -1 +1,117 @@ - \ No newline at end of file +--- +title: "Filters and Blend Modes" +description: "Explore CSS Filters (grayscale, blur, sepia) for visual adjustments and Blend Modes (multiply, screen, overlay) for creative layering and composite effects on elements." +keywords: [CSS Filters, CSS Blend Modes, backdrop-filter, mix-blend-mode, background-blend-mode, visual effects, image processing] +tags: [CSS Filters, CSS Blend Modes, backdrop-filter, mix-blend-mode, background-blend-mode, visual effects, image processing] +sidebar_label: "Filters & Blend Modes" +--- + +CSS provides two powerful sets of properties—Filters and Blend Modes—to manipulate the visual appearance of elements directly in the browser, offering effects previously only possible in graphic editing software. + + +
+ +## 1. CSS `filter` Property + +The `filter` property applies visual effects to an element (usually an image or video), changing its appearance. The element remains in the document flow, but its rendering is visually altered. + +### 1.1. Common Filter Functions + +Filters are applied as a space-separated list of functions. + +| Function | Parameter | Description | +| :--- | :--- | :--- | +| `grayscale()` | Percentage or `0-1` | Converts the element to shades of gray. | +| `sepia()` | Percentage or `0-1` | Gives the element an old, brownish tone. | +| `blur()` | Length (e.g., `5px`) | Blurs the image. Higher value means more blur. | +| `brightness()` | Percentage or `0-1` | Adjusts the brightness. `1` is normal, `2` is double. | +| `contrast()` | Percentage or `0-1` | Adjusts the contrast. `1` is normal. | +| `hue-rotate()` | Angle (e.g., `90deg`) | Rotates the color wheel by the specified angle. | +| `drop-shadow()` | Shadow values | Applies a blurred shadow to the shape of the content (unlike `box-shadow`). | + +### 1.2. Applying Multiple Filters + +You can chain multiple filters together to create complex effects: + +```css title="styles.css" +/* Converts to 50% grayscale, increases contrast by 150%, and blurs the edges */ +.vintage-photo { + filter: grayscale(0.5) contrast(1.5) blur(2px); + transition: filter 0.5s; +} + +/* On hover, remove all filters smoothly */ +.vintage-photo:hover { + filter: none; +} +``` + + +
+ +## 2. CSS `backdrop-filter` Property (The Glass Effect) + +The `backdrop-filter` property applies a graphic effect to the area *behind* an element. This is famous for creating the "frosted glass" or "blur-behind" effect used in modern UIs. + +The element itself remains clear, but the content rendered behind it is filtered. + +:::tip Browser Support +While `filter` is universally supported, `backdrop-filter` historically required vendor prefixes (`-webkit-backdrop-filter`) but is now widely supported in modern browsers. +::: + +### Example: Frosted Glass Panel + +```css title="styles.css" +.frosted-panel { + background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white background */ + + /* Blurs the content rendered underneath this element */ + backdrop-filter: blur(10px) saturate(1.8); + + border-radius: 10px; + padding: 20px; +} +``` + +## 3. CSS Blend Modes + +Blend modes define how an element's color should combine with the color of the element directly underneath it. They are derived from concepts used in tools like Photoshop and GIMP. + +### 3.1. `mix-blend-mode` (Element Blending) + +`mix-blend-mode` defines how the entire element blends with the content behind it. + +| Value | Description | Use Case | +| :--- | :--- | :--- | +| `normal` (Default) | No blending. | | +| **`multiply`** | Multiplies colors, resulting in a darker image. Excellent for shadows or darkening backgrounds. | Overlaying text on an image while maintaining texture. | +| **`screen`** | Multiplies the inverse of the colors, resulting in a lighter image. Good for highlights. | Creating glow effects. | +| **`overlay`** | Combines `multiply` and `screen` to preserve highlights and shadows. | Adjusting contrast or applying color gradients for stylistic tone. | +| `difference` | Subtracts the darker pixel from the lighter pixel. | Inverting colors for dramatic effects. | + +### 3.2. `background-blend-mode` (Background Layer Blending) + +`background-blend-mode` is used when an element has both a `background-color` and a `background-image` (or multiple background images). It controls how those background layers blend with each other. + +```css title="styles.css" +.blended-background { + /* Image and color layers */ + background-image: url('noise.png'), linear-gradient(to right, red, blue); + background-color: yellow; + + /* Blends the noise image with the gradient, and the result with the yellow color */ + background-blend-mode: overlay, multiply; +} +``` + + +
+ +## Interactive Filters and Blend Modes Demo + +This demo shows an image card. On hover, we apply a complex filter chain (`grayscale` + `contrast`) and use `mix-blend-mode` to create a cool effect where the text interacts with the image behind it. + + \ No newline at end of file diff --git a/docs/css/effects/mask.mdx b/docs/css/effects/mask.mdx index e345ed2..51e1777 100644 --- a/docs/css/effects/mask.mdx +++ b/docs/css/effects/mask.mdx @@ -1 +1,118 @@ - \ No newline at end of file +--- +title: "CSS Masking (mask, mask-image)" +description: "Explore advanced CSS masking techniques, using images, gradients, or SVG shapes as masks to control the transparency and visibility of an element." +keywords: [CSS mask, mask-image, masking, alpha mask, luminance mask, SVG mask, image transparency] +tags: [CSS mask, mask-image, masking, alpha mask, luminance mask, SVG mask, image transparency] +sidebar_label: mask +--- + +CSS Masking is a powerful technique that uses a graphic (like an image, gradient, or SVG shape) to precisely control which parts of an element are visible. + +Unlike `opacity` (which applies uniform transparency) or `clip-path` (which cuts to a fixed geometry), masking uses the pixels of the mask image itself—specifically, their luminance or alpha channel—to define the transparency level of the masked element. + + +
+ +## 1. Core Concept: How Masks Work + +A mask image defines a transparency map for the target element. There are two main ways a mask interprets the graphic: + +### A. Luminance Mask (Most Common) + +* **White** areas of the mask image result in the target element being **fully opaque** (visible). +* **Black** areas of the mask image result in the target element being **fully transparent** (invisible). +* **Gray** areas result in semi-transparency. + +### B. Alpha Mask + +* The mask uses the alpha (transparency) channel of the mask image. +* Fully opaque areas of the mask image reveal the target element. +* Fully transparent areas of the mask image hide the target element. + +## 2. The `mask-image` Property + +The `mask-image` property specifies the mask source, which can be an image file or a CSS gradient. + +### 2.1. Using a Gradient as a Mask +Gradients are perfect for masking because they naturally create areas of black and white/transparent. + +```css title="styles.css" +.fading-text { + /* The element we want to mask */ + color: purple; + font-size: 3rem; + + /* Mask uses a linear gradient that goes from black (fully visible) + to transparent (fully invisible) */ + mask-image: linear-gradient(to right, black, transparent); +} +``` + +In this example, the text would fade out smoothly from left to right. + + +
+ +### 2.2. Using an Image as a Mask + +You can use a PNG, JPG, or SVG file as the mask. For the luminance effect, black-and-white shapes work best. + +```css title="styles.css" +.target-image { + /* The content that will be masked */ + background: url('hero.jpg') no-repeat center / cover; + + /* Use an SVG shape (like a star or cloud) as the mask */ + mask-image: url('star_mask.svg'); + + /* Control how the mask image behaves (similar to background-repeat/size) */ + mask-size: contain; + mask-repeat: no-repeat; +} +``` + +## 3. The `mask` Shorthand + +The `mask` shorthand property combines multiple masking properties (like `mask-image`, `mask-size`, `mask-repeat`, and `mask-position`) into one declaration, similar to the `background` shorthand. + +### Example: Repeated Pattern Mask + +This example creates a repeated diagonal stripe pattern to hide parts of an element. + +```css title="styles.css" +.striped-mask { + background-color: blue; + + mask: repeating-linear-gradient( + 45deg, + black 0px, black 10px, /* Visible Stripe */ + transparent 10px, transparent 20px /* Invisible Stripe */ + ); + + mask-size: 50px 50px; /* Size of the repeated unit */ +} +``` + + +
+ +## 4. `mask-mode` and Advanced Use + +The `mask-mode` property explicitly controls how the mask source is interpreted (as luminance or alpha). + +| Value | Description | +| :--- | :--- | +| **`alpha`** | Uses the transparency (alpha channel) of the mask image. | +| **`luminance`** | Uses the brightness (grayscale value) of the mask image. | +| `auto` (Default) | Browser decides based on the image type (e.g., usually luminance for gradients, alpha for external PNGs). | + +For most simple effects (gradients or simple black/white images), the default `auto` behavior works fine, usually resulting in a luminance mask. + +## Interactive Masking Demo + +This demo uses a radial gradient as a mask to create a spotlight effect on the text. The text fades out towards the edges of the box. + + \ No newline at end of file diff --git a/docs/css/effects/opacity.mdx b/docs/css/effects/opacity.mdx index e345ed2..7cff430 100644 --- a/docs/css/effects/opacity.mdx +++ b/docs/css/effects/opacity.mdx @@ -1 +1,102 @@ - \ No newline at end of file +--- +title: "The opacity Property in CSS" +description: "Learn how to use the CSS opacity property to control the transparency or translucency of an element, making it semi-transparent or completely invisible." +keywords: [CSS opacity, transparency, translucency, alpha channel, visibility, performance] +tags: [CSS opacity, transparency, translucency, alpha channel, visibility, performance] +sidebar_label: opacity +--- + +The `opacity` property in CSS is used to define the transparency level of an element. It ranges from `0.0` (fully transparent/invisible) to `1.0` (fully opaque/solid). + +Unlike using colors with transparency (like `rgba()`), `opacity` affects the **entire element**, including its content, text, images, and borders. + + +
+ +## 1. Syntax and Values + +The `opacity` property accepts a single decimal number between 0 and 1. + +| Value | Description | +| :--- | :--- | +| **`1.0` (Default)** | The element is completely opaque (solid). | +| **`0.5`** | The element is 50% transparent (translucent). | +| **`0.0`** | The element is completely transparent (invisible). | + +### Example + +```css title="styles.css" +/* Fully solid */ +.solid { opacity: 1; } + +/* Half transparent */ +.translucent { opacity: 0.5; } + +/* Invisible, but still takes up space and is clickable */ +.invisible { opacity: 0; } +``` + +## 2. Opacity vs. RGBA/HSLA + +It's crucial to understand the difference between setting transparency via `opacity` and setting transparency via the color function's alpha channel (`rgba()` or `hsla()`): + +| Feature | `opacity` | `rgba()` or `hsla()` | +| :--- | :--- | :--- | +| **Target** | The **entire element** (background, text, children, etc.). | Only the **color** property it is applied to (e.g., `background-color` or `color`). | +| **Inheritance** | **Inherited by children.** All nested elements become transparent relative to the parent's opacity. | **Not inherited.** Child elements maintain their full opacity. | +| **Use Case** | Fading out an entire element, transition effects, hover states. | Creating a semi-transparent background color while keeping the text inside completely solid and readable. | + +### Example Comparison + +If a parent container has `opacity: 0.5;`, the text inside will also be 50% transparent. + +If a parent container has `background-color: rgba(0, 0, 0, 0.5);`, the background will be 50% transparent, but the text inside will remain 100% opaque. + + +
+ +## 3. `opacity` and Interaction + +When an element's opacity is set to `0` (`opacity: 0;`), it becomes visually invisible. However, by default, the element still exists in the document flow and can still be interacted with (it's "clickable"). + +To make an invisible element truly non-interactive: + +1. Use `visibility: hidden;` (Removes element from view, but still affects layout and is non-clickable). +2. Use `display: none;` (Removes element from view and flow, and is non-clickable). +3. Combine `opacity: 0;` with `pointer-events: none;` to keep the element in the flow but make it untouchable by the mouse. + +```css title="styles.css" +.hidden-and-untouchable { + opacity: 0; + pointer-events: none; /* Mouse clicks and taps pass through the element */ +} +``` + +## 4. Performance and Transitions + +The `opacity` property is generally efficient and performs well because it is often hardware-accelerated by the browser's GPU. + +It is frequently used in CSS transitions and animations to create smooth visual fades, as the browser can render these changes rapidly. + +```css title="styles.css" +.fade-box { + opacity: 1; + transition: opacity 0.3s ease-in-out; /* Smooth transition over 0.3 seconds */ +} + +.fade-box:hover { + opacity: 0.7; /* Fades smoothly on hover */ +} +``` + + +
+ +## Interactive `opacity` Demo + +Hover over the box to see the opacity transition. Notice that the child text fades along with the background because `opacity` affects the entire element. + + \ No newline at end of file