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
-
Economics & Finance
Front End Technology Articles
Page 500 of 652
How to create a tabbed image gallery with CSS and JavaScript?
A tabbed image gallery allows users to click on small thumbnail images to view them in a larger format. This creates an interactive way to display multiple images without taking up too much page space initially. Let us see how to create a tabbed image gallery using CSS and JavaScript. Syntax /* Basic thumbnail styling */ .thumbnail { cursor: pointer; transition: transform 0.3s; } /* Modal container */ .modal { display: none; position: fixed; z-index: 1000; ...
Read MoreHow to create a responsive Image Grid with HTML and CSS?
A responsive image grid displays images in a grid layout that adapts to different screen sizes. Using CSS flexbox, we can create a flexible grid system that automatically adjusts the number of columns based on the viewport width. Syntax /* Outer grid container */ .outer-grid { display: flex; flex-wrap: wrap; } /* Inner grid columns */ .inner-grid { flex: percentage; max-width: percentage; } /* Responsive breakpoints */ @media screen and (max-width: breakpoint) { /* Responsive ...
Read MoreHow to create a responsive header with CSS?
A responsive header is a navigation bar that adapts to different screen sizes, ensuring optimal user experience across desktop, tablet, and mobile devices. The header typically includes a logo and navigation menu that reorganizes itself based on the viewport width. Syntax /* Basic responsive header structure */ nav { overflow: hidden; background-color: color; } @media screen and (max-width: width) { /* Responsive styles */ } Set the nav for logo and menus The element is used to place the logo ...
Read MoreHow to create a pill navigation menu with CSS?
A pill navigation menu features rounded, button-like navigation links that resemble pills. This design provides an intuitive and modern user interface for website navigation. The pill shape is achieved using CSS border-radius property to create rounded corners. Syntax nav { /* Container styles */ } nav a { border-radius: value; /* Other pill styling */ } Example: Creating a Pill Navigation Menu The following example demonstrates how to create a complete pill navigation menu with hover effects and active states − ...
Read MoreHow to create a fixed social media icon bar with CSS?
A fixed social media icon bar allows users to access your social media profiles from anywhere on the page. The bar remains visible even when scrolling, making it convenient for visitors to connect with you on different platforms. Syntax .social-bar { position: fixed; top: value; left/right: value; } Example The following example creates a fixed social media icon bar that stays positioned on the left side of the page − * { ...
Read MoreHow to create a \"button group\" with CSS?
A button group is a set of buttons styled to appear connected as a single unit. This creates a cohesive interface element where related actions are grouped together. Button groups are commonly used for navigation, social media links, or filter options. Syntax .button-group { display: inline-block; } .button-group button { float: left; border: none; padding: value; } .button-group button:hover { background-color: value; } Example: Basic Button Group The following example creates a ...
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 content across multiple pages with a series of interconnected links. It helps users navigate through large amounts of content by showing page numbers like 1, 2, 3, 4, 5 along with previous and next navigation buttons. Syntax .pagination { display: inline-block; /* Additional styling properties */ } .pagination a { display: inline-block; padding: value; text-decoration: ...
Read MoreHow to create a mega menu (full-width dropdown menu in a navigation bar) with HTML and CSS?
A mega menu is a full-width dropdown menu that provides an expanded navigation structure with multiple columns, rows, and content sections. It's commonly used on websites to organize large amounts of navigation options in an accessible and visually appealing way. Home About Contact Projects ▼ Projects Menu Commercial Project 1 Project 2 ...
Read MoreHow to create a dropup menu with CSS?
A dropup menu is a navigation component where the menu items appear above the trigger button when hovered or clicked. Unlike traditional dropdown menus that open downward, dropup menus are useful when the trigger is near the bottom of the viewport. Syntax .dropup-menu { position: relative; } .menu-content { position: absolute; bottom: 100%; /* Opens upward */ display: none; } .dropup-menu:hover .menu-content { display: block; } Key Properties PropertyDescription position: ...
Read MoreHow to create a subnavigation menu with CSS?
A subnavigation menu is a secondary menu that appears below or within the main navigation. It provides additional navigation options for specific sections and typically appears when hovering over a main menu item using the CSS :hover selector. Syntax .subnav:hover .sub-content { display: block; } Basic HTML Structure The main navigation uses the element with nested divs for submenu containers − Main Link Dropdown Button ...
Read More