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 6 of 130
HTML and CSS Projects
To build your career in front-end development, projects are essential and you should start with HTML and CSS. Before starting these projects, we recommend creating basic components like layouts, lists, tables, and forms. HTML Structure CSS Styling Projects ...
Read MoreHow to disable form fields using CSS or JavaScript?
Form fields can be disabled using CSS or JavaScript to prevent user interaction when certain conditions are met. This is useful for creating read-only forms, conditional inputs, or preventing submission before validation. Syntax /* CSS approach */ selector { pointer-events: none; opacity: value; } /* HTML disabled attribute */ Method 1: Disable Form Fields with CSS To disable form fields with CSS, we use the pointer-events property to prevent mouse interactions and opacity to provide visual feedback. The pointer-events: none disables all mouse events, ...
Read MoreHow to add a Login Form to an Image using HTML and CSS?
A login form on an image creates an attractive, modern website design commonly used by restaurants, event organizers, and businesses. This approach overlays a functional login form on a background image, making the website more visually appealing than standard forms. Syntax .container { background-image: url('image-path'); background-size: cover; position: relative; } form { position: absolute; /* positioning and styling properties */ } Approach To create a login form on an image, follow these steps ...
Read MoreCreating a Navigation Bar with three Different Alignments using CSS
In HTML, a navigation bar is a group of buttons and images arranged either in a row or a column and used as a control site for linking particular webpages. It is regarded as one of the fundamental tools used in web design. Without affecting the content of the pages, the HTML navigation bar separates structure from content and adds creativity to the layout of the website. Using HTML, we create a navigation bar, and CSS gives it a beautiful appearance. Additional functionality may be added using JavaScript. In HTML, a navigation bar can be implemented in a variety ...
Read MoreCreate a Circular Progress Bar using HTML and CSS
A progress bar displays the status of a procedure within an application. A progress bar shows how much of the process has already been completed and how much is still left to do. The various components of the progress bar will be designed using HTML, and the progress bar itself may be modified using CSS properties. Progress bars are frequently used on websites to highlight particular data in a more appealing way for users. One advantage of employing a circle progress bar over a standard (horizontal) progress bar is that you can accommodate more progress bars in one row, ...
Read MoreCreate a Search Bar using HTML and CSS
To create a search bar using HTML and CSS, we can use simple form elements and basic CSS properties. A search box is one of the most commonly used components in a website which makes navigation easier for users. Syntax /* Basic search bar structure */ .search-container { display: flex; align-items: center; } input[type="text"] { padding: value; border: value; border-radius: value; } button { padding: value; background-color: ...
Read MoreCreate 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 More