Grid by Example - Usage examples of CSS Grid Layout
The following examples include an image of how the example should look in a supporting browser, they each link to a page with more information about the technique being shown, code and a CodePen of the example. Unless otherwise noted these examples work in any browser supporting the up to date Grid Specification. They will not work in IE10 or 11. For page layout examples see a collection of page l
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！
これからのCSSはmargin禁止！？CSSグリッドレイアウトやコンポーネント指向なCSSについて、矢倉さんに聞いてきた！ 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 この記事は、9月24日に開催されたHTML5 Conference 2017に登壇したエキスパートに、お話されたセッションのトピックを中心に語っていただこうとういものです。セッションの内容をより深く理解する手助けになるだけでなく、本記事単体でも面白く読んでいただけることを目指しています。 今回お話を伺ったのは、ピクセルグリッドの矢倉眞隆さんです。 矢倉さんのセッション「まあまあ最近のCSSとつらくならないための書き方」に関するスライド資料は、こちらで公開されています。 インパクト大！CSSグリッドレイアウト概要 白石: では、まずは簡単に自己紹介をお願いできますか？ 矢倉: 昨年（2
CSS Guidelines (2.2.5) – High-level advice and guidelines for writing sane, manageable, scalable CSS
CSS Guidelines High-level advice and guidelines for writing sane, manageable, scalable CSS About the Author CSS Guidelines is a document by me, Harry Roberts. I am a Consultant Front-end Architect from the UK, and I help companies all over the world write and manage better quality UIs for their products and teams. I am available for hire. Follow me on Twitter or Hire Me Support the Guidelines CSS
【CSS】複数行でも3点リーダーをきかせる - Qiita
p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } まぁ普通に3点リーダーになりますよね。 複数行で3点リーダー Chrome・Safari でしか実装できませんが（今後はIEとかでも使えるようになる事を期待）下記のように書きます。 複数行での3点リーダー実装するために、 ”display: -webkit-box;” ”-webkit-box-orient: vertical;” 指定をします。 display属性を”box”とすることでフレキシブルボックス状態になり、 ”-webkit-line-clamp”で指定した行までを表示するようになります。 box-orientはそのフレキシブルボックスの並び方向を指定しverticalと指定する。 overflow: hidden;をスクロールバー対策と
Dev.Opera — CSS will-changeプロパティについて知っておくべきこと
はじめにWebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほとん
Interactive CSS Flexbox Generator · Loading.io
Flexbox Generatora quick flexbox playground for testing your css with flex layout tricks. Flexbox is quite useful nowadays but sometimes it's quite frustrating to test all attributes again and again everytime. Why not just having a nice, easy interface to bootstrap all these things up? Thus now we are here - a flexbox playground for on-demand CSS generation. We now use this every time when we need
Coloring SVGs in CSS Background Images by Noah Blon on CodePen
I love using SVG in CSS background images but it sucks that you can't alter the fill color easily within your CSS. Here are a few ways around that. SVG in CSS backgrounds Using SVG in CSS backgrounds allows you to use CSS's powerful background sizing and position properties. This makes sizing SVGs much simpler because the image easily scales to the size of your element. Plus you don't have SVG clu
iMessageの吹き出しみたいなグラデーション - Qiita
iMessageみたいに、スクロールしても複数の要素で固定されたグラデーションの背景をつけるものです。 小一時間悩みましたが、ものすごく初歩的なことでした。 .stack { display: flex; flex-direction: column; align-items: flex-end; .comment { font-family: sans-serif; color: #fff; padding: 1em; margin: .5em 1em; text-align: right; background: linear-gradient(-180deg, #2EB5FE 0%, #157EFB 100%) fixed top right; border-radius: 13px; } }
Documentation - Materialize
flash_on Speeds up development We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers. group User Experience Focused By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and an
CSSプロフェッショナルのためのTIPS - Qiita
CSS ProtipsというTIPS集があって、これ一応日本語訳が既にあるんだけど、露骨に機械翻訳で何言ってるのか全くわからないので全編日本語訳した。 あれ、あんまり変わってない気がしてきたぞ。 CSSの便利な小技・テクニックのまとめ Awesome CSSのプロフェッショナルになりたい人のためのTips集を紹介するよ。 CSS以外のAwesomeリストを探したいときは@sindresorhusをフォローしよう。 目次 テクニック サポート 翻訳 手伝いたい テクニック CSSリセット 異なるブラウザ間でスタイルの一貫性を保つには、CSSリセットが役に立つぞ。 NormalizeのようなCSSリセットのライブラリを使用するか、もっと簡単には以下のように書ける。
コードの臭い消し in CSS - Qiita
CSSの理想と現実 CSSはゆるいルールの上で書ける便利な言語です。しかし、どのようにでも書けてしまうだけに一定の良い習慣を実践していないと際限ない肥大化、詳細度地獄、ネスト地獄といったアンチパターンに陥ってしまうことがあります。 カオスになる前にコードの臭い(wikipedia)を嗅ぎ取って理解しやすく修正しやすい書き方を心がけていきたいですね。 スタイルの打ち消しを避ける まず心がけたいのが、一旦定義したスタイルをなるべく打ち消さないようにすること。 早すぎる最適化に注意 h2 { font-size: 2em; margin-bottom: 0.5em; padding-bottom: 0.5em; border-bottom: 1px solid #ccc; } .no-border { /* 打ち消し */ padding-bottom: 0; border-bottom: 0;
【CSS】ドット絵をぼやかさずに表示する
ドットキャラクターの様に小さなピクセルで描かれた画像をブラウザで表示すると、アンチェリアスがかかりぼやけてしまう Unityではピクセルパーフェクトをオンにするとドットをそもまま表示してくれる機能がありますね javascriptだけでドットキャラのゲームを作る場合はCSSでimage-renderingを指定すると切り替える事が出来ます 要素単位でもbodyに記述してもいいですね
CSS Animation - Free CSS tutorials and guides - CSS Animation
CSS animation articles, tips and tutorials. Level Up Your CSS Animation Skills Enrol and save 90% today CSS Animation Tutorials Parallax scrolling Scroll animations UI Animation in React Animating Links Create an animated scroll cue Transitions in space Build an awesome Hero Header Animating your hero header Why animate? Star Wars Stereoscopic CSS Spheres Portal CSS Buffer's loading animation WWDC
Basscss
Code with ConfidenceUsing clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code. No Side EffectsThings behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS. ComposableReusable, interoperable styles work like buil
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Griddy - CSS Grid System Education Tool
LLCFee
Radio Check Generater
http://azarashic.net/svg-animation-1/
CSSグラデーションで作った背景パターンのサンプル - NxWorld
Simpler CSS typing animation, with the ch unit • Lea Verou