CSS sprites example

Developer
Massimo Cassandro
Size
1,940 Kb
Views
14,168
  1. CSS sprites example Previews
  2. CSS sprites example HTML Codes
  3. CSS sprites example CSS Codes

How do I make an css sprites example?

What is a css sprites example? How do you make a css sprites example? This script and codes were developed by Massimo Cassandro on 09 November 2022, Wednesday.

CSS sprites example Previews
IQ Test

CSS sprites example - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS sprites example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>CSS Sprites Example</h1>
<h2>Sprite image:</h2>
<p><img src="https://primominuto.altervista.org/articoli/17/imgs/sprite_image.png" alt="sprite image"></p>
<h2>List with sprite icons</h2>
<ul>	<li class="icon square">Lorem ipsum dolor</li>	<li class="icon triangle">Consectetur adipisicing elit</li>	<li class="icon star">Ipsa, nemo, maxime</li>	<li class="icon circle">Officia sunt voluptatem</li>	<li class="icon pentagon">Consequatur odit eveniet</li>	<li class="icon diamond">Tempore possimus sit eos</li>
</ul>
</body>
</html>

CSS sprites example - Script Codes CSS Codes

body {	background-color: #fff;	font-size: 16px;
}
h2 {	margin-top:2em;	font-size: 2em
}
img {	border: 1px solid #ccc;
}
ul {	list-style-type: none;	margin-left: 2em;
}
li {	position: relative;	font-size: 2em;	margin-top: 1em;
}
.icon::before {	content: '';	position: absolute;	left: -50px;	width: 40px;	height: 40px;	display: block;	background-image: url(https://primominuto.altervista.org/articoli/17/imgs/sprite_image.png);	background-repeat: no-repeat;	margin: 0 2em 2em 0;
}
.square::before {	background-position: 0 0;
}
.triangle::before {	background-position: -92px 0;
}
.star::before {	background-position: -184px 0;
}
.circle::before {	background-position: 0 -86px;
}
.pentagon::before {	background-position: -93px -86px;
}
.diamond::before {	background-position: -184px -86px;
}
CSS sprites example - Script Codes
CSS sprites example - Script Codes
Home Page Home
Developer Massimo Cassandro
Username massimo-cassandro
Uploaded November 09, 2022
Rating 3
Size 1,940 Kb
Views 14,168
Do you need developer help for CSS sprites example?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Massimo Cassandro (massimo-cassandro) Script Codes
Name
SVG embedding methods
Grumpicon demo
Nested table email layout
Google maps circle method
JQuery UI Datepicker
JQuery UI Autocomplete for Bootstrap
Colspan auto
SVG symbols demo
Checkbox with SVG icon
SVG example
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!