5 Simple Steps to Create a Stunning UI Element Card

In this tutorial, we’ll guide you through the process of creating a visually appealing UI element with stunning moving border lights using HTML and CSS.

This card element features a rotating gradient border effect, perfect for adding a dynamic touch to your web designs. By the end of this tutorial, you’ll have a deep understanding of how to implement this effect and even add images to the card for more customization.

5 Steps to UI Element Card Creation:

The Final Look

This will be our final product. So let’s get started to create this beautiful element.

Step 1: Setting Up the HTML Structure

We begin by setting up a basic HTML structure that will hold our card element. This consists of defining the usual HTML tags and linking them to our CSS file, within which we’re going to put all our styling.

Here’s our HTML code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="card">
        <p>WEBDEVTALES.COM</p>
    </div>
</body>
</html>

Explanation

The <meta> tags ensure the encoding of the page and its responsiveness.
The <link> tag links to our external stylesheet, where we will define our card’s styles in a file called style.css.
The <div class="card"> element is where our card is going to live, and the <p> tag holds the text that’s going to be displayed inside the card.

Step 2: Designing the Card with CSS

Now, let’s style our card using CSS. We will define how big it should be and what color it should be, and we will lay out the card so that the text is centered on it.

.card {
  width: 190px;
  height: 254px;
  background: #07182E;
  position: relative;
  overflow: hidden;
  margin: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

card

Explanation:

It sets the card class with a fixed width and height to constrain its size.
The background color is set in dark shade #07182E, which will nicely contrast the rotating border.
position: relative; allows the pseudo elements (before and after) to position relatively to the card.
overflow: hidden; ensures any content that goes outside the borders of the card is hidden. This is crucial for the effect of rotation.
margin: 100px; adds space around the card on the page.
border-radius: 10px; gives the card slightly rounded edges to make the appearance subtle.
The display: flex; justify-content: center; align-items: center; ensures the text within the card is positioned in the middle both horizontally and vertically on the card.

Now, let us style the text within the card:

.card p {
  margin: 0;
  color: #0c0c0c;
  font-size: 14px;
  z-index: 1;
}

Card Properties Set

Explanation

The margin of 0 ensures there is no margin around the paragraph text by default.
The text color is #0c0c0c, with high contrast to a dark-colored background.
font-size: 14px; This sets the text size to a medium and very readable level.
z-index: 1; This ensures that the text will display in front of the gradient background, which will be created in the next step.

Step 3: Adding the Moving Border Lights

Now comes the fun part—the moving border lights. In the following section, we will create a cool effect using CSS pseudo-elements and keyframes for animation.

Create the Moving Gradient Background:

.card::before {
  content: '';
  position: absolute;
  width: 120px;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  top: -20%;
  bottom: -30%;
  animation: rotBGimg 2s linear infinite;
  transform-origin: 50% 50%;
  z-index: 0;
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Now our Card will look like this.

Explanation:

The ::before pseudo-element is applied to form a rotating, angled gradient background behind the contents of the card.
Content: ''; is required for the pseudo-element to exist.
Position: absolute; serves to position the pseudo-element relative to the card.
Width: 120px; serves to control the thickness of the gradient strip.
background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255)); adds a linear gradient from a shade of blue to a shade of pink.
top: -20%; bottom: -30%; extends the gradient across the card.
The animation: rotBGimg 2s linear infinite adds a rotation animation. This rotates the gradient around the card endlessly.
The @keyframes rotBGimg defines the rotation effect. It transforms from 0° to 360° over 2 seconds and is linear.

Inner Border Element:

.card::after {
  content: '';
  position: absolute;
  background: #759491;
  inset: 5px 5px 5px 5px;
  z-index: 0;
}

And now here is our final product.

The Final Look

Explanation:

The ::after pseudo-element is used to create an inner border within the card.
The background: #759491; provides a subtle inner border color.
inset: 5px 5px 5px 5px; positions the pseudo-element 5 pixels from each side of the card, creating an even border.
The z-index: 0; places this element behind the text but above the rotating gradient.

Step 4: Make the Card Responsive for All Sizes

To make it possible we need to add media queries in the code.

Media Query for Tablets (Screens Up to 768px Wide)

@media (max-width: 768px) {
    .card {
        width: 150px;
        height: 200px;
    }

    .card p {
        font-size: 12px;
    }
}

Explanation:

Trigger Condition: This media query applies when the screen width is less than or equal to 768px, which will include tablets as well as small laptops.
Adjusted Dimensions: The width of the card is changed to 150px and the height to 200px, keeping the approximate rate of the width and height.
Font Size Adjustment: Here, the text inside the card is scaled down to 12px so as to fit properly in this small card.

Media Query for Mobile Devices (Screens Up to 480px Wide):

@media (max-width: 480px) {
    .card {
        width: 120px;
        height: 160px;
    }

    .card p {
        font-size: 10px;
    }
}

Explanation:

Trigger Condition: This media query turns on when the width of the browser screen is 480px or less, which comprises most phones.
Further Size Reduction: The width of the card is decreased even more to 120px, and the height is 160px to accommodate the smaller screens.
Smaller Font: The text size is reduced to 10px so that the text can still be easily readable in this particular card size.

Step 5: Adding an Image to the Card

 <div class="card">
        <img src="html5-programming-internet-website-development-web-application-engineering-script-writing-html-code-optimization-programmer-fixing-bugs_335657-2678.jpg" alt="" style="width: 95%;height: 95%;border-radius: 3%; z-index: 1;">
    </div>

Explanation:

The <img> tag is used to insert an image into the card.
src="your-image.jpg" specifies where your image is located.
alt="Description" gives alternative text to the image; it is not only important for accessibility but also for search engine optimization.
The inline styles width: 95%; height: 95%; border-radius: 10px; z-index:1; ensure the image scales appropriately within the card, maintaining the rounded corners of the card.

Here’s the corresponding CSS if you’d like to style the image separately:

.card img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  z-index: 1;
}

Responsive Card with Background Image

Complete Source Code of Card UI Element:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <style>
        .card {
  width: 190px;
  height: 254px;
  background: #07182E;
  position: relative;
  overflow: hidden;
  margin: 100px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center; /* This will center the text vertically */
}

.card p {
  margin: 0;
  color: #ffffff; /* Add white text color to contrast with dark background */
  font-size: 14px; /* Adjust font size to your liking */
  z-index: 1; /* Add this to ensure the text is on top of the gradient */
}

.card::before {
  content: '';
  position: absolute;
  width: 120px;
  background-image: linear-gradient(180deg, rgb(0, 183, 255), rgb(255, 48, 255));
  top: -20%; /* instead of height: 140% */
  bottom: -30%;
  animation: rotBGimg 2s linear infinite;
  will-change: transform;
  transform-origin: 50% 50%;
  z-index: 0; /* Add this to ensure the gradient is behind the text */
}

@keyframes rotBGimg {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.card::after {
  content: '';
  position: absolute;
  background: #5b5b64;
  inset: 5px 5px 5px 5px;
  z-index: 0; /* Add this to ensure the pseudo-element is behind the text */
}
       /* Media queries for smaller screens */
        @media (max-width: 768px) {
            .card {
                width: 150px;
                height: 200px;
            }

            .card p {
                font-size: 12px;
            }
        }

        @media (max-width: 480px) {
            .card {
                width: 120px;
                height: 160px;
            }

            .card p {
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="card">
        <p>WEBDEVTALES.COM</p>
    </div>
</body>
</html>

Conclusion

Congratulations! You have beautifully designed a UI border light moving card element with a rotating gradient effect. Perfect for making your web design out of the box right from the first impression, the card can be easily manipulated. Whether you display text or images, this card truly makes any given project look dynamic and modern. You can also visit this site.

Feel free to play with colors, gradients, and content to make this effect your own. For more exciting tutorials and web development tips, keep exploring our blog at WEBDEVTALES.COM.

FAQs:

Q. What are UI elements?

UI elements, or User Interface elements, are components of a software application’s interface that users interact with. They include:

Buttons
Text Fields
Check Boxes
Radio Buttons
Dropdown
Menus
Sliders
Switches
Icons
Labels
Modals

Q. What is the element UI?

Element UI is a set of UI components that is often used to construct Web applications based on the Vue framework. js. It is a set of reusable components such as forms, buttons, and navigation items that can be smoothly used in Vue projects. js projects. In a very simple manner, Element UI aids in the development of consistent and aesthetically pleasing interfaces that do not overlook the principles of plain and intuitive design.

If you are operating on Vue. project Js, the components in Element UI are proxied and prepared such that it is easier for one to modify and find other related components.

Q. How do I get UI elements?

To get UI elements, you can:

Use UI Libraries/Frameworks like Element UI, Bootstrap, or Material-UI.
Install Component Libraries via npm or yarn.
Implement Design Systems such as Material Design or Ant Design.
Build Custom Components tailored to your needs.
Explore Online Resources for inspiration and examples.

Q. What are UI controls?

UI controls are, in other words, gadgetry elements that are involved within the user interface and enable actions to be performed or data to be entered. Common UI controls include:

Buttons: Users’ time-sensitive actions or instructions regarding the net asset.
Text Fields: Give the ability to users to input and modify the text.
Check Boxes: Allow selecting multiple options at a time or allow multiple-choice buttons with on/off states.
Radio Buttons: Permit a choice of one out of many.
Dropdown Menus: An option is to suggest a list of choices in the form of a panel that can be pulled down.
Sliders: Glide to change a value of an element greater or lesser than the current value inside the bracketed range.
Switches: Switch between an on-state and an off-state.

These controls assist users in using applications or sites in an efficient manner.

Q. Why is UI used?

UI (User Interface) is utilized to enable users to have an interface with the software application or systems. It plays a crucial role in: It plays a crucial role in:

Usability: It simplifies the layout and general interactiveness of the applications that run on a system.
Accessibility: It ensures that all the users including persons with disability can fully engage with the application.
Efficiency: In a manner that enables the users to execute a particular task in the shortest time possible.
User Experience: Aids experience by giving a better look to the piece while ensuring that it has an easy-to-understand format.
Feedback: Essential in giving feedback to the users by showing or predicting how their inputs affect the usage of the software.

A good UI makes interactions with a product easier and convenient hence increasing the users’ output.