タグ

cssに関するUDONCHANのブックマーク (8)

  • [CSS]上級者向け、スタイルシートのテクニック集

    スタイルシートで実装する実用的なものからちょっと変わったものまで、25のテクニックをDesizn Techから紹介します。 25 Advanced CSS Techniques 1. CSS Gradient Text and Background テキストや背景をグラデーション表示。

  • CSSハックしてはいけない5つの理由 | エンタープライズ | マイコミジャーナル

    SitePoint: New Articles, Fresh Thinking for Web Developers and Designers WebページやWebアプリケーション開発の終盤に入ってから、特定のブラウザでレンダリングに問題があることが発見されるというのはままある状況だ。すぐに問題を解決することを目指してクイックハックやConditional-CSSの適用などを実施することもある。この方法は短期的に見れば効果があるが、長期的に見ると逆により多くの問題をもたらすため使わない方がいいという紹介がSitePoint: 5 Reasons to Avoid CSS Hacks and Conditional Stylesheetsで紹介されている。紹介されている理由は次のとおり。 CSS妥当性検出が不可能 - クイックハックではブラウザの既知のバグを使っていたりベンダ固有のプロパテ

  • うまくデザインされたブログのフッター集:phpspot開発日誌

    25 Impressive Blog Footers | Vandelay Website Design うまくデザインされたブログのフッター集。 通常、フッターというと最後の部分なので手を抜き勝ちですが、そういったところもてを抜かずにうまくデザインしているサイト集が紹介されていました。 こういうところまで凝っておくと、クライアントに、細かいところまでちゃんとデザインしてくれているな、というような印象を与えられそうです。 Web Designer Wall PSDTUTS Blog.SpoonGraphics We Are Not Freelancers Catalyst Studios Sam Rayner 43 Folders Dreamling Productive Dreams Soh Tanaka こういうデザインを参考に、良いフッターを実装したいですね。

  • 無断スタイルシートOff禁止って言われた人が経緯をまとめるよ! - 最終防衛ライン3

    今度は無断スタイルシートOff禁止ですってよ その場でスタイルシート切ればいいじゃんと言ったら予想の斜め上を行く反応された人がまとめるよ。 ウォーターエネルギーシステム、水発電 ジェネパックスの水発電は、発表当初こそ「水を酸素と水素に分解し、水素で発電。つまり水だけで発電できるクリンエネギー」等と発表してました。しかし、蓋を開けてみれば金属あるいは水素化金属と水を反応させて水素を発生させてるだけでした。この場合、水酸化物が出るし、そもそも金属が消費されるし、金属の精製にはエネルギーを大量に使うしで、水だけで発電する訳でも、全然クリーンでもない代物でした。 さて、ウォーターエネルギーシステム、水発電 のコメント欄さっそうと現れた、アンチ目的の「でんすけ」氏。 のっけから 科学リテラシが最も高いと言われる掲示板と聞いてやってきましたが,率直に言ってがっかりしました。 105. でんすけ —

    無断スタイルシートOff禁止って言われた人が経緯をまとめるよ! - 最終防衛ライン3
  • 100個近いCSSギャラリーサイトをまとめて閲覧できる「GALLERY GALLERY」

    CSSによってデザインされたサイトをまとめるサイトはかなり多く、それらすべてを網羅しようにもなかなか大変だったわけですが、そういったCSSギャラリーサイト自体をまとめたサイトが出現しました。その名は「GALLERY GALLERY」、さまざまな条件で並び替えることも可能で、100個近いサイトを見ることができます。 詳細は以下から。 GALLERY GALLERY http://www.triangling.net/gg/ この記事の執筆時点では98個のサイトが登録されており、それぞれのサイトについてRSSはあるか、タグによる分類はあるか、ユーザーによる投票は可能か、などの情報が簡潔にアイコンで示されています。 また、各種条件で並び替えることも可能となっているため、自分の入手したい情報をまとめたCSSギャラリーサイトを見つけることも簡単にできます。なかなかいい感じです。

    100個近いCSSギャラリーサイトをまとめて閲覧できる「GALLERY GALLERY」
  • ポインタを合わせるだけでボックス内を水平に動くようにするCSSとMootoolsのあわせ技

    ちょっとしたサイトのアクセサリーとして使えそうな感じです。 サンプルはこちら 灰色のボックス内のはじっこにマウスを持っていくと、ボックス内だけがスクロールし始めます。 詳細は以下で。 コードは結構簡単 以下のようにmootools.svn.jsを読み込みます。 <script type="text/javascript" src="mootools.svn.js"></script> 以下も、bodyタグの前に挿入<script type="text/javascript"> window.addEvent('domready', function(){ var scroll = new Scroller('container', {area: 100, velocity: 1}); $('container').addEvent('mouseover', scroll.start.bin

    ポインタを合わせるだけでボックス内を水平に動くようにするCSSとMootoolsのあわせ技
  • 120以上生成できるCSSメニュー作成ジェネレータ『IzzyMenu』レビュー*ホームページを作る人のネタ帳

    ちょっと乗り遅れた感じですが、これはすごいのでご紹介。 様々なメニューを生成するwebServiceです。 2010年5月5日追記 この殆どのテンプレートが有料になりました。 収録メニュー画像数が半端じゃない CSSメニュージェネレータ『IzzyMenu』 IzzyMenu - Menu Builder 確認できたメニューだけでも120以上あります。 Amazonっぽいボタンから、横長のメニューまで、様々。 ほんとすごい。 サイトにアクセスして、『StartNow-Free!』をクリックします。 以下のような画面になりますので、右側のタブをクリック。 たくさんメニューが出てきます。 123456と書かれた部分の数だけ有りますので、じっくり吟味できます。 お気に入りのスタイルが見つかったら画像をクリック! よさそうなのが決まったら、以下のボタンでダウンロードできます。 以上で手っ取り早くCS

    120以上生成できるCSSメニュー作成ジェネレータ『IzzyMenu』レビュー*ホームページを作る人のネタ帳
  • DIVを垂直方向に中央寄せするCSSサンプル:phpspot開発日誌

    Blue Box Demo: Vertical Centering with a Shiv Div DIVを垂直方向に中央寄せするCSSサンプル。 次のように、DIV要素をブラウザの縦方向に配置できます。 CSSは非常にシンプルで、まず、html と body 要素に height:100% プロパティを設定します。 次に、body内にdiv要素を配置し、そのdiv要素に対し、height:50% かつ、margin-top:-50px のようにプロパティをあて、 中央寄せしたい要素(上図中、青い部分)の半分のサイズ分のマージンをマイナスします。 最後に中央寄せしたいdiv要素( height:100px ) を配置することで、青い部分は中央によります。 垂直方向に、100px のdiv要素が配置される感じです。 <html> <head> <style type="text/css">

  • 1