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 5 of 130
Create A Glassmorphism Login Form in HTML and CSS
This article will show you how to design a glassmorphism login form using HTML and CSS. Glassmorphism is a popular UI design trend based on frosted glass effects, which make elements look translucent with a blurred background. What is Glassmorphism? Glassmorphism is a UI design style that gives an element a frosted-glass effect with the following characteristics − Blurred Background: Creates a glassy, frosted effect. Transparency: Allows part of the background to show through. Light Borders and Shadows: Adds depth and defines the shape. ...
Read MoreHow to create a circle with text in Tailwind CSS?
In this article, we will learn how to create a circular element with text inside using Tailwind CSS. Tailwind CSS is a utility-first CSS framework that allows for fast UI development with pre-built classes. Prerequisites: You need to have Tailwind CSS included in your project. You can add it via CDN by including this link in your HTML head section: Basic Circle with Text To create a circle with text, we use Tailwind's utility classes for width, height, background, border-radius, and flexbox centering − Circle ...
Read MoreCreating a Quiz Tool: A Complete Beginner\'s Guide
Creating a quiz tool is a great way to learn web development fundamentals. This guide will walk you through building an interactive quiz application using HTML for structure, CSS for styling, and JavaScript for functionality. Project Overview Our quiz tool will include the following features − Question Display: Show one question at a time with multiple choice options User Interaction: Allow users to select answers using radio buttons Score Tracking: Keep track of correct answers and display final score Navigation: ...
Read MoreBuild a Technical Documentation Website Using HTML and CSS
Learn how to design a technical documentation website using HTML and CSS. This layout is optimized for programming documentation with user-friendly navigation and clean content organization. HTML provides the semantic structure while CSS handles styling and responsive design, creating a professional documentation experience similar to popular programming references. Navigation What is C++ Objects & Classes Inheritance Polymorphism Main Documentation Content Documentation sections with detailed explanations Code examples with syntax highlighting Structured content with proper typography #include using namespace std; int main() { cout
Read MoreHow to Resize SVG in HTML?
Every HTML document can contain different image formats, such as PNG, JPEG, SVG, GIF, etc. that can be adjusted according to your needs. This article will explore various ways to resize an SVG image in HTML. What is SVG? SVG (Scalable Vector Graphics) is an XML-based image format used in web development. It can be scaled to any size without losing quality, making it ideal for logos and icons. These images are resolution-independent, meaning they maintain crisp edges at any size. Syntax /* CSS approach */ svg { width: value; ...
Read MoreHow to Apply Global Font to the Entire HTML Document?
Sometimes we want to set a base attribute to everything and allow more specific selectors to adjust it for certain elements as needed. There are also cases, especially when doing brief temporary testing, where we want a font to apply to all text no matter what. Syntax /* Universal selector approach */ * { font-family: font-name; } /* With !important for absolute priority */ * { font-family: font-name !important; } Method 1: Using Universal Selector We can use the CSS universal selector (*) to select ...
Read MoreNeumorphism Loading Spinner in HTML & CSS
In this article, we will create a Neumorphism Loading Spinner using HTML and CSS. The loading spinner is a common UI element used to indicate a process in progress, such as loading content or waiting for data from the server. We'll add a modern touch to it using the Neumorphism design technique. Neumorphic designs give a 3D look by combining highlights and shadows around elements, making them appear to protrude or sink into the surface. Syntax .neumorphic-element { box-shadow: positive-x positive-y blur-radius dark-color, ...
Read MoreDifference between inline-flex and inline-block in CSS
CSS inline-flex and inline-block are values of the CSS display property that control how elements align and behave within their containers. Both make elements flow inline while providing different layout capabilities. Syntax selector { display: inline-block; } selector { display: inline-flex; } Key Differences CSS inline-block: Allows an element to flow inline with other elements while maintaining block-level characteristics like width and height. Children follow normal document flow. CSS inline-flex: Creates an inline-level flex container where ...
Read MoreHow to Create Glassmorphism Sidebar in HTML and CSS?
Glassmorphism is a design trend that makes elements appear translucent on the user interface, resembling frosted glass. This effect creates depth and visual hierarchy by making elements appear to float above the background with a semi-transparent, blurred appearance. Key Properties for Glassmorphism The glassmorphic effect is achieved using these CSS properties − backdrop-filter: blur() − Creates the frosted glass blur effect background-color with alpha − Provides semi-transparency border − Adds subtle borders for definition box-shadow − Creates depth and elevation ...
Read MoreHow to Vertically Align the Text with a Large Font Awesome Icon?
When working with large Font Awesome icons alongside text, achieving perfect vertical alignment can be challenging. This article explores various CSS methods to vertically align text with large Font Awesome icons effectively. Syntax /* Flexbox approach */ .container { display: flex; align-items: center; } /* Inline-block approach */ .container { font-size: 0; } .icon, .text { display: inline-block; vertical-align: middle; } /* Grid approach */ .container { display: grid; ...
Read More