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
Web Development Articles
Page 585 of 801
How to display the file format of links using CSS?
While browsing through a web page, you come across various documents which can be downloaded. Sometimes, you need to download a document but in different file format. However, you may have a problem in finding the document of your desired file format because there are various links each containing different file formats. It can be .docx, .png, .txt, .pdf etc. Generally, file formats are not specified along with the links. So, we cannot know the type of file format just by looking the links. In this article, you will learn how to display the file format of links on ...
Read MoreRevealing Hidden Elements by CSS Animations
CSS animations allow us to reveal hidden elements with smooth transitions and effects. Elements can be hidden using the opacity: 0 property and revealed through hover interactions, creating engaging user experiences. Syntax selector { opacity: 0; /* Hide element */ transition: opacity duration; } selector:hover { opacity: 1; /* Reveal element */ animation: keyframe-name duration timing-function; } @keyframes keyframe-name { 0% { /* starting state */ } 100% { /* ending ...
Read MoreHow to Add CSS Rules to a Stylesheet with JavaScript?
The insertRule() method helps us add CSS rules to a stylesheet dynamically using JavaScript, while deleteRule() removes existing rules. These methods allow you to modify styles programmatically without editing the original CSS code. Syntax // Insert a rule stylesheet.insertRule(rule, index); // Delete a rule stylesheet.deleteRule(index); Method 1: Insert a CSS Rule To insert a rule at a defined position, use the insertRule() method. First, get the stylesheet using getElementById() and access its sheet property − body { ...
Read MoreAuto Grow a Textarea with JavaScript in CSS
Auto-growing textareas improve user experience by dynamically adjusting their height based on content length. This eliminates the need for scrollbars and provides a seamless typing experience. We can achieve this functionality using JavaScript to monitor content changes and CSS to control the visual appearance. Syntax textarea { resize: none; overflow: hidden; min-height: initial-height; } Method 1: Basic Auto-Growing Textarea This example demonstrates a simple auto-growing textarea that expands vertically as content is added − ...
Read MoreCreating a Page with Sidebar and Main Content Area using HTML & CSS
A webpage with a sidebar and main content area can be created using various CSS techniques. The most common approach is to create a layout where the sidebar takes up a fixed percentage of the width while the main content area fills the remaining space. Syntax .container { display: table; width: 100%; height: 100vh; } .sidebar { display: table-cell; width: percentage; } .main-content { display: table-cell; width: ...
Read MoreCreating a Full Height Page with Fixed Sidebar and Scrollable Content Area in CSS
A full-height page with a fixed sidebar and scrollable content area is a common layout pattern in web design. This layout uses CSS positioning to create a sidebar that remains fixed while the main content area can scroll independently. Syntax /* Fixed Sidebar */ .sidebar { position: fixed; height: 100%; width: sidebar-width; } /* Main Content */ .main { margin-left: sidebar-width; height: 100vh; overflow-y: auto; } Example The following ...
Read MoreTyping and Deleting Effect with JavaScript and CSS
With the help of CSS animations, we can create a typewriter typing and deleting effect using JavaScript. The infinite effect continuously cycles through words, typing them character by character and then deleting them to create an engaging visual animation. Syntax @keyframes animationName { to { opacity: value; } } selector { animation: name duration iteration-count; } HTML Structure First, create a container with two paragraph elements − one for the text and another for the cursor: ...
Read MoreSome Lesser-Known CSS Properties for Form Input Fields
CSS provides several lesser-known properties that can enhance form input fields and text elements. The tab-size property controls the width of tab characters, pointer-events determines element interactivity, and caret-color customizes the cursor color in input fields. The tab-size Property The CSS tab-size property sets the width of tab characters in text elements. This property is particularly useful when displaying preformatted text or code. Syntax tab-size: value; Possible Values ValueDescription numberNumber of space characters (default is 8) lengthLength in px, em, rem, etc. Example The following example demonstrates different ...
Read MoreHow to Create a Parallax Scrolling Effect in CSS?
Parallax scrolling creates a visually appealing effect where background elements move at different speeds than foreground content during scrolling. This technique is commonly used on modern websites to add depth and visual interest. Syntax selector { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; min-height: value; } Key Properties for Parallax Effect PropertyValueDescription background-attachmentfixedMakes background image stay fixed while content scrolls background-positioncenterCenters the background image background-sizecoverScales image to cover entire container min-heightpx/%/vhSets minimum ...
Read MoreHow to Create an On Scroll Fixed Navigation Bar with CSS?
A fixed navigation bar stays at the top of the page when users scroll down. This is achieved using CSS position: fixed property combined with JavaScript to detect scroll events and apply the sticky behavior dynamically. Syntax selector { position: fixed; top: 0; width: 100%; } Method 1: JavaScript−Based Sticky Navigation This method uses JavaScript to detect when the user scrolls and applies the sticky class dynamically ? body { ...
Read More