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
Front End Technology Articles
Page 555 of 652
How to create a fixed social media icon bar with CSS?
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 MoreHow to create a dropup menu with CSS?
Following is the code to create a dropup menu with CSS −Example Live Demo .menu-btn { background-color: #7e32d4; color: white; padding: 16px; font-size: 20px; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border: none; } .dropdown-menu { position: relative; display: inline-block; padding-top: 130px; } .menu-content { display: none; position: absolute; bottom: 50px; background-color: #017575; min-width: 160px; z-index: 1; } .links { color: rgb(255, 255, 255); padding: 12px 16px; text-decoration: none; display: block; font-size: 18px; font-weight: bold; border-bottom: 1px solid black; } .links:hover { background-color: rgb(8, 107, 46); } .dropdown-menu:hover .menu-content { display: block; } .dropdown-menu:hover .menu-btn { background-color: #3e8e41; } Hover over the below button to open a dropup menu Open
Read MoreHow to create a navigation bar with equal-width navigation links with CSS?
Following is the code to create a navigation bar with equal-width navigation links.−Example Live Demo Document body{ margin:0px; margin-top:60px; padding: 0px; } *,*::before,*::after{ box-sizing: border-box; } nav{ position: fixed; top: 0; width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { width: 20vw; padding: 17px; display: inline-block; text-align: center; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; } .links:hover { background-color: rgb(100, 100, 100); } .selected{ background-color: rgb(0, 18, 43); } Home Login Register Contact Us More Info Equal width navigation menu OutputThe above code will produce the following output −
Read MoreHow to create a navigation bar with a centred link/logo with CSS?
Following is the code to produce a navigation bar with a centered link/logo −Example Live Demo Document body{ margin:0px; margin-top:60px; padding: 0px; } nav{ position: fixed; top:0; width: 100%; background-color: rgb(251, 255, 196); overflow: auto; height: auto; } .left-links{ display: inline-block; position: absolute; left: 0; } .right-links{ display: inline-block; position: absolute; right: 0; } .center-links{ display: inline-block; margin-left: 50%; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(0, 0, 0); text-decoration: none; font-size: 17px; font-weight: bolder; } .links:hover { border-bottom: 2px solid purple; } .selected{ border-bottom: 2px solid purple; } Login Register Home Contact Us More Info Hover on the above links OutputThe above code will produce the following output−
Read MoreHow to create a horizontal scrollable menu with CSS?
Following is the code to produce a horizontal scrollable menu with CSS −Example Live Demo Document body{ margin:0px; margin-top:10px; padding: 0px; } nav{ width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; white-space: nowrap; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; } .links:hover { background-color: rgb(100, 100, 100); } .selected{ background-color: rgb(0, 18, 43); } Home Login Register Contact Us More Info Our Social Links Visit Us OutputThe above code will produce the following output −On resizing the browser window horizontal scrolling will be seen −
Read MoreHow to create a Hoverable Sidenav with CSS?
Following is the code to create hoverable side navigation buttons with CSS.Example Live Demo Document nav a { position: fixed; left: -120px; transition: 0.3s; padding: 10px; width: 140px; text-decoration: none; font-size: 20px; color: black; font-weight: bolder; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav a:hover { left: 0; } #Info{ top: 20px; background-color: #6de2f7; } #Social{ top: 80px; background-color: #71fc71; } #Address { top: 140px; background-color: #c4f553; } #Home { top: 200px; background-color: rgb(225, 115, 240); ...
Read MoreHow to create a responsive side navigation menu with CSS?
Following is the code to create a responsive side navigation menu with CSS −Example Live Demo body { margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } nav { margin: 0; padding: 0; width: 150px; background-color: #2f77e4; position: fixed; height: 100%; overflow: auto; } nav a { display: block; color: rgb(255, 255, 255); font-weight: bolder; font-size: 20px; padding: 16px; text-decoration: none; } nav a.selected { background-color: rgb(15, 189, 20); color: rgb(255, 255, 255); } nav a:hover:not(.selected) { background-color: ...
Read MoreHow to create a responsive navigation menu with icons, using CSS?\\n
Following is the code for creating the responsive navigation menu with icons.Example Live Demo Document body{ margin:0px; margin-top:10px; padding: 0px; } nav{ width: 100%; background-color: rgb(39, 39, 39); overflow: auto; height: auto; } .links { display: inline-block; text-align: center; padding: 14px; color: rgb(178, 137, 253); text-decoration: none; font-size: 17px; } .links:hover { background-color: rgb(100, 100, 100); } .selected{ background-color: rgb(0, 18, 43); } @media screen and (max-width: 600px) { .links { display: block; } } Home Login Register Contact Us More Info OutputThe above code will produce the following output −When the screen will be resized to 600px −
Read MoreHow to create a Menu Icon with CSS?
To create a Menu Icon with CSS, the code is as follows −Example Live Demo div { width: 40px; height: 7px; background-color: blue; margin: 5px 2px; } > Sample Menu Icon OutputThis will produce the following output −
Read MoreCSS cue property
The cue property is a shorthand for setting cue-before and cue-after. If two values are given, the first value is cue-before and the second is cue-after. If only one value is given, it applies to both properties.ExampleFor example, the following two rules are equivalent −
Read More