»Firefox is the only browser that supports the fancy element() CSS function (with a vendor prefix, but hey 🤷♂️). The function allows you to display images of arbitrary HTML elements on your page! And the best thing is: it's live!«
Open source browser tools for everyday use
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
RT @bastianallgeier: .@FastMailFM IMHO has one of the coolest, most useful time pickers on the web:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta charset="utf-8">
<!--
Created using JS Bin
http://jsbin.com
Copyright (c) 2014 by jakearchibald (http://jsbin.com/honawo/5/edit)
Released under the MIT license: http://jsbin.mit-license.org
-->
<title>JS Bin</title>
<style id="jsbin-css">
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
padding: 0 30px;
margin: 0;
font-family: Georgia, serif;
font-size: 100px;
font-size: 8vw;
box-sizing: border-box;
line-height: 1.4;
text-align: center;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
filter: alpha(opacity=0);
pointer-events: none;
}
.active {
opacity: 1;
filter: alpha(opacity=100);
pointer-events: auto;
}
.technique-1 { / the best one /
display: -webkit-flex;
-webkit-align-items: center;
-webkit-justify-content: center;
display: flex;
align-items: center;
justify-content: center;
}
.technique-2 {
height: auto;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.technique-3 {
display: table;
}
.technique-3 > span {
display: table-cell;
vertical-align: middle;
}
.technique-4 { / yeah, this one is weak /
font-size: 4vw;
line-height: 100vh;
}
</style>