キーワード検索「グラデーション」
1163
デザイン上級者は、中級者と初心者と何が違うんだろう？って思った時に、こちらの本が役に立ちました。 『上達の法則 - 効率のよい努力を科学する -』という本です。この本には、碁や茶道など、あらゆる分野に共通する上級者の特徴がのっています。この本を参考に、デザイン上級者の特徴と、上級者になるための実践方法を書いてみました。 デザイン上級者の特徴 1. 上級者は一つのデザインから読み取ることが多い 一つ...
714
CSS3を使うと画像のようなボタンも簡単に作れます。よくあるタイプのボタンですが、できあがりのコードだけだと勉強にならないので、作り方を順番に紹介していきます。 今回、ChomeとFirefoxで動作確認しています。IEだとグラデーションが使えないので、同じボタンがたくさんあるように見えます。スマホサイト用なんかだと十分実用的だと思います。
739
はじめに スマートフォン版Yahoo! JAPANトップでは、ユーザーへ高品質なユーザーエクスペリエンスを提供するために、対象端末をiOSとAndroid OSのスマートフォン端末に絞り、最新のブラウザ仕様に基づいたサイト構築を行っています。スマートフォン版Yahoo! JAPANトップ画像の使用を抑えるためCSS3や、ネイティブアプリケーションに近づけるためCSSアニメーションや、タッチセンサー...
434
2011年がスタートしましたが、「なんだか調子でないなー」という方！今年の目標はもう設定しましたか？私は毎年「新年の抱負」を考えているのですが、今年は何にしましょう？ということで、Web屋さんが設定できそうな新年の抱負案を考えてみたので、参考にしつつ新年の抱負を考えてみてはいかがでしょう？1. CSS3の勉強をする角丸・グラデーションをはじめ、画像を使わなければできなかった効果がCSS3を使えば簡...
394
背景、ロゴ、favicon、Ajaxローディングなどの画像をオンラインで作成できるサイトを集めました。まだまだありますが、多すぎるとかえって不便だと思うので各ジャンルごとで3個または5個で厳選しています。背景関連1. Stripe Generatorストライプの模様を作るならここ。ストライプの幅はもちろん、影や柄なども自由自在です。グラデーションもつけることもできます。2. bgMaker背景パタ...
368
レイアウトのグリッドをはじめ、ナビゲーション、パラグラフ、リスト、フォーム、テーブルなどページでよく使用するエレメント、角丸、グラデーション、ドロップシャドウ、回転のエフェクトなど、ウェブページを構成するさまざまエレメントが用意されたHTML5+CSS3ベースのフレームワークを紹介します。 Perkinsはウェブデザイナー・開発者の大切な時間を節約するために開発されたもので、HTML5+CSS3で...
270
CSS3でこんなクオリティのボタンが作れる！ みたいな記事をよく見かけると思うんですが、 そういったものだけを集めたデザインギャラ リーがありましたのでシェア。CSSの勉強に 如何でしょう。さもPhotoshopで作ったかの ようなエレメントが豊富にあります。 タイトルよく分からんですねｗ CSS3のグラデーションやbox-shadowなどを駆使して、今まではPhotoshopで作成していたかのよ...
298
どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。フォームの仕様今回チャレンジするフォームの主な仕様です！グラデーション・ボックスシャドウを使って立体感...
309
tech.kayac.com、ささやかにリニューアルしました！tech.kayac.comをご覧の皆さん、はじめまして。意匠部ME課のfuchigamiといいます。 どうして技術部ブログに意匠部の野郎が？って感じですが、 技術部ブログのリニューアル記念ということで、ちゃっかりcanvasについて記事を書こうと思います。最初なので、、、簡単にぼくの属性を説明すると、html5とか好き、CSS3とか好...
224
これ系はいくつかありますので 1つの選択肢として、という感じ ですね。css3のtransformや box-shadowをクロスブラウザ 対応させるjsライブラリですが、 特徴はプロパティを1行で統一 させる事が出来る点です。 css3のtransform（変形）、box-shadow（影）、gradient（グラデーション）ですが、gradientは不完全でした。しかしながらこのスクリプトを応...
203
ShineTime ? A Kick-Ass New jQuery & CSS3 Gallery With Animated Shine Effects 画像や枠などをキラッと超カッコよく光らせるエフェクトをjQueryで実装する例が公開されています。 透明と白のグラデーション画像を斜めにして画像や枠の上をアニメーションで横切らせるというシンプルな方法でFlashサイトのようなクールな演出を実現し...
97
![[CSS]見出しの両端に水平ラインを天地中央に配置するテクニック | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css-centered-heading-horizontal-line-by-impressivewebs.html)
紙媒体でよく見かける、見出しの両端に水平ラインを天地中央に配置するスタイルシートのテクニックを紹介します。 下記は各ポイントを意訳したものです。 実装のポイント Method 1: 疑似要素 Method 2: 隣接兄弟セレクタ Method 3: 線形グラデーション Method 4: 最後にjQueryを使ったメソッド 全部のデモ 実装のポイント 実装するにあたり、下記の点に留意します。 画像...
85
![[CSS]CSS3を使って美しい検索フォームを実装するチュートリアル | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/css/css-tutorial-pretty-search-forms-by-paulund.html)
CSS3の角丸やグラデーションを少しだけ使って、美しい3種類（ライトグレー・ダークグレー・グレー）の検索フォームを実装するチュートリアルを紹介します。 デモページ 実装 HTML デモ3種類のHTMLは基本的に全て同じで、親のdiv要素のclassが異なるだけです。 <div class="lighter"> <form> <span><input type="text" class="searc...
64
![[JS]面倒なCSS3のベンダープレフィックスを自動で付与するスクリプト -Prefix free | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/js-prefixfree.html)
ページにたった一行記述するだけで、CSS3のベンダープレフィックスを自動で付与してくれるスクリプトを紹介します。 Prefix freeの機能 ベンダープレフィックスとは、CSS3で採用予定のプロパティがブラウザに先行実装されており、それらを各ブラウザごとに機能させるためプロパティに加える接頭辞のことです。 「-moz-」「-webkit-」「-o-」「-ms-」などがあります。 例えば、CSS3...
68
CSS3 PIE: CSS3 decorations for IE IE6-8でもCSS3が使えるようになる「CSS3 PIE」。 非対応ブラウザがあるのでまだCSS3はいいやという方もいると思いますが、CSS3 PIEというhtcライブラリを使うことでCSS3に対応させてしまえます。 角丸、ドロップシャドウ、グラデーションといったプロパティに対応しています。 実装の際には border-radi...
56
Practical CSS3 tables with rounded corners - RedTeamDesign CSS3でクールな角丸テーブルを作る例。 ヘッダーにグラデーションをかけつつ角丸なテーブルを作る例です。カーソルを乗せるとハイライトする機能もtransitionによって組み込んであって良い感じです。 HTMLとしては普通のテーブルなのでCSSでここまでカスタマイズできるというのは...
55
テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」2011年02月18日-Градиенты для текста. Плагин для jQuery テキストにグラデーションをかけられるjQueryプラグイン「True Gradient Text」。 １文字づつ文字色をかえてグラデーションをかける昔はやったテクニックですが、これをjQueryプラ...
67
HTML5でメニューを作りたい。そんなときに参考になるのが、『How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery』。HTML5を使ったドロップダウンメニューです。CSS3で、角丸やグラデーションが適用されていますね。XHTMLはシンプルで、動きをつけたjQueryの動きもスムーズになっています。デモは以下から。Demo一度見...
80
Kick-ass CSS3 Support in IE6, 7, and 8 | AEXT.NET MAGAZINE IE6-8でもCSS3に対応するライブラリまとめ。 IEでCSS3に対応するには behavior で htcを指定する方法が簡単で便利ということでライブラリが色々あるようだったのでまとめました。 そんなに多機能はいらないという場合に、機能を削ったものを使うという方法もありかもしれ...
58
![[JS]テキストの一部のみ最初に表示し、残りをアニメーションで表示するスクリプト | コリス](http://capture.heartrails.com/200x130?http://coliss.com/articles/build-websites/operation/javascript/jquery-tutorial-text-fade-out-read-more.html)
テキストの冒頭のみが表示された状態のキャプチャそれぞれ「Read More」をクリックすると、残りのテキストがアニメーションで表示されます。実装HTMLHTMLはシンプルで、テキストと「Read More」ボタンをdiv要素内に配置します。<div class="sidebar-box"><p>パネルのテキスト</p><p class="read-more"><a href="#" class="...
