Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
How to create \"notes\" with CSS?
To create a design like notes, we need to style it according with CSS on a web page. Consider the sticky notes provided by Google Keep. It provided different color label options. Let us see how to create some notes.
Set Different Divs for Notes
Here, we are creating three notes,representing danger success and information. We have set different divs −
<div class="danger"> <p><strong>Danger!</strong>Operation may damage your computer</p> </div> <div class="success"> <p><strong>Success!</strong>Operation has been performed successfully</p> </div> <div class="info"> <p><strong>Info!</strong>Need more resources to perform this operation</p> </div>
Danger Note
For our example, we have styled a design representing a danger note −
.danger {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}
Success Note
For our example, we have styled a design representing an information note −
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
Information Note
For our example, we have styled a design representing an information note −
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
Example
To create ?notes? with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
div {
margin-bottom: 15px;
padding: 4px 12px;
font-size: 18px;
}
.danger {
background-color: #ffdddd;
border-left: 6px solid #f44336;
}
.success {
background-color: #ddffdd;
border-left: 6px solid #4CAF50;
}
.info {
background-color: #e7f3fe;
border-left: 6px solid #2196F3;
}
</style>
</head>
<body>
<h1 style="text-align: center;">Notes Example</h1>
<div class="danger">
<p><strong>Danger!</strong>Operation may damage your computer</p>
</div>
<div class="success">
<p><strong>Success!</strong>Operation has been performed successfully</p>
</div>
<div class="info">
<p><strong>Info!</strong>Need more resources to perform this operation</p>
</div>
</body>
</html>
Updated on: 2023-11-17T09:54:18+05:30
631 Views
Advertisements