 |
| CSS Background Color |
Overview
There
are CSS Color classes. Following are amber color classes which are classified
on the base of darkness. .bg-amber-1 are light color. Color darkness level increases
from 1 to 10. Class bg-amber-a is a light color. Bg-amber-b is dark than bg-amber-a,
bg-amber-c is dark than the previous two class. Bg-amber-d is dark than the previous
three classes.
 |
| Amber color classes |
CSS
Classes
.bg-amber-1 {
background-color: rgb(255,248,225) !important;
}
.bg-amber-2 {
background-color: rgb(255,236,179) !important;
}
.bg-amber-3 {
background-color: rgb(255,224,130) !important;
}
.bg-amber-4 {
background-color: rgb(255,213,79) !important;
}
.bg-amber-5 {
background-color: rgb(255,202,40) !important;
}
.bg-amber-6 {
background-color: rgb(255,193,7) !important;
}
.bg-amber-7 {
background-color: rgb(255,179,0) !important;
}
.bg-amber-8 {
background-color: rgb(255,160,0) !important;
}
.bg-amber-9 {
background-color: rgb(255,143,0) !important;
}
.bg-amber-10 {
background-color: rgb(255,111,0) !important;
}
.bg-amber-a {
background-color: rgb(255,229,127) !important;
}
.bg-amber-b {
background-color: rgb(255,215,64) !important;
}
.bg-amber-c {
background-color: rgb(255,196,0) !important;
}
.bg-amber-d {
background-color: rgb(255,171,0) !important;
}
HTML
Source Code
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0">
<title> Amber Background Color
</title>
<link rel = "stylesheet" href = "amber.css">
<style>
Body { margin: 0; padding: 0;}
.container
{
width: 100%; display: flex;
flex-shrink: 1; flex-wrap: wrap;
}
.container div
{
width: 150px; height:150px;
margin: 2%; border: 3px solid #eee;
}
.text
{
position: relative; top: 75px;
left: 30px; text-align: center;
}
</style>
</head>
<body>
<div class = "container">
<div class = "bg-amber-1">
<strong class = "text">bg-amber-1</strong>
</div>
<div class = "bg-amber-2">
<strong class = "text">bg-amber-2</strong>
</div>
<div class = "bg-amber-3">
<strong class = "text">bg-amber-3</strong>
</div>
<div class = "bg-amber-4">
<strong class = "text">bg-amber-4</strong>
</div>
<div class = "bg-amber-5">
<strong class = "text">bg-amber-5</strong>
</div>
<div class = "bg-amber-6">
<strong class = "text">bg-amber-6</strong>
</div>
<div class = "bg-amber-7">
<strong class = "text">bg-amber-7</strong>
</div>
<div class = "bg-amber-8">
<strong class = "text">bg-amber-8</strong>
</div>
<div class = "bg-amber-9">
<strong class = "text">bg-amber-9</strong>
</div>
<div class = "bg-amber-10">
<strong class = "text">bg-amber-10</strong>
</div>
<div class = "bg-amber-a">
<strong class = "text">bg-amber-a</strong>
</div>
<div class = "bg-amber-b">
<strong class = "text">bg-amber-b</strong>
</div>
<div class = "bg-amber-c">
<strong class = "text">bg-amber-c</strong>
</div>
<div class = "bg-amber-d">
<strong class = "text">bg-amber-d</strong>
</div>
</div>
</body>
</html>
0 Comments
Thanks