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 Samual Sam
Page 46 of 151
What is the difference between window.onload and document.onload in Javascript?
In JavaScript, window.onload and document.onload handle different loading stages of a web page. Understanding their timing differences is crucial for proper DOM manipulation and event handling. document.onload The document.onload event fires when the HTML document has been completely loaded and parsed, but before images, stylesheets, and other external resources finish loading. However, document.onload is not widely supported across browsers. Instead, use DOMContentLoaded event for similar functionality. window.onload The window.onload event fires when the complete page has loaded, including all images, scripts, CSS files, and other external content. This ensures all resources are available before your code ...
Read MorePerform Animation on CSS border-top-right-radius property
The CSS border-top-right-radius property defines the radius of the top-right corner of an element's border. You can create smooth animations on this property to create engaging visual effects. Syntax selector { border-top-right-radius: value; animation: animation-name duration timing-function; } @keyframes animation-name { from { border-top-right-radius: initial-value; } to { border-top-right-radius: final-value; } } Example: Animating Border Top Right Radius The following example demonstrates how to animate the border-top-right-radius property from 0 to 80px − ...
Read MoreAnimate CSS border-spacing property
The CSS border-spacing property controls the distance between the borders of adjacent table cells. When animated, it creates a dynamic effect where the spacing between cells changes smoothly over time. Syntax selector { border-spacing: value; animation: animation-name duration timing-function; } Example The following example animates the border-spacing property from 0px to 20px − table { border-collapse: separate; border-spacing: 0px; ...
Read MoreAnimate border-color property with CSS
The CSS border-color property can be animated to create dynamic color transitions on element borders. This animation effect is useful for hover states, attention-grabbing elements, or interactive UI components. Syntax selector { animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { percentage { border-color: color-value; } } Example: Basic Border Color Animation The following example animates the border color from gray to red and back − ...
Read MoreSet the initial length of a flex item with CSS
The CSS flex-basis property sets the initial main size of a flex item before free space is distributed. It defines the default size of an element before the remaining space is distributed according to the flex factors. Syntax selector { flex-basis: value; } Possible Values ValueDescription autoDefault value. The length is equal to the length of the flexible item lengthA length unit (px, em, rem, etc.) specifying the initial length %A percentage of the parent container's main size contentSize based on the item's content Example The ...
Read MoreSet how much a flex item will grow relative to the rest of the flex items with CSS
The CSS flex-grow property controls how much a flex item will grow relative to the rest of the flex items inside a flex container. When there's extra space available, this property determines how that space is distributed among flex items. Syntax selector { flex-grow: number; } Possible Values ValueDescription 0Default value. Item will not grow. numberA positive number that defines the growth factor relative to other flex items. Example: Basic Flex Grow The following example demonstrates how flex-grow distributes extra space. The third item (Q3) has ...
Read MoreSet the flex items horizontally from right to left with CSS
Use the flex-direction property with row-reverse value to set the flex items horizontally from right to left. This property reverses the order of flex items while maintaining horizontal alignment. Syntax selector { display: flex; flex-direction: row-reverse; } Example You can try to run the following code to implement the row-reverse value − .mycontainer { display: flex; ...
Read MoreCSS quotes Property
The CSS quotes property is used to set quotation marks for the element or elements that use the quotes property with content. It defines which characters to use for opening and closing quotes. Syntax selector { quotes: open-quote close-quote; } Possible Values ValueDescription noneRemoves quotation marks autoUses browser default quotation marks string stringCustom opening and closing quote characters Example 1: Custom Quote Marks The following example sets single quotes for the element − #demo ...
Read MorePerform Animation on CSS border-bottom-color property
The CSS border-bottom-color property can be animated to create smooth color transitions for the bottom border of an element. This property is animatable, allowing you to create engaging visual effects. Syntax selector { border-bottom-color: color; animation: animation-name duration timing-function; } @keyframes animation-name { from { border-bottom-color: initial-color; } to { border-bottom-color: final-color; } } Example: Animating Border Bottom Color The following example demonstrates how to animate the border-bottom-color property from blue to red over a 2-second duration ...
Read MorePerform Animation on CSS font-size property
The CSS font-size property can be animated to create text that grows or shrinks smoothly over time. This creates engaging visual effects for headings, hover states, or attention-grabbing elements. Syntax @keyframes animation-name { keyframe-selector { font-size: value; } } selector { animation: animation-name duration timing-function iteration-count; } Example: Basic Font Size Animation The following example demonstrates animating the font-size property from its default size to 30px − ...
Read More