Learn how to detect animation events in JavaScript Photo by Pankaj Patel onĀ Unsplash In JavaScript we can detect animation eventsĀ . The list of available animation events are animationstart ā Triggered when an animation is started animationiteration ā Triggered on each iteration of animation animationend ā Triggered at the end of animation animationcancel ā Triggered when …
Tag Archives: CSS
Detecting the End of CSS Transition Events in JavaScript
An overview of properĀ chaining Image by Hello Iām NikĀ š¬š§ Before CSS transition and animation (keyframes), to animate, we needed to code in JavaScript. But once these two properties were introduced, we can achieve complex animations with only CSS. In JavaScript, we can call the callback function once the animation is done. But in CSS, there …
Continue reading “Detecting the End of CSS Transition Events in JavaScript”
Creating Dice in Flexbox in CSS
Learn how to create dice in CSS usingĀ flexbox Dice created with flexbox inĀ CSS First Face First face of theĀ div Our first-face of the die will have one dot at the center. <div class=”dice first-face”> <span class=”dot”> </span> </div> Here, we have the dice– and dot-classed elements. Now we can add some CSS to the die. …
A short introduction to CSS variables
Using CSS variables we can set a value to a property and reuse it in our CSS code. This can be thought of almost exactly how we use variables in JavaScript. When do we need CSS variables? When we are working on a project, and we need to use the same value (text color, background, …
Create beautiful boxes using the outline CSS property
outline is a line outside the border of a container. Letās create a simple rectangle and apply an outline and see how cool š it is. The syntx for ourline is outline: size type color; The above code will create a beautiful frame š¼Ā . The available values are outline: auto ā Permits the user agent …
Continue reading “Create beautiful boxes using the outline CSS property”
Css selector for element which have numbers as class name.
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.”
Remove All children š¶ of the node in Javascript.
Learn how to delete all the nodes inside a div or any node in Javascript. You can do it in three ways 1Ā . Set the node innerHTML as empty-string(āā). var node = document.getElementById(‘parent’); node.innerHTML = “”; This method removes all the text and nodes inside the parent node. If you need to delete only the …
Continue reading “Remove All children š¶ of the node in Javascript.”
Creating a simple loader only using CSS
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%Ā , …
Best Resources to find select the beautiful gradient for front-end developers.
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 a toggle switch in CSS.
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 …
Js Jeep š 