A modal is a dialog box/popup window that is displayed on top of the current page. To create responsive modal images, we use JavaScript to trigger the modal and display the current image inside the when it is clicked on. Also, we are using alt for the image caption text inside the model. Responsive modal images are images that are enlarged to fit into the window based on their size, device resolution, orientation and page layout. These images are usually enlarged with a mouse click. They can also be downloaded on a click from the web browsers. In this example, ... Read More

In this article, we are going to create a responsive slideshow gallery with the help of JavaScript and CSS. A responsive slideshow will display a series of images with a text on them and two arrow buttons using which you can browse through the images. A responsive slideshow gallery or, a responsive image slider gallery is same as the responsive image slide show. It is a series of images whch you can browse through. But instead of arrow marks this provides image thumbnails, showing the preview of the images in the slide show in a small view at the bottom ... Read More

In this article, we are going to create a responsive slideshow with the help of JavaScript and CSS. A responsive slideshow or we can say a responsive image slider, or a responsive images slider with text is a visually attractive and interactive design element that take part your viewers on the website it will have from one or more images with a text overlay on it. That is, it will display a series of images with a text on them. This also provide two arrow buttons suing which you can browse through the images (in both diresctions). This is used ... Read More

On a web page, first the header is visible, then the content, and at the end the footer. A header includes the logo of the website and the menu. It can also include a search box on the right. The menus are created using the element. The selected link is always highlighted. On hovering any link, the color of that specific link change. Let us see how to create a responsive header with CSS on a web page. Set the nav for logo and menus The element is used to place the logo and menus. Both these are ... Read More

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 More

Following is the code to produce a fixed social media icon bar with CSS −Example Live Demo *, *::before, *::after {    box-sizing: border-box; } main {    margin-left: 300px; } .SocialBar {    position: fixed;    display: block;    top: 30%;    font-size: 0;    width: 200px;    border: 2px solid darkgreen;    box-shadow: 5px 10px 18px rgb(55, 173, 39); } button {    display: block;    width: 100%;    margin: 0px;    border: none;    padding: 15px;    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;    font-weight: bold;    font-size: 20px; } button:not(:last-child) {   ... Read More

On a web page, we can easily create a button group. We will create a single div for all the buttons in a button group. They will be set with display inline-block. Also, the hover effect will be set. Create a Button Group on a web Page In a div, set the buttons using the element − Facebook Twitter LinkedIn Style the Button Groups The display suggests how to control the layout of an element. In this case, the inline-block of the display property displays ... Read More

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 More

A collapsible panel is a basic container coach view that creates a section area that can contain other controls. This section can be lengthy or collapsed to show hide data. To create a collapsible sidebar menu, we need HTML, CSS, and javascript. A collapsible sidebar will collapse along with the main page. In simple words, it means the menu bar is displayed on the page with its respective width; and main content of the page takes a minimum margin to display on the page. Following are the steps to be followed to create a collapsible sidebar menu. In this example, ... Read More

In this article, we will learn how to create a curtain navigation menu using HTML, CSS and JavaScript. The curtain navigation menu will overlay on the entire screen by pushing back the current page. These menus display the sub−links of a link to make the navigation more specific. To create curtain navigation, we have to do the same as we had done earlier. In curtain navigation, we have two buttons one is an open button (menu) and the other one is a close button (cross). When you click on the open button the navigation will be visible on the screen ... Read More