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

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

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タグから相対指定になりますね。
これでちょうどいい場所に装飾用の画像を表示させています。
意外にも一般的な方法を使っているのですが、かわいらしい画像を使って実装されているともっとトリッキーな方法なんじゃないかと妄想させられますw

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

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

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, JavaScriptな情報をあなたに

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

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top