Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML Articles
Page 148 of 151
How to create sliding text reveal animation using HTML and CSS?
Sliding text reveal animations create engaging visual effects that bring text to life on web pages. These animations typically reveal text by sliding it into view from different directions, creating a smooth and professional appearance that enhances user experience. Syntax @keyframes animationName { 0% { /* initial state */ } 50% { /* intermediate state */ } 100% { /* final state */ } } selector { animation: animationName duration timing-function; } Method 1: Simple Sliding Text Reveal ...
Read MoreA text- portrait using CSS?
Creating a text portrait using CSS is an interesting visual effect where text is clipped to form the shape of an image. This technique uses CSS background-clip property to make text appear as if it's cut from an image, creating an artistic text portrait effect. Syntax selector { background: url('image-path'); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: cover; background-position: center; } Key CSS Properties Used PropertyPurpose -webkit-background-clip: textClips the background to the text shape -webkit-text-fill-color: ...
Read MoreHow to style every element that have adjacent item right before it?
The CSS adjacent sibling selector allows you to style elements that come immediately after another element. This selector uses the plus (+) symbol to target elements that share the same parent and are positioned directly next to each other in the HTML structure. Syntax former_element + target_element { /* CSS properties */ } The adjacent sibling selector will only select the first element that immediately follows the specified element. Both elements must share the same parent element. Example: Basic Adjacent Sibling Selection The following example demonstrates how to style ...
Read MoreHow to scroll to a particular element or skip the content in CSS?
When visiting websites, users often need to skip irrelevant content and jump directly to sections they're interested in. CSS provides several methods to enable smooth scrolling to specific elements on the same page, improving user navigation and experience. Syntax /* CSS scroll behavior */ html { scroll-behavior: smooth; } /* Target pseudo-class for highlighting */ section:target { /* styles for targeted element */ } Method 1: Using CSS scroll-behavior Property The scroll-behavior property enables smooth scrolling when navigating to anchor links. This method works with ...
Read MoreHow to create a Non-Rectangular Header using HTML & CSS
A non-rectangular header adds visual appeal to web pages by breaking away from traditional rectangular layouts. Using CSS's clip-path property, we can create custom shapes for headers that make our designs stand out. Syntax header { clip-path: polygon(coordinates); } Basic Approach To create a non-rectangular header, we use the following steps − Create a element with content Apply the clip-path CSS property with polygon coordinates Position content appropriately within the clipped area Example 1: Wavy Bottom Header Here's how to create a header with a ...
Read MoreCreate the Indian Flag using HTML and CSS
To create the Indian flag using HTML and CSS, we will need to have good understanding of CSS. Indian flag have three colors: saffron, white and green and Ashoka Chakra at the middle. In this article, we will be creating stepwise Indian flag. First making a pole then tricolor and then rotating Ashoka chakra all with the help of HTML and CSS only. Later we will be animating our flag with wave animation and flag movement. Basic Structure We will start by creating the basic HTML structure for our Indian flag − ...
Read More10 CSS Functions every Front-end Developer should know
CSS (Cascading Style Sheets) is a stylesheet language used for describing the look and formatting of a document written in HTML. CSS functions provide powerful, reusable solutions for common styling tasks, making code more maintainable and dynamic. In this article, we will explore 10 essential CSS functions that every frontend developer should know. These functions can significantly improve your styling workflow and create more flexible, responsive designs. Unlike functions in other programming languages, CSS functions focus on visual presentation rather than logic. They help calculate values, manipulate colors, select elements, and transform visual properties efficiently. The main ...
Read MoreHow does auto property work in margin: 0 auto in CSS?
The margin: 0 auto property is a commonly used CSS technique that horizontally centers elements within their container. The "auto" value for the left and right margins is what enables this centering to occur. Syntax selector { margin: top-bottom left-right; } /* For centering */ selector { margin: 0 auto; } How Auto Property Works When you set margin: 0 auto, you're actually setting four margin values − Top and bottom margins: Set to 0 Left and right margins: Set to "auto" ...
Read MoreHow to specify no border in CSS
The CSS border property can add visual definition to elements, but sometimes you need to remove borders entirely. This article demonstrates how to specify no border in CSS using different techniques. Syntax selector { border: none; /* or */ border: 0; /* or */ border-width: 0; } Method 1: Using border-width Property Setting border-width: 0 makes the border invisible by reducing its width to zero − ...
Read MoreHow to remove input background on select in CSS
The default styling for HTML form elements can often be somewhat dull and uninspiring. One element that is often in need of a design overhaul is the select input, which is used to present users with a list of options to choose from. In this article, we will show you how to remove the default background of the select input using CSS. By doing so, you will be able to customize the appearance of your select inputs and make them more visually appealing and in line with the overall design of your website or application. Syntax ...
Read More