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
Web Development Articles
Page 588 of 801
Latest CSS Properties and APIs for Web Design in 2020
CSS continues to evolve with new properties and APIs that enhance web design capabilities. Here are some of the latest CSS features that provide developers with powerful tools for creating modern, responsive, and accessible websites. Key CSS Properties focus-within Pseudo-class The :focus-within pseudo-class selects elements that contain a focused element, improving focus accessibility for complex components. .form-group { padding: 20px; border: 2px solid #ccc; ...
Read MoreDisabling Pull-to-Refresh Feature on Mobile Browsers using CSS
The CSS overscroll-behavior property controls what happens when a user scrolls beyond the boundary of a scrollable area. On mobile browsers, this feature is particularly useful for disabling the pull-to-refresh gesture that occurs when users scroll past the top of a webpage. Syntax selector { overscroll-behavior: value; } Possible Values ValueDescription autoDefault browser behavior (allows pull-to-refresh) containPrevents scrolling from affecting parent elements noneCompletely disables overscroll effects including pull-to-refresh Example 1: Disabling Pull-to-Refresh on Body To disable pull-to-refresh on the entire page, apply overscroll-behavior: none to the ...
Read MoreCSS Updates - New Properties for Styling Text Decorations & Underlines
With the introduction of new text-decoration properties, we can now style text decorations with greater control and precision. The text-decoration property serves as shorthand for multiple decoration properties, while specific properties like text-underline-offset and text-decoration-skip-ink provide fine-grained control over underlines and text decoration behavior. Syntax selector { text-decoration: line style color thickness; } The text-decoration Shorthand Property The text-decoration property is shorthand for text-decoration-line, text-decoration-style, text-decoration-color, and text-decoration-thickness. Additional properties like text-decoration-skip-ink and text-underline-offset must be specified separately. Example Let us see an example to use the shorthand ...
Read MoreHow to Change Link Underline Color using text-decoration-color CSS?
The CSS text-decoration-color property is used to change the color of text decorations like underlines, overlines, and line-through effects. For links, this property allows you to customize the underline color independently from the text color. Syntax selector { text-decoration-color: value; } Possible Values ValueDescription color-nameSets the color using predefined names like red, blue, orange hex-valueSets the color using hexadecimal values like #FF5733 rgb()Sets the color using RGB values like rgb(255, 87, 51) inheritInherits the color from the parent element currentColorUses the current text color as decoration color ...
Read MoreCSS Latest Updates - Inner & Outer Values of display Property
The CSS display property now supports a two-value syntax that allows you to explicitly control both the outer and inner display types of an element. The outer display type determines how the element participates in flow layout, while the inner display type sets how the element's children are laid out. Syntax display: outer-value inner-value; Where outer-value can be block, inline, or run-in, and inner-value can be flow, flow-root, table, flex, grid, or ruby. Display Inline with Flow-Root The following example shows how to use inline flow-root to create an inline element that establishes ...
Read MoreHow to Create a Black and White Image Using CSS
The CSS filter property with the grayscale() function allows you to convert colored images to black and white. This effect removes all color information from an image, creating a monochrome appearance. Syntax selector { filter: grayscale(percentage); } Possible Values ValueDescription 0%Original image (no grayscale effect) 100%Completely grayscale (black and white) 50%Partially grayscale (semi-desaturated) Example 1: Alternating Black and White Images This example applies grayscale filter to even-positioned images − img { ...
Read MoreMaintain Image Quality When Applying CSS Transform & Scale
The CSS image-rendering property controls how browsers scale and display images, especially when transforms and scaling are applied. This property helps maintain image quality by specifying which algorithm the browser should use for image scaling. Syntax selector { image-rendering: value; } Possible Values ValueDescription autoDefault value. Browser chooses the scaling algorithm automatically smoothSmooths out colors and reduces pixelation high-qualityProvides higher-quality scaling with better algorithms crisp-edgesPreserves contrast and edges, ideal for pixel art pixelatedUses nearest-neighbor algorithm when scaling up Example: Comparing Different Rendering Methods The following example demonstrates ...
Read MoreCreating a Responsive Logo with CSS min() Function (No Media Query Involved)
The CSS min() function allows us to create responsive logos that automatically adapt to different screen sizes without using media queries. It compares multiple values and uses the smallest one, making it perfect for creating logos that scale down on smaller screens while maintaining a maximum size on larger screens. Syntax selector { property: min(value1, value2, ...); } How It Works The min() function evaluates multiple values and applies the smallest one. For responsive logos, we typically combine a viewport unit (like vw) with a fixed unit (like px) to ...
Read MoreCreating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)
Creating an infinitely scrolling slider using CSS Flexbox allows you to build smooth, continuous carousels. This technique combines CSS animations with flexbox layout to create seamless looping effects. Syntax .slider-container { display: flex; overflow: hidden; animation: slide duration linear infinite; } @keyframes slide { 0% { transform: translateX(0); } 100% { transform: translateX(-percentage); } } Method 1: Manual Navigation Slider This example creates a slider with navigation buttons for manual control − ...
Read MoreHow to Create LEFT-RIGHT Alignment of Containers with CSS Flex?
With CSS flexbox, you can easily create left-right alignment of containers. The flexible items are displayed horizontally using the flex-direction property, and the justify-content property controls how items are distributed along the main axis. Syntax .container { display: flex; flex-direction: row; justify-content: space-between; } Method 1: Using Flex Direction The div container is set to flex using the display: flex property. The flex-direction: row allows flex items to display horizontally, while justify-content: space-between pushes items to opposite ends − Example ...
Read More