Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
A flip card with CSS creates an interactive element that rotates to reveal content on the back when hovered. This effect uses CSS transforms and 3D perspective to create a smooth flipping animation. Syntax .flip-container { perspective: 1000px; } .flip-card { transform-style: preserve-3d; transition: transform 0.6s; } .flip-container:hover .flip-card { transform: rotateY(180deg); } .front, .back { backface-visibility: hidden; } .back { transform: rotateY(180deg); } Key Properties ... Read More
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 More
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 More
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 More
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 More
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 More
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 More
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 More
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 More
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 More