5 Ways to make your website look Cooler

What you will need-

  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">     Clik 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:

    Code 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

    Code 
                                    @keyframes MyAnimation{
                                    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 individual animation-name:/*insert animation-name*/;
    animation-duration:/*insert animation-duration*/;
    animation-timing-function:/*insert timing function*/;
    animation-delay:/*insert animation-delay*/;
     properties. So here's my sample code-

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

    Now, if you hover your mouse over button below or click it (on mobiles and tablets), the animation will happen.

  3. Syntax Highlighting

    If you've read my blogs, you might've seen that that the code is colored based on syntax. Now, doing this by individually coloring each word, is quite tedious. You can use JavaScript libraries like Highlight.js but there is an easier way to do it. I personally use CodeBeautify's syntax highlighter which has auto language detection and a vast variety of themes. I personaly use OneDark and GitHub themes.

  4. Text gradients

    If you noticed, all the headings have a Gradient. It is easy to make a text gradient in CSS with only 3 lines of code (5 if you include the class name and semicolons)

    Choose gradient type:




    Value:

    Code 
                                    .gradient{
                                    background-image:(deg,,);
                                    background-clip:text;
                                    color:transparent;
                                    }

  5. Using My Stylesheet

    If you like my website and would like to use similar styles, you can

    1. Check out the source code by pressing F12 or CTRL + SHIFT + I (⌘ + ⌥ + I on Mac)
    2. Use my stylesheet by adding 
                                      <link rel=
                                        "stylesheet" href="https://ishaant.com/mycss.css?v2.2">
      to the <head> of your HTML.