Fading is a visual representation of a gradual transition between two states of visibility. We can perform this fading animation using the @keyframes rule and opacity property in CSS3. The @keyframes rule can be used with the opacity property to control the fading CSS animation sequence by defining styles for keyframes. The style change will happen with the keywords “from” and “to”. If we define opacity from 0 to 1; 0 is considered the beginning of the animation (blur) and 1 is the ending of the animation (completely visible). If we define opacity from 1 to 0; it will ... Read More

In HTML, the RGB i.e. (red, green, and blue) specifies the shades or intensity of the color with a value between 0 and 255. The RGB color model has a total of 256 x 256 x 256 = 16777216 possible colors. By adjusting the RGB values we can come up with different shades of colors, following are a few examples − Let’s say we want a “black” color, set all the parameters as, rgb(0, 0, 0). If we want to display a “white” color, set all the parameters as, rgb(255, 255, 255). If we set the parameters as rgb(255, ... Read More

The hyperlinks, which are also known as links, are crucial components in websites nowadays. These are clickable and can be used to navigate between source webpage to different pages or the sections in the same webpage. In most of the websites, the links will appear as underlined and differently colored. Links are categorized into the following types − Unvisited Links Visited Links Active Links Let’s discuss about the links mentioned above with suitable examples further in this article. Unvisited Links In HTML, an unvisited link is a hyperlink that is not yet clicked by the user. By default, ... Read More

While developing a website, we may come across a situation where we need to create a hyperlink to another webpage or to a certain part of the webpage (these links are clickable). Additionally, there can be a situation where we need to add stylings to the content present in the website using external CSS (these are not clickable). These behaviors are achieved by using the HTML and anchor tags. HTML tag In HTML, the tag is used to link the external resources, such as CSS style sheets, or to add a favicon (small image displayed next ... Read More

Sometimes, we may have noticed links on webpages that leads us to a different webpage. In some websites, if we click on that certain links, they will open in a new browser tab or on a new window and some websites reuse one new browser tab for subsequent clicks on the link. Additionally, some websites use the same original page for the links. These behaviors are achieved by utilizing the HTML target attribute. In this article, we will explore how to use the target="blank" and target="_blank" attributes to open hyperlinks in new tabs. The Target Attribute The target is an ... Read More

A Navigation Bar is a GUI element which allows the users to navigate through a website or application. It is typically a list of links at the top or side of the screen and assists users in navigating to various areas or pages within the website. Navigation bars are implemented in operating systems, file browsers, web browsers, apps, web sites and other similar user interfaces. In this article, we are going to design an animated side navigation bar using HTML, CSS, and JavaScript. How to Create an Animated Side Navigation Bar Following are the steps to design an animated side ... Read More

In this article, we are going to create a letter-spacing animation effect using HTML and CSS. To do so, we have CSS letter-spacing property and CSS @keyframes rule. CSS Letter-spacing Property The letter-spacing property in CSS is used to set the horizontal spacing between the text characters. If we assign a positive value for this property, the character spaces will spread farther apart. If we assign a negative value for this property, it brings the characters closer together. Syntax Following is the syntax of CSS letter-spacing property − letter-spacing: value; CSS @keyframes Rule In CSS, the ... Read More

A navigation bar is part of a webpage where it contains links to appropriate sections/ pages in a website that helps users in browsing the website fast and effortlessly. The navigation bar can be implemented in many ways, but the traditional way of implementing is horizontal and vertical bars. In this article, we are going to design a vertical side navigation bar using HTML, CSS, and JavaScript. Creating a Hoverable Side Navigation Following are the steps to design hoverable side navigation buttons with HTML, CSS, and JavaScript − Step 1 − Add the following HTML code. ... Read More

In general, blur is a visual effect of human eye that happens when the viewer cannot be able to see the details of the object clearly. In HTML, we can apply the blur effect to elements on webpage (such as images) using CSS properties. To do so, we use the filter property along with the blur() function. This function applies a Gaussian blur effect to the image element, which makes it softer and less defined. Syntax Following is the syntax of the filter property with blur() function − filter: blur(radius); This function accepts a single parameter (i.e. radius) that ... Read More

The HTML tag is used to create a blinking effect on texts. The text inside this tag would flash on and off at a default rate. The main purpose of this tag is that it can draw attention of the user. However, this tag is no longer supported and it is deprecated in HTML 4.0 version and is no longer supported in modern browsers. Instead, we can use CSS animations or JavaScript as an alternative for the “” tag. Syntax Following is the syntax of HTML tag − The text to blink. Example In the ... Read More