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
HTML Articles
Page 141 of 151
Create a Sticky Social Media Bar using HTML and CSS
A sticky social media bar is a fixed navigation element that remains visible while users scroll through your website. It provides easy access to your social media profiles and helps increase engagement and followers. Using CSS, we can create an animated sticky bar that slides out on hover without affecting your website's performance. Syntax .social-container { position: fixed; right: -width; transition: all 0.25s ease-in-out; } .social-item:hover { margin-left: -slide-distance; } Example: Right-Side Sticky Social Bar The following ...
Read MoreDesign a calendar using HTML and CSS
To design a calendar using HTML and CSS, we will be using HTML tables. We use calendar in our daily life to check the dates, schedule any event and many more. In this article, we will understand how we can design a calendar using HTML and CSS only. We will be using HTML table to create the structure and use CSS properties to design the UI of calendar. Steps to Design a Calendar Using HTML and CSS We will be following below mentioned steps to design a calendar using HTML and CSS − ...
Read MoreDesign a Rotating card effect using HTML and CSS
The rotating card effect creates an engaging visual experience where cards spin when you hover over them, revealing additional content on the back side. This effect is achieved using CSS 3D transforms and transitions. Syntax .card-container { perspective: value; } .card { transform-style: preserve-3d; transition: transform duration; } .card:hover { transform: rotateY(180deg); } .card-side { backface-visibility: hidden; } Key CSS Properties PropertyDescription perspectiveDefines the distance from the viewer to the ...
Read MoreDesign a Contact us Page using HTML and CSS
It really doesn't make sense to have a contact form on a website without one, much like a burger without a bun. If your business is online, you must have a method for clients to get in touch with you. A "Contact Us" form is an online form that website users can use to submit messages or requests to the website's owners or operators. It provides customers with an easy way to get in touch with the company without requiring them to use traditional contact methods like phone calls or emails. The data is often forwarded to the recipient's ...
Read MoreApply Glowing Effect to the Image using HTML and CSS
You have probably seen several special effects while browsing the majority of websites, which may be viewed when your cursor is over various images. We are going to process same in this article. Such images could serve as cards for our website. The task we are going to perform in this article is to apply a glowing effect to images using HTML and CSS. This effect can be accomplished by using the box-shadow property. Let's dive into the article to learn more about applying the glowing effect. Syntax selector { box-shadow: none ...
Read MoreHow to Reduce Space Between Elements on a Row in CSS Bootstrap?
Bootstrap's grid system creates automatic spacing (called "gutters") between columns using padding and margins. Sometimes you need to reduce or remove this space to create tighter layouts. Here are several methods to control spacing between elements in Bootstrap rows. Method 1: Using no-gutters Class The simplest method is to add the no-gutters class to your row. This removes all gutters between columns − Bootstrap No Gutters Example Regular Row (with gutters) ...
Read MoreHTML Docs Not Updating from CSS
When working with HTML and CSS, a common issue is when CSS styling doesn't reflect in your HTML document despite being properly linked. This problem is particularly frequent in Django web applications where static files need special handling. Common Causes and Solutions Issue 1: Incorrect MIME Type The most common mistake is using an incorrect type attribute in the link tag − ...
Read MoreHow to Create StopWatch using HTML CSS and JavaScript ?
To create a stopwatch using HTML, CSS, and JavaScript, we need a basic understanding of these three technologies. HTML creates the structure, CSS styles the interface, and JavaScript adds the functionality for timing operations. In this tutorial, we will create a stopwatch with Start, Stop, and Reset functionality − Creating Structure of Stopwatch using HTML We use a structured approach with div elements to organize our stopwatch components − The outer align div centers the stopwatch on the screen The container div holds all stopwatch elements ...
Read MoreCreate a 3D Text Effect using HTML and CSS
In web design, 3D text effects add depth and visual appeal to content. The text-shadow property is the primary CSS tool for creating these effects by applying multiple shadows with different offsets and colors to simulate depth. Syntax text-shadow: h-offset v-offset blur-radius color; To create a 3D effect, we apply multiple text-shadow values separated by commas, each with different offset positions to build up layers of depth. Example 1: Simple 3D Text with Hover Effect The following example creates a basic 3D text effect that appears on hover − ...
Read MoreHow to Create Image Accordion using HTML and CSS?
An image accordion is a popular web interface element that allows users to expand and collapse image sections for an interactive browsing experience. This technique creates a smooth, space-efficient way to display multiple images where only one section is fully visible at a time. Syntax .accordion-container { display: flex; } .accordion-item { flex: 1; transition: all 0.3s ease; cursor: pointer; } .accordion-item:hover { flex: expanded-ratio; } What is an Accordion? An accordion ...
Read More