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%; }