CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
CSS3を極めたいなら知っておきたい三角形を作る3つの方法
CSS3を使い始めていくと、ぶつかる壁に「三角形みたいに尖った角」をどう表現するかというのがあります。三角形って思ったより難しいです。 まぁ無理しないで、イメージで作ればいいんですけど、ちょっとした装飾だったりすると、ちょこっとCSSで作れると楽な時もあります。 そこで、CSS3で「三角形みたいに鋭角を作る方法」を３つ紹介します。ここで紹介する方法には、メリットとデメリットがありますので、使い分けれるようになるといいと思います。 1. グラデーションを使う こちらの記事でも紹介しましたが、背景を background-size と background-position で4分割して、斜めのグラデーションを使うことで角を落とすことができます。 コード 4分割して、4つのグラデーションでそれぞれを塗ります。この方法では、塗りを使っているので、カスタマイズ性が高いですが、グラデーションを使って
“ＭＳ Ｐゴシック” をメイリオみたいにアンチエイリアスさせるCSS3ハック
CSS3 を使って Windows から見るブラウザ上の "MS Pゴシック" をメイリオみたいに、アンチエイリアスさせて表示する方法を発見してしまったので紹介します。 さて、↓の２つのの文字を見比べてください。 実はどちらも同じ "MS Pゴシック"なんです（Chromeで画像化しています）。 CSS3 の transform を使う さて、これをどうやって実現しているかと言うと、CSS3 の transform を使って、アンチエイリアスさせたいテキストを、少しだけ縦方向に拡大しています。 .clear-type { -webkit-transform-origin: 0 0; -webkit-transform: scale(1, 1.01); -moz-transform-origin: 0 0; -moz-transform: scale(1, 1.01); -ms-transf
2012年のWebトレンドの○をあなたのデザインに取り入れるためのアイディア
2012年のWebのトレンドに円があるらしいです。 もちろん、今まで 円という表現がなかったというわけではありませんが、CSS3（border-radius）で簡単に円を表現できるようになったことで、「矩形と同じように円が使える」ってことですからねー。トレンドというよりは、より一般化していくんだと思います。 そこで今回の記事では、円をサイトに使うためのアイディアを紹介します。 また、このブログでも、CSS3で 円を作るチュートリアルなど書いていますので、 そちらも合わせ読んでください。 - CSS3 の border-radius を使って円形のサムネイルを作る方法２つ - CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法 ※ すべてがCSS3で作られたということでなく、あくまで表現の参考として見てください。 1. アクセントとして使う 一般にWebというメディアは
CSS3で半透明のリングが波紋のように広がるボタンのエフェクトを作る方法
またまた CSS3 の小ネタです。これがやりたくて、ひそかに研究していました。 とりあえずデモです。↓のボタンにマウスを乗せてみてください。 ※ 最新の Firefox か webkit で見てください。 作り方 まず、CSS3で円をどうやって作るんだ？と思った方は、昨日の記事 CSS3 の border-radius を使って円形のサムネイルを作る方法２つ を読んでみてください。 HTML Aタグでマークアップしています。アニメーションするリングの部分は、SPAN.ring が担当します。 <a class="button" href="#"> <span class="ring"></span> </a> アニメーションするリングの部分は、SPAN.ring をキーフレームアニメーションで動かします。 ※ わかりやすくするために、ベンダープレフィックスは付けていません。 実際のものが欲
CSS3 の border-radius を使って円形のサムネイルを作る方法２つ
今回の記事では、CSS3の border-radius を使った円形いサムネイルの作り方を２種類紹介します。 まず簡単な方から説明しますが、サムネイル画像が正方形の場合であれば、画像のスタイル border-radius に大きめの値を指定するだけで、丸いサムネイルを作れますね。 <img src="thumb.png" width="150" height="150" style="border-radius:400px;" > サムネイルが長方形の場合 写真が正方形の場合でも、きれいな円にしたい場合は、サムネイルを背景画像（background-image）にすることで実現できます。イメージは↓のような感じです。 HTMLソース サムネイルの幅に合わせたボックスに、サムネイル画像を背景画像として設定し、border-radius で背景画像をクリップします。クリックできるようにする場合
CSS3で線（border）をグラデーションさせるテクニック
Illustrator とかでよくやる「塗りとパスのオフセットを使って実現する線のグラデーション」を、CSS3で実験してみました。 ↓とりあえず、border を使った場合と、線をグラデーションさせた場合の作例です。CSS だけで作っています。モダンブラウザで見てください。 微妙な違いかもしれませんが、線にグラデーションを適用した方、よりリアルで繊細な印象になります。 作り方 border は使いません。替わりに、ネストしたボックスを作り、親ボックスをグラデーションさせることで、線がグラデーションしているように見せます。 HTML 内側に span を入れ込んで「重ねた塗り」を実現します。 <a href="#" class="button"><span>ボタン</span></a> 外側のボックス (a) の padding が線幅になります。内側のボックス (span) は、白で塗りつ
CSS3でスティッチ（縫い目）のような効果を作るアイディア
「HOW TO CREATE STITCHED LOOK IN CSS」より、CSS3でスティッチ風の飾りを作る方法を紹介します。 スティッチといっても、青い地球外生命体ではなくて、 縫い目のような様な飾りのことです。 仕掛け 点線の部分は、border-style:dotted で実現しています。そのままですね。ポイントは、それだと線が外側になってしまうので、CSS3のbox-shadowを使って、擬似的に点線の外側の塗りを作るところです。 作り方 HTML スタイルを適用したいタグに stitched クラスを設定します。 <a href="#" class="stitched">CSS Stitched Look</a> border-style:dotted と box-shadow の辺りがポイントになります。 .stitched { padding: 5px 10px; bac
イラスト屋の私がお気に入りの「イラストがかわいいサイト」を紹介します
イラストを活かした個性的なサイトデザインは、見ていて創り手の世界観に魅了されます。 イラストを描くのが好きな私がいつかこんなサイトも作ってみたいという夢希望を込めて・・・・・・その中でも比較的ポップなイラストを使ったサイトを集めてみました。 参考にはならないかもしれませんが、観賞用にどうぞ！ JUNOPILOT ※音が出ます おもわずすべてのキャラクターをクリックしてしまいそうです。 2create studio 手書き風イラストが良い味を出していると思います。アイコンや挿絵にも使われていて、統一感が良い感じです。 meomi cloud house イラストの中にコンテンツがある、というイメージ。キャラクターにカーソルを当てた時の動きがかわいいです。 Two Giraffes ほっこりイラストなサイト。やわらかい雰囲気が出ています。 Chocolaty Chandu どのページへ飛んでも
めんどうな作業がわずか数秒に！新人デザイナーが 知らないと一生後悔するExcelを使ったHTML生成
お客さんから送られてきた、Excelデータからせっせとリストや表のHTMLをコーディングしているあなた！そろそろ手がが疲れてきていませんか？ そんなあなたは、この記事で紹介するExcelテクニックをぜひ覚えてください。 面倒な作業が、わずか数秒で終わります！ Excelを使った高速HTML生成 僕たちプログラマーは、ちょっとしたコード生成に、Excelを使います！ DreamweaverでもCSVファイルを取り込むことはできるのですが、<dl>タグでマークアップしたい時とか、カスタマイズしたい場合は、これから紹介するExcelを使った方法が簡単で、効果的です。 さぁ、↓のようなお客さんから送られてきたExcelデータから ... こんな感じの、<dl>タグでマークアップされたHTML生成する流れを説明します。データ数はうんざりするくらいあると思ってください。 Let's Excel 1)
パターン化しがちなお問い合わせフォーム！そんな人のためのインスピレーションデザイン
海外サイトのお問い合わせフォームを集めてみました。お問い合わせフォームは作るけどパターン化してるって思ったことありませんか？ インスピレーションの素敵なサイトをリストアップしましたので、今後のサイトデザインに悩んだ時に参考にしてください。 ページフッターにお問い合わせフォームがあるサイトもあるので、スクロールしてご覧ください。
Webサービス開発で知らないと損する！登録フォームでユーザーを逃さないのために必要な5つの手法
Webデザイナーや開発者さんは、いかにして多くのユーザーに途中で断念することなく、登録を完了させてログインしてもらうかということに、日々頭を悩ませている人もいらっしゃると思います。 この記事では、最近のWebサイトやサービスに見られる、ユーザー登録のための導線手法を紹介します。ぜひ、新しいサービスを考える際に参考にしてください！ Don't miss it!。 手法1. モーダルダイアログを使う ※イメージは、ゲッティ イメージズのものです。 モーダルダイアログとは、↑のようなページの上にページを重ねたような効果を言います。実はアレは、カッコいいだけではないのです。 この手法では、別にユーザー登録ページを設ける方法に比べて、ページ遷移によって利用者の意識が外に移ることがありません。 また、利用者には、目的のゴールが後ろに透けて見えている状態になるので、いつでも元のページ帰れる安心感があり、
ノンプログラミングで流行りの「スクロールするサイト」が作れる！jQueryプラグインを作ってみました
ノンプログラミングで、スクロールするサイトを作れちゃう！ そんなすばらしいjQueryのプラグイン、jQuery Scrollable Linkを作ってみました。 プラグイン自体は、jQueryが書ける人ならそれほど難しいものではないのですが、jQueryを全く知らない方や、初心者のWebデザイナーさんに使って頂けるとうれしいです！。 デモ こんな感じのサイトがノンプログラミングで作れます。 デモを見る 使い方は簡単！ このプラグインは、ページ内リンクに、scrollableというクラスを設定することで、自動でスクロールアニメーションに変換します。 1) まず、以下の2行をheadタグのの中に入れます。 jquery.scrollablelink.js は、このページからダウンロードして配置してください。 <script src="http://ajax.googleapis.com/aj
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
