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