50 New Useful CSS Techniques, Tools and Tutorials — Smashing Magazine
Over the last years we’ve got a pretty good understanding of what CSS does, how it works and how we can use it for our layouts, typography and visual presentation of the content. However, there are still some attributes that are not so well-known; also, CSS3 offers us new possibilities and tools that need to be understood, learned and then applied in the right context to the right effect. In this
Efficiently Rendering CSS | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! I admittedly don’t think about this idea very often… how efficient is the CSS that we write, in terms of how quickly the browser can render it? This is definitely something that browser vendors care about (the faster pages load the happier people are using their products). Mozilla has an art
Data URIs | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Did you know that you don’t have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs. (It’s equally correct to say “Data URL”, which I think I prefer.) With CSS,
HTML によるプレゼン作成のススメ - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 昨日、 HTML5 勉強会で Opera の開発者向け機能についてプレゼンしてきました。会場が Opera の目黒オフィスということで急遽駆り出されました（笑）。 こういったプレゼンをするときに必要なのがプレゼン資料（スライド）の作成。これまでは Google Docs や OpenOffice.org で作っていたのですが、これがどうにも不便。ちょっとしたことを
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
[CSS] IEのhasLayoutがtrueの時に垂直方向のmarginが相殺されない | バシャログ。
CSS のコーディングをしていると、IE6 や IE7 で垂直方向の margin が相殺されない現象が頻発するので、ちゃんと原因を確かめました。 以下、サンプルです。 XHTML のコード <div> <p>テスト</p> </div> <div> <p>テスト</p> </div> CSS のコード div { width: 100px; margin: 0 0 50px; background-color: #000; } p { margin: 0 0 50px; background-color: #EEE; } 各ブラウザでの表示 「div」と「div で囲まれた p」それぞれの下方向に 50px の margin を適用すると、通常は同じ方向の margin が相殺されて下方向の空きは 50px となるはずですが、IE6 と IE7 では margin が相殺されず 100p
![[CSS] IEのhasLayoutがtrueの時に垂直方向のmarginが相殺されない | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/c76f538a877e78afb07d09e5ff0f87885ac194e9/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_coding.png)
CSSグラデーションのちょっとしたテクニック #1
リリースを間近にひかえたFirefox 3.6で対応されるので、そこかしこで取り上げられているCSSによるグラデーション。基本的な書き方はIntroducing CSS Gradientsやcss gradients in Firefox 3.6を始めとして腐る程あるのですっ飛ばすとして、実際にボタン等で利用する時にどうすれば簡単に書けそうかということをちょっと考えてみようとかいう話。勢いで#1とかつけてしまった……。 button要素にCSSによるグラデーションをかけるには以下のように書くことになる。 button { background-image: linear-gradient(top, rgb(204, 204, 204), rgb(102, 102, 102)); background-image: -moz-linear-gradient(top, rgb(204, 204
CSSをお手軽にデバッグする方法 | Happy My Life
何重にも依存して定義されているCSSをを簡単にデバッグする方法。以下の内容をCSS内に追加しておくとよい。 コードを見ての通り該当する個所が色付きで輪郭線が表示されるので、どういった構造になっているか一目瞭然。不要になったらコメントアウトするとよい。 * { outline: 2px dotted red } * * { outline: 2px dotted green } * * * { outline: 2px dotted orange } * * * * { outline: 2px dotted blue } * * * * * { outline: 1px solid red } * * * * * * { outline: 1px solid green } * * * * * * * { outline: 1px solid orange } * * * * * * *
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
25 Incredibly Useful CSS Tricks You Should Know - WPLoaded
Here are 25 incredibly useful CSS tricks that will help you design great web interfaces. You might be aware of some or all of these techniques, but this can be your handy resource to nifty CSS tricks that you should know. 1. Change Text Highlight Color You might not have known this before! With CSS you can control the colors of selected test at least for standards compliant cutting edge browsers l
CSS Differences in Internet Explorer 6, 7 and 8 — Smashing Magazine
One of the most bizarre statistical facts in relation to browser use has to be the virtual widespread numbers that currently exist in the use of Internet Explorer versions 6, 7 and 8. As of this writing, Internet Explorer holds about a 65% market share combined across all their currently used browsers. In the web development community, this number is much lower, showing about a 40% share. The inte
jQuery 1.4.2 Visual Cheat Sheet woorkup.com
Blog » WordPress » How and where to learn WordPress plugin development (FYI, we build plugins) How and where to learn WordPress plugin development (FYI, we build plugins) It can be overwhelming when you first try to get into WordPress plugin development. Honestly, one of the best ways to learn is just to dive right in and start coding. However, this is something that doesn’t just happen overnight.
安全な@font-faceの書き方(抄訳)
Internet Explorerではかなり昔からあった埋め込みフォント(@font-faceによるフォントの参照)の機能は、Safari 3とFirefox 3.5で有効になったことから急速に話題になることが増えた。ようやく時代がMicrosoftに追いついてきた感じですね。その書き方は大筋では一緒なのだが、細かな仕様の違い、というかIEがEmbedded OpenTypeしかサポートしていないことから工夫が必要になる。その工夫をBulletproof、つまり将来にわたって安全であろうという観点で短くまとめたBulletproof @font-face syntaxというすごく参考になったエントリがあったので訳しておく。語調などは超訳なので、原文とニュアンスが変わっているかもしれない。 安全な@font-faceの書き方 以下は訳注と私見。 条件付コメント 面倒くさいというのはわからなく
【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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ichiro.to
http://blog.e-riverstyle.com/2009/11/clearfixvalid-csscss.html
Using YUI 2 and YUI 3 Together: Even Easier with Caridy's Wrapper Utility
Tips to Write Better CSS Code - WPLoaded
[CSS]クロスブラウザ対応、validなXHTMLとCSSで実装されたLightbox風エフェクト
Blogger