docs(blog): update css post (#6425)

documentation/blog/2024-02-15-css-rounded-corners.md → documentation/blog/2024-10-23-css-rounded-corners.md

@@ -8,6 +8,8 @@ image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-02-15-css-rounde
 hide_table_of_contents: false
 ---
 
+**This article was last updated on October 23, to include browser compatibility considerations, responsive design techniques, and advanced clip-path and masking techniques.**
+
 ## Introduction
 
 Rounded corners on `HTML` help soften the overall design of a website, giving it a more inviting and user-friendly appearance. We'll examine CSS-created rounded corners in this article.
@@ -460,6 +462,190 @@ p {
 <img src="https://refine.ams3.cdn.digitaloceanspaces.com/blog/2024-02-15-css-rounded-corners/Notched-corners-clip-path.png" style={{ width:"350px"}} alt="css rounded corners" />
 </div>
 
+## Advanced Clip-Path and Masking Techniques
+
+Thus, by defining the visibility and invisibility of parts of an element, we could use the property of CSS known as `clip-path` for creating complex shapes. This is very useful in providing a design beyond the usual cases of rounded or square borders. With `clip-path`, we will be able to create shapes such as polygons, circles, and even the more complex, irregular shapes.
+
+### How `clip-path` Works
+
+The `clip-path` property accepts a shape as a value, and then "clips" the element to fit that shape. Some common values that `clip-path` might take on are as follows:
+
+- **Circle**: Creates a circular clipping mask.
+- **Ellipse**: Creates an ellipse-shaped mask.
+- **Polygon**: Defines a shape by specifying a sequence of points. For example, triangles, pentagons, and any other polygon shapes can be created.
+- **Inset**: Creates a rectangular clipping mask whose inset can be different for all sides.
+
+### Using `clip-path` to Create a Triangle
+
+```css
+div {
+  width: 200px;
+  height: 200px;
+  background-color: orange;
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+```
+
+Above example, a triangle shape is created where the `polygon()` function defines the top, left, and right points of the shape. This creates a clipped element showing only content within the defined triangular area.
+
+### Building a Custom Blob Shape with `clip-path`
+
+For more organic, blob-like shapes, we can use `clip-path` with percentages:
+
+```css
+div {
+  width: 300px;
+  height: 300px;
+  background-color: lightblue;
+  clip-path: polygon(50% 0%, 100% 38%, 79% 100%, 21% 100%, 0% 38%);
+}
+```
+
+Irregular, liquid shape; good for more creative designs such as buttons or containers.
+
+Using `clip-path` for Hover Effects
+
+Another advanced use case for `clip-path` is in hover animation. Hovering over an element to change its shape gives an interactive and dynamic nature to your design.
+
+### Shape morphing on hover
+
+```css
+div {
+  width: 200px;
+  height: 200px;
+  background-color: salmon;
+  clip-path: circle(50%);
+  transition: clip-path 0.3s ease;
+}
+
+div:hover {
+  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+}
+```
+
+Notice in this example how the element transitions from a circle to a triangle on hover: To make the shape transition smooth, add the `transition` property:.
+
+### Masking Techniques
+
+While the `clip-path` property is about clipping parts of an element, **CSS Masking** allows making parts of an element transparent by applying an image or gradient mask to it. Masking helps especially when you want to bring into view certain parts of some element in a more complex manner, say creating cutouts or custom transparency effects.
+
+#### Example: Using Image Masking
+
+```css
+div {
+  width: 300px;
+  height: 300px;
+  background-color: coral;
+  mask-image: url("path-to-mask-image.png");
+  mask-size: cover;
+}
+```
+
+In this case, the image defines which parts of the element are visible: the lighter parts of the mask image are fully visible; darker parts become transparent. This can be used for making detailed cutouts or other decorative effects.
+
+## Complex Shapes with SVG+CSS
+
+While it's true that `border-radius` and `clip-path` give you some creative forms, when it gets really detailed, for the most flexibility, **SVG (Scalable Vector Graphics)** in conjunction with CSS opens the most doors. SVG is a vector-based format - which means infinite scaling capabilities with no loss of quality - making it ideal for modern web design. Using the combination of SVG and CSS will let us create complex shapes and interactions that reach beyond the limitations of pure CSS.
+
+### Why Use SVG for Complex Shapes?
+
+SVG allows for a precision and flexibility that you simply can't get with CSS. SVG lets you draw vector shapes: things like paths, circles, polygons, among others. You can then style those shapes with CSS to animate it, change its color, or interact with it, making SVG very powerful for web developers.
+
+### Example: Star shape creation with SVG
+
+The following is a basic example of creating a star using SVG:
+
+```tsx
+<svg width="200" height="200" viewBox="0 0 100 100">
+  <polygon
+    points="50,15 61,35 82,35 67,50 73,70 50,60 27,70 33,50 18,35 39,35"
+    fill="gold"
+  />
+</svg>
+```
+
+The above example uses the `polygon` element to define the points of the star. Each pair of numbers will be the X and Y coordinates for a point on the star, offering very specific drawing of the shape.
+
+### Combining SVG with CSS for Styling
+
+Once you have your SVG shape, you can directly style it with CSS. It's great if you need to add something like hover effects, transitions, or animations.
+
+### Hover Animation of Star
+
+```tsx
+<svg width="200" height="200" viewBox="0 0 100 100" class="star">
+  <polygon
+    points="50,15 61,35 82,35 67,50 73,70 50,60 27,70 33,50 18,35 39,35"
+    fill="gold"
+  />
+</svg>
+```
+
+```css
+-star {
+  transition: transform 0.3s ease;
+}
+
+/star:hover {
+  transform: rotate(360deg);
+}
+```
+
+We also added a rotation animation in this example while hovering the star. This mix of SVG and CSS opens many more possibilities rather than using pure CSS shapes.
+
+### Using SVG Paths for Complex Shapes
+
+With SVG, the `<path>` element allows you to describe, in quite complex detail, a shape using a series of commands and sets of coordinates. This is useful for creating logos, icons, or any other time you'd want to make use of a custom shape that CSS alone can't achieve.
+
+## Example: Custom Shape w SVG Path
+
+```html
+<svg width="200" height="200" viewBox="0 0 100 100">
+  <path
+    d="M50,10 Q80,40 50,90 Q20,40 50,10 Z"
+    fill="lightgreen"
+    stroke="black"
+    stroke-width="2"
+  />
+</svg>
+```
+
+This code uses the 'Q' command, which allows you to define a path with quadratic bézier curves for custom paths providing control over curvature. The result is an organic shape so complex, which would have been almost impossible to achieve using only CSS.
+
+#### CSS and SVG Integration
+
+You can also inline SVGs directly into your HTML, and style them like any other HTML node. Below is an example of dynamically changing the color of an SVG shape using CSS:
+
+```html
+<svg width="200" height="200" viewBox="0 0 100 100" class="dynamic-shape">
+  <circle cx="50" cy="50" r="40" />
+</svg>
+```
+
+Here’s your content formatted correctly:
+
+```css
+.dynamic-shape {
+  fill: lightblue;
+  transition: fill 0.3s ease;
+}
+
+.dynamic-shape:hover {
+  fill: orange;
+}
+```
+
+In the example above, upon hover, the circle changes from light blue to orange. This makes the SVG interactive.
+
+#### When to Use SVG Over CSS
+
+- **Precision**: SVGs are ideal when you want pixel-perfect precision, such as for logos or icons.
+- **Scalability**: SVGs allow infinite scaling without quality loss and are great for responsive design.
+- **Complex Shapes**: If you need a shape that goes beyond what `clip-path` or `border-radius` can handle, SVG is the best option.
+- **Animations and Interactions**: SVGs are highly animatable, and when combined with CSS, they create limitless possibilities for dynamic and interactive designs.
+
+Both **clip-path** and **SVGs** offer much more for web design than just rectangular and circular shapes. If you want to create custom shapes or interactive animations, combining these techniques with CSS gives your designs a polished, unique look.
+
 ## Conclusion
 
 In this article, we discussed numerous approaches for building different sorts of corners utilizing CSS features like border-radius, pseudo-elements, box-shadow, clip-path, and many others. With this information, you can construct a variety of visually appealing and inviting designs for your websites or web applications.