タグ

*cssに関するrokazのブックマーク (14)

  • [CSS]classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css


    使 JavaScript使Animate.css - a bunch of plug-and-play CSS animations [ad#ad-2] Animate.css使 animate.cssclass  <link rel="stylesheet" href="animate.css" /> class <p class="flash">Live long and prosper.</p>Animate.css class
    rokaz
    rokaz 2011/10/17
  • Font comparer

    Paste this within your head tag <link href='https://fonts.googleapis.com/css?family=&subset=latin' rel='stylesheet' type='text/css'> CSS.yourclass { font-family: ; }

    rokaz
    rokaz 2011/06/28
  • CSSセレクタ20個のおさらい


    CSS20 CSS使classid1   IECSS3IE68CSS3Selectivizr CSS3ie SelectivizrCSSCSS
    CSSセレクタ20個のおさらい
    rokaz
    rokaz 2011/06/26
  • How To Create a Pure CSS Polaroid Photo Gallery

    Home » Tutorials » How To Create a Pure CSS Polaroid Photo Gallery Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more Magical things can be done by combining various CSS properties, especially when some of the new CSS3 tricks are thrown into the mix. Want to build a stack of Polaroid photos with pure CSS

    How To Create a Pure CSS Polaroid Photo Gallery
    rokaz
    rokaz 2010/12/03
  • ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ

    ディスプレイサイズ(ブラウザサイズ)いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ(ブラウザ)のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します! 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max

  • [CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ

    幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i

    rokaz
    rokaz 2010/10/20
  • Pure CSS: Sticky Footer - Science and Society by Tomas Bagdanavičius

    Categories Web Tech Space Society Home Current category items The Certainty of Creation A Tribute to Carl Sagan More U.S. Mil @ Info Domain Pure CSS: Window Layout Pure CSS: Drop-down Menu Competition or Collaboration? Pure CSS: Sticky Footer Post title » Post content Annotation Looking for a CSS only sticky footer? Lazy reading long manuals? Skip everything and download it right now here! Date cr

    rokaz
    rokaz 2010/04/29
  • 少しのコードで実装可能な20のCSS小技集


    2019517 CSS CSSCSSCSS 10 HTMLCSS CSS  220CSS 315CSS CSS 1. div divmarginauto See the Pen Center Div by Mana (@manabox
    少しのコードで実装可能な20のCSS小技集
  • 無駄の多いCSSを一発で高圧縮してくれるサイト「CSS Compressor」*二十歳街道まっしぐら(FC2ブログ時代)


    CSS Compressor  CSS HighestLow4 CSS28% 使
    rokaz
    rokaz 2009/09/20
  • [CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート

    ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"

    rokaz
    rokaz 2009/07/06
  • 【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。

    ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです! IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに!」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height(相当)の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi

    【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
    rokaz
    rokaz 2009/06/19
  • MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介


    使 CSS Web退Web EmasticCSS EmasticCSS
    MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
    rokaz
    rokaz 2008/07/22
  • HTMLを組んだ後のCSSの作成に役立つあれ

    What is it? Ok, here's the deal. Put your XHTML code below, we will grab it and send over to one of our scientists. He will do his voodoo and in return you will get a corresponding CSS frame. And yup, it's free. More information This tool returns corresponding CSS in a line-by-line way indented with spaces to reflect XHTML structure - each selector and all of its properties and values in one line.

  • 1ピクセルのずれも許せないWebデザイナのためにResetting Again | エンタープライズ | マイコミジャーナル


    CSSWebWebCSSCSSWeb調 WebWebCSSCSSCSSIECSS/HTML CSS
  • 1