Helvetilist
How do I make an helvetilist?
Tutorial from Design Shack http://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/. What is a helvetilist? How do you make a helvetilist? This script and codes were developed by Yying6 on 13 December 2022, Tuesday.
Helvetilist - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Helvetilist</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Lazy browser reset */
* { margin: 0; padding:0;
}
#main { width: 200px; margin: 20px auto;
}
/* typography */
h1 { font-family: helvetica, arial, sans-serif; font-szie: 30px; color: #000;
}
/* list styles */
ul { list-style: none; width:200px; margin: 0; padding: 0;
}
li { text-decoration: none; font: 24px helvetica, arial, sans-serif; border-bottom: 1px solid #999;
}
li:first-child { border-top: 1px solid #999;
}
li a { text-decoration:none; color: #999; display: block; width: 200px; height: 40px; line-height: 40px; /* transitions and animations */ -webkit-transition: font-size 0.3s ease, background-color 1s ease; -moz-transition: font-size 0.3s ease, background-color 1s ease; -ms-transition: font-size 0.3s ease, background-color 1s ease; -o-transition: font-size 0.3s ease, background-color 1s ease; transition: font-size 0.3s ease, background-color 1s ease;
}
li a:hover { font: 26px helvetica, arial, sans-serif; line-height: 40px; text-decoration: none; color: #999; background: #e3e3e3;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <!-- Tutorial from Design Shack
https://designshack.net/articles/css/5-simple-and-practical-css-list-styles-you-can-copy-and-paste/ -->
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body> <div id="main"> <h1> HelvetiList </h1> <ul> <li><a href="#">Zurich</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Prague</a></li> <li><a href="#">Barcelona</a></li> <li><a href="#">Rome</a></li> </ul> </div>
</body>
</html>
</body>
</html>
Helvetilist - Script Codes CSS Codes
/* Lazy browser reset */
* { margin: 0; padding:0;
}
#main { width: 200px; margin: 20px auto;
}
/* typography */
h1 { font-family: helvetica, arial, sans-serif; font-szie: 30px; color: #000;
}
/* list styles */
ul { list-style: none; width:200px; margin: 0; padding: 0;
}
li { text-decoration: none; font: 24px helvetica, arial, sans-serif; border-bottom: 1px solid #999;
}
li:first-child { border-top: 1px solid #999;
}
li a { text-decoration:none; color: #999; display: block; width: 200px; height: 40px; line-height: 40px; /* transitions and animations */ -webkit-transition: font-size 0.3s ease, background-color 1s ease; -moz-transition: font-size 0.3s ease, background-color 1s ease; -ms-transition: font-size 0.3s ease, background-color 1s ease; -o-transition: font-size 0.3s ease, background-color 1s ease; transition: font-size 0.3s ease, background-color 1s ease;
}
li a:hover { font: 26px helvetica, arial, sans-serif; line-height: 40px; text-decoration: none; color: #999; background: #e3e3e3;
}
Developer | Yying6 |
Username | yying6 |
Uploaded | December 13, 2022 |
Rating | 3 |
Size | 2,492 Kb |
Views | 14,168 |
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 |
Toggle Button | 1,890 Kb |
Select Box CSS Styling | 2,290 Kb |
Time of Day | 2,011 Kb |
Text Highlight Color | 2,201 Kb |
Standard Thumbnail Grid | 2,108 Kb |
Sticky Back to Top Button | 3,611 Kb |
Framer.js basic scrolling | 1,522 Kb |
Toggling Divs with jQuery | 1,967 Kb |
Sharp box shadow | 1,650 Kb |
Changing multiple elements on CSS hover | 1,839 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 |
My three.js practice | Esambino | 3,203 Kb |
Resume | Rottingroom | 5,483 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
CSS Patterns | Alyda | 3,953 Kb |
Svg penguin | _massimo | 2,990 Kb |
Gears | Synvox | 3,278 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Cloud upload | Jaflo | 2,774 Kb |
SVG Text Masking | JMChristensen | 2,141 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 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!