Scotch Tape 01


border-image を利用したボックスデザイン

2xup.org:blog

2xup.org


HTML

<div>
    <h1><a href="http://2xup.org/blog/">border-image を利用したボックスデザイン</a></h1>
</div>

<div>
    <h1><a href="http://2xup.org/blog/">2xup.org:blog</a></h1>
</div>

<div>
    <h1><a href="http://2xup.org/">2xup.org</a></h1>
</div>

CSS

h1 {
    display: inline-block;
    margin: 0;
    padding: 0.5em 0.8em;
    border: 1px solid #a3a3a2;
    -moz-border-image: url(scotch-tape.png) 2 8 2 5 / 2px 8px 2px 5px; /* Gecko */
    -webkit-border-image: url(scotch-tape.png) 2 8 2 5 / 2px 8px 2px 5px; /* Webkit */
    color: #595857;
    font-family: Georgia, serif;
    font-size: 130%;
    font-weight: bold;
}

h1 a {
    color: #595857;
    text-decoration: none;
}

Image source


Taichi Kaminogoya.