Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Vertical menus on a web page are mainly placed on the left or the right. These left or right menus are vertically aligned to make it easier for users to navigate or click them. To create a vertical menu, set a container and within that set the menu links. The display property is to be set as block to let the menu appear vertically. Let us see how to create a vertical menu with HTML and CSS. Set a container for the menu A div is set for the menu. The menu links are added using the element with ... Read More
On a web page, you can create a triangle easily. Use the clip-path property or even the child selector concept can be used. The clip-path allows a user to clip an element to a shape. This shape is to be set polygon to create a triangle. Syntax The syntax of CSS clip-path property is as follows − Selector { clip-path: /*value*/ } Create a Triangle using the clip-path The following example illustrate CSS clip-path property. Here, we have set the clip-path shape to polygon to create a triangle. This is done using the polygon() method ... Read More
On a web page, if you want to represent a folder-view, like in case of web hosting filed, then create a tree view. The root or the home are always clickable in a tree view. We set it clickable using the cursor property with the value pointer. The arrow key is rotated 90 degrees when it is clicked. This is achieved using the rotate() method with the transform property. Set the tree view root The root for the tree view is set using the . Within that, is set − ... Read More
Image gallery on a web page can be displayed in various forms. One of them is a tabbed image gallery. On clicking the image thumbnail from the image gallery, the image expands. Let us see how to create a tabbed image gallery with HTML and CSS. Set the images for the thumbnail For our example, we have considered 3 images and added to the web page using the element − Image Thumbnail When the mouse cursor is placed on the image, the image thumbnail will appear as clickable because we have set the cursor ... Read More
A subnavigation menu is a menu that appear just below the main menu. The menu is created using the element on a web page. Consider it as a secondary menu or a submenu. The submenus appear on mouse hovering any of the menus from the main menu. This is set using the :hover selector. Create a menu A menu on a web page is created using the element. For the submenus, a div container is created and the menu links are set using the element − Home Contact ... Read More
On a web page, you must have seen a stick menu positioned on the top. With that, a sticky element can also be placed on a web page. Also, using the position property, we can also make an image sticky that would stick even when the web page is scrolled. Let us see how to create a sticky image with HTML and CSS. Set the image Place an image on a web page using the element − Add some text to make the scroll appear Place some text after the image to let the scroll appear. ... Read More
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