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 480 of 652
Difference between Auto-fit vs Auto-fill property in CSS grid
CSS Grid provides powerful tools for creating responsive layouts, with auto-fit and auto-fill being key properties that help manage column behavior without media queries. Both work with the repeat() function to create flexible grid layouts. Syntax .container { grid-template-columns: repeat(auto-fill, minmax(min-width, 1fr)); /* or */ grid-template-columns: repeat(auto-fit, minmax(min-width, 1fr)); } Auto-fill Property The auto-fill property creates as many columns as possible to fit the container width, including empty columns. Empty columns maintain their minimum width, creating visible gaps. Example The ...
Read MoreHow to align block elements to the center?
The margin property in CSS can be used to center a block element like a div horizontally. By setting the left and right margins to auto and defining a specific width, block elements can be centered within their container. Syntax selector { margin: auto; width: value; } Understanding Block Elements Block elements naturally take the full width of their container and start on a new line. Common block elements include , , , and . To center these elements, we need to give them a specific ...
Read MoreHow to Set Calc Viewport Units Workaround in CSS?
The CSS calc() function performs mathematical calculations to be used as property values. It's particularly useful for creating responsive layouts by combining different units like viewport units (vw, vh) with fixed units (px) to create workarounds for viewport-based calculations. Syntax selector { property: calc(expression); } Supported Operations The calc() function supports the following mathematical operations − + Addition − Subtraction * Multiplication (at least one argument must be a number) / Division (the right-hand side must be a number) Important Rules The + and ...
Read MoreHow to make an area unclickable with CSS?
To make an area unclickable with CSS, we can use various CSS properties. This article covers three different approaches to disable click interactions on specific areas of a webpage. Syntax /* Method 1: Using pointer-events */ selector { pointer-events: none; } /* Method 2: Using z-index overlay */ .overlay { position: absolute; z-index: higher-value; } /* Method 3: Using transparent div */ .transparent-overlay { position: absolute; background-color: transparent; } Method 1: Using pointer-events ...
Read MoreHow to disable a href link in CSS?
To disable a href link in CSS, we can use various approaches keeping the link visible but preventing user interaction. We will be understanding three different approaches to disable a href link in CSS. In this article, we are having a link as 'Click Here', our task is to disable href link in CSS. Syntax /* Method 1: Using pointer-events */ a { pointer-events: none; } /* Method 2: Using z-index */ a { position: relative; z-index: -1; } /* Method 3: ...
Read MoreHow to Create Text Reveal Effect for Buttons using HTML and CSS?
In this article, we will discuss the approach to creating text reveal effect for buttons using HTML and CSS. Buttons are the most important user interface component for any website. It is very important to design the buttons in a creatively unique way. The text reveal effect for a button is used when it is used to reveal some offer or exciting content for enhancing the user experience. The approach is to cover the button with a strip of the same dimension as of button and then moving it in any one direction on mouse hover. Syntax ...
Read MoreHow to Create Link Tooltip Using CSS3 and jQuery?
Link tooltips are an excellent way to display additional information when users hover over links. This article demonstrates three different approaches to creating tooltips using CSS3 and jQuery. Approaches We will explore the following methods − Using jQuery mouseenter and mouseleave functions Using jQuery UI tooltip() function Using pure CSS for tooltips Method 1: Using jQuery mouseenter and mouseleave Functions This approach uses jQuery event handlers to show and hide tooltips dynamically. The mouseenter event fires when the mouse enters an element, while mouseleave fires when it exits. Syntax $(selector).mouseenter(function() ...
Read MoreHow to Auto-Resize an Image to Fit a div Container using CSS?
To auto-resize an image to fit a div container, it ensures that the image is scaled properly without affecting its original aspect ratio. It helps in preventing the distortion of image and ensures that image fills the container without stretching or cropping. In this article we are having a div container and an image. Our task is to auto-resize image to fit the div container using CSS. Syntax /* Basic image resizing */ img { width: 100%; height: 100%; object-fit: cover | contain; } ...
Read MoreHow to display the file format of links using CSS?
While browsing through a web page, you come across various documents which can be downloaded. Sometimes, you need to download a document but in different file format. However, you may have a problem in finding the document of your desired file format because there are various links each containing different file formats. It can be .docx, .png, .txt, .pdf etc. Generally, file formats are not specified along with the links. So, we cannot know the type of file format just by looking the links. In this article, you will learn how to display the file format of links on ...
Read MoreRevealing Hidden Elements by CSS Animations
CSS animations allow us to reveal hidden elements with smooth transitions and effects. Elements can be hidden using the opacity: 0 property and revealed through hover interactions, creating engaging user experiences. Syntax selector { opacity: 0; /* Hide element */ transition: opacity duration; } selector:hover { opacity: 1; /* Reveal element */ animation: keyframe-name duration timing-function; } @keyframes keyframe-name { 0% { /* starting state */ } 100% { /* ending ...
Read More