Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 <body>
   <p>
    Many years ago, monks would traditionally
    illuminate a page with the D65 illuminant
    and write their initial,
    which was always <q>M</q> for <q>Monk</q>.
    We call this the <q>initial letter</q>.
   </p>
 </body>
</html>
 
@import url("https://fonts.googleapis.com/css2?family=Metamorphous&amp;family=UnifrakturMaguntia");
:root {
  background-color: black;
}
body {
  width: 595px;
  margin: 20px auto;
  background-color: white;
  padding: 30px;
  text-align: justify;
  hyphens: auto;
}
p {
  font: 50px/1.1 Serif;
}
q {
  font-style: italic;
}
p::first-letter {
  font-family: Metamorphous;
  initial-letters: 3 3;
  -webkit-initial-letter: 3 3;
  padding-top: 40px;
  margin-right: 20px;
  width: 220px;
  height: 180px;
  text-align: center;
  background: filter(url("https://bfo.com/publisher/tests/tree.png"), blur(2px) opacity(0.5))
      left 40px bottom -20px / 180px no-repeat;
  border: 30px solid black;
  border-image: filter(url("https://bfo.com/publisher/tests/frame.png"), drop-shadow(10px 10px 4px black))
      875 / 30 / 40px  repeat;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
faceless2pro
0viewers