CSS Secrets
Translucent borders
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Translucent borders</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
background: #fff;
background-clip: padding-box;
}
.white-border {
border: 10px solid hsla(0,0%,100%,.3);
}
.black-border {
border: 10px solid hsla(0,0%,0%,.3);
}
</style>
</head>
<body>
<div class="white-border"></div>
<div class="black-border"></div>
</body>
</html>
Multiple borders
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multiple borders</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
vertical-align: middle;
display: inline-block;
width: 100px;
height: 100px;
margin: 20px;
background: #fff;
}
.box-shadow {
box-shadow: 0 0 0 10px #F05562, 0 0 0 20px #F0DB4F;
}
.outline {
border: 10px dotted #F05562;
outline: 10px solid #F0DB4F;
}
</style>
</head>
<body>
<div class="box-shadow"></div>
<div class="outline"></div>
</body>
</html>
Flexible background-position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexible background-position</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
vertical-align: middle;
display: inline-block;
width: 150px;
height: 150px;
margin: 20px;
background: #fff;
box-sizing: border-box;
}
.extended-background-position {
background: #fff url(img/react-logo.svg) no-repeat;
background-position: right 10px bottom 10px;
}
.background-origin {
padding: 10px;
background: #fff url(img/react-logo.svg) no-repeat bottom right;
background-origin: content-box;
}
.calc {
background: #fff url(img/react-logo.svg) no-repeat calc(100% - 10px) calc(100% - 10px);
}
</style>
</head>
<body>
<div class="extended-background-position"></div>
<div class="background-origin"></div>
<div class="calc"></div>
</body>
</html>
Inner rounding
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Inner rounding</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
vertical-align: middle;
display: inline-block;
width: 150px;
height: 150px;
margin: 20px;
background: #fff;
border-radius: 10px;
padding: 1em;
box-shadow: 0 0 0 20px #F05562;
outline: 20px solid #F05562;
}
</style>
</head>
<body>
<div></div>
<p>Outline sits on top of box shadow, outline isn't rounded by border-radus, yet!</p>
</body>
</html>
Stripy backgrounds
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Stripy backgrounds</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
vertical-align: middle;
display: inline-block;
width: 150px;
height: 150px;
margin: 20px;
background: #fff;
}
.horizontal {
background: linear-gradient(
#F05562 50%,
#F0DB4F 50%
);
background-size: 100% 30px;
}
.vertical {
background: linear-gradient(to right,
#F05562 50%,
#F0DB4F 50%
);
background-size: 30px 100%;
}
.diagonal-tile {
background: linear-gradient(45deg,
#F05562 25%,
#F0DB4F 0,
#F0DB4F 50%,
#F05562 0,
#F05562 75%,
#F0DB4F 0
);
background-size: 43px 43px;
}
.repeating-linear-gradient {
background: repeating-linear-gradient(45deg,
#F05562,
#F05562 15px,
#F0DB4F 0,
#F0DB4F 30px
);
}
.repeating-linear-gradient-60 {
background: repeating-linear-gradient(60deg,
#F05562,
#F05562 15px,
#F0DB4F 0,
#F0DB4F 30px
);
}
.hsla {
background: #F05562;
background-image: repeating-linear-gradient(60deg,
hsla(0,0%,100%,.4),
hsla(0,0%,100%,.4) 15px,
transparent 0,
transparent 30px
);
}
</style>
</head>
<body>
<div class="horizontal"></div>
<div class="vertical"></div>
<div class="diagonal-tile"></div>
<div class="repeating-linear-gradient"></div>
<div class="repeating-linear-gradient-60"></div>
<div class="hsla"></div>
</body>
</html>
Complex patterns
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Complex patterns</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
vertical-align: middle;
display: inline-block;
width: 300px;
height: 300px;
margin: 20px;
background: #fff;
}
.tablecloth {
background: #fff;
background-image: linear-gradient(to bottom,
rgba(200,0,0,.4) 50%,
transparent 0
), linear-gradient(to right,
rgba(200,0,0,.4) 50%,
transparent 0
);
background-size: 30px 30px;
}
.blueprint {
background: #487FC1;
background-image:
linear-gradient(#fff 2px, transparent 0),
linear-gradient(hsla(0,0%,100%,.3) 1px, transparent 0),
linear-gradient(to right, #fff 2px, transparent 0),
linear-gradient(to right, hsla(0,0%,100%,.3) 1px, transparent 0);
background-size: 75px 75px, 15px 15px, 75px 75px, 15px 15px;
background-position: -1px -1px;
}
.polka {
background: #F05562;
background-image:
radial-gradient(#fff 20%, transparent 0),
radial-gradient(#fff 20%, transparent 0);
background-size: 50px 50px;
background-position: 0 0, 50% 50%;
}
.checkerboard {
background: #000;
background-image:
linear-gradient(45deg, #fff 25%, transparent 0, transparent 75%, #fff 0),
linear-gradient(45deg, #fff 25%, transparent 0, transparent 75%, #fff 0);
background-position: 0 0, 50px 50px;
background-size: 100px 100px;
}
.svg-checkerboard {
background: #fff url('data:image/svg+xml,\
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">\
<rect x="50" width="50px" height="50" />\
<rect y="50" width="50px" height="50" />\
</svg>')
}
</style>
</head>
<body>
<div class="tablecloth"></div>
<div class="blueprint"></div>
<div class="polka"></div>
<div class="checkerboard"></div>
<div class="svg-checkerboard"></div>
</body>
</html>
Random backgrounds
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Random backgrounds</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
vertical-align: middle;
display: inline-block;
width: 1200px;
height: 300px;
background: hsl(20, 40%, 90%);
background-image:
linear-gradient(90deg, #fb3 11px, transparent 0),
linear-gradient(90deg, #ab4 23px, transparent 0),
linear-gradient(90deg, #655 41px, transparent 0);
;
background-size: 41px 100%, 61px 100%, 83px 100%;
}
</style>
</head>
<body>
<div></div>
<p>Prime numbers for seeming randomness in repeating backgrounds.</p>
</body>
</html>
Image borders
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image borders</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
width: 300px;
height: 300px;
}
.stone {
padding: 20px;
border: 20px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
url(img/stone.jpg) border-box 0 / cover;
}
@keyframes ants {
0% { background-position: 0 }
100% { background-position: 100% }
}
.marching-ants {
border: 1px solid transparent;
background:
linear-gradient(#fff, #fff) padding-box,
repeating-linear-gradient(-45deg, #000 0, #000 25%, white 0, white 50%) 0 / 10px 10px;
animation: ants 12s linear infinite;
}
.border-clipping {
border-top: 3px solid transparent;
border-image: 100% 0 0 linear-gradient(90deg, currentColor 3em, transparent 0);
padding-top: 1em;
}
</style>
</head>
<body>
<div class="stone"></div>
<div class="marching-ants"></div>
<p class="border-clipping">1. Footnote</p>
</body>
</html>
Flexible ellipses
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Flexible ellipses</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
width: 300px;
height: 200px;
background: #F0DB4F;
}
.fitty {
border-radius: 50%;
}
.quarter {
border-radius: 100% 0 0 0;
}
.dome {
border-radius: 50% / 100% 100% 0 0;
}
</style>
</head>
<body>
<div class="fitty"></div>
<div class="quarter"></div>
<div class="dome"></div>
</body>
</html>
Parallelograms
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallelograms</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
box-sizing: border-box;
vertical-align: middle;
display: inline-block;
}
.two {
background: #fff;
padding: 10px 20px;
color: #000;
transform: skew(45deg);
}
.two > div {
transform: skew(-45deg);
}
.pseudu {
position: relative;
padding: 10px 20px;
color: #000;
}
.pseudu:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
background: #fff;
transform: skew(45deg);
}
</style>
</head>
<body>
<div class="two"><div>Content not skewed</div></div>
<div class="pseudu">Content not skewed</div>
</body>
</html>
Parallelograms
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Parallelograms</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div, img {
display: inline-block;
box-sizing: border-box;
vertical-align: middle;
}
.rotate {
width: 200px;
height: 200px;
transform-origin: 50%;
transform: rotate(45deg);
overflow: hidden;
}
.rotate > img {
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}
.clip-path {
-webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
</style>
</head>
<body>
<div class="rotate">
<img src="img/haircut.jpg" />
</div>
<img class="clip-path" src="img/haircut.jpg" />
</body>
</html>
Cutout corners
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Cutout corners</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
width: 100px;
height: 100px;
}
.one-corner {
background: hsla(0,0%,100%, .8);
background: linear-gradient(45deg, transparent 15px, hsla(0,0%,100%, .8) 0);
}
.four-corners {
background: hsla(0,0%,100%, .8);
background:
linear-gradient(135deg, transparent 15px, hsla(0,0%,100%, .8) 0) top left,
linear-gradient(-135deg, transparent 15px, hsla(0,0%,100%, .8) 0) top right,
linear-gradient(-45deg, transparent 15px, hsla(0,0%,100%, .8) 0) bottom right,
linear-gradient(45deg, transparent 15px, hsla(0,0%,100%, .8) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.round-corners {
background: hsla(0,0%,100%, .8);
background:
radial-gradient(circle at top left, transparent 15px, hsla(0,0%,100%, .8) 0) top left,
radial-gradient(circle at top right, transparent 15px, hsla(0,0%,100%, .8) 0) top right,
radial-gradient(circle at bottom right, transparent 15px, hsla(0,0%,100%, .8) 0) bottom right,
radial-gradient(circle at bottom left, transparent 15px, hsla(0,0%,100%, .8) 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
}
.svg-bevel {
border: 15px solid transparent;
border-image: 1 url('data:image/svg+xml,\
<svg width="3" height="3" xmlns="http://www.w3.org/2000/svg">\
<polygon points="0,1 1,0 2,0 3,1, 3,2 2,3 1,3 0,2" fill="hsla(0,0%,100%, .8)" />\
</svg>');
background: hsla(0,0%,100%, .8);
background-clip: padding-box;
}
.clip-path {
background: hsla(0,0%,100%, .8);
-webkit-clip-path: polygon(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px
);
}
</style>
</head>
<body>
<div class="one-corner"></div>
<div class="four-corners"></div>
<div class="round-corners"></div>
<div class="svg-bevel"></div>
<div class="clip-path"></div>
</body>
</html>
Trapezoid tabs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Trapezoid tabs</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
float: left;
vertical-align: middle;
box-sizing: border-box;
}
.tabs {
padding-left: 20px;
}
.tab {
position: relative;
padding: .5em 1em .35em;
color: #000;
top: 1px
}
.tab::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: -1px; left: 0;
z-index: -1;
transform: scaleX(1.25) scaleY(1.4) perspective(0.5em) rotateX(5deg);
transform-origin: bottom;
background: #ccc;
background-image: linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0)
);
border: 1px solid rgba(0,0,0,.4);
border-width: 2px 1px 0;
border-radius: .5em .5em 0 0;
box-shadow: 0 0px 5px rgba(0,0,0,.3);
}
.tab::after {
content: '';
position: absolute;
z-index: -1;
top: 100%; right: -15px; left: -15px;
height: 15px;
background: #fff;
}
.tab.active {
z-index: 1;
}
.tab.active::before {
background: #fff;
}
.box {
clear: left;
width: 500px;
height: 100px;
background: #fff;
border-radius: 5px;
border: 1px solid rgba(0,0,0,.4);
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab">Trapezoid</div>
<div class="tab">Trapezoid</div>
<div class="active tab">Trapezoid</div>
<div class="tab">Trapezoid</div>
</div>
<div class="box"></div>
</body>
</html>
Simple pie charts
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple pie charts</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div, svg {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
}
.pie {
width: 100px;
height: 100px;
background: yellowgreen;
border-radius: 50%;
background-image: linear-gradient(to right, transparent 50%, #655 0);
}
.pie::before {
content: '';
display: block;
margin-left: 50%;
height: 100%;
border-radius: 0 100% 100% 0 / 50%;
background: yellowgreen;
transform-origin: left;
animation: spin 3s linear infinite, bg 6s step-end infinite;
animation-delay: inherit;
animation-play-state: paused;
}
.pie.animate::before {
border: 1px solid red;
animation-play-state: running;
}
@keyframes bg {
50% { background: #655 }
}
@keyframes spin {
0% { transform: rotate(0turn) }
100% { transform: rotate(.5turn) }
}
svg {
width: 100px;
height: 100px;
transform: rotate(-90deg);
background: yellowgreen;
border-radius: 50%;
}
@keyframes fillup {
0% { stroke-dasharray: 0 100 }
100% { stroke-dasharray: 100 100 }
}
circle {
fill: yellowgreen;
stroke: #655;
stroke-width: 32;
}
.svg-pie.animate circle {
animation: fillup 5s linear infinite;
}
.future-pie {
background: conic-gradient(#655 40%, yellowgreen 0);
}
</style>
</head>
<body>
<div class="pie animate"></div>
<div class="pie" style="animation-delay: -2s"></div>
<div class="pie" style="animation-delay: -4s"></div>
<svg class="svg-pie animate" viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16" />
</svg>
<svg class="svg-pie" viewBox="0 0 32 32">
<circle r="16" cx="16" cy="16" stroke-dasharray="25 100" />
</svg>
<div class="future-pie"></div>
<div class="circle"></div>
<p>Circle radius of 16px( 100/2π ) means stroke-dasharray length of 100 == 100%</p>
</body>
</html>
One sided shadows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>One sided shadows</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 10px;
background: #fff;
}
.single {
box-shadow: 0 5px 5px -5px black;
}
.double {
box-shadow: 5px 5px 5px -5px black;
}
.opposites {
box-shadow: 0 5px 5px -5px black, 0 -5px 5px -5px black;
}
</style>
</head>
<body>
<div class="single"></div>
<div class="double"></div>
<div class="opposites"></div>
</body>
</html>
Irregular drop shadows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Irregular drop shadows</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
vertical-align: middle;
box-sizing: border-box;
width: 100px;
height: 100px;
margin: 0 10px;
background: #fff;
border-radius: 5px;
filter: drop-shadow(2px 2px 5px #000);
}
.speech-bubble {
position: relative;
}
.speech-bubble::after {
content: '';
position: absolute;
width: 20px;
height: 20px;
top: calc(50% - 10px);
right: -10px;
background: #fff;
transform: rotate(45deg);
}
div.one-corner {
background: #fff;
background: linear-gradient(45deg, transparent 15px, #fff 0);
}
div.dashed-border {
background: transparent;
border: 10px dashed #fff;
}
</style>
</head>
<body>
<div class="speech-bubble"></div>
<div class="one-corner"></div>
<div class="dashed-border"></div>
</body>
</html>
Color tinting
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Color tinting</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div, img {
vertical-align: middle;
width: 300px;
height: 188px;
margin: 0 10px;
}
.sepia-hue {
filter: sepia(1) saturate(2) hue-rotate(179deg);
}
.blend-mode {
mix-blend-mode: luminosity;
}
.background-blend-mode {
background: #487fc1 url(img/tiger.jpg);
background-size: cover;
background-blend-mode: luminosity;
transition: .5s background-color;
}
.background-blend-mode:hover {
background-color: transparent;
}
</style>
</head>
<body>
<img class="original" src="img/tiger.jpg" />
<img class="sepia-hue" src="img/tiger.jpg" />
<img class="blend-mode" src="img/tiger.jpg" />
<div class="background-blend-mode"></div>
<p>background-blend-mode is animateable, </p>
</body>
</html>
Frosted glass
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Frosted glass</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
.tiger {
vertical-align: middle;
width: 300px;
height: 188px;
margin: 0 10px;
overflow: hidden;
background: url(img/tiger.jpg) 0 / cover;
}
.glass {
margin: 40px;
color: #000;
position: relative;
overflow: hidden;
}
.glass::before {
background: url(img/tiger.jpg) -10px -10px / 300px 188px;
content: '';
position: absolute;
top: -30px; right: -30px; bottom: -30px; left: -30px;
filter: blur(3px);
}
.glass-inner {
padding: 20px;
background: hsla(0,0%, 100%, .3);
position: relative;
}
</style>
</head>
<body>
<div class="tiger">
<div class="glass">
<div class="glass-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.</div>
</div>
</div>
<p>Need to apply blur() filter to a psuedo element with background in the same position as the parent</p>
</body>
</html>
Folded corner
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Folded corner</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
vertical-align: middle;
width: 200px;
height: 200px;
margin: 0 10px;
background: #fff;
}
.fake {
background:
linear-gradient(to left bottom, transparent 50%, rgba(0,0,0,.4) 0) no-repeat 100% 0 / 2em 2em,
linear-gradient(to left bottom, transparent 1.5em, #fff 0);
}
.realistic {
position: relative;
background: linear-gradient(-150deg, transparent 1.5em, #fff 0);
border-radius: .5em;
}
.realistic::after {
content: '';
position: absolute;
top: 0; right: 0;
background: linear-gradient(to left bottom,
transparent 50%,
rgba(0,0,0,.2) 0,
rgba(0,0,0,.4) 0
) 100% no-repeat;
width: 1.73em;
height: 3em;
transform: translateY(-1.3em) rotate(-30deg);
transform-origin: bottom right;
border-bottom-left-radius: inherit;
box-shadow: -.2em .2em .3em -.1em rgba(0,0,0, .15);
}
</style>
</head>
<body>
<div class="fake"></div>
<div class="realistic"></div>
</body>
</html>
Hyphens
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Hyphens</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
vertical-align: middle;
width: 500px;
padding: 2em;
margin: 0 10px;
background: #fff;
text-align: justify;
color: #000;
-webkit-hyphens: auto;
hyphens: auto;
}
</style>
</head>
<body>
<div>
Lorem ipsum dolor sit amet, consectetuadipisicing­elitseddoeiusmodtemporincididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<p>Can sprinkle &shy; for manual hyphenation or hyphens: auto;</p>
</body>
</html>
Inserted line breaks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inserted line breaks</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
dt, dd {
display: inline;
}
dd {
margin: 0;
font-weight: bold;
}
dd + dt::before {
content: '\A';
white-space: pre;
}
dd + dd::before {
content: ', ';
margin-left: -.25em;
font-weight: normal;
}
</style>
</head>
<body>
<dl>
<dt>Name:</dt>
<dd>Lea Verou</dd>
<dt>Email:</dt>
<dd>lea@verou.me</dd>
<dd>leaverou@mit.edu</dd>
<dt>Location:</dt>
<dd>Earth</dd>
</dl>
</body>
</html>
Inserted line breaks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Inserted line breaks</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
width: 300px;
padding: .5em;
background: #fff;
color: #000;
line-height: 1.5;
background-image: linear-gradient(rgba(0,0,0,.2) 50%, transparent 0);
background-size: auto 3em;
background-origin: content-box;
}
</style>
</head>
<body>
<div>
adgs fhjkags dkfhjasdfj <br>
adgs fhjkags dkfhjasdfjj adkshfgak sdf <br>
adgs fhjkags dkfhjasdfhjadsg fhjkags dkfj <br>
adgs fhjkags dkfhjasdfasdfj <br>
adgs fhjkags dkfhjasdfjasdfasd <br>
adgs fhjkags dkfhjasdfj
</div>
</body>
</html>
Adjusting tab width
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adjusting tab width</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
pre {
background: #fff;
color: #000;
width: 300px;
padding: .5em;
-moz-tab-size: 2;
tab-size: 2;
}
</style>
</head>
<body>
<pre><code>
1 tab
2 tabs
3 tabs
1 tab
</code></pre>
</body>
</html>
Ligatures
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ligatures</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
div {
display: inline-block;
margin: 20px;
background: #fff;
color: #000;
width: 300px;
padding: .5em;
font: 30px/1.5 "Adobe Caslon Pro", Baskerville, serif;
}
.common {
font-variant-ligatures: common-ligatures;
}
.all {
font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;
}
</style>
</head>
<body>
<div class="all">
fi fl ffi st ct
</div>
<div class="common">
fi fl ffi st ct
</div>
</body>
</html>
Ligatures
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ligatures</title>
<link rel="stylesheet" href="css/style.css" />
<style media="screen">
@font-face {
font-family: Ampersand;
src: local('Baskerville-Italic'), local('GoudyOldStyleT-Italic'), local('Garamond-Italic'), local('Palatino-Italic');
unicode-range: U+26;
}
div {
font-family: Ampersand, Helvetica, sans-serif;
font-size: 50px;
}
</style>
</head>
<body>
<div>HTML & CSS</div>
</body>
</html>