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 Jennifer Nicholas
208 articles
Set a rounded active and hover button with CSS
The CSS :hover pseudo-class allows you to add interactive effects when users hover over elements, while the border-radius property creates rounded corners. Combining these with the .active class creates visually appealing navigation buttons with distinct states. Syntax /* Hover effect */ selector:hover { property: value; } /* Active state */ selector.active { property: value; } /* Rounded corners */ selector { border-radius: value; } Example: Rounded Active and Hover Buttons The following example creates a navigation menu with rounded buttons ...
Read MoreAdd space between pagination links with CSS
Pagination links often appear too close together by default. Adding space between pagination links improves readability and provides better visual separation. This can be achieved using CSS properties like margin, padding, or gap. Syntax /* Method 1: Using margin */ .pagination a { margin: value; } /* Method 2: Using gap (for flex/grid containers) */ .pagination { display: flex; gap: value; } Method 1: Using Margin The following example adds space between pagination links using the margin property − ...
Read MoreFlip an image on mouse over with CSS
The CSS transform property can be used to flip an image horizontally when a user hovers over it. This creates an engaging interactive effect by using the scaleX(-1) value to mirror the image along its X-axis. Syntax selector:hover { transform: scaleX(-1); } Example: Horizontal Image Flip on Hover The following example demonstrates how to flip an image horizontally when the mouse hovers over it − .flip-image { width: 300px; ...
Read MoreCreate tooltips with CSS
A tooltip is a small popup that appears when a user hovers over an element, providing additional information or context. CSS tooltips are lightweight, accessible, and don't require JavaScript. Syntax .tooltip { position: relative; } .tooltip .tooltiptext { visibility: hidden; position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } Example: Basic Tooltip The following example creates a simple tooltip that appears on hover − ...
Read MoreHow to set the fill-mode for an Animation with CSS
The CSS animation-fill-mode property defines which values are applied by the animation before it starts and after it ends. This property controls whether an element retains the animation's initial or final styles when the animation is not running. Syntax selector { animation-fill-mode: value; } Possible Values ValueDescription noneDefault. Animation does not apply any styles before or after execution forwardsElement retains the styles from the last keyframe after animation ends backwardsElement gets the styles from the first keyframe before animation starts bothAnimation follows rules for both forwards and backwards ...
Read MoreCSS perspective-origin property
The CSS perspective-origin property defines the position from which the viewer is looking at 3D-positioned elements. It determines the vanishing point for the perspective effect, controlling how 3D transformations appear to the viewer. Syntax selector { perspective-origin: x-position y-position; } Possible Values ValueDescription x-positionHorizontal position: left, center, right, or percentage/length values y-positionVertical position: top, center, bottom, or percentage/length values initialSets to default value (50% 50%) inheritInherits from parent element Example: Left Origin Perspective The following example demonstrates how perspective-origin: left affects the viewing angle of a ...
Read MoreSet left tooltip with CSS
To set left tooltip, use the right CSS property. A left tooltip appears to the left of the trigger element when hovering, creating an interactive user interface element. Syntax .tooltip .tooltip-text { position: absolute; right: 100%; } Key Properties PropertyPurpose position: absolutePositions tooltip relative to parent right: 100%Places tooltip to the left of parent element visibility: hidden/visibleControls tooltip display on hover Example The following example creates a left tooltip that appears when hovering over the text − ...
Read MoreWobble Animation Effect with CSS
The CSS wobble animation effect creates a shaking or oscillating motion by combining horizontal translation and rotation transforms. This effect is commonly used to draw attention to elements or create playful interactions. Syntax @keyframes wobble { /* Define keyframe percentages with transform values */ } .element { animation: wobble duration timing-function; } Example: Simple Wobble Animation The following example creates a wobble effect on a box element − .wobble-box { ...
Read MoreWhat happens when a function is called before its declaration in C?
In C programming, when a function is called before its declaration, the compiler makes an assumption about the function's return type. If no prototype is provided, the compiler assumes the function returns an int by default. This can lead to compilation errors if the actual function returns a different type. Syntax return_type function_name(parameters); // Function declaration/prototype Example 1: Error with Non-Integer Return Type When a function returns a type other than int but is called before declaration, it causes a type conflict − #include int main() { ...
Read MoreWhat is evaluation order of function parameters in C?
In C programming, when we pass arguments to a function, a common question arises: what is the order of evaluation of function parameters? Is it left to right, or right to left? The C standard does not specify the evaluation order, making it implementation-defined behavior. Syntax function_name(arg1, arg2, arg3, ...); Example: Testing Parameter Evaluation Order Let's examine a program that demonstrates the evaluation order by using side effects − #include void test_function(int x, int y, int z) { printf("The value of x: %d", x); ...
Read More