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 545 of 801
Create survey form in HTML and CSS
Creating a survey form in HTML and CSS allows you to build interactive forms for collecting user feedback and data. This tutorial demonstrates how to create a professional, responsive survey form with modern styling and interactive elements. Syntax /* Basic form styling */ form { display: flex; flex-direction: column; } .form-group { margin-bottom: 1rem; } input, select, textarea { padding: 0.5rem; border: 1px solid #ccc; border-radius: 4px; } Complete ...
Read More9 Dot Menu using HTML and CSS
The 9 dots menu is a grid of nine clickable icons arranged in a 3x3 layout. When clicked, the menu expands to reveal individual icons that provide quick access to different functions. In this tutorial, we will learn how to create a 9 Dot Menu using HTML, CSS, and a little bit of JavaScript. Syntax .navigation { position: relative; width: 70px; height: 70px; transition: width 0.5s, height 0.5s; } .navigation.active { width: 200px; ...
Read MoreHow to Make the CSS margin-top Style Work?
Sometimes, the margin-top in CSS doesn't work as expected. You might not see the space you want above an element, or it might not behave correctly. This can happen because of things like collapsing margins, the element's type, or how it's positioned. Our task is to show you how to make the margin-top style work using different approaches, so you can control spacing in your designs. Syntax selector { margin-top: value; } Approaches to Managing Margin-Top We'll look at different ways to manage the margin-top property and control space ...
Read MoreHow to Remove the CSS :hover Behavior from an Element?
Removing the :hover effect means stopping an element from changing its appearance when a user hovers over it. You might need to do this if the hover effect is unnecessary, distracting, or doesn't fit with the design of your page. Methods to Remove CSS :hover Behavior There are several effective ways to disable the :hover effect from elements while maintaining clean, consistent styling. Method 1: Using pointer-events: none The pointer-events: none property disables all mouse interactions, including hover effects. This completely prevents the element from responding to pointer events − ...
Read MoreImplementing CSS Shapes for Creative Text Wrapping
CSS Shapes allow text to flow around custom shapes, breaking free from traditional rectangular boundaries. This powerful feature enables designers to create magazine-style layouts and visually appealing designs with dynamic text wrapping around circles, polygons, and irregular images. Syntax selector { shape-outside: circle() | ellipse() | polygon() | url(); float: left | right; clip-path: circle() | ellipse() | polygon(); shape-margin: value; } Core CSS Properties shape-outside Property The shape-outside property defines the area around which text should ...
Read MoreHow to Make the CSS vertical-align Property Work on the div Element?
This article will let you understand the vertical-align property in CSS. Here, we discuss the limitations of the vertical-align property and a few methods to overcome this, and hence, you will learn the solution to make the vertical-align property work on a div tag. Syntax vertical-align: value; Why does vertical-align don't work on div elements? Remember, the vertical-align property only works on inline, inline-block, and table-cell elements. You cannot use it to align block-level elements vertically. Tables work differently than divs because all the rows in a table are the same height. If ...
Read MoreHow to Make the CSS overflow: hidden Work on a Element?
The CSS overflow: hidden property is used to hide content that extends beyond the boundaries of an element. However, for it to work effectively, especially on table cells, you need to combine it with other CSS properties to control how the content is displayed. Syntax selector { overflow: hidden; } Approaches to Make the CSS overflow: hidden Work Using table-layout: fixed Property Using text-overflow and white-space Properties Method 1: Using table-layout: fixed Property By default, tables adjust column ...
Read MoreHow to Create an SVG Drop Shadow?
A drop shadow enhances the appearance of an SVG by giving it a 3D effect or a sense of depth. SVG drop shadows can be created using SVG filters and the CSS filter property. SVG Filters: Provides fine-grained control over shadow properties. CSS filter: Applies shadows using simpler syntax. Syntax For SVG filters − For CSS filter − filter: drop-shadow(x-offset y-offset blur color); Method 1: Using the Element in SVG ...
Read MoreHow to Create a Blinking Effect with CSS3 Animations?
To create a blinking effect with CSS3 animations, there are several approaches you can use. Blinking effects are commonly used to draw attention to specific elements on a webpage, such as warning messages, buttons, or text. CSS3 animations make it easy to implement such effects with clean and reusable code. Syntax @keyframes animation-name { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } selector { animation: animation-name duration timing-function iteration-count; } ...
Read MoreHow to Make CSS Ellipsis Work on a Table Cell?
When dealing with long text in a table, ensuring that it doesn't overflow and ruin your layout is crucial. CSS provides solutions to add ellipses (...) to text that exceeds a cell's width, keeping your UI clean and readable. This article explores two approaches: using the display property and the table-layout property. Syntax /* Basic ellipsis properties */ selector { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: value; } Method 1: Using the Display Property The display property ...
Read More