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
Articles by Diksha Patro
Page 6 of 10
How to darken an Image using CSS?
To darken an image using CSS, we can apply various techniques such as adjusting brightness with filters, creating overlays with opacity, or using gradient overlays. This effect is commonly used to enhance text readability over background images or create visual emphasis. Syntax /* Method 1: Using filter property */ img { filter: brightness(percentage); } /* Method 2: Using overlay with opacity */ .container::after { background-color: black; opacity: value; } /* Method 3: Using linear-gradient overlay */ .element { background-image: ...
Read MoreHow to Create Wave Background using CSS?
To create wave background using CSS is a popular technique used to add a unique and dynamic visual element to web pages. We will be understanding two different approaches to create wave background using CSS. In this article, we are having a blank webpage and our task is to create wave background using CSS. Approaches to Create Wave Background Here is a list of approaches to create wave background using CSS which we will be discussing in this article with stepwise explanation and complete example codes ? Wave Background Using SVG ...
Read MoreHow to Create a Wave Loader using CSS?
In this article, we will be creating a Wave Loader using CSS. Wave loader is a loading animation with a wave-like effect. It is a standard way for signaling progress in online applications, and it may enhance the user experience by indicating that material is being loaded. Making a CSS wave loader is a basic technique that uses CSS animation and keyframes. You may design a dynamic and aesthetically beautiful wave loader that can be adjusted to meet your individual demands by setting the animation attributes and keyframes. Syntax @keyframes wave-animation { 0% ...
Read MoreHow to create a wave ball effect using CSS?
In this article, we use CSS to create a wave ball effect that can offer a unique and visually attractive touch to any website or application. This effect can be used to make buttons, progress indicators, and other user interface elements stand out from the crowd. To achieve this effect, you will need to be familiar with several fundamental CSS properties such as border-radius, box-shadow, and animation. Syntax .wave-ball { width: value; height: value; border-radius: 50%; box-shadow: shadow-values; ...
Read MoreHow to create a Vertical Navigation Bar using HTML and CSS ?
A vertical navigation bar is a UI component that displays navigation links in a vertical stack, typically positioned on the left or right side of a webpage. It helps users navigate through different sections or pages of a website efficiently. HTML provides the structure while CSS handles the styling and positioning. Syntax /* Basic vertical navigation structure */ nav { width: value; height: value; background-color: color; } nav ul { list-style-type: none; margin: 0; ...
Read MoreHow to align text in CSS where both columns are straight?
CSS provides several methods to align text in two straight columns. This technique is useful for creating layouts where content needs to be evenly distributed across two vertical sections while maintaining proper alignment. Syntax /* Using Flexbox */ .container { display: flex; justify-content: space-between; } /* Using Float */ .column { float: left; width: 50%; } /* Using Text Align */ .column { text-align: left | center | right; } Method 1: Using ...
Read MoreHow to Align Navbar Items to Center using Bootstrap 4?
Bootstrap 4 is a popular CSS framework that helps developers create responsive, mobile-first websites quickly and easily. One of the most common design elements in a website is the navigation bar or navbar. In this article, we will discuss how to align the items in a navbar to the center using Bootstrap 4. Methods There are two effective methods to center navbar items in Bootstrap 4 − Method 1: Using Built-in Bootstrap 4 Classes Method 2: Using Custom CSS Method 1: Using Built-in Bootstrap 4 Classes Bootstrap 4 provides the justify-content-center class which ...
Read MoreHow to Align the modal content box to the center of any screen?
Centering a modal content box on any screen is essential for creating professional user interfaces. CSS provides several effective methods to achieve perfect center alignment using positioning and flexbox techniques. Syntax /* Method 1: Absolute positioning */ .modal { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Method 2: Flexbox */ .modal-container { display: flex; align-items: center; justify-content: center; } Method 1: Using ...
Read MoreHow to align an item to the flex-end in the container using CSS ?
In CSS, aligning items to the flex-end in a container allows you to position flex items at the end of either the main axis or cross axis. This is useful for creating layouts where items need to be positioned at the bottom (cross axis) or right side (main axis) of the container, providing precise control over element positioning in flexbox layouts. Syntax /* Align items to the end of the cross axis (vertical) */ .container { display: flex; align-items: flex-end; } /* Align items to the end of ...
Read MoreHow to align an item set to its default value in CSS?
In CSS, aligning an item to its default value means ensuring that the item maintains the alignment specified by the parent container's align-items property. The default value for align-items is stretch, but you can set it to other values like center, flex-start, and so on. Syntax /* For container-level alignment */ .container { align-items: stretch; /* default value */ } /* For individual item alignment */ .item { align-self: auto; /* inherits from parent */ } /* For inline/table-cell elements */ .element { ...
Read More