Forem: Suraj Jagtap

Create fancy card with animated gradient border

Suraj Jagtap — Mon, 21 Oct 2024 05:46:00 +0000

In this tutorial, I'll walk you through creating an animated gradient border effect using CSS custom properties, which can add a dynamic and eye-catching look to your UI components. By the end, you'll have a simple card with an animated gradient border, using css custom @property.

If you are are not familiar with css custom @property read this blog first.

Basic card structure

We will be using react for this tutorial, the basic card will look like this

import "./styles.css";

const CardAnimatedBorder = () => {
  return (
    <div className="container">
      <div className="card">This is a card with animated gradient border</div>
    </div>
  );
};

export default CardAnimatedBorder;

Adding basic styles to the card

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

Creating a simple border

Before creating a gradient animated border let's see how to create a simple border. We will not use the css border property but instead use pseudo elements ::before and ::after for the card. Another important property here is inset which allows us to place the pseudo elements inside the card. The z-index will be -1 as we want the border to be below the card content.

.card::after,
.card::before {
  content: "";
  position: absolute;
  background: red;
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
}

Our card now looks like this

Adding custom property `--angle`

We will add a custom property to track the angle of the gradient. We will be using conic-gradient.
Add a custom property like this

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

and make the following changes to the css

Replace background with background-image to display gradient.
Add an animation spin for the custom property angle.
The conic-gradient has angle as first argument and we will be changing it in order to animate.
Add blur and opacity for a glowing effect.

Your css should look like this

.container {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  margin: 0 auto;
  padding: 2em;
  width: 300px;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  color: #ffffff;
  position: relative;
}

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.card::after,
.card::before {
  content: "";
  position: absolute;
  background-image: conic-gradient(
    from var(--angle),
    transparent 70%,
    blue,
    red
  );
  inset: -4px;
  z-index: -1;
  border-radius: 10px;
  animation: 2s spin linear infinite;
}

.card::before {
  filter: blur(1rem);
  opacity: 0.7;
}

@keyframes spin {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}

And finally we have a card with animated gradient border.

Demo

Click here

MDN docs @property

Original post

A Beginner's Guide to CSS @property for custom variables

Suraj Jagtap — Sat, 19 Oct 2024 17:52:36 +0000

CSS is evolving with time and newer features are getting added to it make it easier to implment most commonly used functionality. Today we will see once such feature which makes css even more powerful.

The @property (at-rule) allows developers to define custom properties. In this post, we'll take a look at what @property is, why it's useful, and how to use it with some practical examples.

What is the @property At-Rule?

CSS custom properties (variables) have been around for a while, and they let you store and reuse values like colors, font sizes, or any other styling values. However, until recently, they lacked advanced features such as defining types, default values. This is especially useful if we want to implement complex animations (more on that in upcoming posts).

The @property rule represents a custom property registration directly in stylesheet without having to run any js.

Basic syntax

@property --my-custom-property {
  syntax: "<color>";
  inherits: false;
  initial-value: red;
}

syntax: Defines the expected data type of the property. In this case, it's a color (<color>), but it can be any valid CSS data type like <length>, <number>, or <percentage>.
inherits: Determines whether the property value should be inherited by child elements. It can be set to true or false.
initial-value: Sets a default value for the property when none is provided.

When to use `@property`

When you need to animate or transition a custom property to ensure smooth behavior.
To enforce data types (like colors, lengths, or numbers) to avoid bugs from invalid values.
To set default values for custom properties to maintain consistent styles when values are missing.
Control inheritance of custom properties between parent and child elements.

MDN docs @property

Original post

Drag and Drop in HTML5

Suraj Jagtap — Sat, 05 Oct 2024 14:43:56 +0000

In this post, we will see how to implement drag and drop functionality in browsers using the native drag and drop interface in HTML5.

The idea is simple:

Customize an element to make it draggable
Allow dropping the draggable element in the droppable area.

Declare two boxes

<div className="flex gap-8">
  <div
    id="box1"
    className="w-[300px] h-[300px] border border-black flex items-center justify-center"
  />
  <div
    id="box2"
    className="w-[300px] h-[300px] border border-black flex items-center justify-center"
  />
</div>

These two boxes will serve as our "drop zones." The user will be able to drag an item from one box and drop it into the other.

Add a div that we want to make as draggable inside "box1"

  <div
    id="box1"
    className="w-[300px] h-[300px] border border-black flex items-center justify-center"
  />
    <div
      id="draggable1"
      className="w-[50px] h-[50px] bg-red-500 cursor-move"
    />
  </div>

This red square will be the item that can be dragged between the boxes.

Making the Element Draggable

To make an element draggable, we need to add the draggable attribute to it and handle the dragstart event.
The dragstart event will trigger when the user starts dragging the item. Here’s how we can implement it:

const handleOnDragStart = (event) => {
  event.dataTransfer.setData("text/plain", event.target.id);
};

In this function, we use event.dataTransfer.setData() to store the ID of the dragged element. This ID will later help us identify which element was dragged and where it needs to be dropped.

Next, update the draggable1 div to make it draggable and add the onDragStart event handler:

<div
  id="draggable1"
  className="w-[50px] h-[50px] bg-red-500 cursor-move"
  draggable="true"
  onDragStart="{handleOnDragStart}"
/>

Dropping the Element

const handleOnDrop = (event) => {
  event.preventDefault();
  const data = event.dataTransfer.getData("text/plain");
  event.target.appendChild(document.getElementById(data));
};

const handleDragOver = (event) => {
  event.preventDefault();
};

The handleOnDrop function prevents the default behavior (which is important for allowing the drop), retrieves the ID of the dragged element from event.dataTransfer, and appends the dragged element to the drop target.
The handleDragOver function ensures that the dragged element can be dropped by preventing the default behavior.

Finally, apply these event handlers to the boxes:

<div
  id="box1"
  onDrop="{handleOnDrop}"
  onDragOver="{handleDragOver}"
  className="w-[300px] h-[300px] border border-black flex items-center justify-center"
>
  <div
    id="draggable1"
    className="w-[50px] h-[50px] bg-red-500 cursor-move"
    draggable="true"
    onDragStart="{handleOnDragStart}"
  />
</div>

<div
  id="box2"
  onDrop="{handleOnDrop}"
  onDragOver="{handleDragOver}"
  className="w-[300px] h-[300px] border border-black flex items-center justify-center"
/>

You can add visual cues to highlight when the drag operation is in progress. We will reduce the opacity of the component.
This can be done by tracking when the drag operation is being performed in a state variable and changing the opacity.
This is how your react component should look like

import { useState } from "react";

const SimpleDragDrop = () => {
  const [isDragging, setIsDragging] = useState(false);

  const handleOnDragStart = (event) => {
    setIsDragging(true);
    event.dataTransfer.setData("text/plain", event.target.id);
  };

  const handleOnDrop = (event) => {
    event.preventDefault();
    setIsDragging(false);
    const data = event.dataTransfer.getData("text/plain");
    event.target.appendChild(document.getElementById(data));
  };

  const handleDragOver = (event) => {
    event.preventDefault();
  };

  return (
    <div className="flex gap-8">
      <div
        id="box1"
        onDrop={handleOnDrop}
        onDragOver={handleDragOver}
        className="flex h-[300px] w-[300px] items-center justify-center border border-main"
      >
        <div
          id="draggable1"
          className={`h-[50px] w-[50px] cursor-move bg-red-500 ${isDragging ? "opacity-50" : "opacity-100"}`}
          draggable={true}
          onDragStart={handleOnDragStart}
        />
      </div>
      <div
        id="box2"
        onDrop={handleOnDrop}
        onDragOver={handleDragOver}
        className="flex h-[300px] w-[300px] items-center justify-center border border-main"
      />
    </div>
  );
};

export default SimpleDragDrop;

Demo

Live Demo

This example demonstrates how easy it is to implement drag-and-drop functionality with just a few lines of code. Feel free to expand on this by adding more drag-and-drop targets or customizing the appearance and behavior of the elements further!

Original Post

Forem: Suraj Jagtap

Create fancy card with animated gradient border

Basic card structure

Adding basic styles to the card

Creating a simple border

Adding custom property `--angle`

Demo

Read more

A Beginner's Guide to CSS @property for custom variables

What is the @property At-Rule?

Basic syntax

When to use `@property`

Read more

Drag and Drop in HTML5

Declare two boxes

Add a div that we want to make as draggable inside "box1"

Making the Element Draggable

Dropping the Element

Demo

Read more

Forem: Suraj Jagtap

Create fancy card with animated gradient border

Basic card structure

Adding basic styles to the card

Creating a simple border

Adding custom property --angle

Demo

Read more

A Beginner's Guide to CSS @property for custom variables

What is the @property At-Rule?

Basic syntax

When to use @property

Read more

Drag and Drop in HTML5

Declare two boxes

Add a div that we want to make as draggable inside "box1"

Making the Element Draggable

Dropping the Element

Demo

Read more

Adding custom property `--angle`

When to use `@property`