CSS Sprites

Modern websites use visuals to engage users, but too many images can slow down pages and hurt SEO. CSS provides smart solutions like Sprites, Image Galleries, and Sliders to display images efficiently. This guide explains each with HTML & CSS examples.

CSS Sprites

A CSS sprite is one big image that contains several smaller images like icons or buttons. You display only the part you need using background-position, which speeds up your website.

Advantages of CSS Sprites

• Faster loading: Fewer HTTP requests.
• Better performance: Reduces server calls.
• SEO-friendly: Fast-loading pages rank better on Google.

How CSS Sprites Work

The background-position property shifts the visible part of the sprite to show the desired image.

<div class="sprite-icons">
  <a href="#" class="icon facebook"></a>
  <a href="#" class="icon twitter"></a>
  <a href="#" class="icon instagram"></a>
</div>

.sprite-icons .icon {
  display: inline-block;
  width: 50px;
  height: 50px;
  background: url('social-sprite.png') no-repeat;
}

.icon.facebook { background-position: 0 0; }
.icon.twitter { background-position: -50px 0; }
.icon.instagram { background-position: -100px 0; }

CSS Image Galleries

An image gallery is a collection of images arranged in a grid or layout on a web page. Galleries are commonly used in portfolios, product showcases, and photography websites.

Creating a Simple Gallery with HTML & CSS

<div class="gallery">
  <img src="img1.jpg" alt="Nature 1">
  <img src="img2.jpg" alt="Nature 2">
  <img src="img3.jpg" alt="Nature 3">
  <img src="img4.jpg" alt="Nature 4">
</div>

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 15px;
  padding: 20px;
}

.gallery img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.3s;
}

.gallery img:hover {
  transform: scale(1.05);
}

Making the Gallery Responsive

• CSS Grid automatically adjusts the number of columns.
• Use minmax() and auto-fit for fluid layouts.

CSS Sliders

A slider (carousel) rotates multiple images or content blocks in the same space. It is commonly used for:

• Image banners
• Testimonials
• Product showcases

Types of Sliders in CSS

Sliders are a common way to display images or content in a limited space. They can be categorized into Image Sliders, Content Sliders, and Auto vs Manual Sliders.

Image Sliders

An image slider rotates multiple images in the same area. It’s widely used for banners, portfolios, or product showcases. The main idea is to cycle through images smoothly.

Example: CSS Image Slider

<div class="image-slider">
  <div class="slides">
    <img src="slide1.jpg" alt="Slide 1">
    <img src="slide2.jpg" alt="Slide 2">
    <img src="slide3.jpg" alt="Slide 3">
  </div>
</div>

.image-slider {
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  margin: auto;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.slides {
  display: flex;
  width: 300%;
  animation: slide 12s infinite;
}

.slides img {
  width: 100%;
  flex-shrink: 0;
}

@keyframes slide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

Content Sliders

A content slider rotates text or HTML content instead of just images. It’s often used for testimonials, feature highlights, or news tickers.

Example: CSS Content Slider

<div class="content-slider">
  <div class="content-slides">
    <div class="slide">"Great service! Highly recommend." – John</div>
    <div class="slide">"Amazing design and fast support." – Sarah</div>
    <div class="slide">"Professional and user-friendly website." – Mike</div>
  </div>
</div>

.content-slider {
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  margin: auto;
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 20px;
  background: #f9f9f9;
}

.content-slides {
  display: flex;
  width: 300%;
  animation: contentSlide 12s infinite;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  color: #333;
}

@keyframes contentSlide {
  0% { transform: translateX(0); }
  33% { transform: translateX(-100%); }
  66% { transform: translateX(-200%); }
  100% { transform: translateX(0); }
}

Auto vs Manual Sliders

Auto Sliders

• Slides change automatically without user interaction.
• Banner carousels or promotional slides that continuously rotate.
• The Image Slider and Content Slider above are auto sliders using CSS @keyframes.

Manual Sliders

• Users navigate through slides manually using arrows, dots, or buttons.
• When the user needs control, like product image galleries or step-by-step tutorials.

Working Manual Slider Example

<div class="manual-slider">
  <input type="radio" name="slide" id="slide1" checked>
  <input type="radio" name="slide" id="slide2">
  <input type="radio" name="slide" id="slide3">

  <div class="slides">
    <div class="slide s1">Slide 1</div>
    <div class="slide s2">Slide 2</div>
    <div class="slide s3">Slide 3</div>
  </div>

  <div class="navigation">
    <label for="slide1" class="nav-btn"></label>
    <label for="slide2" class="nav-btn"></label>
    <label for="slide3" class="nav-btn"></label>
  </div>
</div>

.manual-slider {
  width: 500px;
  margin: auto;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  border: 2px solid #ccc;
}

/* Hide all radio buttons */
.manual-slider input[type="radio"] {
  display: none;
}

.slides {
  display: flex;
  width: 300%;
  transition: transform 0.5s ease-in-out;
}

.slide {
  flex-shrink: 0;
  width: 100%;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: lightblue;
  font-size: 1.5rem;
}

/* Manual slide switching using :checked + sibling */
#slide1:checked ~ .slides { transform: translateX(0); }
#slide2:checked ~ .slides { transform: translateX(-100%); }
#slide3:checked ~ .slides { transform: translateX(-200%); }

/* Navigation buttons */
.navigation {
  text-align: center;
  margin-top: 10px;
}

.nav-btn {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #333;
  display: inline-block;
  margin: 0 5px;
  cursor: pointer;
}