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 504 of 840
How to Create CSS3 Keyframe Animations?
CSS3 keyframe animations allow you to create smooth, custom animations by defining specific animation steps. Keyframes control the intermediate steps of an animation sequence, letting you specify exactly how an element should change over time. Syntax @keyframes animationname { selector { styles; } } Where: animationname − The name of the animation selector − The keyframe selector (percentage of animation duration or from/to) styles − The CSS style properties to apply at this keyframe Example: ...
Read MoreText in Transparent Box using CSS3
The CSS opacity property is used to create transparent text boxes with background images. This technique allows you to overlay text content on images while maintaining readability through controlled transparency effects. Syntax .element { opacity: value; background: url("image-path") repeat; } Possible Values ValueDescription 0Completely transparent (invisible) 0.1 - 0.9Semi-transparent (decimal values) 1Completely opaque (default) Example: Text in Transparent Box The following example creates a transparent text box with a background image − ...
Read MoreHow to create a skill bar with CSS?
If you want to display a skill bar stating the proficiency of a skill, then create a skill bar. Let's say we are showing programming proficiency that a student is proficient in which programming language. Create a skill bar and display the proficiency in percentage with different colors for different skills. Let us see how to create a skill bar with CSS. Syntax .container { width: 100%; background-color: color; border-radius: value; } .skill-bar { width: percentage%; ...
Read MoreHow to create a scroll indicator with CSS and JavaScript?
A scroll indicator is a visual progress bar that shows how much of a webpage has been scrolled. As users scroll down, the indicator fills up proportionally, providing visual feedback about their reading progress through the content. Syntax /* Fixed header with progress container */ .header { position: fixed; top: 0; width: 100%; } .progressContainer { width: 100%; height: value; background: color; } .progressBar { height: value; ...
Read MoreBuilding Tooltip using CSS
A tooltip is used to display extra information when a user hovers over an element. The tooltip text can be positioned in different directions such as top, bottom, right, and left using CSS positioning properties. Syntax .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } Basic Tooltip Structure To create a tooltip, you need ...
Read MoreHow to create a delete confirmation modal with CSS and JavaScript?
A delete confirmation modal is a popup window that asks users to confirm before performing a destructive action like deleting data. This helps prevent accidental deletions and provides a better user experience. Syntax .modal { display: none; position: fixed; z-index: 1; background-color: rgba(0, 0, 0, 0.4); } Example The following example creates a complete delete confirmation modal with CSS styling and JavaScript functionality − body { ...
Read MoreAdvance CSS layout with flexbox
CSS Flexbox is a powerful layout mode that provides an efficient way to arrange, distribute, and align elements within a container. It solves common layout challenges like centering content, creating equal-height columns, and building responsive designs with minimal code. Syntax /* Create a flex container */ .container { display: flex; } /* Flex container properties */ .container { flex-direction: row | column; flex-wrap: nowrap | wrap; justify-content: flex-start | center | space-between; align-items: stretch | center ...
Read MoreHow to create a Modal Box with CSS and JavaScript?
A modal box is a popup window that displays on top of the current page content. It requires CSS for styling and positioning, and JavaScript for interactive functionality like opening and closing. Syntax .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; height: 100%; background-color: ...
Read MoreHow to create a full screen video background with CSS?
Creating a full-screen video background with CSS is a popular technique for modern websites. This effect uses a video element that covers the entire viewport, with overlay content positioned on top of it. Syntax .video-background { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; object-fit: cover; } Key Properties PropertyPurpose position: fixedPositions video relative to viewport min-width: 100%Ensures video covers full width min-height: 100%Ensures video covers full ...
Read MoreCSS to put icon inside an input element in a form
To place an icon inside an input element in a form using CSS, we can use Font Awesome icons and position them absolutely within a container. This technique creates an elegant and user-friendly form design. Installation: Include the Font Awesome CDN in your HTML head section to access the icon library. Syntax .inputContainer { position: relative; } .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } .field { ...
Read More