Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
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
On a web hosting website, you must have seen the price plans. Also, on a website that sell membership, a pricing comparison table is visible. Such tables compare the features of the various plans, for example, free and paid, or free, business, enterprise, etc. plans. Let us see how to create a responsive pricing table with CSS i.e., how will such tables will be visible on different devices. Compare Fields Set the fields for comparison. For that, you can use the and mention the features. Here, we have shown a single plan i.e., pricing table for free membership i.e. ... Read More
If you are a shutterbug and loves photography, you would love to display it on a website for sure. For that, grids are created for the gallery that also works on different devices. The responsiveness can also be set easily. Let us see how to create a responsive portfolio gallery grid. Set the main content Under the content, set the parent div. Within that, place the divs for image and then the content. Here, we have only shown a single div for our portfolio gallery − ... Read More
A CSS Pseudo-element is basically a selector for specific parts of an element such as first-letter, first-line, etc. the :after and :before pseudo elements can be used to insert after and before an element respectively. Syntax Following is the syntax for using CSS Pseudo elements on an element − Selector::pseudo-element { css-property: /*value*/; } The ::before pseudo element Let’s see an example of CSS Pseudo Elements. Here, we have used the ::before. If you want to insert a content before an element, then use the ::before pseudo-element − ol > li::before { ... Read More
On a web page, you may need to set a vertical text and that too with horizontal letters. By specifying the text-orientation: upright and writing-mode: vertical-rl, we can display vertical text with horizontal CSS. Syntax The syntax of CSS writing-mode and text-orientation property is as follows − Selector { writing-mode: /*value*/ text-orientation: /*value*/ } Create a Vertical Text with Horizontal Letters The following example illustrate how to create a vertical text with horizontal letters − Text Orientation To create a vertical text, set the text-orientation to upright − text-orientation: upright; ... Read More