CSSに関するkeita_iのブックマーク (149)

  • 101 CSS Techniques Of All Time- Part 1 - noupe

    CSS has fundamentally changed web design, it has provided designers with a set of properties that can be tweaked to make various techniques to make your pages just look right. Today we are presenting a round-up of 101 CSS techniques designers use all the time. Definitely worth taking a very close look at! This is just the first series , the second part will be coming soon, stay tuned and Enjoy! CS

    101 CSS Techniques Of All Time- Part 1 - noupe
    keita_i
    keita_i 2008/03/31
    CSSのテクニックその1
  • XHTML、CSS を学ぶ時の 6つの間違い

    XHTMLCSS を学ぶ時にやりがちな間違いを私の個人的独断と偏見でつらつらと書いてみます。今から (X)HTML を学ぶのであれば、HTML よりも XHTML でしょということでタイトルや文内では XHTML と書いていますが、ここは HTML に置き換えてもらっても同じだと思います。 1、とりあえず Dreamweaver を買ってくる 別に 「Dreamweaver」 だけに限らず、オーサリングツールさえ手に入れれば XHTML なんて簡単に習得できると思っている人は少なくない気がしますが、これは大きな誤解です。この誤解を抱えたまま 「オーサリングツールが使える = XHTML を理解している」 だと思い込んでいると後になって困ることになると思いますよ。 オーサリングツールは、コーディングスキルを補うツールではなく、コーディング作業を効率化するツールです。XHTMLCSS

    XHTML、CSS を学ぶ時の 6つの間違い
    keita_i
    keita_i 2008/03/04
    XHTML、CSSを学ぶときに目を通しておきたい
  • RedLine Magazine : 半透明ボックスに関するメモ

    半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ

    keita_i
    keita_i 2008/02/19
    半透明にする方法
  • テキストスタイルをジェネレートできる CSS Type Set[to-R]

    テキストスタイルをジェネレートできる CSS Type Set CSS Type Setはテキストのスタイルをジェネレートできるサイトです。 デザインなどをしているとき、テキストに違和感を感じることがありますが、そういう時に使えそうです。 line-heightやletter-spacing、word-spacingも一緒にシュミレートできるので、色と文字間隔の関係やフォントと行間の関係なども簡単に確認できるので非常に便利です。 ただ残念なことに日フォントに対応してないようですので、日フォントに対応させる為のブックマークレットを作っておきました。 CSS Type Setに日語を追加 上のリンクを右クリックでお気に入りに追加(IE)/このリンクをブックマーク(Firefox)でお気に入りに登録して、CSS Type Setでそのお気に入りを実行することで利用できます。 気に入った

    テキストスタイルをジェネレートできる CSS Type Set[to-R]
    keita_i
    keita_i 2008/02/18
    テキストのスタイルをジェネレート
  • CSS Text Wrapper

    The CSS Text Wrapper allows you to generate HTML and CSS to wrap text on your website into any shape.Examples Not Just Rectangles Anymore The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code

    keita_i
    keita_i 2008/02/07
    CSSでテキストの回りこみ
  • Blockquote Examples by CSS-Tricks

    Better Blockquotes Blockquote examples By CSS-Tricks [DOWNLOAD EXAMPLE] Blockquotes are html elements that are meant to designate when a particular section of text is being taken from another website or other source. Different browsers have different built-in styling for blockquotes, often just a simple left margin. If you use a lot of quotes, as bloggers often do, it is a good idea to take contro

    keita_i
    keita_i 2008/02/07
    引用のCSSサンプル
  • CSSMENUMAKER.COM

    Get a price in less than 24 hoursFill out the form below. One of our domain experts will have a price to you within 24 business hours.

    keita_i
    keita_i 2008/02/07
    CSSでメニューをカスタマイズ
  • XHTML-CSS Validator

    Just type or paste an URL in the form above, and click on "check it" to see the magic. If you want to fine tune your validation, click on the "advanced" link. That's it! An Idea: The Social Media Algebra I used to be very good at maths. I really was. Then I started studying computer science stuff (which is normal for a computer scientist) and as time goes by, I forgot many of the coolest stuff I l

    keita_i
    keita_i 2008/02/07
    XHTMLとCSSの文法チェック
  • How to make sexy buttons with CSS

    This tutorial will teach you how to create pretty looking textual buttons (with alternate pressed state) using CSS. Dynamic buttons save you heaps of time otherwise spent creating graphics and will basically make you a happier person at the end of the day. Here's what you'll get: Sliding doors Since we want our buttons to be über-flexible, we'll have to make the background image expand with the si

    keita_i
    keita_i 2008/02/07
    ボタンにエフェクトをかけるCSS