Skip to content
This repository was archived by the owner on Sep 10, 2025. It is now read-only.

Commit af617b0

Browse files
openrocketsofficialopenrocketsofficial
committed
updated
1 parent c128490 commit af617b0

1 file changed

Lines changed: 89 additions & 0 deletions

File tree

  • errors/css/css-challenge-gradient-bordered-card

‎errors/css/css-challenge-gradient-bordered-card/README.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# 🐞 CSS Challenge: Gradient-bordered Card
2+
3+
4+
This challenge focuses on creating a visually appealing card with a gradient border using CSS. We'll achieve this using only CSS, specifically leveraging CSS3 gradients. No external libraries or frameworks like Tailwind CSS will be used to keep the focus on core CSS concepts.
5+
6+
**Description of the Styling:**
7+
8+
The goal is to build a card with rounded corners and a vibrant gradient border. The card's content will be simple – a title and some placeholder text. The gradient border will be distinct and eye-catching, showcasing the power of CSS gradients. We'll aim for a modern and clean aesthetic.
9+
10+
11+
**Full Code:**
12+
13+
```html
14+
<!DOCTYPE html>
15+
<html>
16+
<head>
17+
<title>Gradient Border Card</title>
18+
<style>
19+
body {
20+
font-family: sans-serif;
21+
display: flex;
22+
justify-content: center;
23+
align-items: center;
24+
min-height: 100vh;
25+
background-color: #f0f0f0;
26+
}
27+
28+
.card {
29+
background-color: white;
30+
padding: 20px;
31+
border-radius: 10px;
32+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
33+
position: relative; /* Needed for the pseudo-element */
34+
width: 300px;
35+
}
36+
37+
.card::before {
38+
content: "";
39+
position: absolute;
40+
top: 0;
41+
left: 0;
42+
right: 0;
43+
bottom: 0;
44+
border-radius: inherit; /* Inherit border-radius from the card */
45+
z-index: -1; /* Place it behind the card content */
46+
background-image: linear-gradient(to right, #FF7F50, #FFD700, #00FF00); /* Adjust gradient colors as desired */
47+
margin: -5px; /* Adjust margin to control border thickness */
48+
padding: 5px;
49+
}
50+
51+
.card h2 {
52+
margin-top: 0;
53+
}
54+
55+
.card p {
56+
line-height: 1.6;
57+
}
58+
</style>
59+
</head>
60+
<body>
61+
<div class="card">
62+
<h2>Gradient Card</h2>
63+
<p>This is a simple card with a gradient border created using only CSS. It demonstrates the use of the `::before` pseudo-element and linear-gradients to achieve this effect.</p>
64+
</div>
65+
</body>
66+
</html>
67+
```
68+
69+
70+
**Explanation:**
71+
72+
* **HTML Structure:** A simple `div` with class `card` holds the content.
73+
* **CSS Styling:**
74+
* `body`: Basic styling for the page background and centering the card.
75+
* `.card`: Styles the card background, padding, rounded corners, and shadow.
76+
* `.card::before`: This is a crucial part. It's a pseudo-element that creates an overlay behind the card. We use `background-image` to apply the linear gradient. `z-index: -1` ensures it sits behind the card content. The `margin` and `padding` properties control the thickness and offset of the gradient border.
77+
* `margin:-5px` creates a 5px border. Adjust to change the width.
78+
* `padding:5px` helps to position the gradient correctly within the margin and to avoid a potential double-border effect.
79+
80+
81+
**Links to Resources to Learn More:**
82+
83+
* **CSS Gradients:** [MDN Web Docs - CSS Gradients](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients)
84+
* **CSS Pseudo-elements:** [MDN Web Docs - Pseudo-elements](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements)
85+
* **Box Model:** [MDN Web Docs - Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
86+
87+
88+
Copyrights (c) OpenRockets Open-source Network. Free to use, copy, share, edit or publish.
89+

0 commit comments

Comments
 (0)