 |
| CSS Background Color |
CSS Background Color
Overview
There
are CSS Color classes. Following are blue-grey color classes which are
classified on the base of darkness. .bg-blue-grey-1 are light color. Color
darkness level increases from 1 to 10. Class bg-blue-grey-a is a light color.
Bg-blue-grey-b is dark than bg-blue-grey-a, bg-blue-grey-c is dark than the previous two class. Bg-blue-grey-d is dark than the other three classes.
 |
| Blue Grey Background Color |
.bg-blue-grey-1 {
background-color: rgb(236,239,241) !important;
}
.bg-blue-grey-2 {
background-color: rgb(207,216,220) !important;
}
.bg-blue-grey-3 {
background-color: rgb(176,190,197) !important;
}
.bg-blue-grey-4 {
background-color: rgb(144,164,174) !important;
}
.bg-blue-grey-5 {
background-color: rgb(120,144,156) !important;
}
.bg-blue-grey-6 {
background-color: rgb(96,125,139) !important;
}
.bg-blue-grey-7 {
background-color: rgb(84,110,122) !important;
}
.bg-blue-grey-8 {
background-color: rgb(69,90,100) !important;
}
.bg-blue-grey-9 {
background-color: rgb(55,71,79) !important;
}
.bg-blue-grey-10 {
background-color: rgb(38,50,56) !important;
}
.bg-blue-grey-a {
background-color: rgb(92, 126, 143) !important;
}
.bg-blue-grey-b {
background-color: rgb(36, 71, 88) !important;
}
.bg-blue-grey-c {
background-color: rgb(15, 24, 29) !important;
}
.bg-blue-grey-d {
background-color: rgb(45, 72, 85) !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>Blue Grey Background Color</title>
<link rel="stylesheet" href="blueGrey.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-blue-grey-1" >
<strong class = "text" > bg-blue-grey-1 </strong>
</div>
<div class = "bg-blue-grey-2" >
<strong class = "text" > bg-blue-grey-2 </strong>
</div>
<div class = "bg-blue-grey-3" >
<strong class = "text" > bg-blue-grey-3 </strong>
</div>
<div class = "bg-blue-grey-4" >
<strong class = "text" > bg-blue-grey-4 </strong>
</div>
<div class = "bg-blue-grey-5" >
<strong class = "text" > bg-blue-grey-5 </strong>
</div>
<div class = "bg-blue-grey-6" >
<strong class = "text" > bg-blue-grey-6 </strong>
</div>
<div class = "bg-blue-grey-7" >
<strong class = "text" > bg-blue-grey-7 </strong>
</div>
<div class = "bg-blue-grey-8" >
<strong class = "text" > bg-blue-grey-8 </strong>
</div>
<div class = "bg-blue-grey-9" >
<strong class = "text" > bg-blue-grey-9 </strong>
</div>
<div class = "bg-blue-grey-10" >
<strong class = "text" > bg-blue-grey-10 </strong>
</div>
<div class = "bg-blue-grey-a" >
<strong class = "text" > bg-blue-grey-a </strong>
</div>
<div class = "bg-blue-grey-b" >
<strong class = "text" > bg-blue-grey-b </strong>
</div>
<div class = "bg-blue-grey-c" >
<strong class = "text" > bg-blue-grey-c </strong>
</div>
<div class = "bg-blue-grey-d" >
<strong class = "text" > bg-blue-grey-d </strong>
</div>
</div>
</body>
</html>
0 Comments
Thanks