neumorphic header
This commit is contained in:
		
							parent
							
								
									f81da9ecf7
								
							
						
					
					
						commit
						8da0d19e44
					
				| 
						 | 
					@ -10,6 +10,7 @@
 | 
				
			||||||
		margin-left: 0px;
 | 
							margin-left: 0px;
 | 
				
			||||||
		margin-right: 0px;
 | 
							margin-right: 0px;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	/* Header/logo Title */
 | 
						/* Header/logo Title */
 | 
				
			||||||
	header {
 | 
						header {
 | 
				
			||||||
		text-align: center;
 | 
							text-align: center;
 | 
				
			||||||
| 
						 | 
					@ -37,15 +38,18 @@
 | 
				
			||||||
		padding: 10px;
 | 
							padding: 10px;
 | 
				
			||||||
		text-decoration: none;
 | 
							text-decoration: none;
 | 
				
			||||||
		text-align: center;
 | 
							text-align: center;
 | 
				
			||||||
 | 
							cursor: pointer;
 | 
				
			||||||
 | 
							transition: all 0.3s ease;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	/* Change color on hover */
 | 
						/* Change color on hover */
 | 
				
			||||||
	nav a:hover {
 | 
						nav a:hover {
 | 
				
			||||||
		background-color: #ddd;
 | 
							background-color: #ddd;
 | 
				
			||||||
		color: black;
 | 
							color: black;
 | 
				
			||||||
 | 
							box-shadow: 20px 20px 20px #eee, -20px -20px 20px #fff;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	nav a.active {
 | 
						nav a:active {
 | 
				
			||||||
		background-color: #ccc;
 | 
							background-color: #ccc;
 | 
				
			||||||
		color: #222;
 | 
							color: #222;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
| 
						 | 
					@ -83,6 +87,7 @@
 | 
				
			||||||
		margin-left: 0px;
 | 
							margin-left: 0px;
 | 
				
			||||||
		margin-right: 0px;
 | 
							margin-right: 0px;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	/* Header/logo Title */
 | 
						/* Header/logo Title */
 | 
				
			||||||
	header {
 | 
						header {
 | 
				
			||||||
		text-align: center;
 | 
							text-align: center;
 | 
				
			||||||
| 
						 | 
					@ -111,15 +116,16 @@
 | 
				
			||||||
		padding: 14px 20px;
 | 
							padding: 14px 20px;
 | 
				
			||||||
		text-decoration: none;
 | 
							text-decoration: none;
 | 
				
			||||||
		text-align: center;
 | 
							text-align: center;
 | 
				
			||||||
 | 
							cursor: pointer;
 | 
				
			||||||
 | 
							transition: all 0.3s ease;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	/* Change color on hover */
 | 
						/* Change color on hover */
 | 
				
			||||||
	nav a:hover {
 | 
						nav a:hover {
 | 
				
			||||||
		background-color: #111;
 | 
							box-shadow: 20px 20px 20px #070707, -20px -20px 20px #1b1b1b;
 | 
				
			||||||
		color: #ddd;
 | 
					 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	nav a.active {
 | 
						nav a:active {
 | 
				
			||||||
		background-color: #ccc;
 | 
							background-color: #ccc;
 | 
				
			||||||
		color: #222;
 | 
							color: #222;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
| 
						 | 
					@ -149,8 +155,9 @@
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 | 
					
 | 
				
			||||||
@media screen and (max-width: 700px) {
 | 
					@media screen and (max-width: 700px) {
 | 
				
			||||||
 | 
					
 | 
				
			||||||
	.row,
 | 
						.row,
 | 
				
			||||||
	nav {
 | 
						nav {
 | 
				
			||||||
		flex-direction: column;
 | 
							flex-direction: column;
 | 
				
			||||||
	}
 | 
						}
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
		Loading…
	
		Reference in New Issue