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 550 of 652
A scale transform the element by using y-axis with CSS3
The scaleY() CSS function is used to scale an element along the y-axis (vertically). This transform function stretches or compresses the element's height while keeping its width unchanged. Syntax transform: scaleY(y); Here, y is a number representing the scaling factor to apply on the vertical axis of the element. Possible Values ValueDescription 1No scaling (original size) > 1Stretches the element vertically 0 to 1Compresses the element vertically 0Completely flattens the element negativeFlips and scales the element Example: Vertical Scaling The following example demonstrates how to scale elements along the ...
Read MoreRotate Out Up Right Animation Effect with CSS
The CSS rotate out up right animation creates a rotation effect where an element rotates 90 degrees clockwise around its bottom-right corner while fading out, simulating an exit animation. Syntax @keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0deg); opacity: 1; } 100% { transform-origin: right bottom; ...
Read MoreRotate Out Up Left Animation Effect with CSS
The CSS rotate out up left animation creates a rotating exit effect where an element spins counterclockwise while moving up and left, eventually disappearing from view. This animation is commonly used for exit transitions and attention-grabbing effects. Syntax @keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0deg); opacity: 1; } 100% { ...
Read MoreRotate Out Down Right Animation Effect with CSS
The CSS rotate out down right animation effect rotates an element clockwise while fading it out, with the rotation anchored at the bottom-right corner. This creates a smooth exit animation where the element appears to spin away downward and to the right. Syntax @keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0deg); opacity: 1; } 100% { ...
Read MoreCSS border-image-source
The CSS border-image-source property is used to specify the path of an image to be used as a border. This property defines the source image that will be sliced and used to create decorative borders around elements. Syntax selector { border-image-source: value; } Possible Values ValueDescription url()Specifies the path to an image file noneNo image is used (default value) linear-gradient()Uses a gradient as the border image source Example The following example demonstrates how to use an image as a border source − ...
Read MoreCSS Relative units
CSS relative units are units whose values are relative to another measurement. Unlike absolute units, relative units scale based on their context, making them ideal for responsive design. The size of elements using relative units will adapt based on their parent element or viewport size. Syntax selector { property: value unit; } Common Relative Units UnitAbbreviationDescription Percent%Relative to the parent element EmemRelative to the font-size of the element Root emremRelative to the font-size of the root element ExexRelative to the x-height of the font CharacterchRelative to the width of ...
Read MoreWorking with CSS Units
CSS units are essential for defining measurements in web design such as width, margin, padding, font-size, and border-width. The length is specified using a numerical value followed by a unit such as px, em, rem, etc. Important: No white spaces are allowed between the numerical value and the unit. Syntax property: value + unit; /* Examples */ width: 300px; font-size: 1.5em; margin: 10%; Types of CSS Units CSS units are divided into two main categories − Absolute units − Fixed size units that don't change based on other elements Relative units − ...
Read MoreCSS3 font combinations
CSS3 font combinations allow you to specify multiple fonts in order of preference. If the browser cannot load the first font, it automatically tries the next font in the list, ensuring your text always displays properly. Syntax selector { font-family: "first-choice", "second-choice", generic-family; } Font Family Categories CategoryDescriptionExamples serifFonts with decorative strokesTimes, Georgia sans-serifFonts without decorative strokesArial, Helvetica monospaceFixed-width fontsCourier, Monaco cursiveScript-like fontsBrush Script fantasyDecorative fontsImpact, Papyrus Example: Sans-Serif Font Combination The following example demonstrates a typical sans-serif font stack − ...
Read MoreSet Media Queries for different CSS style rules for different size devices
CSS media queries allow you to apply different style rules based on device characteristics such as screen size, orientation, and resolution. This enables responsive design that adapts to various devices like mobile phones, tablets, and desktop computers. Syntax @media media-type and (condition) { /* CSS rules */ } Common Media Query Breakpoints DeviceScreen WidthMedia Query MobileUp to 768px@media (max-width: 768px) Tablet769px to 1024px@media (min-width: 769px) and (max-width: 1024px) Desktop1025px and above@media (min-width: 1025px) Example: Basic Media Query The following example changes the background color based on ...
Read MoreCSS Box Sizing Property
The CSS box-sizing property controls how the width and height of an element are calculated. By default, padding and border are added to the specified width and height, but this property allows you to change this behavior. Syntax selector { box-sizing: value; } Possible Values ValueDescription content-boxDefault. Width and height apply to content only border-boxWidth and height include content, padding, and border Default Behavior (content-box) By default, CSS follows this calculation − Total width = width + padding + border Total height = height ...
Read More