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 57 of 130
How to create an overlay effect with CSS?
The overlay effect is a useful web design technique that displays content on top of the main page content. It creates a modal-like experience where a semi-transparent layer covers the entire page, often used for popups, image galleries, or forms. Syntax .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999; display: none; } ...
Read MoreHow to create a \"user rating\" scorecard with CSS?
A user rating scorecard displays star ratings with progress bars showing the distribution of ratings. This creates an interactive visual representation of user feedback, commonly seen on e-commerce and review websites. Syntax /* Basic structure for rating scorecard */ .rating-container { display: flex; flex-direction: column; } .progress-bar { width: percentage; height: fixed-height; background-color: color; } Setting Up Font Awesome Icons First, include the Font Awesome CDN to access star icons − ...
Read MoreHow to create a simple "star rating" look with CSS?
Creating a star rating system with CSS allows you to display visual feedback for user ratings using star icons. You can use Font Awesome icons or Unicode symbols to create attractive, customizable star ratings. Syntax .star { font-size: size; color: color; } .rated { color: rating-color; } Method 1: Using Font Awesome Icons This approach uses Font Awesome's star icons with custom CSS styling − body { ...
Read MoreHow to create a preloader with CSS?
A preloader as the name suggests loads when the web page is loaded. Consider it as a loading page or a loading screen before the content on the web page is visible. With CSS, we can easily create a preloader and can also style it using the border properties. The animation for the loader is set with keyframes. Syntax .loader { border: size style color; border-radius: 50%; animation: name duration timing-function iteration-count; } @keyframes name { 0% { transform: rotate(0deg); ...
Read MoreHow to create a \"to-do list\" with CSS and JavaScript?
A to-do list allows you to manage your tasks effectively. When you type what needs to be done and press Enter, the task gets added to the list, and you can continue adding more tasks or click on existing ones to remove them. Syntax /* Input styling */ .todoInput { padding: value; width: value; font-size: value; border: value; } /* List item styling */ li { list-style: none; padding: value; ...
Read MoreHow to create a collapsible section with CSS and JavaScript?
A collapsible section allows you to show and hide content dynamically by clicking on a trigger element. This is commonly used for FAQs, accordions, and content organization. We'll use CSS for styling and JavaScript for the toggle functionality. HTML Structure The basic structure consists of a button (trigger) and a content div that will be shown/hidden − Click to Toggle Hidden content goes here CSS Styling The CSS defines the appearance and initial state. The content is hidden by default using display: none − .collapse ...
Read MoreHow to create popups with CSS and JavaScript?
A popup is a modal window that appears on top of the main content when triggered by user interaction. Creating popups with CSS and JavaScript involves styling the popup elements and adding interactive functionality to show and hide the modal. Syntax .popup { display: none; position: fixed; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } ...
Read MoreChange 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 More