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
Articles by AmitDiwan
Page 500 of 840
How to stretch elements to fit the whole height of the browser window with CSS?
To stretch elements to fit the whole height of the browser window, use the height property and set it to 100%. This technique requires setting the height on both the HTML document and the container element. Syntax html, body { height: 100%; margin: 0; } .container { height: 100%; } Method 1: Using Percentage Height The most common approach is to set the HTML document and body to 100% height, then apply the same to your container element − ...
Read MoreHow to create different shapes with CSS?
CSS allows you to create various geometric shapes on web pages using properties like border-radius, border, and clip-path. These properties can transform simple HTML elements into circles, rectangles, squares, triangles, and more complex shapes. Syntax /* Basic shape properties */ border-radius: value; border: width style color; clip-path: shape-function; Create a Circle A circle is created by setting border-radius to 50% on a square element − .circle { width: 100px; ...
Read MoreHow to create arrows with CSS?
With CSS, we can easily design arrows on a web page. This includes the top, bottom, left, and right arrows. Arrow is created using the border properties and then rotated to form an arrow. The rotation is performed using the rotate() method of the transform property. Syntax .arrow { border: solid color; border-width: 0 width width 0; display: inline-block; padding: size; transform: rotate(angle); } Basic Arrow Structure The foundation of CSS arrows uses border ...
Read MoreHow to add transition on hover with CSS?
The CSS transition property allows you to create smooth animations when an element's properties change, such as on hover. Transitions provide a way to control the speed and timing of these changes, making your website more interactive and visually appealing. Syntax selector { transition: property duration timing-function delay; } selector:hover { /* Properties to change */ } Transition Properties PropertyDescription transition-propertyThe CSS property to which the transition is applied transition-durationHow long the transition takes to complete (in seconds or milliseconds) transition-timing-functionThe speed curve of ...
Read MoreHow to center a button element vertically and horizontally with CSS?
To center a button vertically and horizontally with CSS, use the justify-content and align-items properties with flexbox. This creates perfect centering for button elements within their container. Syntax .container { display: flex; justify-content: center; align-items: center; height: value; } The Justify-content Property In CSS, the justify-content property is used to align the items horizontally. The syntax of CSS justify-content property is as follows − Selector { display: flex; ...
Read MoreHow to center an element vertically and horizontally with CSS?
To center an element vertically and horizontally with CSS, use the justify-content and align-items properties with flexbox. This is one of the most reliable and modern methods for achieving perfect centering. Syntax selector { display: flex; justify-content: center; align-items: center; } The Justify-content Property In CSS, the justify-content property is used to align flex items horizontally along the main axis. The syntax is as follows − selector { display: flex; justify-content: value; ...
Read MoreHow to zoom/scale an element on hover with CSS?
To zoom/scale an element on hover with CSS, we can use the transform: scale() function or the zoom property. These techniques create smooth hover effects that enhance user interaction by making elements appear larger when the mouse cursor hovers over them. Syntax /* Using transform scale */ selector:hover { transform: scale(value); } /* Using zoom property */ selector:hover { zoom: value; } Method 1: Using transform scale() The transform: scale() function is the recommended approach as it's part of the CSS3 standard and provides better ...
Read MoreHow to create a tree view with CSS and JavaScript?
A tree view is an expandable/collapsible hierarchical structure commonly used to display folder structures or nested data. This interface allows users to click on parent nodes to reveal or hide their children, creating an interactive navigation experience. Syntax /* Basic tree view structure */ .tree-root { cursor: pointer; user-select: none; } .tree-root::before { content: "\25B6"; /* Right arrow */ transform: rotate(0deg); transition: transform 0.3s; } .tree-root.expanded::before { transform: rotate(90deg); /* Down ...
Read MoreHow to switch between dark and light mode with CSS and JavaScript?
To switch between dark and light mode with CSS and JavaScript, you can use CSS classes to define the different themes and JavaScript to toggle between them dynamically. Syntax /* CSS for light mode (default) */ body { background-color: white; color: black; } /* CSS for dark mode */ .dark-mode { background-color: black; color: white; } Example The following example demonstrates how to create a toggle button that switches between light and dark themes − ...
Read MoreHow to create a responsive pricing table with CSS?
Creating a responsive pricing table with CSS allows you to display comparison plans that adapt seamlessly across different devices. These tables are commonly used on web hosting websites and membership platforms to showcase features of various plans like free, business, and enterprise tiers. Syntax .pricing-container { display: flex; flex-wrap: wrap; } @media (max-width: 600px) { .pricing-container { flex-direction: column; } } Example: Responsive Pricing Table The following example creates ...
Read More