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
CSS Articles
Page 125 of 130
Make any particular color transparent with CSS Filters
The CSS chroma filter is a legacy Internet Explorer filter that was used to make a specific color transparent in an element. This filter allows you to specify a color that should become transparent, effectively creating a "color key" effect similar to green screen technology. Syntax selector { filter: Chroma(Color = #colorvalue); } Parameters ParameterDescription ColorThe hexadecimal color value that you want to make transparent Example: Making White Background Transparent The following example demonstrates how to make white color (#FFFFFF) transparent in an image − ...
Read MoreRole of CSS Filters
CSS filters allow you to apply visual effects like blur, brightness, contrast, and more to HTML elements without using external graphics. The filter property provides a powerful way to manipulate the rendering of images, backgrounds, and even text elements. Syntax selector { filter: filter-function(value); } Common Filter Functions Filter FunctionDescriptionValue Range blur()Applies blur effect0px to any px value brightness()Adjusts brightness0% to any percentage contrast()Adjusts contrast0% to any percentage grayscale()Converts to grayscale0% to 100% hue-rotate()Rotates hue colors0deg to 360deg Example: Basic Image Filters The following example demonstrates ...
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 import styles from another style sheet in CSS
The CSS @import rule allows you to import styles from another stylesheet into your current CSS file. This rule must be placed at the very beginning of your stylesheet, before any other CSS rules. Syntax @import "stylesheet-url"; @import url("stylesheet-url"); @import url("stylesheet-url") media-query; Basic Import Example Here's how to import an external CSS file into your stylesheet − @import url("https://fonts.googleapis.com/css2?family=Arial:wght@300;700&display=swap"); body { font-family: Arial, sans-serif; ...
Read MoreIndicate what character set the style sheet written in with CSS
To indicate what character set the style sheet is written in with CSS, use the @charset rule. The @charset rule must be written right at the beginning of the style sheet without even a space before it. The value is held in quotes and should be one of the standard character sets. Syntax @charset "character-set-name"; Example The following example shows how to specify the UTF-8 character set at the beginning of a CSS file − @charset "UTF-8"; ...
Read MoreUsage of CSS !important rule
The !important rule in CSS provides a way to give maximum priority to a CSS declaration. When applied, it ensures that the property value will override any other conflicting styles, regardless of specificity or source order. Syntax selector { property: value !important; } How CSS Cascade Works Without !important Normally, CSS follows the cascade rule where styles applied later override earlier styles. Here's an example ? p { color: red; ...
Read MoreFade Out Left Animation Effect with CSS
The fade out left animation effect smoothly moves an element to the left while reducing its opacity to zero, creating a disappearing effect that slides leftward. This animation combines translation and opacity changes for a smooth exit transition. Syntax @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; ...
Read MoreWhich element is used to add special style to the first letter of the text in a selector with CSS
The CSS :first-letter pseudo-element is used to apply special styling to the first letter of the first line in a block-level element. This is commonly used to create drop caps or emphasize the beginning of paragraphs. Syntax selector:first-letter { property: value; } Example The following example demonstrates how to style the first letter of paragraphs with different effects − p:first-letter { font-size: 3em; color: ...
Read MoreUsage of CSS :first-line pseudo-element
The CSS :first-line pseudo-element is used to add special styles to the first line of text within a block-level element. This pseudo-element automatically adjusts based on the viewport width and text wrapping. Syntax selector:first-line { property: value; } Example: Basic First-Line Styling The following example demonstrates how to use the :first-line pseudo-element to style the first line of paragraphs − p:first-line { text-decoration: underline; ...
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 More