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
Front End Technology Articles
Page 453 of 652
How to disable resizable property of textarea using CSS?
The CSS resize property controls whether an element can be resized by the user. By default, textareas are resizable, allowing users to drag their corners to change dimensions. Setting resize: none disables this functionality completely. Syntax textarea { resize: none; } Possible Values ValueDescription noneDisables resizing completely bothAllows resizing in both directions (default) horizontalAllows resizing only horizontally verticalAllows resizing only vertically Example: Disabling Textarea Resize The following example creates two textareas − one resizable (default) and one non−resizable − ...
Read MoreHow to disable text selection highlighting using CSS?
To disable text selection highlighting using CSS, you can prevent users from selecting and copying content. The CSS user-select property controls whether the user can select text within an element. Syntax selector { user-select: value; } Possible Values ValueDescription noneText cannot be selected by the user autoDefault behavior, text can be selected textText can be selected by the user allAll content of the element will be selected atomically Example: Disabling Text Selection The following example shows how to disable text selection on specific content using the ...
Read MoreSorting Function in SASS
In this article, we will learn about the sorting function in Sass, but before moving forward, let's have a basic idea about Sass; so sass is a powerful and popular preprocessor language for CSS that allows developers to write more efficient and maintainable stylesheets. One of the best advantages of Sass is the ability to use functions to streamline the development process. However, one function that Sass does not provide out of the box is a sorting function. Sorting is a common task in all programming languages and can be useful in many different contexts when working with stylesheets. ...
Read MoreNeumorphismUI Form
NeumorphismUI is a design trend that combines skeuomorphism with modern aesthetics, creating elements that appear to extrude from the background. When applied to forms, it creates a tactile, interactive feeling that enhances user experience and makes interfaces more engaging. Syntax The key to neumorphism is using dual box-shadows to create the illusion of depth − .neumorphic-element { box-shadow: -5px -5px 10px #ffffff, 5px 5px 10px #b7b7b7; /* OR for inset effect */ box-shadow: inset -5px -5px 10px #ffffff, inset 5px 5px 10px #b7b7b7; } ...
Read MoreLast-child and last-of-type selector in SASS
SASS provides advanced selectors that extend CSS functionality, including :last-child and :last-of-type pseudo-selectors. These selectors help target specific elements based on their position within parent containers. Last-child Selector in SASS The :last-child selector targets the last child element within a parent container, regardless of the element type. It applies styles to the final element and all its nested children. Syntax .parent-element :last-child { /* CSS properties */ } Example 1: Basic Last-child Selection This example demonstrates selecting the last child element within a container − ...
Read MoreHow to rotate shape loader animation using CSS?
In this article, we'll see how to rotate shape loader animation using CSS. Loading animations of different shapes is an essential part of a web app as it helps users stay engaged while they wait for a website to load. One popular type is the rotating shape loader, where a shape spins continuously until the web page is fully loaded. Moving ahead, we are going to use different approaches to rotate shape loader animations with various examples. Syntax .loader { animation: rotation duration timing-function iteration-count; } @keyframes rotation { ...
Read MoreHow to design initial letter of text paragraph using CSS?
The CSS ::first-letter pseudo-element is used to style the first letter of a text paragraph. This allows you to apply specific styles to the initial letter of the first line of a block-level element, making it stand out with different font size, color, or style. Syntax selector::first-letter { property: value; } Common Properties The following properties are commonly used with ::first-letter − PropertyDescription font-sizeSets the size of the first letter colorChanges the color of the first letter floatCreates drop cap effect line-heightControls vertical spacing marginAdds space around the ...
Read MoreHow to display a link using only CSS?
To display a link using CSS, we can style anchor elements with various properties to control their appearance and behavior. CSS allows us to customize how links look, whether they appear active or disabled, and how users interact with them. Syntax a { color: value; text-decoration: value; pointer-events: value; cursor: value; } Properties Used The following CSS properties are commonly used to style links − PropertyDescription colorDefines the color of the link text text-decorationControls underline, overline, ...
Read MoreHow to create animated banner links using HTML and CSS
We can create animated banner links using HTML and CSS to make advertisements and call-to-action buttons more engaging. HTML provides the banner structure while CSS handles styling and animations to draw user attention and increase click-through rates. Syntax a { animation: animation-name duration timing-function direction iteration-count; } @keyframes animation-name { 0% { /* initial styles */ } 50% { /* middle styles */ } 100% { /* final styles */ } } Example: Animated Banner Link The ...
Read MoreHow to create Area Chart using CSS
An area chart is a graphical representation of data that displays quantitative information by filling the area between a line and the axis. Using CSS custom properties and the clip-path property, we can create visually appealing area charts directly in the browser without external libraries. Syntax .area-chart { clip-path: polygon(x1 y1, x2 y2, x3 y3, x4 y4); --start: value; --end: value; } Key Components To create an area chart, we need these essential elements − CSS Custom Properties − Variables ...
Read More