[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
[JS]jQueryのプラグイン33+1選 -2009年9月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
[JS]パララックス効果でパネルをダイナミックにスライドさせるスクリプト
jQueryを使用して背景にパララックス（視差）効果を持たせ、パネルをダイナミックにスライドさせるチュートリアルをIn The Woodsから紹介します。 Create a Funky Parallax Background Effect using jQuery demo デモではちょっと酔いそうな感じもありますが、右上のナビゲーションからパララックス効果を楽しめます。 実装はパネルもナビゲーションもリスト要素で、パララックス効果を生み出している雲は空divで配置されています。 スクリプトはjQueryとそのプラグイン「jQuery.ScrollTo」が利用されており、ポジションやタイミングを変更することができます。
テキストをかっこよく魅せるPhotoshopのチュートリアル集：Part 14
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
程よい風合いのリボンを一から描くPhotoshopのチュートリアル
レトロスタイルのリアルなリボンを一から作成しながら、Photoshopの使い方もマスターできるチュートリアルをPhotoshop Starから紹介します。 Design a Retro Style Ribbon 解説は英語ですが、ステップごとのキャプチャをはじめ、設定画面やキーボードショットカットなどがあり分かりやすく説明されています。 使用されているテクスチャもダウンロードできるようになっています。
[JS]集中して、フォームのテキストを入力できるスクリプト -fullTextArea
テキストエリアにテキストを入力する際、集中してできるようにするスクリプトをwheresrhysから紹介します。
スパークした光のエフェクトを描く、高精細のPhotoshopのブラシ
商用でも無料で利用可、スパークした光のエフェクトを描く高精細のPhotoshopのブラシをWeb Designer Depotから紹介します。
ウェブデザインのエレメントを今風にデザインするPhotoshopのチュートリアル集
最近のウェブデザインでよく使用されているエレメントの制作方法を1ステップずつ分かりやすく解説しているPhotoshopのチュートリアルをCarsonifiedから紹介します。
[JS]画像やテキストをフォーカスした際に不透明度をコントロールするスクリプト -Opacity Focus
画像やテキストをフォーカスした際に、不透明度をコントロールするスクリプトをdavid walsh blogから紹介します。 <textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function() { //area 1 $('.fade-area-1').children().hover(function() { $(this).siblings().stop().fadeTo(500,0.5); }, function() { $(this).siblings().stop().fadeTo(500,1); }); //area 2 $('.fade-area-2').children().hover(function() { $(this).siblings().stop().fadeTo(500
無料で利用できるウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコン集
ウェブサイトやアプリケーション用の16x16ピクセルのミニサイズのアイコンをFree Icons Webから紹介します。
高解像度の葉っぱのハイクオリティなPhotoshopのブラシ
無料で利用できる、サイズ1,000～2,000pxの高解像度の葉っぱのPhotoshopのブラシをSnap2Objectsから紹介します。
Photoshopの動作を軽快にするための10のポイント
Photoshopの設定を変更して、動作を軽快にするための10のステップをSmashing Magazineから紹介します。 10 Simple Steps to Better Photoshop Performance はじめに もし、あなたがPhotoshopの設定をデフォルトのまま使用していたり、パフォーマンスを改善するために再点検することを望むなら、ここで紹介する10のポイントをチェックしてみてください。 1. ヒストリーの数を調整 作業履歴を記録するヒストリーはRAMを肥大化させるため、できるだけ数を少なく設定します。 一つの目安として、RAMが2GB以下の場合はヒストリーを使用しない方が軽快に動作します。 [編集] - [環境設定] - [パフォーマンス]の「ヒストリー&キャッシュ」で設定を変更できます。 2. キャッシュレベルの数を調整 レイヤーの数が少なく高精細の画像の場合
個人は無料で、商用は低価格で利用できるフォント -Fran's Font
個人の利用は無料で、商用は1$, 10$の低価格で利用できるフォントを配布している「Fran's Font」を紹介します。
会社や自宅で、自分だけひんやりできるグッズ集
自分だけ暑がりだったり、クーラーの温度を通常より高めに設定しても大丈夫なように、自分だけひんやりできるグッズを紹介します。
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
[CSS]スタイルシートの実用的なテクニック集：レイアウト・ナビゲーション・画像・タイポグラフィ・アイコン・ボタン・リンク編
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]１ピクセルの画像で、リストの構造をビジュアル化するスタイルシート
有料だけど無料の高品質なフリーの英字フォント集
[JS]省スペースに複数のパネルをスライド表示するチュートリアル
[CSS]Photshopを使用しないで、スタイルシートで実装するレタープレス
[CSS]ナビゲーションの区切り線をホバー時にすっきりさせるスタイルシート