CSS Pre-Block Overflow example
How do I make an css pre-block overflow example?
What is a css pre-block overflow example? How do you make a css pre-block overflow example? This script and codes were developed by Kevin Gimbel on 11 August 2022, Thursday.
CSS Pre-Block Overflow example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Pre-Block Overflow example</title> <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! */ * { margin: 0; padding: 0; position: relative;
}
pre { width: 100%; max-width: 30em; margin: 2.5em auto; background: #222222; color: #fff; overflow-x: scroll; color: #fff;
}
pre:after { content: attr(data-title); position: absolute; top: 0; right: 0; padding: .7em 1.4em; background: #85c226; color: #222222; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); font-weight: bold;
}
::-webkit-scrollbar { background: #222222; height: 8px;
}
::-webkit-scrollbar-thumb { background: #858585;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <pre data-title="HTML"> <code> <html> <head> <link rel="stylesheet" href="assets/css/style.css" /> </head> <body> <h1>Code block, yeah!</h1> </body> </html> </code>
</pre>
</body>
</html>
CSS Pre-Block Overflow example - Script Codes CSS Codes
* { margin: 0; padding: 0; position: relative;
}
pre { width: 100%; max-width: 30em; margin: 2.5em auto; background: #222222; color: #fff; overflow-x: scroll; color: #fff;
}
pre:after { content: attr(data-title); position: absolute; top: 0; right: 0; padding: .7em 1.4em; background: #85c226; color: #222222; box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4); font-weight: bold;
}
::-webkit-scrollbar { background: #222222; height: 8px;
}
::-webkit-scrollbar-thumb { background: #858585;
}
Developer | Kevin Gimbel |
Username | kevingimbel |
Uploaded | August 11, 2022 |
Rating | 3.5 |
Size | 2,482 Kb |
Views | 24,288 |
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 |
Pure JavaScript Slider | 3,122 Kb |
Pure CSS3 single element Link from TLOZ | 5,118 Kb |
CSS3 only Vault-Tec Logo | 3,855 Kb |
Nerdli.st | 5,688 Kb |
Blurring Content when Dialog triggers | 5,054 Kb |
Custom Rating buttons with Icon Fonts | 5,022 Kb |
LazyLoad.js Example | 2,537 Kb |
Pinterest Thumb | 5,308 Kb |
Chat UI - WIP | 7,858 Kb |
An Object-Oriented ToDo-List | 5,275 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 |
Hello People | Danburrows | 2,365 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
CSS3 Form Page Design | Rssatnam | 3,613 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
Sitemap generator for Sharepoint | Gyusza | 2,518 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Drill-down Map | Good886 | 8,484 Kb |
Jquery 2d character movement | Drewtadams | 4,291 Kb |
Mobile Sub Menu Concept | Berdejitendra | 2,790 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!