[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート
CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 デモページ イメージスライダー自体もキーフレームを使ったCSSアニメーションで実装されています。 [ad#ad-2] 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <div class="panel"> <h2>One</h2> <p>Lorem ipsum dolor sit amet...</p> </div> </a> ... </div> CSS まずは、スライダー自体のスタイルです。 画像をbackgroundで表示します。 .sli
第5回 カラースキームを決めるために必要なツールと注意点 | gihyo.jp
前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
『色を色で見ないで』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 はじめまして。 2013年度新卒入社、AmebaのSimplogでWEBデザイナーをしているリュウタロウと申します。 以前新卒デザイナー同士の勉強会がありまして、そこでの私の発表内容がすごく好評でした。 以降より多くの人に向けて発信したいと考え、この場をお借りして記事を執筆させて頂く事になりました。 これから綴るのは、デザインの細かいテクニックやハウツーではありません。 様々なジャンルのクリエイティブに通じる、基本的なモノの見方、考え方の話です。 「ワタシ、デザインワカラナイワ」 というビジネスパーソンも、普段やっている仕事や趣味とリンクさせながら理
[CSS]さまざまなバリエーションを簡単に利用できる美しいデザインのボタンを実装するチュートリアル
画像は使用せずに、繊細なパターンとグラデーションで美しいボタンをスタイルし、サイズやカラーなどさまざまなバリエーションを簡単に利用できるように実装するスタイルシートのチュートリアルを紹介します。 ベースとなるボタン HTML マークアップは非常にシンプルです。 <a href="" class="button">Button</a> または、button要素でも構いません。 <button class="button">Button</button> CSS CSS3を使って、ちょっとリッチにスタイルしてみましょう。 .button{ display: inline-block; *display: inline; zoom: 1; padding: 6px 20px; margin: 0; cursor: pointer; border: 1px solid #bbb; overflow
[CSS]HTMLはシンプルで、紙をぺろっと折ったエフェクトをつけるチュートリアル
Code a Simple Folded Corner Effect With CSS [ad#ad-2] 下記は各ポイントを意訳したものです。 コンセプト デモ 実装 コンセプト このチュートリアルのコンセプトは、div要素に対してできるだけシンプルに紙を折ったエフェクトを与えることです。画像を使用すれば、当然かなり簡単にできることですが、これをCSSで行います。 基本的に必要なものは長方形のボックスのほかに、二つの三角形です。 デモページ [ad#ad-2] 実装 HTML HTMLは非常にシンプルです。 見出しとパラグラフを配置したdiv要素に、class（foldtl）を加えます。 <div class="page foldtl"> <h2>見出し</h2> <p>パラグラフ...</p> </div> CSS まずは、ページ全体とdiv要素のスタイルです。 div要素の背景はCS
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
