start learning
Image 1
2CSSAdvancedeffects

CSS Advanced effects

Advanced CSS effects refer to sophisticated and visually appealing design techniques achieved through the use of Cascading Style Sheets (CSS). These effects go beyond basic styling and layout and often involve complex animations, transitions, transforms, and other CSS properties.

They enhance the overall user experience and create dynamic and interactive elements on a webpage. Some examples of advanced CSS effects include parallax scrolling, hover animations, 3D transforms, image filters, gradients, and keyframe animations. These effects require a solid understanding of CSS and can significantly elevate the aesthetics and interactivity of a website.

CSS Animations, allow you to create more complex and sophisticated animations by defining keyframes and specifying various properties such as duration, timing function, and delay. With CSS Animations, you can create eye-catching effects like moving, rotating, scaling, and fading elements on your web page.

Parallax Scrolling


/* Styles for parallax container */
.parallax-container {
  background-image: url('background-image.jpg'); /* Set the background image */
  background-attachment: fixed; /* Fix the background image */
  background-position: center; /* Center the background image */
  background-repeat: no-repeat; /* Prevent background image from repeating */
  background-size: cover; /* Scale the background image to cover the container */
  height: 100vh; /* Set container height to 100% of viewport height */
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
}

/* Styles for test class */
.test {
  color: white; /* Set text color to white */
  font-size: 40px; /* Set font size to 40 pixels */
}

<div class="parallax-container"> <!-- Start of parallax container -->
  <p class="test">Welcome to the Parallax Website</p> <!-- Paragraph with class 'test' -->
</div> <!-- End of parallax container -->

Preview:

Welcome to the Parallax Website



Hover Animations


/* Styles for hover button */
.hover-button {
  transition: all 0.3s ease; /* Apply transition effect */
  padding: 10px 20px; /* Set padding */
  background-color: #ff99cc; /* Set background color */
  border: none; /* Remove border */
  color: white; /* Set text color to white */
  font-size: 18px; /* Set font size */
}

/* Hover effect for hover button */
.hover-button:hover {
  transform: scale(1.2); /* Scale the button on hover */
  background-color: #ff0000; /* Change background color on hover */
}

<button class="hover-button">Hover Me</button> <!-- Button with class 'hover-button' -->

Preview:

3D Transforms


/* Styles for gallery item */
.gallery-item {
  perspective: 800px; /* Set perspective for 3D effect */
}

/* Styles for gallery item images */
.gallery-item img {
  width: 300px; /* Set width of images */
  height: 200px; /* Set height of images */
  transition: transform 0.5s ease; /* Apply transition effect to images */
}

/* Hover effect for gallery item images */
.gallery-item:hover img {
  transform: rotateY(45deg) scale(1.2); /* Rotate and scale images on hover */
}

<div class="gallery-item"> <!-- Start of gallery item -->
  <img src="image1.jpg" alt="Image 1"> <!-- Image with source and alt attributes -->
</div> <!-- End of gallery item -->

Preview :

Image Filters


/* Styles for grayscale image */
.grayscale-image {
  filter: grayscale(100%); /* Apply grayscale filter */
  transition: filter 0.3s ease; /* Apply transition effect to filter */
}

/* Remove grayscale effect on hover */
.grayscale-image:hover {
  filter: grayscale(0%); /* Set grayscale filter to 0% on hover */
}

<img src="image.jpg" alt="Image" class="grayscale-image"> <!-- Image with source, alt, and class attributes -->

Preview:
Image


Gradients


/* Styles for gradient background */
.gradient-background {
  background: linear-gradient(to bottom, #ff0000, #ff99cc); /* Apply linear gradient background */
  height: 100vh; /* Set container height to 100% of viewport height */
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Vertically center content */
  justify-content: center; /* Horizontally center content */
}

/* Styles for heading */
h1 {
  color: white; /* Set text color to white */
  font-size: 40px; /* Set font size to 40 pixels */
}

<div class="gradient-background"> <!-- Start of gradient background container -->
  <p class="test2">Welcome to the Gradient Website</p> <!-- Paragraph with class 'test2' -->
</div> <!-- End of gradient background container -->

Preview:

Welcome to the Gradient Website


Keyframe Animations


/* Keyframes animation for spinner */
@keyframes spinner {
  0% {
    transform: rotate(0deg); /* Rotate 0 degrees at the start */
  }
  100% {
    transform: rotate(360deg); /* Rotate 360 degrees at the end */
  }
}

/* Styles for loading spinner */
.loading-spinner {
  width: 50px; /* Set width to 50 pixels */
  height: 50px; /* Set height to 50 pixels */
  border: 5px solid #ff99cc; /* Add a 5px solid border with color */
  border-top-color: transparent; /* Set top border color to transparent */
  border-radius: 50%; /* Apply border-radius to create a circle */
  animation: spinner 1s infinite linear; /* Apply the 'spinner' animation */
  margin: 50px auto; /* Center the spinner with margin */
}

<div class="loading-spinner"></div> <!-- Create a loading spinner with class 'loading-spinner' -->

Preview:

Resources for Further Learning

Explore the possibilities and create unique effects on your web pages by using the interactive code editor

HTML

Write and customize HTML code

CSS

Add style and design to your web pages with CSS

JavaScript

Enhance interactivity with JavaScript code

Go to Code Editor
×