Example
<style>
.wrapper
{
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .5s linear;
}
.wrapper
{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.wrapper .page
{
/*Space it out a bit*/
line-height: 1.2;
letter-spacing: 2px;
word-spacing: -1px;
/*Make it stand out a little more*/
margin-left: 45px;
margin-top: 15px;
/*Prepare for a neat hover effect, slightly less transparent when not hovered*/
opacity: .6;
/*Pump up the size a bit*/
font-size: 16px;
/*Make it a bit prettier and book-like*/
text-indent: 20px;
font-family: "Times New Roman";
/*Keep it from spanning the entire browser window*/
max-width: 65%;
/*Add a thin outline around the text to make it look more like book ink
and all around a much nicer look*/
text-shadow: 0 0 1px darkgray;
}
/*Reminder, this applies to the first line only, even if the browser is resized
and text is moved to a different line*/
.wrapper .page::first-line
{
/*Move the first line up more*/
line-height: 2;
/*Make it upper and lower capitalized font*/
font-variant: small-caps;
/*Always have it at maximum opacity*/
opacity: 1;
/*Have the first line a darker ink outline to make it stand
out more*/
text-shadow: 0 0 1px black;
}
/*Make the first letter the signature old storybook look*/
.wrapper .page::first-letter
{
/*Invert the colors*/
background-color: black;
color: lightgray;
/*Change it to a really cursive effect, thanks to
Google Web Fonts for the "Dancing Script" font*/
font-family: 'Dancing Script', cursive;
/*Really pump up the size more*/
font-size: 20px;
/*Space it out, make it really stand out a lot*/
padding: 5px;
margin-right: 6px;
/*Curve it to really make it feel old and antique*/
border-radius: 5px;
}
/*Make the simple hover effect really cool*/
.wrapper .page:hover
{
/*Bring it out more on hover but keep it still faded some
for the additional effect. Works really well for having the page
background bleed out some*/
opacity: .8;
}
/*This improves selection coloring to stay within theme*/
.wrapper .page::selection
{
/*Invert the colors upon selection*/
background-color: rgb(50, 50, 50);
color: rgb(150, 150, 150);
/*Remove text shadow, it just makes the selected text
look a little blurry*/
text-shadow: 0 0 0;
}
</style>
<br />
<div class="wrapper">
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in eros ac est feugiat feugiat a id diam. Pellentesque commodo neque eget odio consequat sagittis. Etiam lorem lectus, rutrum non ullamcorper in, gravida in purus. Sed at massa scelerisque,
tristique justo in, tincidunt mi. In facilisis, justo et molestie vestibulum, enim nulla euismod ex, vel mattis nulla odio at elit. Integer risus nibh, viverra ac pharetra vel, mattis accumsan turpis. Donec at faucibus turpis. Sed tortor libero, scelerisque
nec arcu eget, tincidunt hendrerit lectus. Ut et diam tempor, dignissim tellus sit amet, laoreet ipsum. Donec facilisis pulvinar sollicitudin. Fusce aliquet gravida dapibus. Curabitur pellentesque suscipit nulla at placerat. Nulla aliquam blandit
lacinia. Integer laoreet lacus nec dapibus egestas. Curabitur pellentesque, est eu convallis molestie, ligula neque porta est, eu auctor risus orci vitae nibh. Fusce placerat laoreet elit, ut congue metus porta ut.
</div>
<div class="page">
Maecenas vehicula ante et elit hendrerit fringilla. Quisque convallis nulla sed metus consequat, non tincidunt purus tincidunt. Aliquam ultrices lorem sit amet nulla lobortis, venenatis ultricies purus malesuada. Fusce et consectetur dui, a dignissim
lacus. Donec iaculis condimentum elit eget ornare. Nullam laoreet lobortis blandit. Duis lacinia elementum lectus non viverra. In non porta libero, id efficitur lorem. Cras nunc mauris, vehicula quis interdum at, feugiat ac orci. Mauris aliquam leo
eu mauris pretium sagittis.
</div>
</div>
.wrapper
{
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .5s linear;
}
.wrapper
{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.wrapper .page
{
/*Space it out a bit*/
line-height: 1.2;
letter-spacing: 2px;
word-spacing: -1px;
/*Make it stand out a little more*/
margin-left: 45px;
margin-top: 15px;
/*Prepare for a neat hover effect, slightly less transparent when not hovered*/
opacity: .6;
/*Pump up the size a bit*/
font-size: 16px;
/*Make it a bit prettier and book-like*/
text-indent: 20px;
font-family: "Times New Roman";
/*Keep it from spanning the entire browser window*/
max-width: 65%;
/*Add a thin outline around the text to make it look more like book ink
and all around a much nicer look*/
text-shadow: 0 0 1px darkgray;
}
/*Reminder, this applies to the first line only, even if the browser is resized
and text is moved to a different line*/
.wrapper .page::first-line
{
/*Move the first line up more*/
line-height: 2;
/*Make it upper and lower capitalized font*/
font-variant: small-caps;
/*Always have it at maximum opacity*/
opacity: 1;
/*Have the first line a darker ink outline to make it stand
out more*/
text-shadow: 0 0 1px black;
}
/*Make the first letter the signature old storybook look*/
.wrapper .page::first-letter
{
/*Invert the colors*/
background-color: black;
color: lightgray;
/*Change it to a really cursive effect, thanks to
Google Web Fonts for the "Dancing Script" font*/
font-family: 'Dancing Script', cursive;
/*Really pump up the size more*/
font-size: 20px;
/*Space it out, make it really stand out a lot*/
padding: 5px;
margin-right: 6px;
/*Curve it to really make it feel old and antique*/
border-radius: 5px;
}
/*Make the simple hover effect really cool*/
.wrapper .page:hover
{
/*Bring it out more on hover but keep it still faded some
for the additional effect. Works really well for having the page
background bleed out some*/
opacity: .8;
}
/*This improves selection coloring to stay within theme*/
.wrapper .page::selection
{
/*Invert the colors upon selection*/
background-color: rgb(50, 50, 50);
color: rgb(150, 150, 150);
/*Remove text shadow, it just makes the selected text
look a little blurry*/
text-shadow: 0 0 0;
}
</style>
<br />
<div class="wrapper">
<div class="page">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in eros ac est feugiat feugiat a id diam. Pellentesque commodo neque eget odio consequat sagittis. Etiam lorem lectus, rutrum non ullamcorper in, gravida in purus. Sed at massa scelerisque,
tristique justo in, tincidunt mi. In facilisis, justo et molestie vestibulum, enim nulla euismod ex, vel mattis nulla odio at elit. Integer risus nibh, viverra ac pharetra vel, mattis accumsan turpis. Donec at faucibus turpis. Sed tortor libero, scelerisque
nec arcu eget, tincidunt hendrerit lectus. Ut et diam tempor, dignissim tellus sit amet, laoreet ipsum. Donec facilisis pulvinar sollicitudin. Fusce aliquet gravida dapibus. Curabitur pellentesque suscipit nulla at placerat. Nulla aliquam blandit
lacinia. Integer laoreet lacus nec dapibus egestas. Curabitur pellentesque, est eu convallis molestie, ligula neque porta est, eu auctor risus orci vitae nibh. Fusce placerat laoreet elit, ut congue metus porta ut.
</div>
<div class="page">
Maecenas vehicula ante et elit hendrerit fringilla. Quisque convallis nulla sed metus consequat, non tincidunt purus tincidunt. Aliquam ultrices lorem sit amet nulla lobortis, venenatis ultricies purus malesuada. Fusce et consectetur dui, a dignissim
lacus. Donec iaculis condimentum elit eget ornare. Nullam laoreet lobortis blandit. Duis lacinia elementum lectus non viverra. In non porta libero, id efficitur lorem. Cras nunc mauris, vehicula quis interdum at, feugiat ac orci. Mauris aliquam leo
eu mauris pretium sagittis.
</div>
</div>
