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
Articles by AmitDiwan
Page 491 of 840
Creating 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 MoreDetect when an Element Gets Fixed in CSS position:sticky using Intersection Observer
The CSS position: sticky property allows elements to stick to a specific position when scrolling. To detect when a sticky element becomes fixed, we use the Intersection Observer API to monitor a reference element above the sticky element. Syntax .sticky-element { position: sticky; top: 0; } How Intersection Observer Detects Sticky States The Intersection Observer monitors when a reference element (placed just above the sticky element) enters or exits the viewport. When the reference element disappears from view, the sticky element becomes fixed. HTML Structure ...
Read MoreUsing WebP Images with Fallback in CSS
WebP is a modern image format that provides superior compression compared to JPEG and PNG. To use WebP images while maintaining compatibility with older browsers, we can implement fallback mechanisms using the element and CSS. Syntax How It Works The browser evaluates elements in order and uses the first supported format. If WebP is supported, it loads the WebP image; otherwise, it falls back to JPEG or PNG. The element serves as the final fallback. Example ...
Read MoreCrop Images in CSS with object-fit and object-position
CSS object-fit and object-position properties help us crop images and specify how they are displayed within their container elements. The object-fit property controls how an image is resized to fit its container, while object-position determines the alignment of the image within the container. Syntax selector { object-fit: value; object-position: value; } Object-fit Values ValueDescription fillStretches the image to fill the container (default) containScales image to fit container while maintaining aspect ratio coverScales image to cover container while maintaining aspect ratio scale-downBehaves like contain or none, ...
Read MoreSelecting Child Elements with CSS
CSS provides several combinators to select child elements and descendants of a parent element. The most commonly used are the child combinator (>) and the descendant combinator (space), along with pseudo-selectors like :nth-child(). Syntax /* Child combinator - selects direct children only */ parent > child { property: value; } /* Descendant combinator - selects all descendants */ parent descendant { property: value; } /* nth-child selector - selects specific child position */ element:nth-child(n) { property: value; } Child Combinator The child combinator (>) selects only the direct child elements of a ...
Read MoreSelecting Sibling Elements with CSS
To select sibling elements with CSS, we can use the adjacent or the general sibling selectors. Let us understand them one by one with examples. Both of them allow selecting sibling elements that share the same parent element. Syntax /* Adjacent sibling selector */ selector1 + selector2 { property: value; } /* General sibling selector */ selector1 ~ selector2 { property: value; } Adjacent Sibling Selector (+) The adjacent sibling selector (+) matches an element that occurs immediately after the first selector. Both elements must ...
Read More