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
Front End Technology Articles
Page 495 of 652
How to create a full screen video background with CSS?
Creating a full-screen video background with CSS is a popular technique for modern websites. This effect uses a video element that covers the entire viewport, with overlay content positioned on top of it. Syntax .video-background { position: fixed; top: 0; left: 0; min-width: 100%; min-height: 100%; object-fit: cover; } Key Properties PropertyPurpose position: fixedPositions video relative to viewport min-width: 100%Ensures video covers full width min-height: 100%Ensures video covers full ...
Read MoreCSS to put icon inside an input element in a form
To place an icon inside an input element in a form using CSS, we can use Font Awesome icons and position them absolutely within a container. This technique creates an elegant and user-friendly form design. Installation: Include the Font Awesome CDN in your HTML head section to access the icon library. Syntax .inputContainer { position: relative; } .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); } .field { ...
Read MoreHow to create a comparison table with CSS?
A comparison table with CSS helps present feature comparisons in an organized and visually appealing way. These tables are commonly used to compare products, services, or pricing plans. Syntax table { border-collapse: collapse; width: 100%; } th, td { padding: value; text-align: alignment; border: border-properties; } tr:nth-child(even) { background-color: color; } Example: Basic Comparison Table The following example creates a comparison table with alternating row colors and proper ...
Read MoreHow 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 More