Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Economics & Finance
In CSS, the z-index property controls the stacking order of overlapping elements. Elements with higher z-index values appear in front of elements with lower values, creating a layered effect. The z-index property has specific limits: the maximum value is 2147483647 and the minimum value is -2147483647. These numbers represent the maximum and minimum values of a 32-bit signed integer. Note − The z-index property only works with positioned elements (relative, absolute, fixed, or sticky). It has no effect on elements with static positioning. Syntax selector { z-index: value; } ... Read More
To set the opacity only to background color not on the text in CSS, you can use RGBA or HSLA color values with an alpha channel. This technique is particularly useful for creating overlays, cards, or popups where you want the background to be semi-transparent while keeping the text fully opaque. Syntax /* Using RGBA */ selector { background-color: rgba(red, green, blue, alpha); } /* Using HSLA */ selector { background-color: hsla(hue, saturation, lightness, alpha); } Method 1: Using RGBA Values The RGBA color model ... Read More
In statistics, data variability measures how dispersed values are in a sample. Two key measures are Absolute Deviation (difference of each value from the mean) and Mean Absolute Deviation (MAD) (average of all absolute deviations). NumPy provides efficient functions to calculate both. Formulas $$\mathrm{Absolute\:Deviation_i = |x_i - \bar{x}|}$$ $$\mathrm{MAD = \frac{1}{n}\sum_{i=1}^{n}|x_i - \bar{x}|}$$ Where xi is each data point, x̄ is the mean, and n is the sample size. Absolute Deviation Calculate the absolute deviation for each element in a data sample ? from numpy import mean, absolute data = [12, ... Read More
To set the limit of text length to N lines, it can help in more organized presentation of text and better readability. This process is also known as truncating. In this article we will be understanding different approaches to truncate the text. In this article, we are having a div element with some text content in it. Our task is to limit the text length to N lines using CSS. Syntax /* For single line truncation */ selector { overflow: hidden; white-space: nowrap; text-overflow: ... Read More
To make a div horizontally scrollable we will need to use the CSS overflow property. In this article we will show all the possible ways to make div horizontally scrollable. First, let's understand why we need to make a div horizontally scrollable. For example, the width of the parent div element is 500px, or the screen size is 500px. Now, the content of the div element is 1500px. So, if we don't make the parent div horizontally scrollable, it breaks the UI of the application. So, we can make it scrollable, and users can scroll to see the invisible ... Read More
Nested accordion menus are an effective way to organize and present large amounts of information in a compact and intuitive manner. With Google Accelerated Mobile Pages (AMP), you can create fast-loading, interactive nested accordions using the amp-accordion component. Syntax Header Accordion Attributes AttributeDescription expand-single-sectionOnly one section can be expanded at a time animateAdds animation when expanding/collapsing disable-session-statesDisables state persistence between page loads Required Scripts Include these scripts in your HTML head section: ... Read More
Parallax scrolling is a visual effect that creates depth by moving background elements at different speeds than foreground content. Using multiple background images with CSS animations, you can create engaging parallax effects that add movement and dimension to your web pages. Syntax .container { background-image: url(image1.jpg), url(image2.jpg); animation: parallax-move duration linear infinite; } @keyframes parallax-move { 0% { transform: translateX(0); } 100% { transform: translateX(-100px); } } Key Properties background-image Property The background-image property allows you ... Read More
The CSS transform-origin property allows you to control the base placement (anchor point) of rotated elements. By default, elements rotate around their center, but you can change this to any point to achieve different visual effects. Syntax selector { transform: rotate(angle); transform-origin: x-position y-position; } Transform-Origin Values ValueDescription centerDefault - rotates around the center point top leftRotates around the top-left corner bottom rightRotates around the bottom-right corner 50% 0%Uses percentages for precise positioning 20px 10pxUses pixel values for exact positioning Example 1: Default ... Read More
CSS has developed from simple style sheets to a powerful language that can create complex and intricate layouts and designs. One of the most exciting features of CSS is to create 3D elements on web pages. With CSS 3D transforms, we can now create attractive 3D effects that were once only possible with JavaScript or Flash. In this article, we will explore how to set a 3D element's base placement in CSS using various properties. Syntax selector { transform-origin: x y z; perspective: value; transform-style: ... Read More
To select text input fields using CSS selector, is a powerful and crucial tool for styling and targeting specific elements on webpages. Text input fields are essential components of web forms that require user input. In this article, we will explore different methods to select and style text input fields while excluding other input types like password fields. Syntax /* Type selector */ input[type="text"] { /* styles */ } /* ID selector */ #elementId { /* styles */ } /* Class selector */ .className { /* styles */ } /* Attribute selector */ ... Read More