- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
On a web page, we can easily create an element and position it sticky i.e., that specific element will remain stick even when the web page is scrolled. This is achieved using the position property with the value sticky. Create a div for the sticky element Set a parent div container − Sticky Element Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit vel dolore delectus esse consequatur at nulla, consequuntur sint quas ea. Incidunt, ex. Consequatur ipsa earum veritatis fugiat iusto, doloremque sunt beatae quaerat laboriosam nemo soluta ... Read More
In a stacked form, the input fields, labels and buttons are stacked on top of each other. When the web page with a form is opened on different devices, then it stacks. A form is created on a web page using the element. Let us see how to create a stacked form with CSS. Create a form The form on a web page is created using the element. The input fields include input type text, password, and repeat password. With that, the signin and register buttons are also positioned − Email ... Read More
Under the menu section of a web page, you must have seen dropdowns. On keeping the mouse cursor on a dropdown menu button, the sub menus are visible. Such split buttons appear to be in a different section within the same button. This can be represented by arrow keys or a bottom arrow. Let us see how to create such menus with HTML and CSS. Create a dropdown menu button Use the element to create a button for the dropdown menu − Button Style the button like this − button { background-color: rgb(18, ... Read More
On a login page, you must have seen login form enter the username and password to login. However, nowadays, social media buttons are also visible to login using Facebook, Twitter, Gmail, etc. We can easily design such forms using CSS. For that, you need to also set the social media icons. Let us see how to create a social media login form with CSS. Set the CDN for the social media icons To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the element − ... Read More
If you want to show notifications to the user about any information, such as a coupon for buying the product, you can create a snackbar. Use them as popups to display a message at the bottom of the screen. Generally, the snackbar vanish after some time. The snackbar appears to fadein and fadesout after some time. Let us see how to create a snackbar on the click of a button with CSS and JavaScript. Create a button for the snackbar For the snackbar to appear, you need to click on a button. Create a button using the element − ... Read More
The smooth scrolling effect can be set on a web page using the scroll-behaviour property. Set the value to smooth. Check this by implementing scrolling effect on the click of buttons i.e., reaching the below section by clicking a button the top, and vice versa. Let us see how to create a smooth scrolling effect with HTML and CSS. Smooth scrolling for the web page To begin with, under the , set the scroll-behaviour property to implement the property for thr entire web page − html { scroll-behavior: smooth; } Set the two sections The ... Read More
If you want to display a skill bar stating the proficiency of a skill, then create a skill bar. Let’s say we are showing programming proficiency that a student is proficient in which programming language. Create a skill bar and display the proficiency in percentage with different colors for different skills. Let us see how to create a skill bar with CSS. Create a container Create a div container for each skill bar. We have shown only a single skill bar below − Python 75% Other skill bars are shown below − ... Read More
Scroll indicator indicates and animates accordingly. When the scroller goes down, the progess bar suggests how many elements are still remaining. When the scroller takes you to the bottom, the scroll indicator i.e., the progress bar also ends. Let us see how to create a scroll indicator with CSS and JavaScript. Fixed header First, set the position of the header to be fixed using the position property with the value fixed. The header will remain fixed even when the web page navigates to the bottom − .header { position: fixed; top: 0; ... Read More
The zig zag layout would have an image, then text. Next, text, and then image, and it goes on. The responsive zig zag would arrange the text and image according depending on the device, desktop, tablet or mobile. The column will appear on top each other on a smaller device like a mobile. Let us see how to create a responsive zig zag layout with HTML and CSS. Set a container for text We have set a container for text and the class name is given width66. One of them is shown below. The text will take 66% of the ... Read More
A responsive website works on every device whether it’s a desktop, tablet or a mobile. To set the responsiveness, we use Media Queries. Create the header container Create a div for the headerL Website ↶ Style the header Align the header text in the center using the text-align property − .header { padding: 80px; text-align: center; background: #7b1abc; color: white; } Create the navigation menu The is used to create the navigation menu − ... Read More