波音、雨音、風音、砂音の自然環境をはじめ、動物や鳥の鳴き声、ノイズなど、緊張感やストレスを和らげるサウンドをオンラインで無料で聴けるサイトを紹介します。
波音、雨音、風音、砂音の自然環境をはじめ、動物や鳥の鳴き声、ノイズなど、緊張感やストレスを和らげるサウンドをオンラインで無料で聴けるサイトを紹介します。
カラムの高さを単に揃えるだけでなく、アニメーションで揃えたり、指定した値に揃えることができるスクリプトを紹介します。
<textarea name="code" class="css" cols="60" rows="5"> .images{ float:left; margin-left:-20px; margin-right:-20px; margin-top:10px; -webkit-transform:scale(0.6);/*Initial size of image when page loads*/ -webkit-transition-duration: 0.5s;/*Time taken for image to animate from smaller size to bigger size*/ } .images:hover{ -webkit-transform:scale(0.8);/*When hover on images image size will increased*
商用利用も無料、ベクターとラスターの両フォーマットが用意された鏡面反射が添えられたエレガントなアイコンを紹介します。
繊細のポイントは「気がつくかな?」ぐらいにすること。 そんなわずかな繊細をウェブデザインに加えるスタイルシートを紹介します。 Take Advantage of CSS3 to Achieve Subtle Design デモページ 下記は各ポイントを意訳したものです。 はじめに 繊細の大事なポイントは人々が気づかないかもしれない、そして記憶に残らないくらい非常にささやかなものにすることです。 私はこれが初耳だという人がいることを疑います。これは感覚と認識研究によって述べられたよく知られている概念の一つです。 繊細なデザインが難しいのは、「もう少し多くした方がいいのかな?」と容易に思えてしまうところです。このことを知らないと、繊細は失われるでしょう。 以上を踏まえた上で、ウェブデザインにさまざまな形の繊細を提供するために使用できる三つのCSS3のテクニックを紹介します。 1. transi
MopBox 複数パネル(デモには100以上のパネルも)の表示にも対応した、画像・Flash・動画などを表示できるドラッグ移動可能なボックス。
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
フォームの入力欄にラベルを通常時にくっきり、フォーカス時にうっすらとアニメーションで表示するスクリプトを紹介します。 jQuery FormLabels Plugin デモページ スクリプトの特徴 クロスブラウザ対応。 ラベルをアニメーションで表示。 多数のオプションと旧式ブラウザへの配慮。 フォームのマークアップを変更しないシンプルさ。 フォームのラベルはinput要素と同じスタイルが可能。 パスワードのラベルはアスタリスク(*)ではなく、テキストで表示。 スクリプトのデモ デモページではいくつかのデモがありますが、デフォルト版のものをキャプチャで紹介します。 デモページ 入力時には入力したテキストが反映されます。 スクリプトの仕様 以下のフォームの要素に対応しています。 input[type='text'] input[type='email'] input[type='passwor
10 Great Tips to Boost Creativity [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに ウェブサイトをデザインするとき、ワンパターンに陥ってしまうことは簡単です。デザイナーは自分が何が得意であるか知っており、それを強みにして常用してしまう傾向があります。しかしながら、通常とは異なる視点をとることで、創造的なアプローチを新しい限界へとおし上げることができます。 創造力をアップさせることはウェブデザインの現在のトレンドを学び、何がそれを成功させたかを理解し、そしてあなた自身のユニークなスタイルを使ってそれらのテクニックを実行することから始めます。 あなたの創造力をあふれ出るようにするために、ここに考慮に入れるべき10のヒントがあります。 1. カラーを考えてみる サイトをゼロから作成する時や修正する時、コンセプトを強くするためにカラーの知識を深め
Photoshop CS5の重要で有用な機能に絞ったショートカット一覧とレイヤーのブレンドモードの効果が一目で分かるチートシートを紹介します。
調べたいフォントがある画像をアップロードします。ファイルはローカルでもオンライン上でも対応しています。 上記は、手元にあるローカルファイルを「Browse」ボタンで参照し、「Continue」ボタンをクリックします。 Step 2
ブログ用からEコマース用まで、極小サイズ、手書き風、折り紙風などシンプルでかわいいフリーのアイコンをIconDockから紹介します。 IconDock キャプチャのアイコンは「20 Free Marker-Style Icons」 IconDockで配布されているアイコンから、フリーのものだけを下記にピックアップしました。 有償のアイコンでは更に素敵なアイコンセットが用意されています。 Stock Icon(有償のアイコンページ)
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
ネガティブスペースを巧みにつかったウェブサイトの紹介をはじめ、ウェブページのレイアウトでどのように分析し改善するのか、効果的に活用するガイドをSix Revisionsから紹介します。 Negative Space in Webpage Layouts: A Guide 下記は、各ポイントを意訳したものです。 はじめに ネガティブスペースとは ネガティブスペースの重要性 ネガティブスペースを実例から学ぶ まずはデザインの単純化から ネガティブスペースを分析、そして改善 ネガティブスペースの活用例 おわりに はじめに ネガティブスペースは多くの場合、ミニマリズムのようにシンプルを美とした特定のデザインだけのものであると誤解されています。本来ネガティブスペースというものは、あらゆるデザインにおいて注意を払い、そして慎重に組み立てて使用すべきものです。 ここではネガティブスペースが何であるか、そ
Love Vector 登録されている素材は、オリジナルのものをはじめ、他の作者によるイラストやアイコンなど多数あります。 目的の素材は検索、タグ、カテゴリから探すことができ、下記にカテゴリの中からいくつかピックアップしました。
WordPressにほんの数行記述するだけで、多くの便利な機能を付け加えるチップスをMegaMagから紹介します。 10 wordpress hacks & tricks that I like 1.コメントがついた記事をサムネイル付きで表示 サイドバーやフッタなどどこにでも、たくさんコメントがついた記事をサムネイル付きで表示します。 「http://an-alternative-image.jpg」はサムネイル画像が無い場合のデフォルトの画像を指定してください。 <textarea name="code" class="html" cols="60" rows="5"> <?php $popular = new WP_Query('orderby=comment_count&posts_per_page=5'); ?> <?php while ($popular->have_po
グリッドベースのレイアウトを作成すると、ついついdiv要素を多用してしまいがちですが、意味のあるデータにはそれに適した要素を使用し、無駄なdiv要素やclassだらけのマークアップから卒業する方法をWebdesigner Depotから紹介します。 Fight Div-itis and Class-itis With the 960 Grid System 下記は各ポイントを意訳したものです。 はじめに CSSのフレームワーク:960.gsの場合 classの乱用を避ける リスト要素の使用 画像とキャプションの使用 複数の見出しとパラグラフの使用 子要素のclassは親要素に はじめに 数年前までウェブページの設計はテーブルがスタンダードでした。そしてCSSはそれを大きく変え、今日ではCSSのフレームワークがウェブページの設計を容易にしてくれています。 しかしながら、このCSSのフレームワ
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「(エクセルでいうところの)行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
<textarea name="code" class="css" cols="60" rows="5"> <!--[if IE]> <style type="text/css"> .container {padding-left:14px;} .frame {left:4px; top:4px;} .shadow {background:#000; margin:-4px -4px; filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');} </style> <![endif]--> </textarea>
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く