5 Advanced css tricks to enchance your web design

In the ever-evolving world of web design, staying ahead of the curve requires a continuous pursuit of new techniques and tools. CSS (Cascading Style Sheets) remains one of the most fundamental technologies for creating visually stunning and interactive web pages. While many designers are well-versed in basic CSS principles, diving into advanced CSS can unlock a whole new realm of possibilities. These advanced CSS Tricks and techniques not only improve the aesthetics of your site but also enhance functionality and user experience.

In this article, we will explore five advanced CSS tricks that can transform your web design. From leveraging CSS Grid for intricate layouts to using pseudo-elements for added flair, ea.ch technique is accompanied by practical examples and detailed explanations. These tricks are designed to help you tackle common design challenges and push the boundaries of what’s possible with CSS.

1. CSS Grid Layout

<div class="container">
    <header class="header">Header</header>
    <nav class="nav">Navigation</nav>
    <aside class="aside">Aside</aside>
    <main class="main">
      <section class="content">
        <article class="article">Article</article>
        <div class="nested-grid">
          <div class="nested-item">Nested 1</div>
          <div class="nested-item">Nested 2</div>
          <div class="nested-item">Nested 3</div>
          <div class="nested-item">Nested 4</div>
        </div>
      </section>
      <footer class="footer">Footer</footer>
    </main>
  </div>        

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 10px;
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.header {
  grid-area: header;
  background-color: #4CAF50;
  padding: 10px;
  text-align: center;
  color: white;
}

.nav {
  grid-area: nav;
  background-color: #2196F3;
  padding: 10px;
  color: white;
}

.aside {
  grid-area: aside;
  background-color: #FF5722;
  padding: 10px;
  color: white;
}

.main {
  grid-area: main;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 10px;
}

.content {
  background-color: #F0F0F0;
  padding: 10px;
}

.article {
  background-color: #FFC107;
  padding: 10px;
  margin-bottom: 10px;
}

.nested-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.nested-item {
  background-color: #8BC34A;
  padding: 10px;
  text-align: center;
}

.footer {
  grid-area: footer;
  background-color: #795548;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Responsive Design */
@media (max-width: 768px) {
  .container {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-rows: auto auto 1fr auto auto;
    grid-template-columns: 1fr;
  }

  .main {
    grid-template-rows: auto 1fr;
  }

  .nested-grid {
    grid-template-columns: 1fr;
  }
}        

2. CSS Variables

<a class="button">Click me</a>        

:root {
  --main-color: #3498db;      
  --secondary-color: #2ecc71;  
  --padding: 10px;      
}

/* Example class using CSS variables */
.button {
  background-color: var(--main-color);  
  color: #fff;                         
  padding: var(--padding);            
  border: none;                       
  border-radius: 5px;                  
  font-size: 16px;                    
  cursor: pointer;                    
  transition: background-color 0.3s;    
}

/* Example hover effect using CSS variables */
.button:hover {
  background-color: var(--secondary-color); 
}        

3. Advanced Animations with @keyframes

<div class="container-line">
  <div class="container-line-center">
    <div class="line-item one"></div>
    <div class="line-item two"></div>
    <div class="line-item three"></div>
    <div class="line-item four"></div>
  </div>
</div>        

.container-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    margin: 0 auto
}

.container-line-center {
    width: 70%;
    margin: 0 auto;
    position: relative;
    height: 100%
}

.line-item {
    float: left;
    width: 25%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 100%;
    position: relative
}

.line-item,.line-item:first-child {
    border-right: 1px solid rgba(0,0,0,.1)
}

.line-item.one:before {
    content: "";
    position: absolute;
    top: 0;
    right: -3px;
    width: 5px;
    height: 30px;
    -webkit-animation: scroll 8s ease-out infinite;
    animation: scroll 8s ease-out infinite;
    background: #ffe000
}

.line-item.two:before {
    top: 10%;
    -webkit-animation: scroll 6s ease-out infinite;
    -mox-animation: scroll 6s ease-out infinite;
    animation: scroll 6s ease-out infinite
}
.line-item.three:before {
    top: 5%;
    width: 5px;
    height: 30px;
    -webkit-animation: scroll 6s ease-out infinite;
    -mox-animation: scroll 6s ease-out infinite;
    animation: scroll 6s ease-out infinite;
   background: #ffe000;
}
.line-item.four:before,.line-item.two:before,.line-item.three:before {
    content: "";
    position: absolute;
    right: -2px;
    width: 5px;
    height: 30px;
    background: #ffe000
}

.line-item.four:before {
    top: 0;
    -webkit-animation: scroll 5s ease-out infinite;
    animation: scroll 5s ease-out infinite
}

@keyframes scroll {
  0%, 100% {
    transform: translate(0, 0);
  }
  
  50% {
    transform: translate(0, 200px);
  }
   100% {
    transform: translate(0, 0);
  }
}        

4. Clip Path for Creative Layouts

<div class="container">
    <img src="your-image-url.jpg" alt="Sample Image" class="image">
  </div>        

.container {
      position: relative;
      width: 300px;
      height: 300px;
      overflow: hidden;
    }

    .image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      clip-path: polygon(
        50% 0%,    /* Top center */
        100% 25%,  /* Top right */
        75% 100%,  /* Bottom right */
        25% 100%,  /* Bottom left */
        0% 25%     /* Top left */
      );
      -webkit-clip-path: polygon(
        50% 0%,
        100% 25%,
        75% 100%,
        25% 100%,
        0% 25%
      ); /* For Safari */
      transition: clip-path 0.5s ease, -webkit-clip-path 0.5s ease; /* Ensure compatibility */
    }

    .container:hover .image {
      clip-path: circle(50% at 50% 50%);
      -webkit-clip-path: circle(50% at 50% 50%); /* For Safari */
    }        

5. CSS Pseudo-Elements for Extra Design Flair

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin suscipit, urna eget efficitur venenatis, libero justo sollicitudin justo, ut efficitur metus leo at eros.</p>        

p::first-letter {
  font-size: 200%;
  font-weight: bold;
  float: left;
  margin-right: 5px;
  color: #ff6347;
}

p::first-line {
  font-variant: small-caps;
  color: #2e8b57;
}