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 by Shubham Vora
Page 39 of 80
Why 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 MoreWhich property specifies the right padding of an element in CSS?
In CSS, the padding property allows us to add extra space between the HTML element's border and its content. The right padding means only adding the space between the element's content and the right border. Here, we will learn two different properties to specify the right padding of an element. Syntax selector { padding-right: value; } Use the padding-right CSS Property The padding-right property specifies the right padding of an element in CSS. Whenever we specify the right padding for an element, the width of the element becomes equal ...
Read MoreWhich property is used to make a font oblique?
In CSS, we can use the font-style property to set the style of the font. We can use different styles as values of the font-style property, and oblique is one of them. The oblique font is a slanted version of the text that creates a sloped appearance. Unlike italic fonts which use specifically designed slanted characters, oblique fonts are created by mathematically slanting the normal font characters. Syntax selector { font-style: oblique; } Example 1: Basic Oblique Font In the example below, we have created two paragraphs to compare ...
Read MoreWhich one should we use ‘border: none’ or ‘border: 0 ‘?
In CSS, when you need to remove borders from HTML elements, you have two main options: border: none and border: 0. While both visually remove the border, they work differently under the hood and have different performance implications. Syntax /* Remove border using none */ border: none; /* Remove border using 0 */ border: 0; Border: none VS border: 0 Understanding the difference between these two approaches is crucial for writing efficient CSS − border: none border: 0 Sets border-style: none Sets border-width: 0 Hides the ...
Read MoreWhat is maximum & minimum value for z-index property in CSS?
In CSS, the z-index property controls the stacking order of overlapping elements. Elements with higher z-index values appear in front of elements with lower values, creating a layered effect. The z-index property has specific limits: the maximum value is 2147483647 and the minimum value is -2147483647. These numbers represent the maximum and minimum values of a 32-bit signed integer. Note − The z-index property only works with positioned elements (relative, absolute, fixed, or sticky). It has no effect on elements with static positioning. Syntax selector { z-index: value; } ...
Read MoreSet 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 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 More