CSS Code Repo - Andy's Blog

Inline CSS

CSS	tailwindcss	Meaning	Display
display: flex align-items: center gap: 2px	flex items-center gap-2	Align items along the center of the container’s x-axis with a 2px gap between them
flex justify-content: space-between	justify-between	Display flex items with space between them
box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);	shadow-lg	Box shadow large
box-shadow: 0 4px 6px -1px rgba(76, 81, 191, 0.2), 0 2px 4px -1px rgba(76, 81, 191, 0.2);	shadow-blue-700/20	Box shadow blue with 20% opacity

External CSS

• Hide the scroll bar (not able to scroll)

  body {
    overflow: hidden;
  }

• Hide the scroll bar and able to scroll

  /* 
  Parent container with overflow: hidden; 
  Child container with overflow-y: scroll;
  Hide the scroll bar with a negative right margin
  */
  .parent {
    overflow:hidden;
  }
  
  .child {
    overflow-y:scroll;
    right:-30px;
  }
  
  
  /* Optional solution */
  /* For firefox */
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
    overflow: hidden;
  }
  
  /* For chrome */
  body::-webkit-scrollbar {
    display: none;
    overflow: hidden;
  }

• Glowing text

  

  index.html

  <h1 class="glow">Andy's Site</h1>

  style.css

  /* 
  	Customized font family
  	Put this font file 'Baletta Free.ttf' under /fonts
  */
  @font-face {
    font-family: 'Baletta';
    src: url("/fonts/Baletta Free.ttf") format('truetype');
  }
  
  .glow {
    font-size: 70px;
    font-family: "Baletta", sans-serif; /* Adding "Baletta" font family */
    color: #FFC8FB;
    text-align: center;
    text-shadow: 0 0 10px #D567A1, 0 0 20px #D567A1, 0 0 30px #D567A1, 0 0 40px #D567A1, 0 0 50px #D567A1, 0 0 60px #D567A1, 0 0 70px #D567A1;
    animation: glowing 2s infinite;
  }
  
  @keyframes glowing {
    0% {
      text-shadow: 0 0 10px #D567A1, 0 0 20px #D567A1, 0 0 30px #D567A1, 0 0 40px #D567A1, 0 0 50px #D567A1, 0 0 60px #D567A1, 0 0 70px #D567A1;
    }
    50% {
      text-shadow: none;
    }
    100% {
      text-shadow: 0 0 10px #D74580, 0 0 20px #D74580, 0 0 30px #D567A1, 0 0 40px #D567A1, 0 0 50px #D567A1, 0 0 60px #D567A1, 0 0 70px #D567A1;
    }
  }

References

• tailwindcss
• w3schools CSS Reference
• Overflow:hidden can’t scroll in div