A Better underline
How do I make an a better underline?
Underlines kind of suck. They're clunky, they don't display well, have no transitions, and can be the weakest part of a design.. What is a a better underline? How do you make a a better underline? This script and codes were developed by Matt Gross on 28 August 2022, Sunday.
A Better underline - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Better underline</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="http://fonts.googleapis.com/css?family=Libre+Baskerville" rel="stylesheet" type="text/css">
<span>Hanging Decenders</span>
<!-- credit to Vesa Piittinen (@Merri) for the text-shadow improved rendering trick, see comments -->
</body>
</html>
A Better underline - Script Codes CSS Codes
body { height: 100%; width: 100%; padding: 100px 0; margin: 0; display: flex; justify-content: center; font-family: 'Libre Baskerville', serif; font-weight: 100;
}
span { font-size: 50px; /* shadows render better in certain browsers than text, first rule is for older browser support */ color: #333; color: transparent; text-shadow: 0 0 #333, .08em 0 0 #fff, 0 0, -.08em 0 0 #fff; /* gradient background allows us to use css only & re-position it */ background: -webkit-linear-gradient(#999, #999) center 1.09em no-repeat; background: linear-gradient(#999, #999) center 1.09em no-repeat; /* can precisely control size in relation to the text */ background-size: 85% 1px; /* now the underline supports transitions */ -webkit-transition: .2s ease; transition: .2s ease;
}
span:hover { /* backgrounds won't size larger than 100% */ background-size: 95% 1px;
}
Developer | Matt Gross |
Username | mattgrosswork |
Uploaded | August 28, 2022 |
Rating | 4.5 |
Size | 2,120 Kb |
Views | 52,624 |
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 |
Basic Flexbox Reference | 1,662 Kb |
Basic Flexbox Layout | 1,729 Kb |
Simple Skewed Image Container | 1,676 Kb |
Super Basic Inline Menu | 1,668 Kb |
Fullscreen Video Background | 1,706 Kb |
Fiddling with css-only parallax | 2,996 Kb |
Scared Eyes | 1,673 Kb |
Site Menu | 6,873 Kb |
Working on a Volusion version of a Drupal Theme | 6,095 Kb |
A Pen by Matt Gross | 12,421 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 |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Toggle Time | Petebot | 5,345 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Save for later... | Victorfreire | 1,359 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Loading animation | Hafizfattah | 0 Kb |
Prototype Responsive Homepage | Heyitsolivia | 7,677 Kb |
SVG Icons Template | Legofsalmon | 2,618 Kb |
Text Looping Transition | Agelber | 5,619 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!