Overview An area cart is used to represent the data set into the graphical form. By using the HTML and CSS we can create an area chart. So for this we will create two custom variables as start and end. The custom variable can be created using this symbol “--” and following up with a variable name. For example, creating the variable like: –width, --height and –start. Algorithm Step 1 − Create a HTML file and open that file in a text editor. Add the HTML boilerplate to the HTML file. Step 2 − Now create a parent div container with ... Read More

Overview A loader is a web component which is used by almost all of the web applications. To build a loader ring we should have some prior knowledge about Cascading Styles Sheet (CSS) as the CSS involves the styling and animating part of the loader ring. As the loader component is loaded before the original content loads to the web page. The main styling properties that will be used to build this feature are animation, transition and keyframes. These three CSS properties will make a simple static animation loading ring to the animated loader ring. Algorithm Step 1 − Create ... Read More

Overview Animated bars are the graphically animated bars which are created using HTML and CSS. The layout of the animated bars are created using HTML and the styling of the bars are made using CSS. The normal bars can be created normally but we have to create the bars with animation so we will be using the CSS transition animation properties to make it animated. We will be building an animated bar same as the music animated bars synchronizer. Algorithm Step 1 − Create a HTML file in your text editor and add the HTML boilerplate in it. Step 2 − Now ... Read More

Overview A slider is a component which makes a slideshow like animation when the forward and backward navigation buttons are clicked. A slider consists of different images in an order one after another. We can create this working slider using HTML and CSS. So in the CSS we will be using the nth child selector to make the slider working. The nth child selector will select the particular child from the parent div and will make the image display on the front page. Algorithm Step 1 − Create an index.html file in a folder and open it in a text ... Read More

Overview To build the wave image background, here the main role play is of Cascading Styles Sheet (CSS) as without any use of svg or png image we will be going to create a wave image background that can be used for the web pages background. So to build this component you should have a good understanding of CSS as to build this component we are going to use the CSS position property and the before and after selector. So using these properties and selector we can achieve the deployment of the wave image background. Algorithm Step 1 − Create a HTML ... Read More

In general, if we hover or take the cursor over an element in HTML document the cursor by default appears as an arrow or a selector if we hover it over a text. But, we can change the behaviour of the cursor on hover to selected elements to any type of available cursor types using the CSS property. Let us now discuss and understand how you can change the behaviour of the cursor on hover to any particular element using the :hover state and the cursor property of CSS. Cursor Property The cursor property in CSS comes with a lot ... Read More

In today’s time, when you right click on any web page there will be a list of some with some options and functionality pops up. This popup menu is also known as the context menu which is a default popup menu given by browser. The items in the list of this menu varies in different browsers. Some browsers provide more functionality while some provides limited. But here’s a way to add your own custom context menu or the right click menu on your web page with as much as options as you want. But before adding the custom context menu, ... Read More

In CSS or the Cascading Style Sheet, there are many units available to represent the values of different properties in different ways according to the need. The CSS properties like: font-size, height, width and line-height etc are used to define the different properties to a container. The values of these properties can be assigned in the form of different units. In this article, we are going to learn about the different CSS units in details and implement them practically to understand use of each one of them. There are many CSS units available in CSS, but in this article ... Read More

SASS is a CSS pre-processor, that stands for Syntactically Awesome Style Sheet. The SASS code is written just like a scripting language like JavaScript, but at the time of compilation it is converted into CSS and compiled as CSS in the browser. SASS can be used with any version of CSS. It is used to enhance and advance the way of writing the code in normal CSS. In normal workspace, we are used to of writing the whole code in one single file only, that makes our code complex to read and understand for any other developer. SASS allow us ... Read More

In this article, we will learn the different utility classes in Materialize CSS, but before proceeding, let's know what Materialize CSS is. Materialize CSS is a popular front-end development framework that offers various features and utilities to create responsive and appealing web applications. One of the essential components of Materialize CSS is its utility classes which offer an easy and efficient approach to adding styles to HTML elements Utility classes are predefined CSS classes that can be applied to any HTML element to achieve a particular styling. Here are Some Utility Classes that you can use Color utility classes ... Read More