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
Web Development Articles
Page 598 of 801
How 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 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 More