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 karthikeya Boyini
Page 45 of 143
Fade In Right Big Animation Effect with CSS
The CSS Fade In Right Big animation effect creates a dramatic entrance where elements start completely transparent and positioned far off-screen to the right, then smoothly animate to full opacity while sliding into their final position. Syntax @keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); } 100% { opacity: 1; transform: translateX(0); ...
Read MoreConvert the colors of the object to 256 shades of gray with CSS
The CSS grayscale() filter is used to convert the colors of an element to 256 shades of gray. This filter is part of the CSS filter property and allows you to remove color saturation from images, text, and other elements. Syntax selector { filter: grayscale(value); } Possible Values ValueDescription 0 or 0%No grayscale effect (original colors) 1 or 100%Completely grayscale (no color) 0.5 or 50%50% grayscale effect Example: Grayscale Effect on Image and Text The following example applies a grayscale filter to both an image and ...
Read MoreCSS Alpha Channel filter
The CSS Alpha Channel filter is a legacy Internet Explorer filter that alters the opacity of an element, creating transparency effects and gradient blending with the background. While this filter is obsolete in modern web development, it was historically used to create alpha transparency effects. Syntax filter: Alpha(opacity=value, finishopacity=value, style=value, startX=value, startY=value, finishX=value, finishY=value); Parameters Parameter Description Opacity Level of the opacity. 0 is fully transparent, 100 is fully opaque. finishopacity Level of the opacity at the other end of the object. Style The shape of ...
Read MoreHow to change the color of focused links with CSS
Use the :focus pseudo-class to change the color of focused links. This styling applies when a user clicks on a link or navigates to it using keyboard tabbing. Possible values could be any color name in any valid format. Syntax a:focus { color: value; } Example You can try to run the following code to implement the color of the focused link − a:focus { color: #0000FF; ...
Read MoreUsage of :first-child pseudo-class in CSS
The CSS :first-child pseudo-class is used to select and style an element that is the first child of its parent element. This selector only targets the very first child element, regardless of its type. Syntax selector:first-child { property: value; } Example: Basic Usage The following example demonstrates how :first-child selects the first paragraph inside a div element − div > p:first-child { text-indent: 25px; ...
Read MoreUsage of :visited pseudo-class in CSS
The :visited pseudo-class is used to add special styling to links that have already been visited by the user. This allows you to provide visual feedback indicating which links have been previously clicked. Syntax a:visited { property: value; } Possible Values PropertyDescription colorChanges the text color of visited links background-colorChanges the background color of visited links text-decorationAdds or removes underlines, strikethrough, etc. Example The following example changes the color of visited links to green − a:link ...
Read MoreUsing CSS z-index property
The CSS z-index property is used along with the position property to create an effect of layers. You can specify which element should come on top and which element should come at the bottom. Syntax selector { z-index: value; } Possible Values ValueDescription autoDefault value. Stack order is inherited from parent integerSets the stack order (higher values appear on top) Example: Layering Elements The following example demonstrates how to use z-index to control which element appears on top − ...
Read MoreWhat to do when an element's content might be larger than the amount of space allocated to it?
The CSS overflow property controls what happens when an element's content is too large to fit in the allocated space. This property allows you to specify whether content should be clipped, scrollable, or visible. Syntax selector { overflow: value; } Possible Values ValueDescription visibleContent overflows the element's boundary (default) hiddenContent is clipped and hidden scrollAdds scrollbars to view overflowing content autoAdds scrollbars only when needed Example: Using Scroll and Auto Values The following example demonstrates how overflow: scroll and overflow: auto handle content that exceeds container ...
Read MoreCSS line-height property
The CSS line-height property is used to set the height of a line of text. It controls the spacing between lines of text within an element, affecting readability and visual appearance. Syntax selector { line-height: value; } Possible Values ValueDescription normalDefault value, usually around 1.2 times the font size numberA number multiplied by the font size (e.g., 1.5) lengthFixed length in px, em, rem, etc. %Percentage of the font size Example: Setting Line Height The following example demonstrates different line-height values applied to paragraphs − ...
Read MoreSet outline style as a solid single line with CSS
The CSS outline-style property with the value solid creates a solid single line outline around an element. This outline appears outside the element's border and does not affect the layout or positioning of other elements. Syntax selector { outline-style: solid; } Example The following example shows how to create a solid outline around a paragraph element − .solid-outline { outline-width: 3px; outline-style: solid; ...
Read More