I'm having some trouble with creating CSS Sprites. This is my first attempt at using sprites, so I'm still learning.
Here is the HTML code snippet:
<div class="dfeature-box">
<div class="icon"><img class="multi" src="images/sprite.jpg"></div>
<div class="title">Title</div>
<div class="details">description.</div>
</div>
And below is the corresponding CSS code snippet:
.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}
.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
}
.dfeature-box .icon .multi{
background-position:126px 9px;
height:47px;
width: 64px;
This is the image I want to use (containing 3 icons in one image) - in my current codes, I'm using the last icon from the image (two people)
Now, I have a vital question: How can I utilize the image in CSS instead of embedding it directly in HTML (as a class within "icon")? Currently, you can see that I'm using the "img" tag inside the "icon" class.
==>> First update:
Please review these updated codes as per your recommendation: Check out the result below: enter image description here
CSS:
.sprite-bg{
background: url("images/sprite.jpg");
}
.bg-1{
width:62px;
height:62px;
background-position: 0px 0px;
}
HTML:
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-1"></div></div>
<div class="title">Title</div>
<div class="details">Description</div>
</div>
Take a look at this HTML code segment: Do you recommend any changes for the highlighted part? What should I modify there? enter image description here
Also, please review my initial post's codes. My goal is to integrate sprites into my existing code.
==>> Second update:
.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}
.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.sprite-bg{
background: url("https://i.imgur.com/VO1dBBA.jpg");
}
.bg-1{
width:62px;
height:62px;
background-position: 0px 61px;
}
.bg-2{
width: 64px;
height: 62px;
background-position: 62px 61px;
}
.bg-3{
width: 64px;
height: 62px;
background-position: 127px;
}
.dfeature-box .icon i {
font-size: 50px;
background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
background: linear-gradient(to bottom, #45b35e, #6ad56a);
color: transparent;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background-clip: text;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hustbee</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-1"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-2"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-3"></div></div>
<div class="title">TITLE</div>
<div class="details">long description.</div>
</div>
</body>
</html>