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 Lakshmi Srinivas
Page 6 of 24
How to set all the four border radius properties at once with JavaScript?
In JavaScript, you can set all four border-radius properties at once using the borderRadius property. This property allows you to apply rounded corners to an element by setting a single value or multiple values for different corners. Syntax The borderRadius property can accept different formats: element.style.borderRadius = "10px"; // All corners element.style.borderRadius = "10px 20px"; // top-left/bottom-right, top-right/bottom-left element.style.borderRadius = "10px 20px 30px"; // top-left, top-right/bottom-left, bottom-right element.style.borderRadius = "10px 20px 30px 40px"; // top-left, top-right, bottom-right, bottom-left Example: ...
Read MoreAny ideas on how to prepare for the future of Flash/ Flex/ HTML5 Development?
The web development landscape has evolved significantly since Flash's decline. Understanding the transition from Flash/Flex to modern HTML5 technologies is crucial for developers preparing for the future. The End of Flash Era Adobe Flash officially ended support in December 2020. Major browsers now block Flash content by default, and users must manually enable it for legacy applications. This marked the definitive shift toward modern web standards. HTML5: The Modern Web Standard HTML5 represents a collaboration between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). It provides native support for ...
Read MoreStrikethrough text with CSS
Use the text-decoration property to create strikethrough text with CSS. The line-through value draws a horizontal line through the middle of the text. Syntax text-decoration: line-through; Basic Example This text will be striked through. Using CSS Classes For better organization, use CSS classes instead of inline styles: ...
Read MoreHow to show for loop using a flowchart in JavaScript?
The "for" loop includes loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins, the test statement which will test if a given condition is true or not. If the condition is true, then the code given inside the loop will be executed, otherwise, the control will come out of the loop. At the end comes the iteration statement where you can increase or decrease your counter. Let us see how to show for loop using flowchart in JavaScript: For Loop Flowchart ...
Read MoreAnimate CSS border-left-color property
The CSS border-left-color property can be animated to create smooth color transitions on the left border of an element. This animation effect is useful for creating interactive hover states, loading indicators, or visual emphasis. Syntax selector { border-left-color: color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-left-color: initial-color; } to { border-left-color: final-color; } } Example The following example demonstrates how to animate the border-left-color property from yellow to lightblue − ...
Read MoreDisplay the flex items with space between the lines in CSS
The CSS justify-content property with the space-between value distributes flex items evenly across the main axis, placing the first item at the start and the last item at the end, with equal space between all items. Syntax selector { display: flex; justify-content: space-between; } Example You can try to run the following code to implement the space-between value − .mycontainer { ...
Read MoreUsage of CSS grid-row-start property
The CSS grid-row-start property specifies on which row line a grid item will start. This property allows you to control the exact row position where a grid item begins, giving you precise control over grid layout positioning. Syntax selector { grid-row-start: value; } Possible Values ValueDescription autoDefault value. The item will be placed automatically line-numberSpecifies which row line to start at (1, 2, 3, etc.) line-nameSpecifies a named grid line to start at span nSpecifies how many rows the item will span Example: Basic Grid Row Start ...
Read MoreCSS unicode-bidi Property
The CSS unicode-bidi property controls the bidirectional text algorithm, determining how text with mixed left-to-right and right-to-left content should be displayed. This property is essential when working with multilingual content that includes languages like Arabic, Hebrew, or Persian alongside Latin-based languages. Syntax selector { unicode-bidi: value; } Possible Values ValueDescription normalDefault behavior, follows Unicode bidirectional algorithm embedCreates an additional level of embedding bidi-overrideForces text direction override based on direction property isolateIsolates element from surrounding text for bidirectional calculations isolate-overrideCombines isolate and bidi-override behaviors Example: Comparing Different Unicode-bidi ...
Read MoreCSS hanging-punctuation Property
The CSS hanging-punctuation property allows punctuation marks to be positioned outside the line box at the beginning or end of text lines. This creates better visual alignment by preventing punctuation from affecting text indentation. Syntax selector { hanging-punctuation: value; } Possible Values ValueDescription noneNo punctuation marks hang outside the line box (default) firstPunctuation at the start of the first line hangs outside lastPunctuation at the end of the last line hangs outside allow-endPunctuation at the end of lines may hang outside force-endPunctuation at the end of lines must hang ...
Read MoreAnimate CSS border-top property
The CSS border-top property can be animated to create dynamic visual effects. You can animate the border width, color, and style using CSS animations and transitions. Syntax selector { border-top: width style color; animation: animation-name duration timing-function iteration-count; } @keyframes animation-name { from { border-top: initial-value; } to { border-top: final-value; } } Example: Animating Border Top Width and Color The following example demonstrates how to animate the border-top property by changing its width and color − ...
Read More