「ダークモード」に意味はあるのか？
黒を基調としたレイアウトにする「ダークモード」は、画面を見やすくして眼精疲労を予防したり、端末のバッテリー節約に役立ったりしてくれると考えられているため、OSやブラウザ、アプリなどさまざまなソフトウェアがダークモードに対応しています。しかし、いろいろと調べた結果ダークモードを使うのをやめたという開発者のKev Quirk氏が、なぜその結論に至ったのかを解説しました。 Is Dark Mode Good For Your Eyes? | Kev Quirk https://kevquirk.com/is-dark-mode-such-a-good-idea/ ◆：読みやすさ ダークモードとライトモードに対する視認性を比べた調査によると、正常な視力を持つ人であれば、ライトモードの方がパフォーマンスは高かったとのこと。 人間は日中に狩りをするよう進化しており、これは「明るい背景に暗い物体」を見る
PC版Twitterの新デザインが公開。ずいぶんスッキリしたね！
PC版Twitterの新デザインが公開。ずいぶんスッキリしたね！2019.01.24 11:0010,831 小暮ひさのり 雰囲気変わってシンプルに。 TwitterがPC版（Web版）の新デザインを発表しました。大きな変更点としては、3カラム表示から2カラムへとシンプルになりました。また、｢Tweet｣ボタンの場所も調整され、これまでの画面上部から画面右下へとお引越し。このボタンは画面スクロールについてくるので、タイムラインを眺めていても即Tweetできますよ。 他にも絵文字挿入ボタンのデザインも調整されています。動く様子は以下よりどうぞ。 A new https://t.co/fHiPXozBdO is coming. Some of you got an opt-in to try it now. Check out the emoji button, quick keyboard
Grid Garden - A game for learning CSS grid layout
A game for learning CSS grid layout
Scroll-linked effects — Firefox Source Docs documentation
Overview A Glossary of Common Terms A Quick Guide to Mozilla Applications Getting Started Getting Set Up To Work On The Firefox Codebase Working On Firefox Working on Firefox Bug Handling Firefox User Guide Firefox DevTools User Docs Source Code Documentation Governance Firefox Front-end DOM Editor Style system (CSS) & Layout Graphics Processes, Threads and IPC Firefox DevTools Contributor Docs To
「CSS Grid Layout Generator でレイアウト用CSSを生成する」をコピーしてみた - Qiita
出典 : CSS Grid Layout Generator でレイアウト用CSSを生成する 大体3日で目コピしたものの紹介です。 これが今回わたしがつくったやつ https://miyamoen.github.io/elm-grid-generator/ こっちがコピー元のmizchiさんがつくったやつ https://mizchi-sandbox.github.io/grid-generator/ (見た目を寄せてるので気を付けてください) これは何 mizchiさんが作ってたCSS Grid GeneratorをElmで作りました viewライブラリとしてstyle-elementsを使っています mizchiさんがElmでやってみてくださいとか言ってて、ちょうどCSS Gridしてたしで作りました 見た目や機能をほぼそのまま再現しました 落としてる機能としてはcontainerのサ
Bootstrap 4が全然盛り上がってないから試した → 思ったより良かった - Qiita
Bootstrap4が正式リリースした 2018年あけおめムードも落ち着いて来た頃、つい先日(2018/01/18)にBootstrap4が正式リリースの声明を発表した。 ・ありがたいお言葉 https://blog.getbootstrap.com/2018/01/18/bootstrap-4/ ・公式 https://getbootstrap.com/ 全然盛り上がってない気がしてウケた 今やマテリアルデザインのCSSフレームワークなんて充実しまくってるし、選択肢はいくらでもあるし、今更Bootstrapなんて選ぶかよって感じですよ。 正直、筆者も永遠にBeta版なのかと思ってちっとも触ってなかった。 もっと言うとv4 alphaを取り込んでるサイトもちょいちょいあるし、だったら3.3.7でいいよねって思ってた。 中途半端に「マテリアルデザインっぽくしました！」感も否めないし、、、。
CSSアーキテクチャについて軽くまとめてみた - Qiita
概要 最近バックエンドからフロントエンドになり、「CSSアーキテクチャについてお勉強してみよう！」ということで、一旦代表的なものをまとめてみました。 CSSアーキテクチャとは cssの設計方法 命名規則やディレクトリ構成や色々ある 汎用性を持たせる設計をするために、誰がみても、途中で誰が入っても構成等がわかるように設計しようねという思想からきてるっぽい BEM コンセプト CSSセレクタの命名規則と言われている Block,Element,Modifierの略 Block:塊 ヘッダー、ナビゲーション、フッターなどのパーツ 独立してる Element:要素 検索ボタン、検索ボックスなどの部品 機能を持っている Modifier:装飾 部品の状態の色等の装飾 実例 命名規則 blockに対して、elementとmodifierをそれぞれ_(アンダースコア1つ)・__(アンダースコア2つ)・-
Flexbox and Grids, your layout’s best friends
It took more than six years to have CSS Grids implemented across all browsers. Throughout its history, the spec has always been surrounded by controversy. In 2011, it was met with skepticism as the Microsoft Developer Team announced prefixed support for IE10. The lack of information about the W3C proposal made some developers wonder whether there was an actual need for another layout system, since
Magic of CSS — Adam Schwartz
The Magic of CSS by @adamfschwartz Preface Chapters The Box Layout Tables Color Typography Transitions Coming soon... Potions Two Pane App Three Pane App Three Pane App with Color Table Styling Overflow Ellipsis Letter Spacing Buttons Content Reordering
An Introduction to CSS Grid Layout: Part 1 – Mozilla Hacks - the Web developer blog
This is the first post in a two-part series for getting started with CSS Grid Layout. If you are interesting in learning more about CSS Grid and the new CSS Grid Layout feature in Firefox, visit the Firefox DevTools Playground. CSS Grid Layout is completely changing the game for web design. It allows us to create complex layouts on the web using simple CSS. “But wait! I can already create layouts
The Ultimate Guide to Flexbox — Learning Through Examples
Note — this is a long read, so if you want, you can download this article and read it offline here.What’s the best way to understand Flexbox? Learn the fundamentals, then build lots of stuff. And that’s exactly what we’re going to do in this article. A few things to noteThis article was written with intermediate developers in mind, and assumes you already know a bit about Flexbox. But…If you know
CSSで実装するオーバーレイ表示時のエフェクトサンプル 10 - NxWorld
初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。 すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。 また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。 紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。 複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。
SVG can do THAT?!
//variable declaration for the global repeated animations const gear = $("#gear1, #gear2, #gear3"); ... //animation that's repeated for all of the sections function revolve() { let tl = new TimelineMax(); tl.add("begin"); tl.to(gear, 4, { transformOrigin: "50% 50%", rotation: 360, ease: Linear.easeNone }, "begin"); ... return tl; } const repeat = new TimelineMax({repeat:-1}); repeat.add(revolve())
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bulma: Free, open source, and modern CSS framework based on Flexbox
Fast Website Prototyping — TextMock
30 Seconds of CSS
Site unavailable
Checkout the new advanced features of Bootstrap 4
A free tutorial to learn HTML and CSS
Ask HN: Learning modern web design and CSS | Hacker News