|
In web design, a “note” is a styled container that stands out from the surrounding text and is frequently used to highlight particular information. We can make visually appealing notes that improve user experience with CSS.
Approach- The HTML structure includes ‘div’ elements to create notes. The CSS defines a base ‘.note’ class with a light yellow background, light grey border, padding, margin, rounded corners, and a specific font family.
- Additional classes “.danger”, “.success”, and “.info” modify the background color to red, green, and blue respectively, for different types of notes.
- These classes can be applied to any div with the class ‘note’ to indicate different statuses or categories of notes.
- Similarly, in the second example The CSS styles ‘.decorative-note’ class adds a dark teal left border, padding, margin, and a light bulb emoji as a decorative element using the ‘:: before’ pseudo-element.
Example 1: In the below example the HTML creates three notes with these styles applied. the CSS styles the .note class with a light yellow background, padding, margin, rounded corners, and Arial font, while additional classes .danger, .success, and .info provide different background colors for indicating various statuses.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<style>
.note {
background-color: #ffffe0;
border: 1px solid #ddd;
padding: 10px;
margin: 10px 0;
border-radius: 5px;
font-family: Arial, sans-serif;
}
.danger {
background-color: #ffdddd;
}
.success {
background-color: #ddffdd;
}
.info {
background-color: #e7f3fe;
}
</style>
<div class="note danger">
This is a basic note.
</div>
<div class="note success">
This is a basic note.
</div>
<div class="note info">
This is a basic note.
</div>
</body>
</html>
Output:
.gif) Output Example 2: In the below example the HTML creates three notes with these decorative styles applied. The CSS styles the .decorative-note class with a dark teal left border and an icon, while additional classes .danger, .success, and .info provide different background colors.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Decorative Note</title>
</head>
<body>
<style>
.decorative-note {
padding: 10px 15px;
margin: 10px 0;
position: relative;
font-family: Arial, sans-serif;
}
.decorative-note::before {
content: "? ";
font-size: 20px;
position: absolute;
left: -1px;
top: 5px;
}
.danger {
background-color: #ffdddd;
border-left: 5px solid #a42020;
}
.success {
background-color: #ddffdd;
border-left: 5px solid #00796b;
}
.info {
background-color: #e7f3fe;
border-left: 5px solid #6aa1d4;
}
</style>
<div class="decorative-note danger ">
This note has decorative elements.
</div>
<div class="decorative-note success">
This note has decorative elements.
</div>
<div class="decorative-note info">
This note has decorative elements.
</div>
</body>
</html>
Output:
.gif) Output
|
.png){kind=small}
