GitHub - evanw/source-map-visualization: A simple visualization of source map dataYou signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Rapidly build modern websites without ever leaving your HTML.A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. <figure class="md:flex bg-slate-100 rounded-xl p-8 md:p-0 dark:bg-slate-800"> <img class="w-24 h-24 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg"
CSS Layout API で Masonry Layout | blog.jxck.io
Intro Pinterest でおなじみの Masonry Layout を CSS の標準にする作業と実装が進んでいる。 Masonry Layout 以下のように画像を敷き詰めるタイルレイアウトのことを Masonry (石工やレンガ造りの意味らしい) Layout という。 上の例の場合は、 Height が不揃いの画像を並べる上で、左から敷き詰め、折り返したら既にある画像の高さに合わせて二列目が始まるというロジックになる。 これを実現するには、割と複雑な CSS を書く必要があり、様々なサイトで CSS ライブラリや、 Grid などを用いて再現する方法が紹介されている。 これをそのまま CSS の標準にする作業が Layout API の文脈で行われており、既に一部が(主に Firefox で)実装されている。 grid: masonry; 仕様は以下だ。 CSS Grid L
次の時代のCSS in JSはWeb Componentsを従える
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
PRECSS - Manage your CSS with prefixes.
Manage your CSS with prefixes. <header class="ly_header">...</header> <!-- layout --> <main class="ly_cont"> <div class="bl_jumbotron"> <!-- block module --> <h2 class="bl_jumbotron_ttl">PRECSS</h2> <p class="bl_jumbotron_txt hp_mb20">CSS with prefixes.</p> <!-- helper --> </div> </main> <aside class="ly_side"> <a href="#" class="el_btn">Try PRECSS</a> <!-- element module --> <a href="#" class
🎮 CSS Nintendo Switch (Box Shadow & Gradient Practice)
Hello world. I've missed you all. I hope you all are happy, healthy, and well ❤️ After some major life changes and enormous projects, it's great to be back! I'm conjuring up on a new animation video involving the Nintendo Switch 😊 I wanted to improve my use of box-shadows, so I challenged myself to make a realistic looking Switch. My fiancé then had the splendid idea of showing gameplay on the sc
Color Palettes for Designers and Artists - Color Hunt
Discover the newest hand-picked color palettes of Color Hunt. Get color inspiration for your design and art projects.
Visual Guide to CSS3 Flexbox: Flexbox Playground |
The children flex properties can be applied at child level, separate for each child. See the results below and change some of their properties. Hover with the mouse pointer or touch the fields to see the property name.
現代開発者のためのCSS基礎技術 - Qiita
ウェブアプリケーション開発における、現代的なCSSの基礎技術についてまとめました。 ちまたには「CSSとは何か」を学ぶ教材はたくさんあっても、「CSSをどうやってうまく使うか」についてはあまり詳しく触れられません。 仕様をたくさん記憶したところで、いつになっても開発力はあがらないのです。 本記事は「CSSをうまく使う技術」に焦点をあてて、実際に現代的なウェブアプリケーションに求められるレベルのCSSを書くための知識を紹介します。 特に プログラミング経験はあるもののウェブフロントエンドの経験が浅い方 初級レベルのCSSはある程度理解したものの、次にどうしたらいいかわからない方 にお勧めです。 プロローグ CSSの書き方は一通りではありません。 好きな書き方を自由に選ぶことができます。 これは一見すると良いことですが、裏を返すと最適ではない書き方がたくさんあるということです。 この場において
3000人に聞いた、2019年最先端のフロントエンド開発者が使ってるツールはこれだ - Qiita
Ashley Nolanは、CSSとJavaScriptの機能やフレームワークをどれだけ使っているかというアンケートを毎年行っています。 以下では2019年版である、The Front-End Tooling Survey 2019というアンケート結果の概要を紹介してみます。 回答者数が昨年から4割も減ってるのだが一体何があったのだろう。 The Front-End Tooling Survey 2019 - Results 3005人の開発者が、27の質問に回答してくれました。 私の家族に女の子が増えたので集計結果を出すのが遅れました。ごめんね！ 昨年からの一年で変わったところを見ることで、みんなの考えやトレンドが他者と共有されているか確認することができます。 これらの結果から、フロントエンドツール全体の知識レベルや使用傾向を分析するのにも役立ちます。 Quick Thanks 手伝って
ライトウェイト構造化文書 - golden-luckyの日記
このアドベントカレンダーでは、先週まで、主にページメディアにおける「PDF」と「XML」の話をしてきました。 この2つ、それぞれ「Webブラウザでのレンダリング」と「HTML」に言い換えると、ウェブメディアの世界観と似ている気がしてこないでしょうか。 実際のところ、ウェブメディアとページメディアって互いに遠い存在ではなく、「平面に文字などを配置することを目的とした構造化文書」という視点に立てば、むしろ兄弟みたいなものです。 「Webブラウザへの表示がHTMLだけで済むわけないだろ、CSSやJavaScriptの役割を知らないのか」という指摘が聞こえてきそうですが、ページメディアにもそれらに相当するものは存在します。 というか、いろいろありすぎて、もはや収拾がついていません。 ページメディアでわりと標準っぽいのは、CSSの役割がXSL-FO、JavaScriptの役割がXSLTという、いわゆ
Vimで色を直感的に編集するプラグインを作ったので紹介 - rbtnn雑記
Vim2 Advent Calendar 2019の11日目担当の@rbtnnです。 TL;DR 色を編集するVimプラグインを作ったから良かったら使ってみてください。 ただ、このVimプラグインは256 bit color対応でかつpopup windowが使えるVimが必要です(Neovimの方ごめんなさい)。 github.com このVimプラグインを作った経緯 みなさん、Vimのhighlightやcssのbackgroundなどの色を編集したことありますか？ Vim scriptのコード highlight Normal guifg=#e0e0e0 guibg=#203b46 cssのコード .hoge { background-color: #ffea00; } .foo { background-color: hsl(240,50%,50%); } これらの色を編集するとな
CSSで複数行3点リーダーを実現する「line-clamp」がついにIE以外に対応したよ！ - Qiita
最新のFirefoxが対応した!! これにより、IEさえ無視すれば完全にCSSのみで複数行の3点リーダーが実現可能となりました。 よく使う割に難しい処理だったので、地味に嬉しいです。 最新の対応状況はこちら line-clampとは？ 行数を指定して、テキストが領域をはみ出した時に3点リーダ「…」を表示することができます。 //css p { width: 170px; display: -webkit-box; -webkit-line-clamp: 4; //3点リーダを表示する行数を指定 -webkit-box-orient: vertical; overflow: hidden; } たったこれだけで実現できちゃいます。 詳しくはこちらの記事でわかりやすく書かれています。 現状のベストプラクティス ・IE以外で簡単に実現できるようになったので、基本line-clampを使いましょう
フロントエンドエンジニア御用達の MDN web docs を網羅した
このリストは何？ MDN web docs を、あたかも書籍の目次かのごとく整理しなおしたものです。それぞれ MDN web docs の記事へリンクしています。 なぜこれが必要になったかというと、人材市場でフロントエンドエンジニアが少なすぎる現状をどうにかするべく教育体制を整えるところから考え始めたのですが、それならまずは日頃お世話になっている MDN web docs を教材として扱いたいなと思ったからです。慣れてきてもよく参照するし「アレどこだっけなぁ？」を軽減もしやすいかなって。 MDN web docs は内容そのものはかなり充実しているものの、リンクがあらゆる方向に張り巡らせられており ある一定の流れに沿って読む ということが少々難しい側面もあります。特に初学者にとっては、迷子になりやすいかもしれません。 ですので、初学者でも学習しやすいように MDN web docs 全体の
リアルな眼球を描く。HTMLとCSSだけで。 - Qiita
CSSの底力を見せてやる 「いいか…デザイナー…」 「これはCSSと私一人の問題だ…」 「CSSなんかに凝ったってSEOが捗るわけではないと知ったフウな事をいう者もいるだろう」 「SVGでいいじゃんという者もいる」 「だが」 「自分のCSSをドブに捨てられて その事を無理矢理忘れてSVGをただ貼るなんて人生は あたしはまっぴらごめんだし、 あたしはその覚悟をしてきた！！！」 …というわけではありませんが、なるべくリアルな眼球をHTMLとCSSでマークアップしていきます。 svgやcanvasは使わないしjsなんかもちろん使いません。 でも素で書くのは大変なのでpugとstylusでやっていこうと思います。 結果だけ知りたい人はこちら > eye2 pure css, without svg&canvas ベースとなる眼球を作成しよう
CSS Scan - The fastest and easiest way to check and copy CSS
button .btn .demo-btn .first-demo-btn 272x50 Arial 16px background-color: #C2FBD7; border-radius: 50px; border-width: 0; box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0; color: #008000; cursor: pointer; display: inline-block; font-family: Arial, sans-serif; font-size: 1em; height: 50px; padding: 0 25px; transition: all 200ms;
CSS Triggers List - What Kind of Changes You Can Make
• Layout • Paint • Composite align-content Changing align-content alters the geometry of the element. That means that it may affect the position or size of other elements on the page, both of which require the browser to perform layout operations. Once those layout operations have completed any damaged pixels will need to be painted and the page must then be composited together. align-items Changi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - tw-in-js/twind: The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.
GitHub - cloudflare/lol-html: Low output latency streaming HTML parser/rewriter with CSS selector-based API
[CSSアニメーション]三(卍^o^)卍←こいつのこれ→卍を回したい - Qiita![[CSSアニメーション]三(卍^o^)卍←こいつのこれ→卍を回したい - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/74423a32362d50cc29439672cd3106b8d2629e62/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JTVCQ1NTJUUzJTgyJUEyJUUzJTgzJThCJUUzJTgzJUExJUUzJTgzJUJDJUUzJTgyJUI3JUUzJTgzJUE3JUUzJTgzJUIzJTVEJUU0JUI4JTg5JTI4JUU1JThEJThEJTVFbyU1RSUyOSVFNSU4RCU4RCVFMiU4NiU5MCVFMyU4MSU5MyVFMyU4MSU4NCVFMyU4MSVBNCVFMyU4MSVBRSVFMyU4MSU5MyVFMyU4MiU4QyVFMiU4NiU5MiVFNSU4RCU4RCVFMyU4MiU5MiVFNSU5QiU5RSVFMyU4MSU5NyVFMyU4MSU5RiVFMyU4MSU4NCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9MTQ4ZGY4NzZmMmIxZjI5NDczNzk5ZjNhNGYyMmY4YTY%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwbWFtZV9oYXNoYmlsbCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NDliN2YwMGYxY2U3YjJkMjQ3MWU2MWFhNzAyMDRiNzQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dca4f722d3d3b2b4409c64e2c661dbfb7)
