Skip to content
Tyson of the Northwest edited this page Mar 18, 2017 · 1 revision

Print borders on blockquote (note)

Yeah, Chrome has a bug where they simply haven't implemented printing CSS shadows. There is a workaround in progress though and I think it was planned for the version 3.0 release. This also adds shadows to the monster stat blocks. It works by embedding the shadows directly into the artwork of the box borders. To print the borders of the blockquote so add the following CSS (#354)

<style>
hr+blockquote {
        border-image-width: 14px 19px 24px !important;
        border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAYAAADhXXHAAAADRklEQVR42tWZi04aQRSGoVUoVoVyWQqUq4KiqPHS0kZjSmsbTWr7fn3AvoY923yTHCez6+7iJIXkD2R35pyPM//M7s7mck9/8g69eAa54mb+RAG+dGgtgVz9osAzg9qQJvm6pUKM7Lb2H3BBpwJ1QWqwInplqaRknzN9ChZ4FHRiUBdk0YLaQK/RpkPmnGlbsuCjoGOB40ALFqAB2xJti8qiSozKtNtSf0CDF9IC20NvVzMM/uBBG44q25aIhDUVNb4sUYmwKg9/fu8/m4DdIn5J+XnNqm4s6LoDtOIJtuIAXo8DzlvDbzyqQWueYGsWsPZwJKyuqvGoBg08wQYWsPGwrm4+rqolZm04i6sEbHuCbRO/Sr5N8jura8MWVVXfiBqilqjraTXoEr9BPlPdYhSsXgGMV01Vm6KOaJDz8xkQv6mqq737yAo2rLFA6KE6/7on2vEEu0P8FvkqlhWcsC4LBKqqE0+wE1XdIMYK/2Bdft1WFgg9NRJNPcFOid9VVtiO8O0jWO3XcDl5yxDtig49wR4Sv0e+muXbRLB1lpU+QzXzBDsjfp989TSwZnI16Bz6aU905An2iPgD8jXUJEsNOyTYsad19pj4w2VhOzashyuYhu08a2U9wy5tA+1ZH7BLeTZuNfABu9RqELfO+oDNvM4+dQXzsRqkuoKluTcIh+xMNBddiRaib6I70Q/Rvein6Bff9xy/o92CfnPizNLeG6S565oye89FH0n8WXQj+i66BczoluM3tLui3zlxplnvupLcz45FB6ITEoYVuhRdAxNW7ovoK98Ljl/Tbk6/E+KMs9zPJn1SGDFsB1QmHMr3QHwC6ErpkuNz2p3R74A4oyxPCkmfwXokGDOEM6p0SsUugPrA9wXHT2k3o9+YOL20z2Bpnm7bVGLAcjMh+SEgx+hE/Z5xfkr7Xfp3FWjip9s0+wYBQ/aOqgyZIGNA9tC++j3h/A7te/RvOUAT7xsk2ZGp4q0myTpUqI8GABkN1Lku7Vv0bxAv9Y5M0r2uMpOgRrJAgbdRR8kcM4AB/WrEKWfZ60q6i7ipoE2lq6yPdUBsmXNVVcmy2v7MvIu4MvuzK7XzvXLvFFbubc3KvQf7L98w/gWdu6wkkgJkAwAAAABJRU5ErkJggg==
) !important;
        border-image-slice: 14 19 24 !important;
        border-image-outset: 6px 11px 16px !important;
        border-image-repeat: stretch !important;
        box-shadow: none !important;
}
blockquote {
        border-image-width: 10px 22px 18px !important;
        border-image-source: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGYAAABECAYAAABzu0BfAAAE+ElEQVR42u2dvU4bQRSFl4BtDA44GBthY4xt7MSA+ImQQqpEKZIiJAXJC6ROHSkPgXgIeIC0PAAlLVUaOho6REVBZqIz0vVkdnbWY0O0e690OrOeOd/emVkzczcIhh8FoZMgPXGCPj96jFm0K/Rb6D7ic0nSPfq8G/G5BwHxxKAfQndoqNR4SqT6ewcPTN4MFVQYDL1hVaFT0kCliZRI7/cpPNF9CoM0MBQdiGpQRuij0JWhcVLZlMjU9yt4kyF+2QDFgmICkoHyQkchjVLKp0Q2D47wmQyBFAbIGYoJSE5oTeg8okFST1OiKB/O4VnOAsgKxwZFpuyk0DehG4fGSD1LiVy8uIF3k/AyFhx9+KJZIi845dgIVrim4CXNHn1YCwWjMiWLC8gxctoxbVnRw/s0PM3B4wkta6xQMgYoxYDDN4oGOBkbnDFtCFNzCoVSYl+9o6TBoXNOKBiaLWpOoVAq7Kt3VDQ4as6hWTNmy5Y8fpibFZrDBavsq3dU4eUcvC3Aa2PW6GByJFvkcrAstChUZ1+9ow4vy/BWZU0uDAxdiam5RWXLglBNaIV99Y4VeLlAsobONX3DmQ5GDWNyHJwH4WWhNvvqHW14uQhvi9pwZgRjGsYqJFu67Kt3dEnWVCzD2V8wpvllhgxjclxsCfXYV+/owcs6Gc5mQuaZPjB0fikh5RpCHaF19tU71uFlA96WtHnGCcw8lncNpOAG++odG/CyAW/no8DQB0s18Zfxx02h50Kb7Kt3bMLLJrwtkwUAfdDsA5M1gKlhTHwhtMW+escWvGzBWx1MNgwMXSrLVcMSmfgZzHDAqAXAEjw2LZmNYOhSmYLZZl+9Y9sARi2ZY4ORD0XyX6M77Kt37MDLNoNhMBzDBjMeAkY99TOY0YBRT/8mMOMMhsFwMBgGw8FgGAyDYTAMhsEwGA4Gw2AYDINhMAzmvwfDP/s/Dhj+fwyD4XhQMLwZY3jhtRmDty+NLgbevsQb/kYPJvaGP94iO/qIvUWWN5U/TMTeVO56DIOLKPhp4GMYUQeX2Fw/xTq4FOeo30+hW8dGHAh9IfqaENE+HTh6cQvvYh31i3M4VhKXBdIuHBqzL/SJ6HNCRPu07+DDBTzrBQMejnU5Tt7Bk+tLoeOIBr3X9CEh0vtl8+AYXq3BO5UtzsfJXQswtJCOa1j6fRe6DmnUG+htQqX6Z+r7NbzZhFddMrfEKsDgWrJkGV/QQWrK5d87oTND414J7Qm9Tqj20Ee932fwZAMedeDZchCzZIk+nNmK/FRBXabkKu6EHpaBh0F/ed9t/GiXZG0H/eV9D+FFD96swqs6geJc5Ccsa0xlsSpIxSXcAU1MaB00RK5ULsnScC3hUo8Ql+h7F1604c0yvFo0QHEui+VSSG4O4+MCvqyGu6GBO6OJFP6F9G0nXC30dQN9X4EXdXizCK/K8C52ITkTHFPpxVlMWiV8WYVAqkI13CVK9YSK9rFG+q9gVOBRCZ7NBgOUXqRgbMVKCwSQyqA5rMnLBBbVQkKl91P1f574UiRACoFHsdKo8r55XHyaQJohoIpBesr66ioSEDMExjQ8ywcDlveNgkOzh0KioBSsNKqggaAw9CyJBcUEJwyQmn8oKAosjdJ9yJF5xLuEvA4n6qULGQ0W619fhvbSBRMc22tKKCxWP4Shv6bEBijsxT42cGmQzZPYL/b5A6Rn30nklJ8bAAAAAElFTkSuQmCC') !important;
        border-image-slice: 10 22 18 !important;
        border-image-outset: 9px 11px !important;
        border-image-repeat: stretch !important;
        box-shadow: none !important;
}
</style>