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 George John
Page 22 of 79
Change the font size of a button with CSS
To change the font size of a button with CSS, you can use different properties to control text appearance. The font size affects button readability and visual hierarchy on your webpage. Syntax button { font-size: value; } Method 1: Using font-size Property The CSS font-size property directly controls the text size inside buttons. This is the most straightforward approach − Example .normal-btn { font-size: 16px; ...
Read MoreCreate red neon glow shadow using CSS
The CSS text-shadow property can be used to create a red neon glow effect on text. This technique applies multiple shadow layers with red colors to simulate the bright, glowing appearance of neon signs. Syntax selector { text-shadow: h-offset v-offset blur-radius color; } Example: Basic Red Neon Glow The following example creates a simple red neon glow effect using a single shadow − body { background-color: #000; ...
Read MoreSelects all elements inside elements with CSS
The descendant selector (space-separated) in CSS allows you to select all elements of a specific type that are nested inside another element, regardless of how deeply nested they are. Syntax ancestor descendant { property: value; } Where ancestor is the parent element and descendant is the child element you want to style. Example The following example demonstrates how to style all elements that are inside elements − div p { ...
Read MoreArrow to the left of the tooltip with CSS
Creating an arrow pointing to the left of a tooltip helps users understand that the tooltip relates to the element they're hovering over. This arrow is created using CSS pseudo-elements and border properties to form a triangular shape. Syntax .tooltip .tooltip-text::after { content: ""; position: absolute; border-width: size; border-style: solid; border-color: transparent color transparent transparent; } Example The following example creates a tooltip with an arrow pointing to the left − ...
Read MoreSet right tooltip with CSS
To create a right tooltip in CSS, you position the tooltip to appear on the right side of an element. The key is using the left property with a value of 100% to push the tooltip completely to the right of its parent element. Syntax .tooltip .tooltiptext { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); } Example The following example creates a tooltip that appears on the right side when you hover over the text − ...
Read MoreSpecify the speed curve of the animation with CSS
The CSS animation-timing-function property specifies the speed curve of an animation, controlling how the animation progresses over time. This property determines whether the animation starts slow and speeds up, starts fast and slows down, or maintains a constant speed. Syntax selector { animation-timing-function: value; } Possible Values ValueDescription easeDefault. Slow start, fast middle, slow end ease-inSlow start, then speeds up ease-outFast start, then slows down ease-in-outSlow start and end, fast middle linearConstant speed throughout Example The following example demonstrates different timing functions applied to animated boxes ...
Read MoreLinear gradient with rainbow color
The CSS linear-gradient function can be used to create beautiful rainbow effects by combining all seven colors of the rainbow spectrum. A rainbow gradient provides a smooth transition from red through violet, creating an eye-catching visual effect. Syntax selector { background: linear-gradient(direction, red, orange, yellow, green, blue, indigo, violet); } Example: Rainbow Linear Gradient The following example creates a horizontal rainbow gradient using all seven spectrum colors − #demo { height: 100px; ...
Read MoreCSS transition-timing-function property
The CSS transition-timing-function property specifies the speed curve of the transition effect. It controls how intermediate values are calculated during a transition, determining whether the animation starts slowly and speeds up, or starts quickly and slows down. Syntax selector { transition-timing-function: value; } Possible Values ValueDescription linearConstant speed from start to end easeSlow start, fast middle, slow end (default) ease-inSlow start, then speeds up ease-outFast start, then slows down ease-in-outSlow start and end, fast middle cubic-bezier()Custom timing function using cubic bezier curve Example: Different Timing Functions ...
Read MoreCSS backface-visibility Property
The CSS backface-visibility property determines whether an element should be visible when it is rotated away from the user and its back face is showing. This property is particularly useful in 3D transformations and animations. Syntax selector { backface-visibility: visible | hidden; } Possible Values ValueDescription visibleThe back face is visible when turned towards the user (default) hiddenThe back face is hidden when turned towards the user Example 1: Visible Backface The following example shows an element with backface-visibility set to visible − ...
Read MoreUsage of transform-origin property with CSS
The CSS transform-origin property sets the point around which an element's transformation takes place. By default, transformations occur around the center of an element, but you can change this origin point to any position. Syntax selector { transform-origin: x-axis y-axis z-axis; } Possible Values ValueDescription x-axisHorizontal position: left, center, right, or percentage/length y-axisVertical position: top, center, bottom, or percentage/length z-axisZ-axis position for 3D transformations (length value) Example: Transform Origin with Rotation The following example demonstrates how transform-origin affects the rotation point of an element − ...
Read More