便利なＣＳＳテクニック３０選:phpspot開発日誌
30 Exceptional CSS Techniques and Examples | Six Revisions In this article, I’ve pieced together 30 excellent CSS techniques and examples 便利なＣＳＳテクニック３０選ということでエントリがまとまっていたので紹介。 特に気になったものを以下にまとめました。 Hoverbox Image Gallery - 画像ギャラリー上でマウスホバー時に画像拡大 デモはこちら CSS Photo Zoom - 文書に添付の画像にカーソルを合わせると画像拡大。テキスト位置も自動調整 デモはこちら whatever: hover - windowsのスタートメニュー風の階層メニュー デモはこちら Content Overlay with CSS - オーバーレイでdescr
ウノウラボ Unoh Labs: CSSの管理と記述法のコツ
前回はYUIの紹介でしたが、今回はCSSの管理と記述法について書きたいと思います。 CSSは、主なHTMLエディタなどでは標準で編集できますが、多人数での開発 やスタイルが多くなってくるほど管理が大変になっていきます。 アプリケーションソフトの管理機能もいいですが、CSSコーディング規約のようなものがあると、より把握が容易になるメリットがあります。 サイト基準設定、ページレイアウト、共通要素、個別スタイルに分ける 構成内容によって、上記のような段階に分けると、意図しない表示等が出たとき、簡単に影響箇所の割り出せます。 基準スタイル（ex: base.css) font-sizeやfamily,デフォルトのmarginやpaddingのリセット等。 前回のYUIのReset.CSSを使う手もあります。 ページレイアウト(ex: layout.css) カラム構成やグローバ
ウノウラボ Unoh Labs: グラフィック作りのコツとカン
こんにちは。yamazakiです。 前回はレイアウトなどについて非常にざっくりとですが書いてみたわけですが、いかがでしたでしょうか。 そろそろ「グラフィック」のほうも少し書いてみようかという気になってきたので、グラフィック品質を高めるベーシックな技術についても少しずつ書いていってみようと思います。 基本のき 具体的な話に入る前に、まずは基本的な話から。 とりあえず、ざっとあなたの周囲を見回してみてください。壁にしても、PCにしても、「単なる一色のベタ塗り」にはなっていないのではないかと思います。光の加減などで、「影」や「グラデーション」がついていると思います。また、ものの表面には「つるつる」「ざらざら」といった「質感」があるのが当たり前、という中で私たちは生活しています。 そのため、人の目はそういう「グラデーション」や「影」、「質感」がある状況を「見慣れて」います。 グラフィック上
ウノウラボ Unoh Labs: CSSをデバッグしよう
こんにちは、Sashaです。CSSって、誰でも比較的簡単に始めることが出来るくせに、何年たってもつまらないバグにハマったりするものです。今日は、CSSをデバッグする手順を紹介します。特にCSS初心者の方々に参考にしていただければ光栄です。ただ、ここで紹介しているのは、CSSの問題解決の方法ではありません。CSS上の問題点の原因を、自分で見つけるためにとるべき手段です。見つかった問題点を、どうやって解決するかは、ここでは触れないのでがっかりしないでくださいね。 ※以下の手順は、下記のサイトをパクッ･･･、じゃなくて、翻訳しつつ簡単にまとめたものです。 参考: http://www.subcide.com/tutorials/debuggingcss/ まず、問題あるって認めましょう。 見なかったフリをしたい気持ちはよくわかります、が。 人的ミスをつぶそう スペルをチェックしよう
Google社ロゴはどう作られたか | WIRED VISION
Google社ロゴはどう作られたか 2008年3月31日 カルチャー コメント： トラックバック (2) sonia zjawinski 祝日や記念日など特別なテーマに合わせて変化をつけられている場合は別として、米Google社のロゴにさほど注目が集まることはおそらくないだろう。しかし、基本タイプのロゴは、米NBC社の孔雀のマークと同じくらい、どこにでもある存在になった。 このシンプルなGoogleの「顔」をデザインしたのは誰なのだろう。 『WebProNews』に、そのデザイナー、米Kedar Designs社のRuth Kedar氏のインタービュー記事が掲載されている。(『Unbeige』の「Googleロゴの誕生：Ruth Kedar氏にインタビュー」を参考にした。) Google社の共同設立者Sergey Brin氏は、初めは自分でロゴをデザインしようとしたのだが、やがてもう1人の
[N] Photoshopで映画のようなエフェクトをかける方法
Give your photos a Hollywood effectというエントリーより。 Digital media blog Ebin has written up a somewhat simple tutorial on how to give your photos the movie look with Adobe Photoshop. Photoshopを使い、写真素材を映画のワンシーンのように加工する「How to turn your photo into movie-like effect using Photoshop?」というエントリーが紹介されていました。 ↓この写真が‥‥ ↓こんな風に加工されます。 うーん、すごい。そしていい感じ。 英語のチュートリアルですが、細かく説明されているので、Photoshop使いの人だったら問題ないのではないでしょうか。
![[N] Photoshopで映画のようなエフェクトをかける方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/eeb9c3837096069f70c0d611a993a22f2b231918/height=288;version=1;width=512/https%3A%2F%2Fnetaful.jp%2Fwp-content%2Fuploads%2F2007%2F05%2F2007_03_tut2-original.jpg)
CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例:phpspot開発日誌
A List Apart: Articles: Super-Easy Blendy Backgrounds CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例。 次のような透過PNGがあったとして、更にこの下に色を付けると・・・。 大体どうなるか分かると思いますが次のようなグラデーション背景が出来ます。 そんなCSSのテクニックが紹介されてます。 example one (FireFoxのみ) example two (FireFoxのみ) example three (FireFoxのみ) example four (FireFoxのみ) Example five (FireFoxのみ) Example six (IEも動きます) Example seven (IEも動きます) アイデア次第でこういった技もできてしまいますね。 通常なら画像をPhotoShopなんかで
アドビフォトショップ（Adobe Photoshop）使い方講座【幻想画廊・フォトショップCGコラージュ】
不思議な写真アートに興味はありませんか？ アドビ フォトショップによる不思議な合成写真とコラム集です。初心者向けのアドビ フォトショップ（Photoshop）の使い方講座、GIFアニメ講座など。
汚した感じを作りだす、Photoshopのグランジ ブラシ集 | コリス
Photoshopbrushes.comで紹介しているPhotoshopのグランジ ブラシの紹介です。
yohei-y:weblog: HTTP ステータスコードを正しく使おう
先月、ぐるなび API がリリースされていました。 ぐるなびさんの持っている膨大なデータベースに Web API を通して気軽にア クセスできるようになったのは、非常に喜ばしいし、その英断に感謝したいと 思います。 しかし、Web API 仕様書、特にエラー仕様を見てちょっとがっかりしました。 もう少し上手にデザインすれば、もっとよかったのに…、という思いです。 一度出してしまった API はそう簡単に変えられないと思いますが、 参考までに僕だったらどうするか、を書いてみます。 この仕様の一番の問題はエラーコードです。 以下は 2-2 のエラー仕様に記述されているサンプルです。 <?xml version="1.0" encoding="UTF-8"?> <gnavi> <error> <code>602</code> </error> </gnavi> タグが三つ(gnavi, erro
困った時のカラーイメージ＿WEBデザイナーのすすめ
サイトのイメージを左右する配色決めに悩んだ事ありませんか？クライアントに企業のイメージカラーがある場合も、どういった配色をすればもっともイメージカラーを生かせるか・・・また、イメージカラーがない場合、サイトに対する「思い」や「イメージ」に近い色使いにするためには・・・？そんな時のちょっとしたヒントになれば嬉しく思います。
javascript - カレンダーを作る : 404 Blog Not Found
2008年01月02日02:15 カテゴリLightweight Languages javascript - カレンダーを作る JavaScriptの書き初めにおあつらえ向きの問題。 年間カレンダー どう書く？org nを入力としてn年の年間カレンダーを返すプログラムを作ってください 少なくとも日曜日と土曜日が判別出来るようにしてくださいコピペして再利用しやすいよう、なるべく素直に書いてみました。カレンダーをDOMで作るという作業は結構あると思います。良問ですね。ご自由にお使いください。 CSS .mcal { border: inset 1px; float:left; font-size:smaller } .mcal td,th { width: 2em; text-align:right } .ycal { border: dotted 1px; font-size:smalle
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる - DesignWalker
CSSの謎
あの映画風の画像が簡単につくれるチュートリアル11選 | POP*POP
http://youmos.com/news/css_step_menu
基礎からわかるホームページの配色
[CSS]50+のクリエイティブなスタイルシートのチュートリアル | コリス
アンディ・ウォーホルのマリリン風に写真を加工する方法 - DesignWalker
[CSS]テーブル要素を使用しないで制作するカレンダー