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 559 of 801
Modern CSS Cards
Modern CSS cards are essential components for displaying information in an organized, visually appealing format. They're commonly used on e-commerce sites to showcase products, on educational platforms for courses, and across various websites to present content in digestible chunks. Syntax .card { display: flex; flex-direction: column; border-radius: value; box-shadow: value; width: value; background-color: value; } Example 1: Basic CSS Card This example creates a simple card with an image, title, ...
Read MoreNeon Text Display Using HTML & CSS
Creating neon text effects on web pages is a popular trend that adds visual appeal and draws user attention to important content. Neon text effects can be used for logos, headings, advertisements, and other elements to make them stand out. In this tutorial, we will use the text-shadow CSS property to create various neon text effects. Syntax text-shadow: horizontal-offset vertical-offset blur-radius color; The text-shadow property creates the glow effect by accepting horizontal offset, vertical offset, blur radius, and color values. For neon effects, we typically set both offsets to 0 and use multiple shadow values ...
Read MoreHow to define word-break property to allow words to be continued to the next line in CSS?
The CSS word-break property controls how words should break when they reach the edge of their container. This property is essential for maintaining readable text layouts, especially when dealing with long words or narrow containers that might cause text overflow. Syntax selector { word-break: value; } Possible Values ValueDescription normalDefault behavior - words break at natural break points break-allWords can break at any character to prevent overflow keep-allPrevents word breaks for CJK (Chinese, Japanese, Korean) text Example: Using break-all Value The following example demonstrates how word-break: ...
Read MoreHow to define two column layout using flexbox?
To create a two column layout using flexbox can be so easy if you have the knowledge of CSS display property. Flexbox is a layout model in CSS that provides an efficient and flexible way to arrange and distribute space between items within a container. It arranges elements in a single dimension, either horizontally or vertically, within a container. To know more about the CSS Flexbox Layout visit the attached link. Imagine we have parent div and inside that div we have two child div all we have to do is place those child div side by horizontally. ...
Read MoreHow to define the shape of the corners is animatable using CSS?
The CSS border-radius property can be animated to create smooth transitions between different corner shapes. This technique allows you to transform elements from sharp corners to rounded or circular shapes when users interact with them. Syntax selector { border-radius: initial-value; transition: border-radius duration; } selector:hover { border-radius: final-value; } Approach To create animatable corner shapes, follow these steps − Create an HTML element and assign it a class name Set the initial border-radius value (usually 0% for sharp corners) ...
Read MoreHow to define all the list properties in one declaration using CSS?
The CSS list-style property is a shorthand property that allows you to define all list-related styling in one declaration. This property combines list-style-type, list-style-position, and list-style-image into a single, convenient statement. Syntax selector { list-style: [type] [position] [image]; } Property Values ValueDescription list-style-typeSpecifies the type of list marker (disc, decimal, square, etc.) list-style-positionSpecifies marker position (inside or outside) list-style-imageSpecifies an image as the list marker Example 1: Basic List Styling The following example demonstrates how to style an unordered list with decimal markers positioned inside − ...
Read MoreHow to use a not:first-child selector in CSS?
The CSS :not(:first-child) selector combines the :not and :first-child pseudo-classes to select all elements except the first child of their parent. This is useful when you want to style all child elements except the first one. Syntax element:not(:first-child) { /* CSS styles */ } Method 1: Selecting Specific Child Elements You can target specific elements within a parent container, excluding the first one − div p:not(:first-child) { color: green; ...
Read MoreHow to translate an image or icon by hovering over it?
In web development, interactivity is key to providing a memorable user experience. One common technique used to add interactivity is hovering over images or icons to reveal more information or change the appearance. Translating an image or icon by hovering over it is a great way to add some movement and interest to your website. In this article, we will learn how to translate an image or icon on hover. To perform this task, we will learn different approaches using only HTML and CSS. Syntax selector { transform: translateX(value) | translateY(value) | ...
Read MoreHow to transform child elements preserve the 3D transformations?
When working with 3D transformations in CSS, preserving the 3D context for child elements requires specific techniques. The transform-style property controls whether child elements are rendered in 3D space or flattened to a 2D plane. Syntax selector { transform-style: preserve-3d | flat; } Method 1: Using Transform-style Property The transform-style: preserve-3d property allows child elements to maintain their 3D positioning when the parent has 3D transforms applied − .container { perspective: 800px; ...
Read MoreHow to test CSS property of an element using Protractor?
Testing CSS properties is crucial in ensuring the quality of a web application. CSS properties determine how elements are displayed on a webpage, such as font size, color, and layout. Protractor is a popular end-to-end testing framework that uses WebDriver to automate interactions between a web application and a browser, widely used to test Angular applications. In this article, we will learn how to test the CSS properties of an element with the help of Protractor using different methods. Prerequisites Installation Requirements: Install Protractor: npm install -g protractor Update binaries: webdriver-manager update Start server: webdriver-manager ...
Read More