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% , …
List of websites where you can select gradient for your websites. Gradient for frontend developers. UIGradient UIGradient is a community contributed collection of beautiful multi-color gradients. You can easily generate gradients , rotate and download the gradient as image . They also provide some open source libraries for iOS, react, etc., .Link to their repo is here 2.ColorSpace …
Continue reading “Best Resources to find select the beautiful gradient for front-end developers.”
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 …
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 🚙