3Dのリボンを実装するPhotoshopとCSSのチュートリアル
立体的なリボンをPhotoshopで作成しそれをCSSで実装したり、CSSだけでリボンを実装するチュートリアルを紹介します。 Create a 3D Ribbon Wrap-Around Effect (Plus a Free PSD!) [ad#ad-2] 3Dのリボンを作成するPhotoshopのチュートリアル 作成した3Dのリボンを実装するCSSのチュートリアル CSSだけで3Dのリボンを作成するチュートリアル 3Dのリボンを作成するPhotoshopのチュートリアル まずは、Photoshopのチュートリアルから。 チュートリアルはステップごとにPhotoshopのキャプチャ付きで丁寧に解説されているので、英語が苦手な方でも分かりやすいものとなっています。また、リボンのPSDファイルもレイヤーが保持されたものがダウンロードできます。 ダウンロードできるPSDのキャプチャ 作成した3
[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート
「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ：div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
