Difference between revisions of "User:Mediarch/Page.css"
(It was a horrible idea. Abort abort) (Tag: Blanking) |
m (ingore) |
||
| Line 1: | Line 1: | ||
| + | body { | ||
| + | font-family: 'Roboto', sans-serif; | ||
| + | padding: 0; | ||
| + | margin: 0; | ||
| + | } | ||
| + | nav { | ||
| + | width: 100%; | ||
| + | margin: 0 auto; | ||
| + | background: lightpink; | ||
| + | padding: 10px ; | ||
| + | box-shadow: 0 5px 5px hotpink; | ||
| + | } | ||
| + | nav ul { | ||
| + | list-style: none; | ||
| + | text-align: center; | ||
| + | } | ||
| + | |||
| + | nav ul li { | ||
| + | display: inline-block; | ||
| + | } | ||
| + | |||
| + | nav ul li a { | ||
| + | display: block; | ||
| + | padding: 15px; | ||
| + | text-decoration: none; | ||
| + | color: hotpink; | ||
| + | font-weight: 800; | ||
| + | text-transform: uppercase; | ||
| + | margin: 0 10px; | ||
| + | } | ||
| + | |||
| + | nav ul li a, | ||
| + | nav ul li a:after, | ||
| + | nav ul li a:before { | ||
| + | transition: all .5s; | ||
| + | } | ||
| + | |||
| + | nav ul li a:hover { | ||
| + | color: #555; | ||
| + | } | ||
| + | |||
| + | /* SHIFT */ | ||
| + | nav.shift ul li a { | ||
| + | position:relative; | ||
| + | z-index: 1; | ||
| + | } | ||
| + | nav.shift ul li a:hover { | ||
| + | color: hotpink; | ||
| + | } | ||
| + | nav.shift ul li a:after { | ||
| + | display: block; | ||
| + | position: absolute; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | bottom: 0; | ||
| + | right: 0; | ||
| + | margin: auto; | ||
| + | width: 100%; | ||
| + | height: 1px; | ||
| + | content: '.'; | ||
| + | color: transparent; | ||
| + | background: #FFF; | ||
| + | visibility: hidden; | ||
| + | opacity: 0; | ||
| + | z-index: -1; | ||
| + | } | ||
| + | nav.shift ul li a:hover:after { | ||
| + | opacity: 1; | ||
| + | visibility: visible; | ||
| + | height: 100%; | ||
| + | } | ||
Revision as of 00:36, 15 April 2024
body {
font-family: 'Roboto', sans-serif;
padding: 0;
margin: 0;
}
nav {
width: 100%;
margin: 0 auto;
background: lightpink;
padding: 10px ;
box-shadow: 0 5px 5px hotpink;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: hotpink;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* SHIFT */
nav.shift ul li a {
position:relative;
z-index: 1;
}
nav.shift ul li a:hover {
color: hotpink;
}
nav.shift ul li a:after {
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 100%;
height: 1px;
content: '.';
color: transparent;
background: #FFF;
visibility: hidden;
opacity: 0;
z-index: -1;
}
nav.shift ul li a:hover:after {
opacity: 1;
visibility: visible;
height: 100%;
}
