コーディングしにくいデザインをHTMLとCSSのみで組んでみた(後編)
コーディングしにくいデザインをHTMLとCSSのみで組んでみた(後編) 2011-01-06 タイトル通り、"コーディングしにくいデザインをHTMLとCSSのみで組んでみた(前編)" の後編です。 今回はクロスブラウザ(IE、FireFox、Webkit系とか)に対応させるために、ちょっとだけテクニック的な事も使っていきます。 最後に完成したページをzipで公開しています。 ダウンロードして煮るなり、焼くなりしてくれると良いよ！ おさらい 前回、下記のデザインを組んでいくことにしました。 そして前回はここまでコーディングが終わりました。 今回はコンテンツとクロスブラウザに対応させます。 コンテンツのメイン画像部分を何とかする。 これを何とかしていきます。 ポイントは"シャドウ"と"文字部分の不透明"。 HTML <div> <img src="img/woman.jpg" width="6
クオリティの高いロゴが安く作れるデザインクラウドソーシング DesignCrowd入門 - Startup Reality
前回の記事は世界中のデザイナーに格安でロゴなどを作ってもらえる「DesignCrowd」がすごい - Startup Realityです。先にこちらをご覧いただければ幸いです。弊社の会社ロゴ兼サービスロゴはこのDesignCrowdで作りました。 今日はこのとっても便利なDesignCrowdの使い方をチュートリアル形式で説明しようと思います。流れの中でDesignCrowdの細かい仕組みも説明していきます。*1 私はロゴデザインを頼んだので、その流れで説明します。基本的には他のデザインでも変わらないと思います。 デザインコンテスト開催の流れ コンテストを開催する 賞金を決定する プロジェクト詳細を記述する オプションを選択する 開催費、賞金、オプション料金を保証金として入金する（デポジット制） コンテスト開催中 特定のデザイナーを招待する（オプション） デザイナーに改訂をお願いする コン
ドロップシャドウとグラデーションの使用を的確にするためのチュートリアル
なんとなく目立たせるためにドロップシャドウを適用したり、ちょっとさみしいのでグラデーションを加えたりしていませんか？ Web designer Depotからドロップシャドウとグラデーションをウェブデザインで的確に使用するためのチュートリアルを紹介します。 Drop-Shadows and Gradients: Be Consistent in Your Visual Metaphors 下記は、各ポイントを意訳したものです。 ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションの使用の注意点 使用は、より繊細に よくある間違いと解決方法 おわりに ドロップシャドウとグラデーションの役割 ドロップシャドウとグラデーションは、スペースに錯覚を生じさせるための基本的なテクニックです。 Mac OS Xのドックを例にとると、輝いたテーブルの上に各メニューのアイコンが浮き上がっ
Appleのようなデザインをするためのコーディングチュートリアル15 – creamu
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
フォトショップでブログのヘッダーをデザイン / ウェブデザインライブラリー
投稿日：2007年9月7日 レベル：初心者 ソフトウェア： Step1 ： 新規ファイルを開く Step2 ： レイヤーパラメータ Step3 ： メニューボタンを作る Step4 ： パターンの定義 Step5 ： メニューボタンの編集 Step6 ： メニューの微調整 Step7 ： テキストの挿入 Step8 ： 完成
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル:phpspot開発日誌
チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル 2009年03月17日- 150 Useful Adobe Photoshp Web Design Layout Tutorials and Techniques | 2experts Design - Web Design and Graphic Design Blog チュートリアルでここまでやる？というプロレベルのWEBレイアウト作成チュートリアル。 プロレベルといっても様々ですが、そのなかでも優れたといえるレイアウトとデザインのチュートリアルが公開されています。 真似することでそれなりのものを作るのは難しくなさそうです。 Create a Magic Night Themed Web Design from Scratch in Photoshop マジックをイメージした、少し怪しげなレイアウト。占
プログラマのためのフリーソフト(Mac)で始めるデザイン - ku-sukeのブログ
もっとプログラマーもデザインに興味をもつべし。ということでエントリ書くことにしました。思いつきなのでぽしゃるかもですが、身近な？ところでiPhoneのアイコンをデザインしてみようと思います。僕も本職のデザイナではないのですが、逆にプログラマがデザインに入門するきっかけになればと思います。 iPhoneのアイコンとは 提出用に512pxの正方形（角丸・反射無し） 実際使用されるのは57px四方 時間があれば角丸+反射もやってみたい。 着想する まずはイメージ決めです。素人はパクリましょう。最初から創作料理を作れば失敗するのと一緒、Javascriptを習うのにサンプルコードを本で読むのと一緒です。 http://www.faveup.com/ それでも難しければ文字だけにしましょう。AdobeCSのアイコンの要領です。 http://blogs.adobe.com/jnack/images/
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
