5 Ways to make your website look Cooler

What you will need-

• a computer running Windows, Linux or MacOs
• Basic knowledge of HTML, CSS and Javascript

Abstract

Websites have become the Swiss Army knife of the digital era. They’re globally used by brands and companies, but also for personal use. You can create your own website learning HTML, CSS and JavaScript, buying your own server (My dad bought me a server), buying a Domain Name (website name) and then configuring Apache or Nginx on your server. Now, you may want your website to look fancy, so here are some code snippets to make your Website cooler.

1. Add smooth scrolling

   
   When you scroll a HTML page, it may look weird, fast, or
   unresponsive to your scrolling By just adding this line of code to your CSS, your HTML page will scroll smoother. Additionally,
   anchor-links like <a href="#Hyperlink">Click me Anchor Link</a><aside>Some content here......</aside><p id="Hyperlink">Here's the Anchor Link&lt;p&gt; element</p> will automatically give a smooth scrolling effect, almost like you’re manually scrolling down to a certain HTML element. So here’s the CSS code for smooth scrolling:

html {
  scroll-behavior: smooth;
}

2. Animations

   
   If you’ve seen my website (you obviously have)
   you might’ve noticed that there are animations in it.
   Animations are actually pretty easy to implement in CSS.
   All that you have to do is use the @Keyframes rule and
   implement it in an element. Here’s my sample @Keyframes rule:-

@keyframes fadein {
  0% {
    /*
        Your starting properties go here: like
        */
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    /*
        Your ending properties go here: like
        */
    opacity: 1;
    transform: scale(1);
  }
}

Now, all you have to do is implement it in an element using the shorthand
animation property or using the animation-name:/*insert animation-name*/;,
animation-duration:/*insert animation-duration*/;, animation-timing-function:/*insert timing function*/;
and animation-delay:/*insert animation-delay*/; properties.
Here’s an example of how i’ve used it:-

button:hover {
  animation: fadein 1.5s ease-in-out;
}

Click or Hover me

3. Custom cursor

   
   Custom Cursors are pretty cool to make.
   If you like my website’s cursor, here’s the code.

Customization

Color of Cursor

Zip Time (time it takes for the balls stay put)

const style = document.createElement('style');
style.textContent = `
.circle {
    height: 24px;
    width: 24px;
    border-radius: 50%;
    position: fixed;
    background-color:#FFFFFF;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 99999999;
}`;
document.head.appendChild(style);
for (let i = 0; i < 49; i++) {
    const circle = document.createElement('div');
    circle.className = 'circle';
    document.body.insertBefore(circle, document.body.firstChild);
}

const coords = { x: 0, y: 0 };
const circles = document.querySelectorAll(".circle");

circles.forEach(function (circle, index) {
 circle.x = 0;
 circle.y = 0;
})

window.addEventListener("mousemove", function(e) {
 coords.x = e.clientX;
 coords.y = e.clientY;
});

function animateCircles() {
 let x = coords.x;
 let y = coords.y;

 circles.forEach(function (circle, index) {
 circle.style.left = x - xOffset + "px";
 circle.style.top = y - yOffset + "px";

 // Use transform for scaling
 circle.style.transform = `scale(${(circles.length - index) / circles.length})`;

 circle.x = x;
 circle.y = y;

 const nextCircle = circles[index + 1] || circles[0];
 x += (nextCircle.x - x) - 0.25;
 y += (nextCircle.y - y) - 0.25;
 });

 requestAnimationFrame(animateCircles);
}

animateCircles();

4. Use Cool borders

If you want a cool border like this

Here’s the code

<div class="card noanim">
<p class=cad>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque ad exercitationem voluptatem ullam et, natus impedit quae veniam optio a doloremque officiis beatae, itaque nesciunt nostrum quasi molestiae laudantium dolor asperiores soluta sint sed ratione cupiditate. Laudantium earum reiciendis enim.</p>
</div>

p.cad{
  background: #1c1f2b;
  z-index:999;
  padding:15px;
  margin:0px;
  border-radius:10px;
}
div.card{
  margin: 0 auto;
  padding: 2em;
  max-width: 300px;
  max-height:15em;
  background: #1c1f2b;
  text-align: center;
  border-radius: 10px;
  position: relative;
}

@property --angle{
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.card::before{
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  padding: 3px;
  border-radius: 10px;
  animation: 3s spin linear infinite;
}


.card::before{
  filter: blur(1.5rem);
  opacity: 0.5;
}
@keyframes spin{
  from{
    --angle: 0deg;
  }
  to{
    --angle: 360deg;
  }
}

1. Scrolling Text
   Do you want scrolling text like below ↓
   
   
   

   Lorem ipsum

This is traditionally done by using the <marquee></marquee> tags, but it isn’t supported by modern browsers, and is a little buggy.
Here’s how to do it using HTML and CSS.

<div class=scroll>
  <h3>Lorem ipsum </h3>
</div>

.scroll {
 height: 50px;  
 overflow: hidden;
 position: relative;
}
.scroll h3 {
 font-size: 3em;
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;    
 transform:translateX(100%);
 animation: scroll 15s linear infinite;
}

@keyframes scroll {
 0%   {transform: translateX(100%);}
 100% {transform: translateX(-100%);}
}