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
CSS Articles
Page 58 of 130
Text 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 MoreHow to create a comparison table with CSS?
A comparison table with CSS helps present feature comparisons in an organized and visually appealing way. These tables are commonly used to compare products, services, or pricing plans. Syntax table { border-collapse: collapse; width: 100%; } th, td { padding: value; text-align: alignment; border: border-properties; } tr:nth-child(even) { background-color: color; } Example: Basic Comparison Table The following example creates a comparison table with alternating row colors and proper ...
Read More