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
Wildcard Selectors (*, ^ and $) in CSS for classes
CSS wildcard selectors allow us to select HTML elements containing a particular substring in the value of attributes like class, id, or other attributes. They are useful when applying styles to multiple elements having a common pattern in their attributes. In this article, we will learn about three types of wildcard selectors − Contains (*=) wildcard selector Starts with (^=) wildcard selector Ends with ($=) wildcard selector Syntax /* Contains wildcard */ [attribute*="value"] { /* styles */ } /* Starts ...
Read MoreWhy to put “_” in front of filename in SCSS?
In SCSS, placing an underscore (_) at the beginning of a filename creates a partial file. This tells the SCSS compiler to ignore the file during compilation, preventing it from generating a separate CSS file. Partials are designed to be imported into other SCSS files. When to Use Underscore Prefix Use the underscore prefix when creating SCSS files that contain − Variables and mixins Reusable CSS components Files meant to be imported, not compiled independently For example, _variables.scss and _mixins.scss are partials, while main.scss is a regular file that gets compiled. Example 1: ...
Read MoreWhy does SASS cache folder is created?
SASS (Syntactically Awesome Style Sheets) is a CSS preprocessor that allows developers to write more powerful and organized stylesheets using features like variables, nesting, mixins, and functions. When SASS compiles SCSS files to CSS, it automatically creates a cache folder to optimize the compilation process. What is SASS? SASS is a preprocessor that compiles SCSS (Sassy CSS) files into standard CSS. SCSS extends CSS with advanced features like variables, nested rules, functions, and mixins, making stylesheets more maintainable and reducing code repetition. What is a Cache Folder? A cache folder is a directory where SASS stores ...
Read MoreShimmer Effect using CSS
To create shimmer effect using CSS, we will be using CSS animations and linear-gradient properties. Shimmer effect is an animation effect used in many webpages while loading the web page. In this article we are having a layout of a box having two other child boxes, our task is to create a shimmer effect using CSS. Syntax .shimmer-element { background: linear-gradient(to right, transparent 20%, rgba(255, 255, 255, 0.5) 50%, transparent 80%); animation: shimmer duration timing-function iteration-count; } @keyframes shimmer { from { transform: ...
Read MoreResize image proportionally with CSS
To make a responsive design of the application, we also require to make an image responsive. If images are not responsive, overflow occurs in the app, and it looks worst. So, we also require to increase or decrease the images' dimensions proportional to the parent element's dimensions. Here, we will learn various ways to resize images proportionally with CSS. Syntax Users can follow the syntax below to resize the image proportionally using the 'width' CSS property. img { width: 100%; height: auto; } In the above syntax, ...
Read MoreHow to load CSS files using JavaScript?
Loading CSS files dynamically using JavaScript allows you to change page themes, implement dark/light mode toggles, or conditionally load styles based on user preferences. This technique is useful when you need to switch between different stylesheets without page refresh. Syntax /* Create link element */ const link = document.createElement("link"); link.href = "path/to/stylesheet.css"; link.rel = "stylesheet"; link.type = "text/css"; /* Append to head */ document.head.appendChild(link); Example 1: Loading CSS on Window Load This example demonstrates loading a CSS file automatically when the page finishes loading − ...
Read MoreHow to Switch CSS Class between Buttons Rendered with Map()?
When building web applications, developers often need to create buttons with dynamic styles. One of the most efficient ways to do this is by using the map() method in JavaScript. This method allows you to render multiple buttons with different styles based on their data. However, sometimes you might want to change the CSS class of a button dynamically based on user interaction or other events. In this article, we will discuss how to switch CSS classes between buttons rendered with map() in JavaScript. Syntax .button-class { property: value; } /* Switch ...
Read Moreappend() and extend() in Python
The append() and extend() methods both add elements to a Python list, but they behave differently. append() adds its argument as a single element (even if it's a list), while extend() adds each element of an iterable individually. append() Adds the argument as one element to the end of the list. List length increases by exactly 1, regardless of the argument type. days = ['Mon', 'Tue', 'Wed'] print("Original:", days) # Append a single element days.append('Thu') print("After append('Thu'):", days) # Append a list — added as a nested list days.append(['Fri', 'Sat']) print("After append(['Fri', 'Sat']):", days) ...
Read MoreHow to break a line without using br tag in HTML / CSS?
To break a line without using br tag in HTML/CSS is useful when you want to create line breaks while preserving the semantic structure of your content. This approach gives you more control over text formatting without cluttering HTML with presentation tags. Syntax /* Method 1: Using white-space property */ selector { white-space: pre; } /* Method 2: Using HTML pre tag */ text content Method 1: Using white-space Property The CSS white-space property controls how whitespace and line breaks are handled inside an element. Using white-space: pre preserves ...
Read MoreHow to blend elements in CSS?
Blending elements in CSS is a technique used to create interesting visual effects and enhance the design of a web page. With the mix-blend-mode property in CSS, you can control how an element blends with the content below it. Syntax selector { mix-blend-mode: blend-mode; } Understanding Mix-Blend-Mode mix-blend-mode is a CSS property that allows you to set the blending mode for an element. Blending modes determine how two elements blend together, with different modes producing different visual effects. By default, an element in CSS will have a blending mode ...
Read More