Home > 技術 > CSSでセロハンテープなどの装飾を施す方法

CSSでセロハンテープなどの装飾を施す方法

2008-06-13 (金)
技術

Web Designer Wallという海外のWebDesignのサイトで紹介されていたCSSのテクニックですが、最近みなさんブログにアップされているようなのでボクも便乗。

Web Designer Wallを見ていただけると分かるのですが、デザインが美しすぎるんです！
タイトルヘッダーのぐるぐるした感じがクリエイティブだし、キチっとしたラインを作らずにずらすテクニックがとってもうまいです。

そこで紹介されていたセロハンテープのテクニックなどは今後使えそうだと思ったのでメモメモ。

例えば上の画像のようにピンだったりセロハンテープだったりを施したい場合は以下のコードになります。

CSS

.photo {
    float : left;
    height : 130px;
    margin : 30px;
    position : relative;
    width : 180px;
}
.sample1span {
    background : transparenturl(images / pin.png)no - repeatscroll0 % ;
    display : block;
    height : 21px;
    left : 90px;
    position : absolute;
    top :- 12px;
    width : 28px;
}
.sample2span {
    background : transparenturl(images / tape.png)no - repeatscroll0 % ;
    display : block;
    height : 27px;
    left : 50px;
    position : absolute;
    top :- 12px;
    width : 77px;
}
.sample3span {
    background : transparenturl(images / paper - clip.png)no - repeatscroll0 % ;
    display : block;
    height : 60px;
    left :- 2px;
    position : absolute;
    top :- 5px;
    width : 30px;
}
.sample4span {
    background : transparenturl(images / tape2.png)no - repeatscroll0 % ;
    display : block;
    height : 32px;
    left : 30px;
    position : absolute;
    top :- 13px;
    width : 115px;
}
.sample11span {
    background : transparenturl(images / floral - corner.png)no - repeatscroll0 % ;
    display : block;
    height : 72px;
    left :- 15px;
    position : absolute;
    top :- 22px;
    width : 122px;
}
.sample14span {
    background : transparenturl(images / glossy - gradient.png)repeatscroll0 % ;
    display : block;
    height : 84px;
    left : 5px;
    position : absolute;
    top : 5px;
    width : 170px;
}

HTML

<div class="photosample1">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 9.jpg"/>
	</a>
</div>
<div class="photosample2">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 13.jpg"/>
	</a>
</div>
<div class="photosample3">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 2.jpg"/>
	</a>
</div>
<div class="photosample4">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 9.jpg"/>
	</a>
</div>
<div class="photosample11">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 8.jpg"/>
	</a>
</div>
<div class="photosample14">
	<a href="#">
		<span></span>
		<img alt="image" src="images / 5.jpg"/>
	</a>
</div>

外側にいるdivタグにはposition:relative;が指定されているので、その中にいるspanタグのposition:absolute;はdivタグから相対指定になりますね。
これでちょうどいい場所に装飾用の画像を表示させています。
意外にも一般的な方法を使っているのですが、かわいらしい画像を使って実装されているともっとトリッキーな方法なんじゃないかと妄想させられますｗ

こうなってくるとイラストレーターやPhotoshopを使いこなせるのが最も大切？になってくるのでしょうかね？
早く覚えねば・・・

デモは以下のサイトから見ることができます。（楽しいですよ！）
Firebugで覗いちゃってください。
Demos | CSS Decorative Gallery

【関連する記事】

Comments:0

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1039
Listed below are links to weblogs that reference: CSSでセロハンテープなどの装飾を施す方法 from HouseTect, JavaScripter Blog

Home > 技術 > CSSでセロハンテープなどの装飾を施す方法

RSS Feeds

Search

Recent Entries

Tag cloud

Categories

月別アーカイブ

このブログについて

author：hisasann

description：フリーランスで仕事しているプログラマーです。
最近はJavaScript、Rails、Java（Struts+Spring）なんかをいろいろといじっています。
今やってみたいのはFlashやActionScriptかな。
また誕生して半年になる子供の成長を見守るパパでもあります。

日々の日記 :

Hisasann’s Log@はてダ

他に運営しているブログ：

利用しているWebサービス :

最近のコメント

Powered by

Page Top