Source Code:
(back to article)
Submit
Result:
Report an issue
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> body { background-color: #fff; color: #666; font-size: 1em; font-family: Roboto, Helvetica Sans-serif; } .example1 { background-color: #666; color: #eee; padding: 1em; letter-spacing: .5em; -webkit-transition: letter-spacing .5s ease; transition: letter-spacing .5s ease; } .example1:hover { letter-spacing: normal; } .example2 { background-color: #eee; color: #666; padding: 1em; } </style> </head> <body> <h2>Letter-spacing property example</h2> <div class="example1"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil. </p> <div class="example2"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam! </div> </div> </body> </html>