見出し要素をシンプルなHTMLで美しくスタイルするテクニックのまとめ | コリス
h1やh2などの見出し要素をシンプルなHTMLで実装し、美しいスタイルを適用するスタイルシートを紹介します。 Cool headings with pseudo-elements [ad#ad-2] デモ 実装 デモ デモは擬似要素だけでなく、background-clipなどのCSS3を使用しているため、Safari 5+, Chrome 7+, Firefox 3.6+, Opera 10+, IE 9+ でご覧ください。 デモページ 実装 HTML HTMLは非常にシンプルで、h1要素にclassを与えるだけです。 <h1 class="headline1">I took lessons</h1> ※デモは4つあり、classを変更するだけです。 CSS: 各デモ共通のベース body要素をメインのラッパーとして使用します。 h1要素にはfont-familyとsizeのみ共通で指定
ロゴをどのようにデザインしたかという作り方がスケッチで分かる11の事例 - GIGAZINE
ロゴ画像を作るというのはなかなか骨の折れるクリエイティブな作業であり、しかもその製品やサービス、企業のアイデンティティというものを込めなければならず、しかも今後の「顔」にもなるので、その苦労は並大抵ではありません。そのため、実際にロゴが生み出されるまでの過程を知っておけば、ロゴをデザインする際、あるいはロゴデザインを発注する際にいろいろと役立ちます。 11 Great Examples Of How A Logo Is Born | Top Design Magazine - Web Design and Digital Content http://www.topdesignmag.com/11-great-examples-of-how-a-logo-is-born/ ◆Kaviartの場合 完成 ◆Houdiniの場合 完成 ◆Project Moonの場合 完成 ◆Xokoの場合
Scalable Vector Graphics - Wikipedia
Scalable Vector Graphics（スケーラブル・ベクター・グラフィックス、SVG、日: 変倍ベクタ図形[2][3]）は、XMLベースの、2次元ベクターイメージ用の画像形式の1つである。アニメーションやユーザインタラクションもサポートしている。SVGの仕様はW3Cによって開発され、オープン標準として勧告されている。 1998年にアドビシステムズ・IBM・ネットスケープコミュニケーションズの3社によって提案されたPGML（英語版）(Precision Graphics Markup Language)[4]と、Autodesk・ヒューレット・パッカード・Macromedia・マイクロソフト・Visio（英語版） の5社によって提案された VML (Vector Markup Language)[5]をもとにして、W3C SVG ワーキンググループにより開発された[6]。 199
フォームとアクセシビリティ -- ごく簡単なHTMLの説明
フォームはテーブルと同様、視覚的な表現を伴わないと理解しにくいところがあります。HTML4.0では、フォームの各要素とラベル（説明的な名前）を結びつける手段や、要素をグループ化する手段が提供されました。これらを使うとフォームの内容を論理的に構造化でき、スタイルシートとの組合せで自在なデザインも可能になってきます。まだ未対応のブラウザが多い要素ですが、アクセシビリティに配慮したページづくりのためにも、このような機能があることをぜひ理解しておいてください。 目次： コントロールにラベルを付ける コントロールをグループ化する メニュー項目のグループ化 キーボードによる項目移動 取り上げる要素： label fieldset legend optgroup コントロールにラベルを付ける フォームの入力コントロール（テキストフィールドやメニューなど）は、name属性を持ちますが、それは送信データに名
海外のオシャレなインテリアサイト25選 | おしゃれなインテリア,デザイン雑貨検索サイト – Good items | インテリア情報
海外のインテリアデザインサイトをまとめたエントリー「top 25 interior design & furniture blogs」の情報がとても素晴らしかったので紹介します。 どのサイトも情報量が豊富で画像も多く、とても楽しめるサイトです！ design sponge インテリアのちょっとしたDIY記事からリフォームのBefor Afterの写真など、更新頻度の高いブログです。 moco loco グリッドデザインでシンプルにまとめられたwebサイト。デザイン性の高い写真が多く見れるので、インスピレーションを沸かせたいときにみるといいかも。 apartment therapy ひとつの記事ごとの画像も豊富です。New York,Los Angelesなどカテゴリが分かれています。 inhabitat 建築、インテリア、プロダクトなどのカテゴリごとに記事分けされていて、見ごたえがあります
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
FM 100 Hue Test
色の正確な認識に影響する要因はたくさんあります。テストの結果が毎回異なる場合は、下記の理由が考えられます。 照明：照明は色覚に大きく影響する要因の一つです。脳が認識する色は、照明色によって左右されていることをご存知でしたか？照明装置などを用いて、常に管理された光源下で色を判断するようにしましょう。 背景色の影響：人間の目が認識する色は、周囲の色に影響されます。この現象を同時対比と呼びます。色を判断する際、常にニュートラル色の環境で行ってください。 目の疲労：私たちの目は疲れやすく、物体を2、3秒以上眺めると目の化学物質が消耗され、間違ったカラー情報が脳に送信されてしまいます。色の目視評価を行う際は、再度観察する前に目を休めてください。 乏しい色の記憶力：どんな色でも、詳細を記憶するのは非常に難しいことです。わずかな色差を効果的に判断するには、サンプルが人の心を動かす程に印象的でなければいけ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
見てて楽しい！クリエイティブでオシャレな名刺デザイン100選 - ライフハックブログKo's Style
まとめ ブロガー名刺／有限会社 前川企画印刷（神戸市兵庫区） 今回私が名刺の印刷をお願いしたのは前川企画印刷さん。 なんと、デザインも要望を聞いてくれて白黒なら100枚1,000円ですよ！ 安い！（ブログに書いてトラックバックするという条件あり） 私はデザインを@ameiさんにお願いし、あーしたいこーしたいと散々注文をつけ（本当にありがとうございます！）、印刷だけ前川企画印刷さんにお願いしました。 そして、完成した私の名刺はこれです！ モザイクでスミマセン（笑）。 お会いしたとき、もらってくださいね。 仕事以外に個人名刺を持っていると何かと便利です。 みなさんもぜひオシャレな名刺をつくってみてください。 こちらもどうぞ。 【まとめ】これは気になる！他人のバッグの中身の写真を１００まとめてみた 【まとめ】これはすごい！PCデスク周りの写真を100まとめてみた 関連リンク ミニ名刺『pocke
すごく印象的でお役立ちなPhotoshopチュートリアル50本 - GIGAZINE
毎日様々なインスピレーションを求めているデザイナーたちによって作られているサイト「The Design Inspiration」が選んだ2011年に最も印象的だったPhotoshopのチュートリアル50本がかなり有用です。 50 Most Impressive Photoshop Tutorials of 2011 | The Design Inspiration http://thedesigninspiration.com/articles/50-most-impressive-photoshop-tutorials-of-2011/ ◆1：全速力で走っているモーションを効果的に加える方法 ◆2：バットマンのシンボルマークがよく見ると浮かび上がっている ◆3：SF映画のようなポスターに仕上げる ◆4：左右対称のライトニングエフェクト ◆5：マンガ風・カートゥーン風に塗る方法 ◆6：ファ
世界中のおもしろQRコード 読み取らせる気ないだろこれwww
■編集元：ニュース速報板より「世界中のおもしろQRコード 読み取らせる気ないだろこれ」 1 名無しさん＠涙目です。(長屋) :2011/11/06(日) 23:54:30.07 ID:G+ZsAFUV0 ?PLT(12000) ポイント特典 画像は>>2以降 23 of the coolest QR codes Advertisers are smitten with the small, square patterns that can be scanned by smartphones. Here are 23 from major brands that don't look like anything you'd expect. FORTUNE -- Think QR codes are monochrome and ugly? Think again. The c
外部連携用ボタンを設置できる独自タグを追加しました : Blogger Alliance お知らせブログ
2013年10月1日より、本ブログの記事を「livedoor Blog 開発日誌」のBloggerAlliance利用者向けカテゴリへ移行し、お知らせブログの統合を行いました。 移行先：BloggerAlliance利用者向けカテゴリ http://blog.livedoor.jp/staff/archives/BloggerAlliance 本ブログの更新は終了となり、今後のお知らせは、移行先のカテゴリにて更新されます。 いつもブログをご利用いただきありがとうございます。 Facebookの「いいね！」ボタンやGoogle+の「+1」ボタン等を設置できる独自タグを追加いたしました。 この独自タグを使うことで、外部の各サービスとの連携を簡易に行うことができます。 【外部連携用ボタン表示独自タグ】 Facebook 以下をコピーしてお使いください。 <$Facebook$> <$Facebo
Webデザイナーならば必ず一度は憧れる、余白が美しいWebデザインまとめ59個
artless Inc. / mount inc. / standardimage他...全60件
最近リリースされた高品質なフリーのデザインフォント -2011年10月
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[PDF] iOSヒューマンインターフェイスガイドライン
HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck
はてなまとめ（仮）
ウェブ制作にすぐに使えるPSD素材がダウンロードできるサイト -1000PSD.COM
Loading...
