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
Front End Technology Articles
Page 463 of 652
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 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 MoreHow to create Image Folding Effect using HTML and CSS?
The Image Folding Effect is a popular CSS technique that creates a visually appealing paper-folding animation on images. This effect divides an image into segments that skew when hovered, simulating the appearance of folded paper. It's achieved using CSS transforms and the :nth-child selector. Transform Property The CSS transform property applies 2D or 3D transformations to elements. It can move, rotate, scale, and skew elements without affecting the document flow. Syntax transform: function(value); Common transform functions: translate() − moves an element along the x and y axis. rotate() − rotates an ...
Read More