今まで画像を使わないとできなかった表現が、画像を使わずにできてしまうCSS3。
あれこれ試行錯誤するうちに、手作り感のあるパーツができました。
今回は2つ。

■手描き風ローディングアニメーション

画像を使わないでCSS3で様々なローディング用アニメーションをつくってみようで紹介されているローディングアニメーション。
円の数値をいじったらなんとなく手描き風になりました。(右2つが手描き風)

loader_tegaki
このような正円になりきれていない円を動かすことで、手書きのいびつな円が回転しているように見えるみたいです。いびつっぷりが非常に微妙でわかりにくいですが。
右端のなんか、なんとなく、ウゴウゴしているように見えませんか・・・・・・?見えませんかそうですか。。。

HTML
<div id="loader_rakugaki"></div>

CSS
#loader_rakugaki
{
float:left;
width: 20px; /*ローディングアイコンの横サイズ*/
height: 20px; /*ローディングアイコンの縦サイズ*/
border-radius: 20px; /*CSS3で円を書く*/
border: 11px solid #17cddd; /*円に枠をつける*/
/* ↑border-radiusの50%+1~2pxくらいの値(ここでは11か12)を入れると、微妙に手描き風になる。 */

border-right-color: #ddd; /*円の右にC状の空きをつける*/

-webkit-animation: spin 1s infinite linear; /*回転のアニメーションをつける*/
-moz-animation: spin 1s infinite linear;
}

/*キーフレームのアニメーションをつける*/
@-webkit-keyframes spin
{
0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
50% { -webkit-transform: rotate(180deg); opacity: 1; }
100% { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
0% { -moz-transform: rotate(0deg); opacity: 0.4; }
50% { -moz-transform: rotate(180deg); opacity: 1; }
100% { -moz-transform: rotate(360deg); opacity: 0.4; }
}



ナチュラル系タグボタン

  • Tag

そしてもうひとつ。いわゆる「ナチュラル系」のタグボタン。
図形を組み合わせることで色々な形を表現できるCSS3の特徴を応用したタグボタン。
borderを使用した台形と、角丸の長方形の組み合わせでできています。
これは色合いとWebフォントをナチュラルっぽくして金具を表現しただけで、特別なことはしていません。
発想次第で、今まで画像を沢山使わなきゃいけなかったテイストもCSSでできちゃうかもしれませんよ~ ということで。
タグボタンの作り方については、こちらを参考にしました。
Pure CSS3 Post Tags(英語)

divの角丸具合を変えたり、ボーダーの一部分を表示することで、台形やリングを表現しています。
naturaltag_css
HTML
<div class="decotag">
<ul>
<li><span class="text">Tag</span></li>
</ul>
</div>

CSS
.decotag {
position: relative;
width: 70px;
height:34px;
left: 50px;
background-color:#b5d3e5;
display: inline-block;
border-radius:5px;
}
.decotag:before {
content: "";
position: absolute;
height: 10px;
width: 0;
top: 0;
left: -21px;
border-width: 12px;
/*↑ボーダーの太さを調節することで、三角形から台形まで表現できる。*/

border-style: solid;
border-color: transparent #b5d3e5 transparent transparent;
/*↑右側ボーダーのみ表示させる。*/

}
.decotag:after {
content: "";
position: absolute;
height: 16px;
width: 16px;
top: 14px;
left: -16px;
border-width: 1px;
border-style: solid;
border-color: #b18b15 transparent #b18b15 #b18b15;
border-radius:50px;
-webkit-border-radius:50px;
-webkit-transform: rotate(10deg);
}

.decotag > ul > li {
position: absolute;
left:13px;
top:1px;
list-style:disc;
font-family:Spirax;
font-size:normal;
color: #ffffff;
}

.decotag .text {
color: #866d0c;
font-size:large;
letter-spacing:0.25em;
}