Menu Indicator + 'Transparent Text'
How do I make an menu indicator + 'transparent text'?
Experiment to see if you can simulate a menu indicator sliding behind transparent text animation with no images/js. . What is a menu indicator + 'transparent text'? How do you make a menu indicator + 'transparent text'? This script and codes were developed by James Nowland on 31 October 2022, Monday.
Menu Indicator + 'Transparent Text' - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menu Indicator + 'Transparent Text'</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Hover over 'Writing'</h1>
<ul class="NavMain-list"> <li class="Nav-item"><a href="#">Home</a></li> <li class="Nav-item is-active"><a href="#">About</a></li> <li class="Nav-item"><a href="#">Writing</a></li> <li class="Nav-item"><a href="#">Clients</a></li> <li class="Nav-item"><a href="https://twitter.com/jnowland">Follow Me</a></li>
</ul> <script src="js/index.js"></script>
</body>
</html>
Menu Indicator + 'Transparent Text' - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans:600);
.Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:after { left: 0%;
}
.Nav-item:nth-child(1):hover ~ .Nav-item:last-child:after { left: 0% !important;
}
.Nav-item:nth-child(1).is-active ~ .Nav-item:last-child:before { left: 10%;
}
.Nav-item:nth-child(1):hover ~ .Nav-item:last-child:before { left: 10% !important;
}
.Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:after { left: 20%;
}
.Nav-item:nth-child(2):hover ~ .Nav-item:last-child:after { left: 20% !important;
}
.Nav-item:nth-child(2).is-active ~ .Nav-item:last-child:before { left: 30%;
}
.Nav-item:nth-child(2):hover ~ .Nav-item:last-child:before { left: 30% !important;
}
.Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:after { left: 40%;
}
.Nav-item:nth-child(3):hover ~ .Nav-item:last-child:after { left: 40% !important;
}
.Nav-item:nth-child(3).is-active ~ .Nav-item:last-child:before { left: 50%;
}
.Nav-item:nth-child(3):hover ~ .Nav-item:last-child:before { left: 50% !important;
}
.Nav-item:nth-child(4).is-active ~ .Nav-item:last-child:after { left: 60%;
}
.Nav-item:nth-child(4):hover ~ .Nav-item:last-child:after { left: 60% !important;
}
.Nav-item:nth-child(4).is-active ~ .Nav-item:last-child:before { left: 70%;
}
.Nav-item:nth-child(4):hover ~ .Nav-item:last-child:before { left: 70% !important;
}
.Nav-item:nth-child(5).is-active ~ .Nav-item:last-child:after { left: 80%;
}
.Nav-item:nth-child(5):hover ~ .Nav-item:last-child:after { left: 80% !important;
}
.Nav-item:nth-child(5).is-active ~ .Nav-item:last-child:before { left: 90%;
}
.Nav-item:nth-child(5):hover ~ .Nav-item:last-child:before { left: 90% !important;
}
.NavMain-list { margin: 50px auto; width: 900px; padding: 0; list-style: none; position: relative; z-index: 0;
}
.Nav-item { display: block; float: left; margin: 0; padding: 0; width: 20%; text-align: center; overflow: hidden; background: #fff;
}
.Nav-item:first-child { border-radius: 3px 0 0 3px;
}
.Nav-item a { -webkit-text-fill-color: transparent; -webkit-background-clip: text; box-sizing: content-box; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMjAlIiBzdG9wLWNvbG9yPSIjZmYwMDAwIi8+PHN0b3Agb2Zmc2V0PSIyMSUiIHN0b3AtY29sb3I9IiM1ZTVmNTUiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1ZTVmNTUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyYWQpIiAvPjwvc3ZnPiA='); background-size: 100%; background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ff0000), color-stop(20%, #ff0000), color-stop(21%, #5e5f55), color-stop(100%, #5e5f55)); background-image: -moz-linear-gradient(left, #ff0000 0%, #ff0000 20%, #5e5f55 21%, #5e5f55 100%); background-image: -webkit-linear-gradient(left, #ff0000 0%, #ff0000 20%, #5e5f55 21%, #5e5f55 100%); background-image: linear-gradient(to right, #ff0000 0%, #ff0000 20%, #5e5f55 21%, #5e5f55 100%); display: block; padding-top: 20px; padding-bottom: 20px; padding-right: 400%; margin-right: -400%; position: relative; background-position: -179px 0px; background-repeat: no-repeat; text-align: center;
}
.is-active .Nav-item a, .Nav-item a:hover { background-position: 0px 0px;
}
.Nav-item.is-active a { background-position: 0px 0px;
}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 1.3s ease; -moz-transition: all 1.3s ease; -o-transition: all 1.3s ease; -ms-transition: all 1.3s ease; transition: all 1.3s ease;
}
.NavMain-list:before,
.NavMain-list:after { content: " "; /* 1 */ display: table; /* 2 */
}
.NavMain-list:after { clear: both;
}
.Nav-item:last-child { border-radius: 0 3px 3px 0;
}
.Nav-item:last-child:before { content: ''; display: block; width: 0; height: 0; border: 6px solid transparent; border-top-color: #e82d00; position: absolute; top: 0; left: 10%; margin-left: -3px;
}
.Nav-item:last-child:after { content: ''; display: block; position: absolute; width: 20%; background: #e82d00; top: -6px; bottom: -6px; left: 0; z-index: -1;
}
.Nav-item:last-child:hover:before { left: 90% !important;
}
.Nav-item:last-child:hover:after { left: 80% !important;
}
h1 { text-align: center; color: #fff;
}
html { background: -webkit-linear-gradient(45deg, rgba(60, 15, 74, 0.54) 0%, rgba(60, 15, 74, 0.6) 1%, rgba(14, 14, 14, 0.67) 100%), -webkit-linear-gradient(-45deg, rgba(212, 67, 98, 0.64) 0%, rgba(212, 67, 98, 0.84) 1%, rgba(14, 14, 14, 0.87) 100%); background-size: 100%; background-color: #1d1; font-family: 'Open Sans', sans-serif; font-weight: 600;
}
Menu Indicator + 'Transparent Text' - Script Codes JS Codes
/* Experiment Transparent Text Animation with no images/js
1.Get the background sliding indicator menu moving without any js - [Successful]
2. Get the text to appear transparent showing the slider underneath. [Successful on 'writing'.
3. Make it work flawlessly [Failed] - you would need to have some javascript to remove .is-active from 'about' when other items are selected or set up some sort of directional aware hovers. You would also need to customise all the background images positions via javascript based of what item your on. While this is all possible, i'm off to bed :)
*/
Developer | James Nowland |
Username | jnowland |
Uploaded | October 31, 2022 |
Rating | 4 |
Size | 5,033 Kb |
Views | 10,120 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
A Pen by James Nowland | 6,998 Kb |
Animating Scale with text featuring blurry raster DPI issues | 2,983 Kb |
Smart Ratio CSS Photo Grid | 3,200 Kb |
Dribble Button CSS Rebound | 7,557 Kb |
Download Rebound | 10,865 Kb |
Login Form CSS only validation | 5,739 Kb |
Ad Folding without regions | 3,938 Kb |
Three Heading Solutions | 11,415 Kb |
CSS3 Stroke and Gradient Text | 2,577 Kb |
Pure CSS Spinner | 3,909 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Two joint circles - One element | Berdejitendra | 1,704 Kb |
Sinclair Research Computers | MattCowley | 3,068 Kb |
Simple Buttons | Haydenmills | 1,750 Kb |
Local Weather App - FreeCodeCamp | TrevorWelch | 4,134 Kb |
Calculator - codevember 08 - 2016 | Caiocares | 3,260 Kb |
A Different Type of Gallery | DonPage | 2,950 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
CSS Bot Confusion | Jpod | 3,456 Kb |
A Pen by utcwebdev | Utcwebdev | 2,856 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!