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
CSS Articles
Page 32 of 130
How to create a product card with CSS?
On an E-commerce website, you must have seen product cards for specific products. It includes the product name, image, price, any discount, etc. On a web page, we can easily create a product card with CSS. With that, the Buy Now or Add to Cart button is also placed on this card so it’s easier for users to directly buy. Set the div for the card Under the div for the product card, set the product image and the product name as a heading. Rest, place the product details and price in the . Also, the buy button is set ...
Read MoreHow to create a preloader with CSS?
A preloader as the name suggests loads when the web page is loaded. Consider it as a loading page or a loading screen before the content on the web page is visible. With CSS, we can easily create a preloader and can also style it using the border properties. The animation for the loader is set with keyframes. Style the loader To style the loader, the border properties are used. The height and width are also set − .loader { border: 16px double #ffee00; border-radius: 50%; border-top: 16px solid #7434db; ...
Read MoreHow to create a popup chat window with CSS and JavaScript?
On a website, in the bottom-right, you must have seen a popup chat windows. Can be mostly seen on a website hosting website. This allows a user to directly ask sales questions before buying the product. Such popup chat window can be easily created on a web page with CSS. Let us see how. Create the chat button First, create a button using the element − Chat Position the chat button To position the chat button, use the position property with the value fixed. The right and bottom properties are used to position and place the button on bottom-right − .openChatBtn { background-color: ...
Read MoreHow to create a pill navigation menu with CSS?
The Pill navigation menu is used for navigation and enhances user experience. The navigation items are set within it. The element is used to create a menu and works the same for pill navigation menu as well. Let us see how to create a pill navigation menu on a web page. Create a pill navigation menu First, we will create a menu using the element. The links are set using the element − Home Login Register Contact Us More Info ...
Read MoreHow to create a password validation form with CSS and JavaScript?
On a registration page, you must have seen an input filed to set the password. On entering the password, the validation system suggests you how to construct a password. For example, a password should have at least a number, character, it should be minimum 8 characters. In this tutorial, we will see how to set the same password validation form on a web page. On typing to set the password the validation system will suggest the correct suggestions. Let us see how. Create a form The element is used to create a form on a web page. Two ...
Read MoreHow to Create a Parallax Scrolling Effect in CSS?
By specifying different speeds for background and foreground content, we can create a parallax scrolling effect using CSS. On scrolling up and down, you can easily notice the difference, Mostly, you can find such effect on the home page of a website. Set the image First, place and image using the background-image property. With the url, the link of the background image is sourced − background-image: url("https://www.tutorialspoint.com/static/images/home/coding-groundhero.svg"); Set the height You need to set a minimum height using the min-height property − min-height: 500px; Create the parallax scrolling effect The parallax scrolling effect can be set ...
Read MoreHow to create a pagination with CSS?
When you give page numbers to each page of a book, it is called pagination. On a website, pagination allows dividing pages and is a series of interconnect pages. It divides and sets ordinal number pf pages. For example, the first 1, 2, 3, 4, 5 pages links are visible on a web page to make it easier for users to navigate related content. Let us see how to create a pagination on a web page with the previous and next links as well. Create links for pagination The links are set using the element. A div is set ...
Read MoreHow to create a navigation menu with an input field inside of it?
On a web page, you may need to place an input field on a navigation menu. Such input field can be used as a search box for the users to search anything on the website. To place the search input field on the right, use the float CSS property and set it to the right value. Create a navigation menu The element is used to create a menu on a web page. The menu links are set using the element − Home Login Register Contact Us More Info ...
Read MoreLinear gradient with rainbow color
To create a linear gradient that looks like rainbow color, you can try to run the following code - Example #demo { height: 100px; background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); } Linear Gradient Rainbow
Read MoreHow to use text as background using CSS?
In general, we use text in foreground not as background because text is the most important thing for any website and organizing text on frontend with good visibility, readability and fonts to show the users is also important. But sometimes, you need to show the text as background for other text or HTML element with some content. In that case you can use the z-index property of CSS with different properties to show text as background. There are two different ways of using the z-index property with other properties and selectors to show text as background using CSS as listed ...
Read More