Creating awesome stuffs in css is easy. So let’s create an awesome underline effect. Let’s create an para <p class=”underline”> Javascript Jeep 🚙 🚘 is awesome 😎 </p> Let’s add the position property to the para to relative , with that we can make use of ::after pseudo class and create a underline like shape . .underline { …
Continue reading “Creating a awesome 😎 underline text effect in CSS”
Awesome tooltips are made by crazy peoples. First let’s create a button . <button class = “button”> Button </button> Add some style to it, to make the button looks great, .button { position: relative; background: #E5C388; padding: 10px; border-radius: 4px; border: none; text-transform: uppercase; font-weight: bold; color: white;} The position property of button is set to …
Default scrollbars are boring so let’s try building a awesome 😎 custom scrollbar using css. First we need to create a container with some text . <div class=”custom-scrollbar”> <p> “Doctors are just the same as lawyers; the only difference is that lawyers merely rob you, whereas doctors rob you and kill you too.” <hr> “Wine is …
Create an awesome effect on selecting text using css. First we need to create a para with some text. <p class=”highlight-text”>Select the text to see magic . </p> Now let’s add a ::selection pseudo selector on an element to style text within it when selected. .highlight-text ::selection { background : #738BFA; color : white; } To …
Will create a super bouncing loader in css . First we need to create 3 dots , to create a loader. <div class = “loader”> <div></div> <div></div> <div></div> </div> Add some css to make the div to fill whole screen. Set the loader as flex-box and set all div inside loader to center vertically using align-items: center …
There is no built-in reverse method present in String object to reverse a string.But we can reverse a string by, Convert the string to array , using split method. Reverse the array. Join the reversed array. function reverse (string) { return string.split(”).reverse().join(); } That is you have finished reading small and sweet article. 🤩😎. Follow Javascript …
Creating a loader in css is as easy as eating a piece of cake. Create a div ; <div class=”spinner”></div> 2.Add some style to the spinner div. .spinner { border: 10px solid rgba(0, 0, 0, 0.1); //create border border-left-color: #2EB35A; // make only one side border-radius: 50%; // makes the div looks like circle width: 50px; …
Js Jeep 🚙