State of CSS 2022 | Blog | web.dev
Browser compatibility A primary reason so many CSS features are set to cooperatively release is due to the efforts of Interop 2022. Before studying the Interop efforts, it's important to look at Compat 2021’s efforts. Compat 2021 The goals for 2021, driven by developer feedback via surveys, were to stabilize current features, improve the test suite and increase passing scores of browsers for five
君は真に理解しているか？z-indexとスタッキングコンテキストの関係 - ICS MEDIA
CSSで要素の重なりを表現する時はスタッキングコンテキストによって決められています。スタッキングコンテキスト（Stacking Context）はウェブページ上の仮想的な奥・手前方向の概念であり、「重ね合わせコンテキスト」、あるいは「スタック文脈」とも言います。 z-indexによる重なり位置の指定もこのスタッキングコンテキストのうちの一つです。今回はz-indexより広い概念のスタッキングコンテキストの深淵を覗いてみます。 z-index:5がz-index:53万に勝つ方法 重なりといえば、z-indexです。z-indexはWeb初心者キラーなプロパティで、その値が必ずしも重なりの順序になりません。例えば次のようなz-indexが53万と5の要素があったとします。この場合、53万の要素が上にきます。 <div class="wrapper wrapper-freeza"> <div
cssfx.dev - このウェブサイトは販売用です！ - cssfx リソースおよび情報
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.
Generative Art With CSS
Prev Next Generative Art With CSS :doodle { @grid: 14 / 100vmax; --color: #51eaea; } :container { transform: scale(1.4) rotate(45deg); } overflow: hidden; margin: -.5px; border-color: @p(#51eaea, #65799B, #FF9D77, #FB3569); border-width: 1px; border-radius: 50%; border-style: @repeat(4, ( @p(solid, dashed, dotted) )); :after, :before { content: ''; @size: calc(@sqrt(2) * 50%); position: absolute;
Typography.js
A powerful toolkit for building websites with beautiful design. Install npm install typography Demo/playground http://kyleamathews.github.io/typography.js Why Typography is a complex system of interrelated styles. 100s of style declarations on dozens of elements must be in harmonious order. Trying one design change can mean making dozens of tedious recalculations and CSS value changes. Creating ne
Printable Web
Kyoto.js 14で発表しました Author: @spring_raining
CSSでバーティカルリズムを実現しよう！line-height-stepを使ってみる
CSSでバーティカルリズムを実現しよう！line-height-stepを使ってみる 石井宏治（グーグル） 「バーティカルリズム」（Vertical Rhythm）と呼ばれるデザイン手法があります。最近は関連記事も増えてきたので聞いたことがある、という方もいらっしゃるかもしれません。日本語本来のタイポグラフィでは「行取り」と呼ばれる類似の手法があり、ほぼ全ての印刷物やワープロで使われています。 「行取り」あるいは「バーティカルリズム」とは、要素の配置に一定のリズムを取り入れることで、デザイン上の安定感や、可読性の向上などの効果が見込るデザイン手法です。通常は、本文の行の高さをリズムの単位として、要素間の余白を調整します。ノートの罫線や、原稿用紙をイメージするとわかりやすいと思います。 上の例のように、CSSでline-heightやmarginを適切に設定すれば実現可能ですが、メンテナンス
珍しいCSSプロパティたち - Qiita
あまり見かけない、かつ実用的なCSSのプロパティをまとめました。 他プロパティに依存するプロパティは割愛します。 ブラウザ対応状況はCan I Use等でご確認ください。 紹介するCSSプロパティ will-change scroll-behavior resize object-fit と object-position appearance user-select font-feature-settings text-rendering font-smoothing hyphens pointer-events will-change 予め演算処理をさせておくプロパティです。 これから変化する スクロール位置 / 要素 / プロパティ を値に設定すると、事前に変化をブラウザに知らせる事ができます。 アニメーションのカクつきを、いくらか抑えることができるでしょう。 ただ、何にでも指定して
ニートに学ぶCSS Animation演出講座 １時間目 - 魔法少女サイト
あいさつ ほんとはミライアカリになりきって、記事書きたかったんですが怒られそうだったんでやめます ↓ ニートに教わっても面白くないと思うので、僕のことを美少女だと思い込んで講座を受けてください。 はい。改めまして。 ハロー、yuki540だよ！ﾋﾟﾛﾘﾝ 結構、需要があったみたいなので今回から僕が今まで作ったcss animation作品の演出パターンを解説していくよ！ ホントにやってることは単純でcssの初歩的な知識で再現できるものなので、みんななら10秒あれば理解できると思います！ この講座では、sassとかpugは使わず、あくまで素のhtml, cssを使っていきます。 それでは、早速やっていきまーしょう！ 今回のアニメーション 「ミライアカリに学ぶCSS Animation演出講座」として最初にこれを解説します pic.twitter.com/rgHKA0TWpy— yuki540
In Pieces - 30 Endangered Species
About this project In Pieces is an interactive exhibition turned study into 30 of the world’s most interesting but unfortunately endangered species — their survivals laying literally, in pieces. As Featured On Each species has a common struggle and is represented by one of 30 pieces which come together to form one another. The collection is a celebration of genic diversity and an attempting remind
QiitaのCSS構成2017 - Qiita
この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass) を使っています。 プリプロセッサーとして PostCSS を使わなくなった最大の理由は @apply ルールが仕様から落ちた ことです。@apply は Sass でいう引数なしの mixin みたいなもので、Chrome の Canary では実装されていた時期がありましたが、消えてしまいました。 おそらく CSS Nesting Module や CSS Extend Rule も落ちると思
あなたの知らない CSS ベストプラクティス - Frasco
React 、Angular 、Vue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基本は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能
細かすぎるけど伝わってほしい私的BEMプラクティス30（ぐらい）
BEMのいいところは、それが何者なのかが明白ということに尽きる。とある要素を見たときに、そのスタイルがどこに書かれているのか、何を表しているのかがクラス名を見ればわかる。手を入れる際も、どこに追記すればよいのか、どれくらいの影響を及ぼすのかの大部分が推測できる。 レスポンシブ・デザインと相性がいいとか、流行りのコンポーネント指向と相性がいいなど、BEMの良さは他にもいくつか挙げられるけど、決定的なのは明瞭さであると思う。 BEMを使いはじめてかれこれ３，４年くらい経った。その間に色々な命名規則や設計思想が登場してきたけれども、今のところは浮気する程の魅力を他に感じることもなくBEM一筋でやってきている。ただし実践するにつけて、より明瞭で破綻しづらい設計を実現するために、様々な制約やガイドを設けてやってきたので、「もともとのBEM」からは多少なり離れているかもしれない。 ただし、それはBEM
CSS3D！まるでWebGLのような3Dを超気軽に実装するCSS技
CSSでWebGLライクな3D表現は可能か？ご覧ください、 可能 です。 ただし、できない(苦手とする)こともあります。 See the Pen OnlyCSS: Cube 3D Twister by Yusuke Nakaya (@YusukeNakaya) on CodePen. やったことこの記事の 3D表現 とは、単純に perspective + transform プロパティで「1つの要素を立体的に表示する」だけではなく、 「立方体を描画して、回転などの表現を加える」 事を目指しています。 立方体のコントロールについて、CSSだけでどこまで可能か、研究してみました。 立方体を描画する親要素に transform-style: preserve-3d; を指定すると、 親要素の3D変形を継承して子要素の3D変形も有効 になります。 これは言葉では説明しにくいので、下のサンプルをご
Introducing CSS Scroll Snap Points | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Before this new CSS I’m about to introduce existed, locking an element into the viewport on scroll required rigging up some JavaScript. As you may know, JavaScript has a well-earned reputation to be tricky when paired with scrolling behavior. The new CSS Scroll Snap Points s
“Scale” FUD and Style Components
Smart folks like to use the word “scale” to scare less experienced folks into doing the “right” thing. I’ve seen this a lot recently from the CSS-Tricks community toward React developers. The threat I hear is: “This idea won’t scale; we’ve already solved this in CSS.” But these arguments from authority are largely unproven, when used with components. So, let’s talk about scale and whether or not t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Daily CSS Design
Yusuke Nakaya on CodePen
Using CSS to detect and counting Prime Numbers · Issue #12 · xieranmaya/blog
真のコンポーネント粒度を求めて
