Your browser scores 0% Determined by passing tests out of total for features
The CSS3 Test
Your browser scores 0% Determined by passing tests out of total for features
Get Value of CSS Rotation through JavaScript | CSS-Tricks
A comment by aditya: Is there a way to get the angle [through JavaScript] by which the element is rotated? Seems like a reasonable request. So we have some HTML: <div id="i-am-rotated">text</div> And it’s rotated through CSS: #i-am-rotated { -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); -ms-transform: rotate(30deg); -o-transform: rotate(30deg); } Our goal is to get the number “3
CSS box-shadow Can Slow Down Scrolling
By Ross Allen Working on one of the Chromebooks Google lets you borrow on Virgin America flights, I noticed scrolling down the page on my airbnb.com dashboard was much slower than on my normal laptop. I chalked it up to weak Chromebook hardware, but other sites were scrolling just fine. box-shadow had caused slow scrolling on our search results page before, so I did some investigation. I used Chro
text-emphasis (CSS3 Text decoration)；圏点のスタイル
noneとすれば圏点をなくすことができる。また、上記の表にはない任意の一文字を圏点として指定することもできる。 仕様書には、以下のことも定められている。 filledとopenのいずれも指定されない場合、filledとして扱われる。 filledもしくはopenのみ指定した場合、横書きではcircle、縦書きではsesameとして扱う。 圏点の文字サイズは，圏点を付ける対象となる要素の文字のサイズを50%とする。 圏点は縦書きモードでは要素の右側に来なければならず、文字を回転させてはならない。 フォントが圏点に使用する字体を持ってないか、字体があっても不適当な大きさを使用することが考えられる。ユーザーエージェント（ブラウザ）は圏点に適切なフォントを用いることができ[MAY]、ユーザエージェントによって合成してもよい[MAY]。 例 filledを指定 ぼくもできなかった。Linux がぼく
Dev.Opera — CSS3 Radial Gradients
Article update: 12th December 2012The article has been updated to cover the gradient syntax covered in the (at the time of writing) latest Image Values and Replaced Content Module Level 3 specification, dated June 12th 2012. IntroductionGradients are much-used on web sites: if you want to liven up pretty much any UI feature (buttons, panels, headers, etc.) you can use a gradient, although you shou
Morf.js - CSS3 Transitions with custom easing functions
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom These are custom easing functions (thanks to Robert Penner & Thomas Fuchs) that can produce much more interesting transitions. Generated Animation CSS Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on
Finally: Sprite animations implemented via CSS3 Animations - Paul Bakaus' blog
Warning: This is hackier and more dirty than anything I have published in recent years, and only works in WebKit. Use with extreme caution. I’m lazy, show me the end result first! CSS Animations are great – they are a lot less pain for the normal web developer, are rendered more smoothly as the browser can control the framerate, and even become hardware accelerated. You can animate almost everythi
CSS3、今これだけは覚えておきたい5つのプロパティ(対IE用スクリプトまとめ付き)
比較的最近のサイトでは使われる機会も多くなってきたものの、まだまだ仕様策定段階の状態が続いているCSS3。 仕様が確定していないとはいえ、CSS3にはweb制作現場からの切実な要望に答えるような、新しいプロパティが用意されています。 相変わらずシェアと実装具合の乖離が激しいIE君さえどーにか対応できれば、このCSS3っちゅーヤツを使わない手はないっ！ というワケで今回のエントリーでは、現状で使えるCSS3からの新プロパティの中から、とりあえずコレだけは押さえておこうぜってのを5つ、厳選してみました。 厳選ついでに、「爆発しろ」でお馴染みのIEシリーズでもCSS3に対応させられるスクリプトなども、ひっそりといくつかまとめてみましたので、こちらも合わせてチェックしてみなはれ♪ これだけは覚えておきたい5つのCSS3プロパティ それでは以下から実例と共にご紹介していきますが、例によって例の如く、
Rotational Sliders
In the following cases, the animated transforms slide around a bit with non-centered transform origins. This is because all properties are being transformed, including transform-origin. Over the second-long transition, the transform's origin point transforms from 50% 50% (the default) to the new value. That's why the centered case looks fine: it's transitioning from 50% 50% to 50% 50%. Fixes: eith
”レスポンシブなデザイン” のアドビ HTML5/CSS3 特設サイト制作者インタビュー | デベロッパーセンター
Dreamweaver CS5 体験版 今すぐ購入 最初に話を聞いた時はどんな印象でしたか？ 「今回のような、動的に変わるカラムレイアウトは初だったので、とても面白そうだ、と思う半面、タイトな時間の中で構築できるかという不安もありました。実際にメディアクエリーを利用したリキッドデザインのサイトを見て（http://hicksdesign.co.uk/）、ブラウザの大きさに応じてレイアウトが変更される際の動きは大変そうだなと思いました。あとは HTML の構造化でしょうか。やはり、構造化があった上での CSS デザインだと思うので、そのあたりをしっかりと構築できるか、という点が大変そうだと思いました。」 最初に出てきたビジュアルデザインを変更したそうですが、その理由を教えて下さい 「ブラウザのウインドウ幅があるサイズ以下になった際に、1 カラムのデザインになるのですが、その 1 カラムに
CSS3仕様の更新：Backgrounds & Bordersの勧告候補とImage Values草案 | Web標準Blog | ミツエーリンクス
CSS WG BlogのNew CSS3 Publications: Backgrounds and Borders CR, Text WD, Image Values and Replaced Content WDという記事でも紹介されていますが、CSS3の仕様が3つ更新されました。今回はそのうちの2つ、Backgrounds & BordersとImage Values & Replaced Contentについて紹介します。 2月15日付で、CSS Backgrounds and Borders Module Level 3が再び勧告候補になりました。 CSS Backgrounds and Borders Module Level 3 昨年より翻訳を進めていましたが、ひと通り終わりましたので公開します。 CSS 背景 & ボーダー モジュール Level 3 勧告候補から先に進むた
zomigi.com » Examples of flexible layouts with CSS3 media queries
In my CSS3 presentation that I’ve given several times over the past year, the part that seems to impress the audience the most is my demonstrations of media queries. I’m with them. I think media queries are perhaps the most useful and exciting piece of all the great new stuff that’s new to CSS3. While creating effective, attractive, flexible layouts that adapt to the user’s screen size has always
Pure CSS3 Post Tags | Css Globe
This is a rather simple pure CSS trick you can use to style your blog post tags, usually placed at the bottom of the posts. Pure CSS post tags uses at least 2 CSS tricks such as CSS triangles and CSS circles. Take a look at the demo To learn how to create CSS triangles I suggest you read this article. In short it you need to manipulate borders of an element that has zero height and width. CSS ci
An Introduction to CSS 3-D Transforms
Ladies and gentlemen, it is the second decade of the third millennium and we are still kicking around the same 2-D interface we got three decades ago. Sure, Apple debuted a few apps for OSX 10.7 that have a couple more 3-D flourishes, and Microsoft has had that Flip 3D for a while. But c’mon – 2011 is right around the corner. That’s Twenty Eleven, folks. Where is our 3-D virtual reality? By now, w
Matt Hamm on about.me
Matt HammDesigner, Director, and Small Business Owner in Jávea, Spain Matt HammDesigner, Director, and Small Business Owner in Jávea, SpainHire me Creative Director and co-founder of Supereight Studio Matt Hamm is a talented UK designer currently based in Spain, renowned for his innovative and captivating design solutions. With a passion for combining aesthetics with functionality, Matt has establ
css3-text-layout（W3C）におけるウェブ縦書き議論の現場報告
もしかして、これ、大変なことを議論してない？ と思ってまとめてみました。W3CのML原文に当たっていないため、なにか誤解しているかもしれません。また抜けもあるかも。どうかご容赦されたし。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
cubic-bezier.com
CSS3 Reference ～ CSS3のリファレンスサイト ～
Smashing Magazine — For Web Designers And Developers
More Module Updates from the W3C - CSS3 . Info
