新着記事『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス
ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 body:before { /* top shadow */ content: ""; position: fixed; top: -10px; left: -10px; width: 110%; height: 10px; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8); -ms-box
CSSの小数点以下の数値を各ブラウザはどのように解釈するか
CSSで小数点以下を指定できる単位で、小数点以下の数値の扱いがブラウザごとに異なっているようなので、単位別にまとめてみました。 調査時の各ブラウザのバージョンですが、Internet Explorer 9 & 10 (Windows 7), Firefox 17, Chrome 25 dev-m, Opera 12.10となっています。調査にはブラウザ付属の調査ツールを使いました。 表が見づらいかもしれませんが、我慢してください。 なお、これはどうレンダリングされるかなどは考慮していません。 その指定がどう解釈されるかだけを調べたものです。 指定した値についてですが、但し書きがない場合は1.5555555555です。 Percentageフォントサイズをパーセンテージ指定。
単純だけど簡単な背景画像のパララックスを実現するjQueryのスクリプト | Web Mugen
スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。 とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。 Demo 必要なファイル jquery.js 対応ブラウザ Google Chrome Safari Firefox Internet Explorer7～ Opera ※Windowsのみの確認です。また、Internet Explorer以外は記事投稿時の最新版を対象にした確認です。 コーディング＆設定 HT
【ほぼ網羅】CSS3だけでアニメーションを実装する方法のまとめ
まずは、transitionプロパティでアニメーションを定義する方法です。 transitionプロパティは、開始時の状態と、終了時の状態を定義して使用します。 開始時と終了時を定義する方法には、以下の二種類があります。 1. hoverなどの擬似クラスを使用する方法 2. javascriptを使用して、CSSのプロパティを変更する方法 transitionでアニメーションを定義する際に、以下の４つの項目を指定することができます。 1. アニメーションにかかる時間 2. 対象のプロパティ 3. イージング 4. 遅延時間 この４つのプロパティはtransitionプロパティでまとめて定義することも出来ますし、個別に設定することも可能です。 まず、transitionプロパティを用いて、まとめて指定する方法ですが、以下の形式で設定を行います。 transition: アニメーションにかかる
jQueryでページ最上部へのスムーズスクロールをプラグイン無しで実装する方法
jQueryは様々なプラグインが無料で公開・配布されていて、JavaScriptに対する知識が全く無くても、それらのプラグインを導入するだけでやりたいコトが出来てしまいます。 自分もそんな恩恵に与りまくってる側ではありますが、とはいえ余りにも些細な挙動にまでプラグイン頼みにするのも、リクエスト数増えるし管理範囲も増えるし、あんまイイコトありません。 例えば、「ページのトップに戻る」みたいなボタンを押すと、そのページの最上部にスルスルっとスクロールする、みたいな挙動を実装したい場合、もちろん専用のプラグインなんかもありますが、コレなんかは特段のこだわり（加速感が欲しいとか）がないなら、今回ご紹介する方法のようにjQuery単体で完結させちゃいましょー！ ページ最上部へのスムーズスクロールを実装するjQueryのスクリプト コレ、jQuery1.3以降は非推奨な「$.brouser」というのを
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
