CSS Background-Clip and CSS Checkbox Style
CSS Background-Clip
The CSS background-clip is a CSS property that specifies the painting area of the background. It restricts the area where the background color or image appears by using a clipping box. Anything outside the clipping box will be removed and not visible.
It specifies whether the background of an element opens under the border-box, padding-box, and content-box.
Property Values
The following allows us to understand the property values with examples of each value.
Border-box
This is the default value, meaning that the background image and color will be drawn inside the border-box. It sets the background color, which circulates over the entire division.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: blue;
background-clip: border-box;
text-align: center;
border:5px dotted pink;
}
h1,h2{
color: red;
}
</style>
</head>
<body>
<div>
<h1>
Welcome to the Techstack revolution
</h1>
<h2>
background-clip: border-box;
</h2>
</div>
</body>
</html>
Padding-box
This sets the background within the border, meaning the background image and color are drawn inside the padding-box.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: blue;
background-clip: padding-box;
padding: 25px;
text-align: center;
border:5px dashed pink;
}
h1,h2{
color: red;
}
</style>
</head>
<body>
<div>
<h1>
Welcome to the Hubtolearn revolution
</h1>
<h2>
background-clip: padding-box;
</h2>
</div>
</body>
</html>
Content-box
This sets the background-color up to the content only. In the content box, you will see the background image and color.
Example
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: blue;
background-clip: content-box;
padding: 15px;
text-align: center;
border:5px dashed pink;
}
h1,h2{
color: red;
}
</style>
</head>
<body>
<div>
<h1>
Welcome to the Hubtolearn revolution
</h1>
<h2>
background-clip: content-box;
</h2>
</div>
</body>
</html>
CSS CHECKBOX STYLE
An HTML checkbox allows the user to enter information. It is hard to style, but pseudo-elements make it easier.
This HTML element is used on almost every website, but if you don’t style them, they look similar to other websites. To style your checkbox, you need to hide the original checkbox. Styling the checkboxes using CSS is interesting and will give a new and attractive look to the default checkbox.
The styling of the checkbox will be clearer by observing some examples.
Example1
In this example, we use the '~' sibling combinator. It selects all elements that the previous selector precedes. The pseudo-class :hover is also used to style the checkbox when the user moves the cursor over it.
<!DOCTYPE html>
<html>
<style>
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
cursor: pointer;
font-size: 25px;
}
/* Hide the default checkbox */
.container input {
visibility: hidden;
cursor: pointer;
}
/* Create a custom checkbox */
.mark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: lightgreen;
}
.container:hover input ~ .mark {
background-color: gray;
}
.container input:checked ~ .mark {
background-color: blue;
}
/* Create the mark/indicator (hidden when not checked) */
.mark:after {
content: "";
position: absolute;
display: none;
}
/* Show the mark when checked */
.container input:checked ~ .mark:after {
display: block;
}
/* Style the mark/indicator */
.container .mark:after {
left: 9px;
top: 5px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
</style>
<body>
<h1>Food Order</h1>
<label class="container">Yams
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">Beans
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">Garri
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">Rice
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</body>
</html>
Example2
In this example, we have a modified checkmark.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: block;
position: relative;
padding-left: 45px;
margin-bottom: 15px;
cursor: pointer;
font-size: 20px;
}
/* Hide the original checkbox */
input[type=checkbox] {
visibility: hidden;
}
/* creating a custom checkbox*/
.mark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: lightgreen;
}
/*background color to be shown when hovering over checkbox */
.container:hover input ~ .mark {
background-color: gray;
}
/*background color to be shown when the checkbox is checked */
.container input:checked ~ .mark {
background-color: blue;
}
/* checkmark to be shown in checkbox */
/* It will not be shown when unchecked */
.mark:after {
content: "";
position: absolute;
display: none;
}
/* display checkmark when checked */
.container input:checked ~ .mark:after {
display: block;
}
/* creating a square to be the sign of
checkmark */
.container .mark:after {
left: 6px;
bottom: 6px;
width: 6px;
height: 6px;
border: solid white;
border-width: 4px 4px 4px 4px;
}
</style>
</head>
<body>
<h1>Food Order</h1>
<label class="container">
Yams
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
Beans
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
Garri
<input type="checkbox">
<span class="mark"></span>
</label>
<label class="container">
Rice
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</body>
</html>
Example3
Here is an example of the ripple effect making the checkbox appear more attractive. Adding this effect to the checkbox gives it a new look. Similarly, we use the '~' sibling combinator, which selects all elements preceded by the former selector.
<html>
<head>
<style>
body{
text-align: center;
}
.check {
width: 500px;
margin: 50px auto;
clear: both;
display: block;
background-color: #8be95d;
border-radius: 4px;
}
.check::after {
clear: both;
display: block;
content: "";
}
.check .checkbox-container {
float: left;
width: 50%;
box-sizing: border-box;
text-align:center;
padding: 40px 0px;
}
/* Styling Checkbox Starts */
.checkbox-label {
color: white;
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 22px;
line-height: 24px;
height: 50px;
width: 24px;
clear: both;
}
.checkbox-label input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .mark {
top:30px;
position: absolute;
height: 24px;
width: 24px;
background-color: transparent;
border-radius: 5px;
transition: all 0.3s ease-in;
border: 2px solid white;
}
.checkbox-label input:checked ~ .mark {
background-color: white;
border-radius: 5px;
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid white;
}
.checkbox-label .mark::after {
position: absolute;
content: "";
border-radius: 5px;
}
.checkbox-label input:checked ~ .mark::after {
transform: rotate(45deg) scale(1);
left: 8px;
top: 3px;
width: 6px;
height: 12px;
border: solid red;
border-width: 0 2px 2px 0;
border-radius: 0;
}
/* For Ripple Effect */
.checkbox-label .mark::before {
position: absolute;
content: "";
border-radius: 10px;
border: 5px solid blue;
transform: scale(0);
}
.checkbox-label input:checked ~ .mark::before {
left: -3px;
top: -3px;
width: 24px;
height: 24px;
border-radius: 5px;
transform: scale(3);
opacity:0;
transition: all 0.3s ease-out;
}
</style>
</head>
<body>
<h1>Food Order</h1>
<div class="check">
<div class="checkbox-container">
<label class="checkbox-label">Yams
<input type="checkbox">
<span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">Beans
<input type="checkbox">
<span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">Garri
<input type="checkbox">
<span class="mark"></span>
</label>
</div>
<div class="checkbox-container">
<label class="checkbox-label">Rice
<input type="checkbox" checked="check">
<span class="mark"></span>
</label>
</div>
</div>
</body>
</html>
