タグ

CSS3に関するdameleonのブックマーク (5)

  • 要素内容に依存する幅の指定について

    要素内容に依存する幅の指定についてのメモです。 これらは「CSS basic box model(草案)」に記載されており、MDNのページに分かりやすく説明されています。 来、これらは幅だけでなく高さの指定にも使えるようなのですが、まだ実装されていませんので確認できません。 2013年4月現在、幅の指定として使えるブラウザはFirefoxとGoogle Chromeです。Safariでは動くんですかね。最新版ないから分かりません。 available or fill-available包含ブロックから該当要素のマージン、ボーダー、パディングのサイズを引いた幅。 現在、Firefoxは-moz-available、Chromeは-webkit-fill-availableで動作します。max-contentややこしい計算式があるんですが、とりあえずは該当要素が取りうる最大の幅として覚えてお

    要素内容に依存する幅の指定について
  • /trunk/Source/WebCore/css/html.css – WebKit

    Fix styling of th elements when explicitly specifiying text-align:inherit ​https://bugs.webkit.org/show_bug.cgi?id=138577 Patch by Ryan Reno <​rreno@apple.com> on 2022-06-16 Reviewed by Tim Nguyen. <th> elements were being incorrectly centered when specifying text-align: inherit. This fixes that bug by adding a new internal CSS value for use in the UA stylesheet. This also removes a non-inherited

  • box-shadow と filter: drop-shadow の違い

    http://bricss.net/post/33158273857/box-shadow-vs-filter-drop-shadow を見て日語でも書いておこうと思って書いた。 でもサンプル見るほうが早いので(たぶん)わかりやすいサンプル作った。 サンプルは↓ スクショ↓ drop-shadowは見たままの影を作ってくれてます。 擬似要素で作った▼も影の形に反映され透過PNGの透過部分は影にならず文字もまるでtext-shadowのように。素敵。 余談2011年の12月頃にWebKit Nightly Buildsで-webkit-filterが実装されてました。 その頃作ったデモが↓ そして2012年の10月にはChrome、iOS6で-webkit-filterが使えるようになりました。 なぜかbox-shadowと似てると思われ、あまり注目を浴びないdrop-shadowが一番の

    box-shadow と filter: drop-shadow の違い
  • WebGL のシェーダーでグリグリできる CSS Shaders の使い方 - WebOS Goodies

    WebOS Goodies へようこそ! WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 こちらの記事を見て「おお、ついに CSS Shaders 実装されたんか!」と喜び勇んで試した後、すべてが終わってから Dev 版 Chrome でも使えることに気づくという情弱ぶりを発揮した今日この頃、みなさんいかがお過ごしでしょうか。いったいいつから使えてたんだろう・・・(´・ω・`) そんなわけで、最新の話題でもないみたいですが、せっかく試したので記事にして

  • can I use... Support tables for HTML5, CSS3, etc

    Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and

  • 1