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
Shimmer 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 MoreHow to create image magnifier using?
An image magnifier allows users to zoom in on pictures for a closer inspection, enhancing user experience and adding a professional touch to your website. Using HTML and CSS, you can create powerful image magnifiers that captivate users and improve visual engagement. Approach We will explore two different methods to create image magnifiers − Rollover/Follow zoom effect − Shows magnified content in a separate preview area Magnifying glass effect − Creates a lens-like zoom overlay on the image Method 1: Rollover/Follow Zoom Effect This technique magnifies a segment of the image in a ...
Read MoreHow to Create Image Lightbox Gallery using HTML CSS and JavaScript?
An image lightbox gallery is a web feature that displays images in an enlarged overlay format, allowing users to view images without navigating away from the main page. When a user clicks on a thumbnail image, it opens in a modal window with navigation controls and a close button. Syntax /* Gallery container */ .gallery { display: flex; flex-wrap: wrap; justify-content: center; } /* Lightbox overlay */ .lightbox { display: none; position: fixed; ...
Read MoreHow to Create Image Hovered Detail using HTML & CSS?
Creating image hover effects with detailed text overlays adds interactivity and visual appeal to your website. By combining HTML structure with CSS styling, you can create engaging hover animations that reveal additional information when users move their cursor over images. Syntax selector:hover { property: value; } The :hover Selector The CSS :hover selector is used to select and style an element when the user hovers their mouse over it. It works in combination with other selectors to target specific HTML elements and apply styles when the cursor is positioned over ...
Read More