Fading is a visual representation of a gradual transition between two states of visibility. We can perform fading animation using the @keyframes rule and opacity property in CSS3. In this article we are having two div boxes with some written content in the child div. Our task is to apply fading text animation effect using CSS3. Types of Fading Animation There are two types of fading animations which are listed below: Fade-In Text Animation Fade-Out Text Animation Fade-In Text Animation Fade-in text animation makes a text appear gradually from ... 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

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

In general, we use the box model to define all these properties to use them together. Box model is a model that is used to define the different CSS properties that a box contains like the margin, border, padding and the most important content. A box model in CSS generally defines the properties like margin, border, padding and the content. Before understanding how to use padding, margin, border and content to fit together in a box model. Let us understand what these properties actually does when they applied on a container. Content − The content is the most important and ... Read More

Overview A flip toggle switch is a “on / off” like switch which changes the state of the HTML element from one form to another. By using the jQuery mobile we can create a responsive attractive flip toggle switch. So to create a flip toggle jQuery provides an attribute value as “fieldcontain”, this value is set to the attribute named as data−role. The data−role attribute is set to the fieldcontain in a div container which provides the property to the container as flip toggle switch. To create a basic flip toggle use the data−role value as a slider in the ... Read More

Overview The jQuery mobile provides many icons packs which we can access using as a value in the data−icon attribute. As all these icons are used as the buttons so by using the basic HTML button we can use the data−icon attribute. The jQuery mobile provides responsive user interface content to the web pages with the attractive icons. Instead of using the HTML button tag we can also use the HTML anchor tag and set the attribute data role as button so the anchor tag will behave like a button and after this we will use the data icon attribute ... Read More

Overview Nowadays most of the pages are dynamic in nature, the dynamic page means that it changes the content with respect to the user. Dynamic pages cannot be built by simply HTML and CSS because it will provide the page static nature only, so to make the web page dynamic we have to use the scripting language such as javascript or jQuery. We can make the page dynamic in many ways such as when a user enters his credentials to the page he can retrieve the information regarding his credentials. The dynamic page also represents those web pages which can ... Read More

Overview Cascading Styles Sheet (CSS) animation provides the HTML element a movement on the page. To achieve the drawing effect animation we need to have prior knowledge on the HTML svg element, path element and for CSS we should have knowledge on the animation and keyframe properties. As the svg element provides a space to build a custom image which can be inserted using the element. So to make the drawing animation we should have the knowledge to build the svg strokes. The svg path element has the following point data to build the strokes these data points are: ... Read More

Overview A flip toggle switch is a button which is used to change any element's state, from one state to another. The jQuery mobile is a library which maintains the user interface for the web pages. The jQuery mobile provides some of the data−role attributes value with some of its predefined classes which provides a good look from the normal basic interface to the user. Like that a “fieldcontain” is also an attribute value of the attribute data−role. The data−role attribute provides the property to the element to which it is added, if the data−role value of the attribute is ... Read More