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 on Trending Technologies
Technical articles with clear explanations and examples
Set the opacity only to background color not on the text in CSS
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 MoreAbsolute Deviation and Absolute Mean Deviation using NumPy
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 MoreSet the limit of text length to N lines using CSS
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 MoreMake a div horizontally scrollable using CSS
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 MoreHow to create Nested Accordion using Google AMP amp-accordion?
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 MoreHow to create multiple background image parallax in CSS?
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 MoreHow to set a rotated element’s base placement in CSS ?
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 MoreHow to set a 3D element\'s base placement in CSS ?
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 MoreHow to select text input fields using CSS selector?
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 MoreA += B Assignment Riddle in Python
The += operator on a mutable object inside a tuple creates a surprising Python riddle − the operation succeeds (the list gets modified) but also raises a TypeError because tuples don't support item assignment. Both things happen simultaneously. The Riddle Define a tuple with a list as one of its elements, then try to extend the list using += ? tupl = (5, 7, 9, [1, 4]) tupl[3] += [6, 8] Traceback (most recent call last): File "", line 1, in TypeError: 'tuple' object does not support item assignment ...
Read More