Materialize - マテリアルデザインのためのCSSフレームワーク MOONGIFT
レスポンシブでWebデザインを組むのは当たり前、今のトレンドはマテリアルデザインにあるという時代になってきました。フラットUIを踏襲しつつ、アニメーションを効果的に使うことでさらにユーザビリティ高いデザインを可能にします。 主にモバイルアプリ用に使われていますが、Webデザインにおいても十分利用が可能です。今回はマテリアルデザインを実現するスタイルシートフレームワーク、Materializeを紹介します。 Materializeの使い方 今回はスクリーンショット多めに紹介します。 Materializeはレスポンシブかつマテリアルデザインのフレームワークになっています。開発の高速化、ユーザ体験重視、ドキュメントとサンプルを多めにして学習コストを低くするといった特徴があります。 MaterializeはHTML5/JavaScript/CSS3製のオープンソース・ソフトウェア（MIT Lic
画像を使わずCSS3だけで作ったあのロゴやあのキャラクター
画像を使わずCSS3だけで作ったchrome、Operaなどのロゴや、ドラえもん、アンパンマンなどのキャラクターなどを紹介します。 Google Chrome 若干リニューアルした新しい方のchromeのロゴです。以前のロゴよりこちらの方が再現しやすそうですね。 Opera 形自体は簡単ですが、陰のつけ方などかなりクオリティは高いです。IEだとただの四角になってしまう。。 Internet Explorer IEのロゴですが、IEはCSS3に対応しきれていないのでちゃんと表示されません。皮肉なロゴですね。 HTML5 ぼちぼち見かけるようになってきたHTML5のロゴです。「HTML」と「5」は文字を使っています。 twitter twitterのロゴです。曲線がきれいに表現されています。 Social media frickrやgoogleのロゴがあります。比較的シンプルです。 iPhon
CSSでアイコンをデザイン
ものすごく大雑把に言うと今まで画像編集ソフトでやっていた、角を丸くするとか背景をグラデーションにするなどという作業をCSSでやってしまおうというお話。もちろんCSSでできないことは多くあるので万能というわけではないが、できることに限って言えば数行のCSSコードでスクリーンショットのような効果を柔軟に適用することができる。 Demo: Design icon with CSS ul li a { display: block; width: 32px; height: 32px; background-image: url("icons-w.png"); background-repeat: no-repeat; text-indent: -10000px; } 各アイコンになるa要素へのスタイルは以上のような単純なものがベースになる。icons-w.pngがアイコンの前景をつなげたスプライ
MediaWikiのCSSとJavaScript - 何かしら図書館
MediaWikiでは、MediaWiki:Common.cssやMediaWiki:Common.jsというページを作成することで、wiki全体の見た目を変更することができます。 このCSSやJavaScriptはwikipediaで精錬されたものが既にありますので、MediaWiki:Common.cssとMediaWiki:Common.jsから直接コピー＆ペーストするといいでしょう。 [編集] 参考情報 ここに記入された文字列は自動的に整形済みテキスト（pre）で表示されます。 コードが着色されているのは、SyntaxHighlight GeSHiを使っているからです。必ず入れる必要はありませんが、気になる方は入れるといいでしょう。 MediaWiki:Common.cssやMediaWiki:Common.jsは、MediaWikiで運営されているwikiの特徴がよく反映されてい
EPUBやCSSと日本語レイアウト、HTML5と電子書籍
EPUB や CSS と日本語レイアウト HTML5 と電子書籍 アンテナハウス 村上 真雄 @MurakamiShinyu 2010-07-14 「第８回HTML5とか勉強会」での講演資料 [HTML5プレゼンツールNerine版もあります] 村上 真雄 (@MurakamiShinyu) 自己紹介 Twitterで公開しているプロフィール： XML/HTML+XSL/CSS 自動組版ソフト Antenna House Formatter 開発者 アンテナハウス取締役 W3C会員としてXSLとCSS3仕様に関わる HTML5 IG JP共同議長 JEPA EPUB研究会員 世界標準仕様（特にHTML+CSSとその応用のEPUB）で、まともな日本語組版を可能にしたい Antenna House Formatter 1999年、当時W3Cドラフトだった XSL (Extensible Sty
Firefox 4のツールバーボタンの色を変更する方法 | ライフハッカー・ジャパン
デザインも一新されたFirefox 4 betaを好きになる理由はたくさんありそうですが、左上のコーナーに常にあるメインメニューボタンのオレンジ色が実はあんまり...、という方もいらっしゃるのではないでしょうか？ そんな方のために、この色を変更する方法をご紹介。ちょっとCSSを変更してやることにより、色の変更だけでなく、透明にしておくことも可能です。 NeoWinフォーラムからの情報を元に、Download SquadブログにCSSファイルの変更方法のクイックチュートリアルが掲載されています。ボタンの色の変更、透明にする方法、動かす方法、などなど。透明にしたい、というだけであれば、Download Squadにコードが公開されているので、それをuserChrome.cssファイルへコピペするだけ。プロファイルフォルダが見つからない、という場合、Mozillaに聞いてみるとすぐに分かります。
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
px*blog | ページナビゲーション css
Serene Bachプラグイン「ページナビゲーション展開」にはとてもお世話になっています。 Serene Bachテンプレート屋さんで、色々なナビゲーション部分のデザインが出ていますが、ここだけ抜き出して、きれいに装飾する小技cssをご紹介。 マウスのあてれる範囲を少しでも広くページングリンク部分はボタンぽく現在いるページが分かりやすく div.page { color: #666; font-size : 10px; font-family: verdana, osaka, sans-serif; text-align: center; margin: 10px auto; padding: 8px 20px; } div.page a { padding: 2px 3px; text-decoration: none; } div.page a:link
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-css3.jp - このウェブサイトは販売用です！ - リソースおよび情報
css-lecture.com
Deviant Art » Blog Archive » Deviant Art Css : 24 Web 2.0 Navigation
CSS Tabs and CSS Navigation Menus Showcase
ナビゲーション・メニューまとめ - DesignWalker