I built a new web site the other day (or night actually). It is about “smart quotes”. In swedish. And the url is citattecken.se.
The inspiration came from Quotes & Accents by Jessica Hische, the image Smart Quotes for Smart People by Jason Santa Maria, this tweet by Oliver Reichenstein and a twitter conversation about “citattecken” with Jenny Forsberg (and a few others). Thank you all!
At citattecken.se I wanted the instructions for key presses to look similar to real keys on a computer keyboard, but I did not want to use images. Pure HTML and CSS to the resque! This is an example of what the HTML looks like:
<kbd>option</kbd> + <kbd>[</kbd>
This is the result:
option + [
And here is the CSS that makes it all happen:
kbd
{
display: inline-block;
min-width: 2.5em;
margin: 0.333333em 0;
padding: 0.5em;
border: 1px solid #999;
border-radius: 0.25em;
-moz-border-radius: 0.25em;
-webkit-border-radius: 0.25em;
background: #f7f7f7;
background-image: linear-gradient( to bottom, #f7f7f7 0%, #e7e7e7 100% );
background-image: -o-linear-gradient( bottom, #f7f7f7 0%, #e7e7e7 100% );
background-image: -moz-linear-gradient( bottom, #f7f7f7 0%, #e7e7e7 100% );
background-image: -webkit-gradient( linear, center bottom, center top, from( #f7f7f7 ), to( #e7e7e7 ) );
color: #333;
box-shadow: inset 0 -0.125em 0.0625em #bbb,
inset 0 0.125em 0.0625em #fff;
-moz-box-shadow: inset 0 -0.125em 0.0625em #bbb,
inset 0 0.125em 0.0625em #fff;
-webkit-box-shadow: inset 0 -0.125em 0.0625em #bbb,
inset 0 0.125em 0.0625em #fff;
text-align: center;
text-shadow: 0 1px 0 #fff,
0 0 1.5em rgba( 0, 0, 0, 0.25 );
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial;
font-size: 1em;
line-height: 1.5;
}Do you want to use this in your own project? Be my guest!