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 Shabaz Alam
Page 5 of 6
How 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 MoreHow to add space (" ") after an element using :after selector in CSS?
The CSS :after pseudo-selector allows you to insert content after an element. When used with a space character (" ") in the content property, it creates visual spacing after elements without affecting the layout structure. Syntax selector:after { content: " "; } Example: Adding Space After Elements The following example demonstrates how to add space after different elements using the :after selector − body { font-family: Arial, sans-serif; ...
Read MoreHow to add some non-standard font to a website in CSS?
A non-standard font refers to any font that is not part of the default set of fonts available in most browsers. Default fonts like Arial, Times New Roman, and Verdana are pre-installed on most devices, while non-standard fonts must be specifically loaded onto a website to be used. Non-standard fonts can be obtained from services like Google Fonts, Adobe Fonts, or custom font files. They help create unique visual identity and enhance the aesthetic appeal of websites. Syntax @font-face { font-family: 'FontName'; src: url('path/to/font.woff2') format('woff2'), ...
Read MoreHow to add rounded corner to an element using CSS?
Rounded corners add a soft and smooth look to a website and make it more visually appealing. In CSS, the border-radius property is used to create rounded corners on HTML elements such as divs, buttons, forms, or images. Syntax selector { border-radius: value; } Possible Values ValueDescription lengthDefines radius in px, em, rem, etc. %Defines radius as percentage (50% creates circle) 1-4 valuesDifferent values for each corner (top-left, top-right, bottom-right, bottom-left) Individual Corner Properties You can target specific corners using these properties − border-top-left-radius ...
Read MoreFabric.js Circle centeredScaling Property
Fabric.js is a powerful JavaScript library that enables you to create and manipulate canvas objects with ease. The centeredScaling property is one of the useful properties in fabric.js, which is very helpful when working with circles. This property allows us to scale the circle from its center point. It is incredibly helpful in certain design scenarios. What is Centered Scaling? Centered scaling is a property of Fabric.js objects that allows us to resize an object from its center point instead of a corner. This property maintains the position of the object relative to its center point, which means that it ...
Read More