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
CSS Articles
Page 48 of 130
Creating 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 MoreVertical Text, with Horizontal Letters in CSS
On a web page, you may need to set a vertical text and that too with horizontal letters. By combining the text-orientation: upright and writing-mode: vertical-rl properties, we can display vertical text with horizontal letters in CSS. Syntax selector { writing-mode: value; text-orientation: value; } Key Properties PropertyValueDescription writing-modevertical-rlLines flow vertically from top to bottom, horizontally from right to left text-orientationuprightCharacters remain upright and not rotated Example 1: Basic Vertical Text The following example demonstrates how to create vertical text with horizontal ...
Read MoreHow to Create a Triangle Using CSS clip-path?
The CSS clip-path property allows you to create various shapes by clipping an element to a specific path. One of the most common shapes created using this property is a triangle, which can be achieved using the polygon() function. Syntax selector { clip-path: polygon(x1 y1, x2 y2, x3 y3); } Triangle with clip-path Property To create a triangle using clip-path, you define three points that form the triangle vertices using the polygon() function. The coordinates are specified as percentages − clip-path: polygon(50% 0, 100% 100%, 0% 100%); ...
Read MoreHow to Create a Comment Box with a Containing Text Using CSS
A comment box with a containing text can be created using the CSS clip-path property. This technique creates speech bubble-like elements that visually connect to specific text content on the page, making it clear which text the comment refers to. Syntax selector { clip-path: polygon(points); } Example 1: Multiple Comment Boxes The following example shows how to create comment boxes with different orientations − .cb { position: relative; ...
Read MoreHow to Animate Bullets in Lists using CSS?
Animated list bullets enhance user interaction and provide visual feedback when users hover over list items. CSS allows us to create smooth transitions and hover effects on both ordered and unordered lists using properties like list-style, box-shadow, and transition. Syntax li { list-style: value; transition: property duration; } li:hover { /* Animation styles */ } Method 1: Animate Unordered List The following example demonstrates how to style and animate unordered list items with smooth hover effects using box-shadow and font-size transitions ...
Read MoreHide Dropdown Arrow for Select Input with CSS appearance
The CSS appearance property controls how form elements are displayed by removing or applying platform-native styling. It's commonly used to hide dropdown arrows in select elements and number input spinners for custom styling. Syntax selector { appearance: value; -webkit-appearance: value; /* Safari and Chrome */ -moz-appearance: value; /* Firefox */ } Possible Values ValueDescription noneRemoves all platform-native styling autoDefault browser styling (default value) textfieldStyles element as a plain text field Example 1: Hide Dropdown Arrow for Select Element ...
Read MoreCustom Radio Buttons with CSS appearance Property
The CSS appearance property allows you to style form elements like radio buttons with custom designs instead of the default browser styling. By setting appearance: none, you can create completely customized radio buttons that match your website's design. Syntax input[type=radio] { appearance: none; -webkit-appearance: none; -moz-appearance: none; } Example: Basic Custom Radio Button The following example creates custom radio buttons with rounded corners and color changes on selection − input[type=radio] { ...
Read MoreCustom Checkbox with CSS appearance Property
The CSS appearance property is used to control how form elements display according to the operating system's native styling. When set to none, it removes default styling, allowing you to create completely custom checkboxes with unique designs. Syntax selector { appearance: value; } Possible Values ValueDescription noneRemoves all platform-native styling autoUses the default platform styling (default value) Method 1: Round Custom Checkbox The following example creates a round custom checkbox using appearance: none and border-radius: 50% − ...
Read More