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 33 of 130
How to bind an animation to a division element using CSS?
Division elements () are commonly used for grouping HTML elements, and CSS allows us to bind animations to them for enhanced visual effects. This article demonstrates how to apply animations to division elements using CSS. Syntax selector { animation: animation-name duration timing-function delay iteration-count direction; } @keyframes animation-name { 0% { /* initial state */ } 100% { /* final state */ } } Method 1: Using @keyframes Animation The @keyframes method is the most commonly used approach to create animation ...
Read MoreHide the cursor on a webpage using CSS and JavaScript
In this tutorial, we will learn to hide the cursor on a webpage using CSS and JavaScript. Sometimes, we need to create custom cursor styles or hide the cursor entirely for specific HTML elements to enhance user experience or create interactive interfaces. There are two main approaches to hide the cursor on a webpage. One uses CSS, and another uses JavaScript. We will explore both methods with practical examples. Syntax selector { cursor: none; } Method 1: Using CSS to Hide the Cursor The CSS cursor property allows us ...
Read MoreHow to change the color of an image to black and white using CSS?
To change the color of an image to black and white using CSS, you can apply CSS filter properties. This technique is useful for creating monochrome effects, hover states, or design themes without editing the original image files. Syntax selector { filter: grayscale(value); } Method 1: Using the Grayscale Filter The grayscale() filter is the most direct way to convert images to black and white. It accepts values from 0% (full color) to 100% (completely grayscale). Example In this example, we apply a 100% grayscale filter to convert ...
Read MoreHow to change the cases of text in paragraph using CSS?
The CSS text-transform property is used to control the capitalization of text in HTML elements. It provides an easy way to change text case without modifying the actual content in your HTML. Syntax selector { text-transform: value; } Possible Values ValueDescription capitalizeCapitalizes the first letter of each word uppercaseConverts all text to uppercase letters lowercaseConverts all text to lowercase letters noneNo transformation (default value) Example: Text Case Transformations The following example demonstrates all three text transformation values applied to different paragraphs − ...
Read MoreHow to change image on hover with CSS?
To change image on hover with CSS, we will be using the :hover pseudo-class. In this article, we have discussed two different approaches to change image on hover with CSS properties. We are having an image in our HTML document, our task is to change the image when we hover over the image. Syntax /* Using background property */ selector { background: url('image1.jpg'); } selector:hover { background: url('image2.jpg'); } /* Using content property */ selector { content: url('image1.jpg'); } selector:hover { ...
Read MoreHow to change the position of the scrollbar using CSS?
To change the position of the scrollbar using CSS, you can use various CSS properties like direction, transform, and overflow. By default, scrollbars appear on the right (vertical) and bottom (horizontal), but these positions can be modified. Syntax /* For left-side scrollbar */ selector { direction: rtl; } /* For rotated scrollbar positions */ selector { transform: rotate(180deg); } /* For overflow-based scrollbars */ selector { overflow-x: auto; /* horizontal scrollbar */ overflow-y: auto; /* vertical scrollbar */ } ...
Read MoreHow to change the color of selected text using CSS?
To change the color of selected text using CSS, you can use the ::selection pseudo-element. This feature allows you to customize the appearance of text when users select it with their mouse or keyboard. Syntax ::selection { color: value; background-color: value; } /* Or target specific elements */ element::selection { color: value; background-color: value; } Supported Properties The ::selection pseudo-element only supports a limited set of CSS properties − PropertyDescription colorText color of selected content ...
Read MoreHow to change the color of the radio button using CSS?
To change the color of the radio button using CSS, is a simple process that can be achieved using various approaches. Radio buttons allow users to select one option from multiple available choices, and customizing their appearance helps maintain design consistency across your website. Syntax /* Using accent-color property */ input[type="radio"] { accent-color: color; } /* Using hue-rotate filter */ input[type="radio"] { filter: hue-rotate(angle); } Method 1: Using accent-color Property The accent-color property is the modern and most straightforward way to change radio button colors. ...
Read MoreHow to change the font size using CSS?
CSS font-size property is used to control the size of text in HTML elements. You can specify font sizes using various units like pixels, percentages, keywords, or relative units like em and rem. Syntax selector { font-size: value; } Possible Values Value TypeDescriptionExample Pixels (px)Absolute size in pixels16px KeywordsPredefined size keywordssmall, medium, large Percentages (%)Relative to parent element120% Em/RemRelative units1.2em, 1.5rem Example 1: Using Pixel Values The following example demonstrates changing font size using pixel values − Font Size with Pixels ...
Read MoreHow to adjust CSS for specific zoom level?
To adjust CSS for specific zoom level, we use CSS media queries to change element styles when the viewport width changes during zoom operations. This technique is useful for maintaining proper layout and readability across different zoom levels. Syntax @media screen and (min-width: value) { /* Styles for zoom out (larger viewport) */ } @media screen and (max-width: value) { /* Styles for zoom in (smaller viewport) */ } How Zoom Affects Viewport Width When users zoom in or out, the effective viewport width changes ...
Read More