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
Front End Technology Articles
Page 494 of 652
Change Image Opacity on Mouse Over
The CSS opacity property combined with the :hover selector allows you to create interactive effects by changing an image's transparency when users hover over it. This technique is commonly used to create smooth visual feedback for image galleries, buttons, and interactive elements. Syntax selector { opacity: value; transition: duration; } selector:hover { opacity: value; } Possible Values ValueDescription 0Completely transparent (invisible) 0.1 to 0.9Semi-transparent with varying levels 1Completely opaque (normal visibility) Example 1: Semi-Transparent on Hover The ...
Read MoreHow 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 MoreHow to create custom range sliders with CSS and JavaScript?
A range slider is an HTML input element that accepts the type "range". It allows users to select a numeric value within a specified range by dragging a slider handle. Syntax input[type="range"] { -webkit-appearance: none; width: 300px; height: 20px; background: #ddd; border-radius: 5px; } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; background: #007bff; border-radius: 50%; ...
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 More