Create a Basic Calculator App in Android Studio by Uspacial

Best HTML Design Effects for Your Project

Table of Contents

• Parallax Scrolling Effect
• Glassmorphism Card
• Hover Animation Effect
• CSS Grid Layout for Portfolio
• Neumorphism Effect

1. Parallax Scrolling Effect

The parallax scrolling effect adds depth by making background images move slower than the foreground content.

Code:

<div class="parallax"></div>

<style>
  .parallax {
    background-image: url('your-image.jpg');
    height: 500px;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>
        

2. Glassmorphism Card

Glassmorphism creates a frosted glass effect that gives a modern UI design.

Glassmorphism

This is a frosted glass effect.

Code:

<div class="card">
  <h2>Glassmorphism</h2>
  <p>This is a frosted glass effect.</p>
</div>

<style>
  .card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.2);
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    text-align: center;
    margin: 0 auto;
  }
</style>
        

3. Hover Animation Effect

Hover animations make your buttons interactive and engaging. Below is an example with a hover zoom effect.

Code:

<button>Hover Me!</button>

<style>
  button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
  }
  button:hover {
    transform: scale(1.1);
  }
</style>
        

4. CSS Grid Layout for a Portfolio

If you want to showcase your projects in a portfolio, using CSS grid allows for a clean, responsive design.

Code:

<div class="portfolio">
  <div class="item"><img src="project1.jpg" alt="Project 1"></div>
  <div class="item"><img src="project2.jpg" alt="Project 2"></div>
  <div class="item"><img src="project3.jpg" alt="Project 3"></div>
</div>

<style>
  .portfolio {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 20px;
  }
  .item {
    background-color: #f4f4f4;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
  }
</style>
        

5. Neumorphism Effect

Neumorphism gives elements a soft, 3D appearance, perfect for modern designs.

Code:

<button>Click Me!</button>

<style>
  button {
    background-color: #e0e0e0;
    border-radius: 20px;
    box-shadow: 10px 10px 30px #bebebe, -10px -10px 30px #ffffff;
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
  }
  button:hover {
    box-shadow: inset 10px 10px 30px #bebebe, inset -10px -10px 30px #ffffff;
  }
</style>
        

Final Thoughts

These HTML and CSS effects can take your web projects to the next level. Feel free to copy and modify the code as per your needs. Don't forget to share this post with your fellow developers and let them know about these awesome design effects!