Featured Post

Ganesh Chaturthi Special: Ganesha Image with Rotating Chakra Structures | HTML & CSS Animation

-
Image
Ganesh Chaturthi Special: Ganesha Image with Rotating Chakra Structures | HTML & CSS Animation 🌟🕉️ In this project, we create a stunning web design that features a Ganesha image with a chakra-like structure as the background, using HTML and CSS. The chakra structures rotate both clockwise and counterclockwise, giving a mesmerizing effect, while shadow effects are applied to enhance the visual appeal. This design is perfect for celebrating Ganesh Chaturthi and showcasing beautiful animations with minimal effort.  VIDEO TUTORIAL   Key Features of This Design Ganesha Image with Indigo Background : The main focal point of the design is a beautiful image of Lord Ganesha set against an indigo-colored background. The indigo background provides a calming and divine feel, highlighting the spiritual significance of Lord Ganesha. Chakra-Like Rotating Structures : Behind the Ganesha image, we add three chakra-like structures, each rotating in opposite directions: clockwise and coun...
Post a Comment

GLASSMORPHISM using HTML CSS

-

 

Glassmorphism Effect with Interactive Features | HTML & CSS Tutorial 🎨

In this tutorial, we will dive into the trendy and visually appealing design style known as Glassmorphism. This design style gives elements a frosted glass appearance, making them stand out beautifully on any background. In this video, we'll create a fully functional user interface with interactive buttons and a navigation bar, all styled with the Glassmorphism effect.


VIDEO TUTORIAL 



CHECK SOURCE CODE BELOW


Key Features of This Tutorial

  1. Navigation Bar on the Top Left Corner:

    • The interface will feature a sleek navigation bar placed in the top left corner, providing easy access to different sections of your site or application.
    • The navigation bar will be styled with a subtle glassmorphism effect, blending seamlessly with the background while still being easily accessible.

  2. Connect Button:

    • We'll add a "Connect with Me" button, which invites users to get in touch with you. This button will also feature a glassmorphic style, giving it a transparent, frosted look.
    • The button will have an interactive hover effect, where moving the cursor over it triggers a shadow effect. This adds depth and makes the button feel more responsive and engaging.

  3. Watch Button for the Tutorial Video:

    • Another key feature will be the "Watch" button, which allows users to watch the video tutorial directly. Like the "Connect" button, it will also have a glassmorphism effect and a hover shadow effect.
    • The hover effect will give the button a glow, enhancing the user experience and drawing attention to the call-to-action.

  4. Additional Glassmorphism Effects:

    • Beyond the buttons and navigation bar, other elements of the page, such as containers and cards, will also utilize glassmorphism to create a cohesive and modern design.
    • Each element will feature soft shadows, light borders, and a frosted glass appearance, ensuring consistency across the entire interface.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glassmorphism effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- nav bar -->
    <nav>
        <p class="sitename">GlassSite</p>
        <p class="menu">Services</p>
        <p class="menu">Services</p>
        <p class="menu">Services</p>
        <p class="menu">Services</p>

        <!-- svg -->
        <svg class="material-icons" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 9H5c-.55 0-1 .45-1 1s.45 1 1 1h14c.55 0 1-.45 1-1s-.45-1-1-1zM5 15h14c.55 0 1-.45 1-1s-.45-1-1-1H5c-.55 0-1 .45-1 1s.45 1 1 1z"/></svg>

    </nav>

    <div class="grid">
        <svg class="grid-svg" xmlns="http://www.w3.org/2000/svg" width="982" height="786" viewBox="0 0 982 786" fill="none">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M490 401V537H348.5V401H490ZM490 785.5V676H348.5V785.5H347.5V676H206V785.5H205V676H63.5V785.5H62.5V676H0V675H62.5V538H0V537H62.5V401H0V400H62.5V258H0V257H62.5V116H0V115H62.5V0H63.5V115L205 115V0H206V115L347.5 115V0H348.5V115H490V0H491V115L627.5 115V0H628.5V115H765V0H766V115L902.5 115V0H903.5V115H982V116H903.5V257H982V258H903.5V400H982V401H903.5V537H982V538H903.5V675H982V676H903.5V785.5H902.5V676H766V785.5H765V676H628.5V785.5H627.5V676H491V785.5H490ZM902.5 675V538H766V675H902.5ZM902.5 537V401H766V537H902.5ZM902.5 400V258H766V400H902.5ZM902.5 257V116L766 116V257H902.5ZM627.5 675H491V538H627.5V675ZM765 675H628.5V538H765V675ZM348.5 675H490V538H348.5V675ZM347.5 538V675H206V538H347.5ZM205 538V675H63.5V538H205ZM765 537V401H628.5V537H765ZM765 400V258H628.5V400H765ZM765 257V116H628.5V257H765ZM347.5 401V537H206V401H347.5ZM205 401V537H63.5V401H205ZM627.5 401V537H491V401H627.5ZM627.5 116L491 116V257H627.5V116ZM627.5 258H491V400H627.5V258ZM63.5 257V116L205 116V257H63.5ZM63.5 400V258H205V400H63.5ZM206 116V257H347.5V116L206 116ZM348.5 116V257H490V116H348.5ZM206 400V258H347.5V400H206ZM348.5 258V400H490V258H348.5Z" fill="url(#paint0_radial_1_8)" />
            <defs>
              <radialGradient id="paint0_radial_1_8" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(491 392.75) rotate(90) scale(513.25 679.989)">
                <stop stop-color="white" stop-opacity="0.2" />
                <stop offset="1" stop-color="#000" stop-opacity="0" />
              </radialGradient>
            </defs>
          </svg>
          <div class="blur"></div>
    </div>

    <div class="title">
        <p>Powerful tools</p>
        <p>Toos</p>
        <p>About</p>
    </div>

    <a href="https://github.com/logusivam/GLASSMORPHISM" target="_blank" class="button first"><button>View Source</button><span></span></a>
    
    <a href="https://www.youtube.com/watch?v=oTMYNW7mts8" target="_blank" class="button sec"><button>Watch Video</button><span></span></a>
    
    <a href="https://www.linkedin.com/in/loganathan26/" target="_blank" class="button third"><button>Connect</button><span></span></a>
    
    <svg class="top-right" width="219" height="147" viewBox="0 0 219 147" fill="none" xmlns="http://www.w3.org/2000/svg">
      <rect opacity="0.18" x="10.4252" y="75.8326" width="7.50168" height="7.50168" transform="rotate(110.283 10.4252 75.8326)" fill="#686868" stroke="white" stroke-width="1.22683" />
      <rect opacity="0.18" x="180.869" y="138.825" width="7.50168" height="7.50168" transform="rotate(110.283 180.869 138.825)" fill="#686868" stroke="white" stroke-width="1.22683" />
      <rect x="69.4713" y="-91.84" width="180.485" height="180.485" transform="rotate(20.2832 69.4713 -91.84)" stroke="white" stroke-opacity="0.1" stroke-width="1.22683" />
    </svg>
    
    <svg class="bottom-left" width="232" height="191" viewBox="0 0 232 191" fill="none" xmlns="http://www.w3.org/2000/svg">
      <circle cx="50.5685" cy="172.432" r="112.068" stroke="white" stroke-opacity="0.09" />
      <g opacity="0.1">
        <path d="M26.4932 5.20547L228.856 172.432" stroke="#D9D9D9" />
        <rect x="22.4384" y="0.5" width="6.15753" height="6.15753" fill="#686868" stroke="white" />
        <rect x="224.801" y="169.027" width="6.15753" height="6.15753" fill="#686868" stroke="white" />
        <circle cx="121.819" cy="83.613" r="1.7774" fill="#323232" stroke="white" />
      </g>
    </svg>
</body>
</html>



CSS

@import url('https://fonts.googleapis.com/css?family=Manrope:700|Manrope:400');

:root {
  --text: hsl(0, 0%, 99%);
  --textDim: hsl(0, 0%, 60%);
  --background: hsl(0, 0%, 7%);
  --primary: hsl(155, 100%, 65%);
  --primaryBg: hsla(155, 100%, 65%, 1%);
  --primaryHi: hsla(155, 100%, 75%, 25%);
  --primaryFg: hsl(155, 100%, 85%);
  --secondary: hsl(156, 51%, 14%);
  --secondaryFg: hsl(156, 51%, 75%);
  --secondaryBg: hsla(156, 51%, 14%, 5%);
  --secondaryHi: hsla(156, 51%, 30%, 50%);
  --accent: hsl(155, 100%, 94%);
  --accentBg: hsla(155, 100%, 94%, 1%);
  --accentHi: hsla(155, 100%, 100%, 25%);
}

body
{
    font-family: 'Manrope';
    font-weight: 400;
    background-color: var(--background);
    color: var(--text);
    padding: 0 10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100vh;
    overflow: hidden;
}

nav
{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
    color: var(--textDim);
    width: 100%;
    box-sizing: border-box;
    z-index: 1000;
}

.menu:hover
{
    color: var(--text);  
    cursor: pointer;
}

.sitename
{
    font-weight: bold;
}

.grid
{
    position: absolute;
    height: 100%;
    font-weight: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    z-index: -1;

}

.grid-svg {
  height: 80%;
  width: 80%;
  position: relative;
  z-index: 1;
}

.blur
{
    height: 12rem;
    width: 12rem;
    background-color: var(--primary);
    filter: blur(100px);
    border-radius: 100px;
    z-index: 0;
    position: absolute;
}

.title 
{
    font-size: 10rem;
    font-weight: 700;
    letter-spacing: -0.8rem;
    display: flex;
    flex-direction: column;
    position: absolute;
    justify-content: center;
    align-self: center;
    height: 100%;
    z-index: 1000;
}

.title > p
{
    margin: 0;
    line-height: 10rem;
    width: auto;
}

.title > p:nth-child(1)
{
    align-self: flex-start;
}

.title > p:nth-child(2)
{
    color: var(--primary);
    align-self: flex-end;
}

.title > p:nth-child(3)
{
    align-self: flex-end;
}

.material-icons
{
    display: none;
    fill: var(--text);
}

/* buttons */
.button
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    height: 50px;
    width: 100px;
    z-index: 1000;
}

button {
  height: 50px;
  width: 160px;
  clip-path: path("M 0 25 C 0 -5, -5 0, 80 0 S 160 -5, 160 25, 165 50 80 50, 0 55, 0 25");
  border: none;
  border-radius: 13px;
  background-color: var(--primaryBg);
  box-shadow: 0px -3px 15px 0px var(--primaryHi) inset;
  color: var(--primaryFg);
  font-family: "Manrope";
  font-size: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: absolute;
  transform: translateY(0px);
  transition: all 0.2s ease;
}

span
{
    width: 100px;
    height: 60px;
    background-color: var(--primaryHi);
    border-radius: 100%;
    filter: blur(20px);
    position: absolute;
    bottom: -50px;
    transition: all 0.2s ease;
}

/* button hover */
.button:hover > span
{
    opacity: 60%;
}

.button:hover > button {
  transform: translateY(5px);
}

.button.first {
  top: 12%;
  right: 20%;
}

.button .sec
{
    bottom: 13%;
    right: 11%;
}

.button .sec > button
{
    background-color: var(--accentBg);  box-shadow: 0px -3px 15px 0px var(--accentHi) inset;  color: var(--accentFg);
}

.button.sec > span {
  background-color: var(--accentHi);
}

.button.third {
  bottom: 25%;
  left: 15%;
}

.button.third > button {
  background-color: var(--secondaryBg);
  box-shadow: 0px -3px 15px 0px var(--secondary) inset;
  color: var(--secondaryFg);
}

.button.third > span {
  background-color: var(--secondaryHi);
}

.top-right {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  opacity: 50%;
}

.bottom-left {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 50%;
}

@media screen and (max-width: 1000px) {
  .title 
  {
    font-size: 4rem;
    line-height: 2rem;
  }
  
  .title > p {
    line-height: 5rem;
    letter-spacing: -0.3rem;
  }
  
  nav > :not(.sitename, .material-icons) {
    display: none;
  }
  
  nav {
    justify-content: space-between;
  }
  
  .material-icons {
    display: flex;
    align-items: center;
  }
  
}

 

How to Use This Tutorial

  • Step-by-Step Walkthrough: We'll guide you through the process of creating each element, from structuring the HTML to applying CSS styles that bring the glassmorphism effect to life.
  • Customization Options: After following the tutorial, you'll be able to customize the colors, blur levels, and hover effects to match your personal or brand style.
  • Interactivity Focus: Special attention will be given to making the interface interactive, with hover effects that provide visual feedback to users, making the buttons more interesting and engaging.

Conclusion

By the end of this tutorial, you'll have a beautifully designed interface that not only looks great but also provides a smooth and engaging user experience. The glassmorphism effect, combined with interactive buttons and a sleek navigation bar, will make your project stand out. Whether you're working on a personal portfolio, a landing page, or any web project, this design will add a touch of modern elegance.

Make sure to subscribe to Logusivam Academy for more tutorials like this, and don't forget to like and share the video if you found it helpful. Happy coding!

Comments

Post a Comment

Popular Post

Hacker Login Form Using HTML CSS

-
Image
  HACKER LOGIN FORM Project Overview In this project, you'll create a minimalist login form with a dark, matrix-like theme. The form will feature green, monospaced text on a black background, along with animated input fields and buttons to give it a futuristic, hacker vibe. Tech Stack Used HTML : To structure the login form, including input fields, labels, and buttons. CSS : To style the form, creating the dark theme and adding animations to enhance the "hacker" effect. How to Create the Hacker Login Form Set Up the HTML Structure : Create a simple HTML form with input fields for the username and password. Include a submit button labeled "Login" or something more hacker-themed, like "Access." Apply the Dark Theme with CSS : Set the background color of the page to black. Use a green color for the text, resembling the classic terminal look. Choose a monospaced font, like "Courier New" or "Monaco," to enhance the terminal effect. S...
Read more

Introduction to RESTful API

-
Table of Contents                               1. Introduction to RESTful APIs What is an API? Understanding REST (Representational State Transfer) Why Use RESTful APIs?                               2. Core Concepts of REST Resources and URIs (Uniform Resource Identifiers) HTTP Methods (GET, POST, PUT, DELETE, PATCH) Statelessness in REST Representation of Resources (JSON, XML)                               3. Designing a RESTful API Best Practices for RESTful API Design Defining Endpoints and Methods Versioning Your API Handling Errors and Responses                               4. Setting Up the Environment Required Tools and Sof...
Read more

Krishna Janmasthami effect using HTML CSS

-
Image
  Krishna Janmasthami effect using HTML CSS In this special Krishna Janmashtami tutorial, we'll be creating a beautiful animation featuring Lord Krishna, a pot, and a delightful splash effect using just HTML and CSS. This tutorial is perfect for those who want to blend creativity with coding, especially during festive occasions like Krishna Janmashtami. What You'll Learn In this tutorial, you'll learn how to create a visually appealing animation that captures the essence of Krishna Janmashtami. We'll animate Krishna playing with a pot, and you'll also see how to create a splash effect that adds a dynamic touch to the scene. This project is designed to be both fun and educational, making it a great way to practice your HTML and CSS skills while celebrating the festival. Tech Stack Used HTML : We'll use HTML to structure our page, including the elements that make up Krishna, the pot, and the splash effect. You'll see how to create a well-organized HTML structu...
Read more