Learn how to select the element which has the class name starting with number. HTML5 supports numbers as id and class name , but css selector have some rules , A valid name should start with a letter (a-z)[A-Z] , an underscore (_), or a hyphen (-) which is followed by any numbers, hyphens, underscores, letters. A name …
Continue reading “Css selector for element which have numbers as class name.”
Loader are the impressing part of the website , which needs to be simple and fun , So we will build an elegant loader . This loader is inspired from here. Create a container which is going to hold the loader <html> <body> <div class=”container”> </div> </body> </html> Set the width and height of the body to 100% , …
Awesome people build awesome 😎 things using css. Let’s create an input checkbox with label, so that we can change the label as switch and turn on the switch when the checkbox is checked and turn off when it is unchecked. <input type=”checkbox” id=”toggle” class=”checkbox” /> <label for=”toggle” class=”switch”></label> The label is placed below the …
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 …
Js Jeep 🚙