Dr. Strangelove

Developer
Derek Wheelden
Size
5,765 Kb
Views
26,312
  1. Dr. Strangelove Previews
  2. Dr. Strangelove HTML Codes
  3. Dr. Strangelove CSS Codes
  4. Dr. Strangelove JS Codes

How do I make an dr. strangelove?

Webfonts are great. Don't be scared of them.. What is a dr. strangelove? How do you make a dr. strangelove? This script and codes were developed by Derek Wheelden on 10 August 2022, Wednesday.

Dr. Strangelove Previews
IQ Test

Dr. Strangelove - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dr. Strangelove</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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! */ p:first-of-type { font-weight: bold; font-style: italic;
}
p:first-of-type:first-letter { height: 1em; margin: 0.1em 0 0 0; padding: 0 0.1em 0 0; font-size: 5em; line-height: 0.6em; float: left;
}
h3:nth-of-type(2n-1) + p:first-line { font-style: italic;
}
p em { color: tomato;
}
/** PAGE STYLES **/
* { box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { background: #111; font-family: "ff-tisa-web-pro", serif; font-size: 2em; line-height: 1.5; color: #eee; overflow-x: hidden; -webkit-backface-visibility: hidden;
}
h1 { margin: 0 0 1em; font-family: "brandon-grotesque", sans-serif; font-size: 3em; font-weight: 100; text-transform: uppercase; text-align: center; color: white;
}
h2 { margin: 0; font-size: 2em; font-style: italic; font-weight: normal; text-align: center; text-transform: lowercase; color: tomato;
}
h3 { margin: 1em 0; font-family: "brandon-grotesque", sans-serif; font-size: 2em; font-weight: 100; text-transform: uppercase;
}
.container { visibility: hidden; width: 90%; max-width: 40em; margin: 0 auto; padding: 1em 0;
}
.no-js .container,
.container.tk-loaded { visibility: visible;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container"> <h2>How I learned to stop&nbsp;worrying</h2> <h1>and love the font</h1> <p> Webfonts are a challenge. They can be expensive, they can cause issues when loading the page, and they often don&rsquo;t render consistently across browsers and operating systems. How do we deal with these problems? </p> <h3>Why webfonts?</h3> <p> Webfonts have a lot of advantages. They can replace embedded type on graphics, improving SEO. They can replace graphic headers, reducing page weight and load times. Using live type instead of graphics can improve your content management workflow. Using the same font on your website that you use on print materials and signage promotes brand consistency. </p> <p> Also, aren&rsquo;t you sick of Arial? </p> <h3>But load times</h3> <p> This pen uses 2 typefaces in 6 weights &amp; styles. These fonts add 1 HTTP request and less than 200kb of data. It&rsquo;s not insignificant, but in the land of optimization you could do much worse. And once the font is loaded, it&rsquo;s cached by the browser. Removing a single JPG from your homepage will make up for the difference. </p> <p> Alternatively, you could lazy-load certain fonts. By only loading fonts that will appear on the top of the page, you can give the illusion that the page is loading faster. Once the top of the page has loaded, you can move on to loading the rest of the fonts. </p> <H3>Get the FOUT</h3> <p> Or <em>flash of unstyled type</em>. This is what could happen when a visitor comes to your site for the first time. They will, briefly, see your type styled in whatever you&rsquo;re using as a fallback&mdash;or they won&rsquo;t see any type at all. Then, once the font has been loaded, they will get the correct font. Most modern browsers do a good job preventing this, and it&rsquo;s not overly jarring when it does happen. But if it does become an issue, we can work around it. </p> <p> Many font services&mdash;like TypeKit&mdash;include javascript methods for handling font loading. As you can see in the code for this Pen, I'm able to temporarily hide the content and then add a class to show it when the fonts are done loading, or have failed. This not only prevents FOUT, but allows a way to handle fallback styles if the fonts fail to load. Unfortunately this could make the page appear to be loading more slowly. </p> <p> If you&rsquo;re embedding self-hosted fonts using <code>@font-face</code> things get a little more tricky. I won&rsquo;t go too deep into this, but a common method is to position an element containing text off-canvas, and periodically check its width with a <code>setTimeout</code>. When the width changes, add or remove a class to your content container to display your content. </p> <p> If you&rsquo;re not satisfied with these solutions, and are very concerned with avoiding FOUT, you could put off rendering them on the first page load. Load the fonts, but don&rsquo;t render them. On second vist, or subsequent pages, the fonts will have been loaded and cached and you can render them then. <em>Only do this if you are insane</em>. </p> <h3>This font looks bad</h3> <p> Fonts looking rough or jagged on some computers is a common complaint about webfonts. While the scene has improved a great deal recently, the fact remains that some browser/OS/font combinations don&rsquo;t look great. This is largely due to poor hinting. </p> <p> <em>Hinting</em> is the process of manually adjusting the display of a font for screens. In the early days of webfonts, most fonts were poorly hinted&mdash;if they were hinted at all. If a font doesn&rsquo;t have a set of instructions for anti-aliasing or sub-pixel rendering, chances are it&rsquo;s going to look jagged and possibly misshapen&mdash;especially at small sizes. Older version of Windows, and Chrome/Windows XP especially, are terrible at rendering webfonts that aren&rsquo;t hinted. </p> <p> Many of the browsers that are exceptionally bad at rendering fonts don&rsquo;t need to be supported anymore, and a much higher percentage of fonts are hinted. But when choosing fonts, keep this in mind. Test early and often. </p> <h3>What am I, rich?</h3> <p> Yes fonts can seem expensive. We are not used to paying for fonts. They come loaded onto our computers, and we&rsquo;ve been using them for print for years. If you&rsquo;re not terribly picky, there are plenty of great webfonts out there that won&rsquo;t cost you anything. </p> <p> But fonts, like websites, are created by humans. And don&rsquo;t they deserve to get paid too? </p> <p> And hey, Arial&rsquo;s an excellent font. </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://use.typekit.net/nry3lxo.js'></script> <script src="js/index.js"></script>
</body>
</html>

Dr. Strangelove - Script Codes CSS Codes

p:first-of-type { font-weight: bold; font-style: italic;
}
p:first-of-type:first-letter { height: 1em; margin: 0.1em 0 0 0; padding: 0 0.1em 0 0; font-size: 5em; line-height: 0.6em; float: left;
}
h3:nth-of-type(2n-1) + p:first-line { font-style: italic;
}
p em { color: tomato;
}
/** PAGE STYLES **/
* { box-sizing: border-box;
}
html, body { width: 100%; height: 100%;
}
html { font-size: 62.5%;
}
body { background: #111; font-family: "ff-tisa-web-pro", serif; font-size: 2em; line-height: 1.5; color: #eee; overflow-x: hidden; -webkit-backface-visibility: hidden;
}
h1 { margin: 0 0 1em; font-family: "brandon-grotesque", sans-serif; font-size: 3em; font-weight: 100; text-transform: uppercase; text-align: center; color: white;
}
h2 { margin: 0; font-size: 2em; font-style: italic; font-weight: normal; text-align: center; text-transform: lowercase; color: tomato;
}
h3 { margin: 1em 0; font-family: "brandon-grotesque", sans-serif; font-size: 2em; font-weight: 100; text-transform: uppercase;
}
.container { visibility: hidden; width: 90%; max-width: 40em; margin: 0 auto; padding: 1em 0;
}
.no-js .container,
.container.tk-loaded { visibility: visible;
}
.cf:before,
.cf:after { content: " "; /* 1 */ display: table; /* 2 */
}
.cf:after { clear: both;
}
.cf { *zoom: 1;
}

Dr. Strangelove - Script Codes JS Codes

try { Typekit.load({ loading: function() { // Javascript to execute when fonts start loading }, active: function() { // Javascript to execute when fonts become active $('.container').addClass('tk-loaded'); }, inactive: function() { // Javascript to execute when fonts become inactive $('.container').addClass('tk-loaded'); } });
} catch (e) { // Do something
}
Dr. Strangelove - Script Codes
Dr. Strangelove - Script Codes
Home Page Home
Developer Derek Wheelden
Username frxnz
Uploaded August 10, 2022
Rating 4.5
Size 5,765 Kb
Views 26,312
Do you need developer help for Dr. Strangelove?

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!

Derek Wheelden (frxnz) Script Codes
Name
Pulsing Notification
Instagram Hover
A Pen by Derek Wheelden
Folding Panels
User Listing
Fluid Image Management
Music Player
Dumb Triangle Thing
File Browser Mockup
Google Maps Geolocation Test
Create amazing blog posts with AI!

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!