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 59 of 130
How to create a responsive table with CSS?
Creating a responsive table with CSS ensures that your table displays properly on all screen sizes. The key technique is using horizontal scrolling when the table becomes too wide for smaller screens. Syntax .table-container { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } Example The following example creates a responsive table that scrolls horizontally on smaller screens − body { ...
Read MoreCSS Transparency Using RGBA
Use the RGBA() values for CSS transparency. Set the alpha channel parameter to specify the opacity for color. RGBA stands for Red, Green, Blue, and Alpha, where the alpha channel controls the transparency level. Syntax selector { background-color: rgba(red, green, blue, alpha); } RGBA color value includes the rgba(red, green, blue, alpha). Here, the alpha is to be set for transparency − 0.0: fully transparent (invisible) 1.0: fully opaque (solid color) 0.1 to 0.9: varying levels of transparency Example: Semi-Transparent Background The following example demonstrates CSS ...
Read MoreCreating CSS3 Radial Gradients
CSS3 radial gradients create smooth color transitions radiating outward from a central point. The gradient forms circular or elliptical patterns, making them perfect for creating modern visual effects and backgrounds. Syntax selector { background: radial-gradient(shape size at position, color-stop1, color-stop2, ...); } Possible Values ParameterDescription shapecircle or ellipse (default) sizeclosest-side, closest-corner, farthest-side, farthest-corner positioncenter (default), top, bottom, left, right, or percentage values color-stopColors with optional position percentages Example: Basic Radial Gradient The following example creates a simple radial gradient with three colors − ...
Read MoreHow to create a zebra striped table with CSS?
To create a table on a web page, we use the element. It allows us to set the table row using the element. Within that, the elements are used to place the data. A table can also be striped. Such striped tables have a different look for every alternative row. To set a property for every alternative row, we will use the nth-child(even) property. Let us see how to create a zebra striped table with HTML and CSS. Syntax tr:nth-child(even) { background-color: color; } Example: Creating a Zebra ...
Read MoreHow to create a password validation form with CSS and JavaScript?
Creating a password validation form helps users understand password requirements in real-time. This tutorial shows how to build an interactive password validation form using CSS for styling and JavaScript for dynamic feedback. The validation system provides visual indicators showing whether password criteria are met. HTML Form Structure First, create a basic form with username and password fields. The password field includes a pattern attribute for validation ? Username Password Password Requirements Display Add ...
Read MoreHow to create custom select boxes with CSS and JavaScript?
A custom select box allows you to create a dropdown with complete control over its appearance and behavior. Unlike default HTML select elements, custom select boxes can be styled with any colors, fonts, and animations you want. Let's see how to create custom select boxes using CSS and JavaScript. Syntax .custom-select { position: relative; /* Other styling properties */ } .custom-select select { display: none; /* Hide default select */ } Basic HTML Structure First, create a container div with a ...
Read MoreHow to create a responsive navigation menu with a login form inside of it with HTML and CSS?
To create a responsive navigation menu with a login form inside of it, we use CSS flexbox and media queries to ensure the layout adapts properly across different screen sizes. Syntax nav { display: flex; justify-content: space-between; align-items: center; } @media screen and (max-width: breakpoint) { /* Responsive styles */ } Example The following example creates a navigation menu with links on the left and a login form on the right − ...
Read MoreHow to create a navigation menu with an input field inside of it?
A navigation menu with an input field is commonly used to provide users with quick search functionality within the website header. The search input is typically positioned on the right side of the navigation using CSS float property. Syntax nav { /* Navigation container styles */ } input[type="text"] { float: right; /* Input positioning and styling */ } Creating the Navigation Structure The element contains both navigation links and the search input field − ...
Read MoreHow to create a full screen search box with CSS and JavaScript?
A full screen search box is a popular UI pattern that overlays the entire viewport, providing a focused search experience. This implementation uses CSS for styling and positioning, with JavaScript to control the show/hide functionality. Key Components The full screen search box consists of three main parts − Trigger Button: Opens the search overlay Overlay Container: Full screen backdrop with search form Close Button: Hides the search overlay Example Here's how to create a complete full screen search box − body { font-family: ...
Read MoreHow to create an animated search form with CSS?
A lot of websites these days have an animated search box on the home page itself. On placing the mouse cursor within the search box, the search box width increases to make it easier for users to search. Let us see how to create such animated search form with HTML and CSS. Syntax input[type=text] { width: initial-width; transition: width duration timing-function; } input[type=text]:focus { width: expanded-width; } Method 1: Basic Width Animation First, create the search form using the element ...
Read More