WebKitがiOS 9とOS X 10.11でWebコンテンツにAppleの新しいシステムフォント「San Francisco」を適用するCSSプロパティ設定方法を公開しています。詳細は以下から。
-
-
CSS の content プロパティで Unicode 記号を使う: Seaoak's READ
content: "xyz \A abc"; /* "xyz" + 改行 + "abc" */content: "xyz \A0 abc"; /* "xyz" + space + "abc" */
情報源: CSS の content プロパティで Unicode 記号を使う: Seaoak's READ
-
Building The Slack Animating Logo With Only CSS - Call Me Nick
In this tutorial, we break down the Slack loading animation, and reconstruct it using CSS3 animations, transforms, and a hint of blending.
情報源: Building The Slack Animating Logo With Only CSS - Call Me Nick
-
CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste | Design Shack
Reading an article entitled CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste on Design Shack.
情報源: CSS3 Cookbook: 7 Super Easy CSS Recipes to Copy and Paste | Design Shack
-
bakcground-sizeをtransition - Weblog - Hail2u.net
背景画像をbackground-sizeプロパティーで縦横サイズを制限して敷き詰めるというのは昔id:hitode909がやってた。それをCSS Transitionsで元のサイズに戻したらどうなるかなーとやってみたらそこそこ面白かった。きっかけは96x96.netを見たことで、こっちはborder-imageプロパティーを組み合わせていて、widthプロパティーをtransitionしている。
情報源: bakcground-sizeをtransition - Weblo ...
-
CSS Flip Animation
CSS flip animation effect uses CSS animations (transitions) to show the front and back of an element. The flip effect can be opacity, transitions, or animations.
情報源: CSS Flip Animation
front content
back content
-
Metro style appのために拡張されているCSS(スクロール編) - ういはるかぜの化学 - subtech
http://subtech.g.hatena.ne.jp/mayuki/20110923/1316786871の続きです。 今度はスクロール..
情報源: Metro style appのために拡張されているCSS(スクロール編) - ういはるかぜの化学 - subtech
-
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス
ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。
情報源: アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう | Webクリエイターボックス
-
scroll-snap-type - CSS | MDN
The scroll-snap-type CSS property defines how strictly snap points are enforced on the scroll container in case there is one.情報源: scroll-snap-type - CSS | MDN