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
Articles on Trending Technologies
Technical articles with clear explanations and examples
Rotate div with skew x-axis using CSS
The CSS transform: skewX() property allows you to skew an element along the x-axis, creating a slanted or tilted effect. This transformation distorts the element horizontally while keeping the y-axis unchanged. Syntax selector { transform: skewX(angle); } Possible Values ValueDescription degAngle in degrees (positive values skew left, negative values skew right) radAngle in radians turnAngle in turns (1 turn = 360 degrees) Example The following example demonstrates how to apply skew transformation to a div element along the x-axis − ...
Read MorePrint matrix in zag-zag fashion in C Programming.
In C programming, printing a matrix in zig-zag fashion means traversing the matrix diagonally while alternating the direction of traversal. This creates a zig-zag pattern where elements are visited along diagonals, first from top-left to bottom-right, then from bottom-right to top-left, and so on. 10 20 30 40 50 ...
Read MoreA 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 MorePrint matrix in snake pattern from the last column in C Programming.
In C, printing a matrix in snake pattern from the last column means traversing the matrix row by row, alternating the direction of column traversal. For odd-numbered rows (index 0, 2, 4...), we print from right to left, and for even-numbered rows (index 1, 3, 5...), we print from left to right. Matrix Snake Pattern from Last Column 10 20 30 40 ...
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 MorePrint matrix in snake pattern in C Programming.
In C programming, printing a matrix in snake pattern means traversing the matrix row by row where even-indexed rows are printed from left to right and odd-indexed rows are printed from right to left. This creates a snake-like zigzag pattern through the matrix elements. ...
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 More