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 503 of 840
How to create a \"card\" with CSS?
CSS cards are containers that hold information in an organized and visually appealing way. You'll commonly see cards used to display user profiles, product listings, or article previews. CSS provides several properties like box-shadow, border-radius, and padding to create professional-looking card components. Syntax .card { box-shadow: horizontal vertical blur spread color; border-radius: value; padding: value; background-color: color; } Basic Card Structure A typical card consists of an image, header, and content text wrapped in a container element − ...
Read MoreHow to create contact chips with CSS?
Contact chips are compact UI elements that display a person's profile image alongside their name in a pill-shaped container. They are commonly used to show team members, contacts, or support staff in a clean, organized manner on web pages. Syntax .chip { display: inline-block; padding: 0 25px; height: 50px; border-radius: 25px; /* other styling properties */ } HTML Structure First, create the HTML structure for contact chips. Each chip contains a profile image and ...
Read MoreHow 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 More