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 457 of 652
What is CSS Flexbox?
CSS flexbox is a powerful layout model that makes it easier to design flexible and responsive layouts. It allows you to arrange child items efficiently within a container and automatically adjusts item dimensions when content overflows. Syntax selector { display: flex; } Terminology of CSS Flexbox Understanding these key terms is essential for working with flexbox − Flex container − An HTML element with display: flex applied to it. Flex items − Direct children of the flex container that are arranged using flexbox properties. Main axis − The ...
Read MoreWhat are the real world usage of CSS with SVG?
CSS with SVG provides powerful styling capabilities for scalable vector graphics. SVG (Scalable Vector Graphics) are vector-based images created using mathematical functions rather than pixel grids, making them infinitely scalable without quality loss. When combined with CSS, SVG becomes a versatile tool for creating interactive, animated, and responsive graphics. Syntax /* Target SVG elements directly */ svg element { property: value; } /* Target SVG elements by class */ .svg-class { property: value; } /* Target SVG elements by ID */ #svg-id { ...
Read MoreVarious tricks for :before pseudo elements using position property in CSS
The CSS :before pseudo-element allows you to insert content before an HTML element. When combined with the position property, you can precisely control where this content appears relative to its parent element, creating effects like custom icons, tooltips, notification badges, and styled form elements. Syntax selector:before { content: "text or symbol"; position: absolute | relative | fixed | static; top: value; left: value; right: value; bottom: value; } Example 1: Custom ...
Read MoreTargeting only Firefox with CSS
While developing web applications, developers must make them look consistent across all browsers. Some CSS properties are not supported by Firefox but work in other browsers like Chrome, Opera, etc. In such cases, we need to write CSS code that targets only the Firefox browser. In this article, we will learn two different methods to write CSS that targets only Firefox browsers. Syntax /* Method 1: Mozilla-specific CSS Extension */ @-moz-document url-prefix() { /* CSS code for Firefox only */ } /* Method 2: @supports Rule */ @supports(-moz-appearance:none) { ...
Read MoreLogical Properties in CSS
In CSS, logical properties allow developers to define styles based on the logical structure of the web page rather than the physical layout. This means you can apply CSS according to text direction or content flow, making your designs more adaptable to different languages and writing modes. Logical properties are primarily used to set HTML element's margin, padding, and border. They provide different variants of traditional margin, padding, and border properties that adapt to content flow direction. Syntax selector { property-block-start: value; property-inline-end: value; ...
Read MoreLoading Text Animation Effect using CSS
Loading text animations are essential for providing visual feedback to users while content loads. They improve user experience by indicating that something is happening in the background and keep users engaged during wait times. In this tutorial, we will learn to create different types of loading text animations using HTML and CSS. These animations are lightweight, smooth, and don't require JavaScript libraries. Syntax @keyframes animationName { 0% { /* starting properties */ } 50% { /* mid-point properties */ } 100% { /* ending ...
Read MoreIs there any selector for elements containing certain text in CSS?
To select elements containing certain text in CSS, we can use CSS attribute selectors. We can either use pre-defined attributes or add custom attributes in the HTML document. Syntax /* Exact match */ [attribute="value"] { } /* Contains word */ [attribute~="word"] { } /* Contains substring */ [attribute*="substring"] { } /* Starts with */ [attribute^="prefix"] { } /* Ends with */ [attribute$="suffix"] { } Method 1: Using Attribute Value Selector The attribute value selector [attribute="value"] selects elements with an exact attribute value match − ...
Read MoreHow to specify order of classes using CSS?
Cascading Style Sheets (CSS) is a powerful component of web development which enables the developers to determine the visual appearance of their websites. In CSS, classes are used as selectors which enables us to apply several specific styles to an element. You can also use multiple classes for a particular element. However, when you apply multiple classes to an element, it is necessary to know how to specify the order of these classes in which they will be rendered to avoid discrepancies and unexpected results. In this article, we will discuss different methods to specify the order of classes ...
Read MoreHow to create Paradoxical effect using CSS?
The Paradoxical effect is a visual effect used to create optical illusions where elements appear to move or behave in contradictory ways. This effect can add interesting and unique elements to your web pages by using CSS properties that create unexpected visual behaviors. This can be easily achieved using HTML and CSS combinations. In this article, we will explore techniques for creating paradoxical effects using CSS properties that work against each other, resulting in visually intriguing contradictions and animations. Syntax selector { property1: value1; property2: contradictory-value; ...
Read MoreHow to apply multiple transform property to an element using CSS?
The CSS transform property allows you to apply multiple transformations to an element simultaneously. You can combine different transform functions like rotate(), scale(), and translate() to create complex visual effects. Syntax selector { transform: function1(value) function2(value) function3(value); } Method 1: Multiple Transform Functions in Single Declaration The most efficient way to apply multiple transformations is by combining transform functions in a single declaration separated by spaces − Example This example applies rotation and scaling transformations on hover − ...
Read More