なんでCSSすぐ死んでしまうんFrontrend in Kanazawa -（2014年10月18日開催）で使用したスライドです。 http://labo.dmm.com/frontrend/
pure CSS DNA
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
第51回html5とか勉強会行った #html5j - pirosikick's diary
第51回 HTML5とか勉強会 - connpass パフォーマンスに関するWeb標準についてとか、Web Animation APIとかは知らなかったのでちゃんと追わないと。。。 Chrome Dev Toolsの使い方とか、やらねばやらねばと思いつつも、FluxとかRact.jsとか、 ものを作るために必要な技術の勉強を優先してしまっているので、 会社で勉強会開くとか無理やりでも時間作らないとなーと思いました。 以下、メモ ブラウザのパフォーマンスを限界まで高める、HTMLコーディングの考え方 ブラウザのパフォーマンスを限界まで高める HTMLコーディングの考え方 from Hiroshi Kawada ブラウザのパフォーマンスを限界まで高める HTMLコーディングの考え方 川田寛さん NTTコムウェア株式会社 @kawada_hiroshi HTML5expoerts.jpとかに書い
Apple zoom out effect - CodePen
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,800); body { color: #333; font-family: Open sans; } h1 { position: fixed; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); width: 100%; text-align: center; font-size: 52px; z-index: 999; color: rgba(255, 255, 255, 0.3); } .mac { height: 613px; width: 764px; margin: 1340p
MediumのCSSはこの上なく最高！ | POSTD
自分は常に最高であれって思っている。最高の香りを身にまとい、最高の振る舞いをする。ごみ1つ捨てるのだって、ほかの誰よりイカしてなきゃ。 ―Lil Wayne ずっと長いこと恥も外聞も知らずに、MediumでCSSについて執筆しようと思っていました…。 それからどうなったって？ 違うことをやっていた？ 何てこと、どうやったら同じことができるかって？ やり方を教わりたいって？ これから書くことは私たちのCSSについての覚書で、これまでに歩んできた道のりと現在のCSSについて述べています。 始まり（これまでの道のり） だいたい2年ほど前、私はソフトウェアアプリケーション開発と（皆さんが読んでくれているといいのですが） medium.com に取り組むためにObvious Corp.に加わりました。 その時、Mediumは、すでに一連の”スタイル更新”を行っていました（ スタイル更新とは デザイナ
Glitch Effect on Text / Images / SVG | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It’s bonafi
Centering in CSS: A Complete Guide | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. Centering things in CSS is the poster child of CSS complaining. Why does it have to be so hard? They jeer. I think the issue isn’t that it’s difficult to do, but in that there so many different ways of doing it, depending on the situation, it’s hard to know which to reach fo
uilang
a minimal, ui-focused programming language for web designers clicking on ".try-it" toggles class "hidden" on ".info-box" Try It Getting Started Insert uilang.js in your page, write some uilang as shown above in a simple <code> element and use CSS to show, hide and animate things. Download 1KB Build Interfaces Create popovers, tabs, galleries, overlays and more using a language specifically designe
CSSでblock要素を上下左右中央寄せにする、イマドキの方法。 | バシャログ。
Backjoyを買ってみたらほんとに腰が楽なminamiです。 CSSで要素を上下中央寄せする方法は古くから色々と試されてきました。 今回は海外のサイトで知って目から鱗だった方法をご紹介します。 基本的な設定 上下左右中央寄せしたい要素に以下のCSSを設定します。 position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 任意の値 height: 任意の値 これだけ。これだけで親要素に対しての上下左右中央寄せを実現できます。 追記： 親要素にはposition: absolute;かposition: relative; を設定してください。body に対してセンター寄せしたい場合はそのままでOKです！ 今までtop とleft の値を50%にとって、要素の高さと幅の分だけマイナスのmarg
CSSの詳細度をうまく操る - ワザノバ | wazanova
http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/ 1 comment | 0 points | by WazanovaNews ■ comment by Jshiike | 約4時間前 Harry Robertsがブログで、CSSのプロジェクトをうまくスケールさせるためには、詳細度の影響をうまく抑えて、メンテナンス性を高めることがポイントだと解説しています。 どれだけ思慮深くソースの順や継承関係を整理しても、詳細度がトリガーになった上書き起きると、それまでの努力が台無しになる。詳細度のタチが悪いのはオプトアウトできないこと。 であるが、その悪影響をうまくコントロールする策としては、 CSSにおいてセレクタとしてIDは使わないこと。クラスを使うことを上回るメリットはない。そもそも、IDでできることはクラスで
游書体をCSSで指定しよう - Qiita
はじめに 2017/01/20現在、挙動のテストが追いついていないので、このページを訪れる人に役立つと思われるリンクを置いておきます。 https://speakerdeck.com/tacamy/modanri-ben-yu-huontozhi-ding https://rxon.now.sh/crossPlatformYu.md 以下は2013年11月の情報なので参考にしないでください(その間にChoromeがDirectWriteに対応してnameテーブルの参照メタデータが変わったりしていて、設定すべきfont-family値が変わっていることが大きな要因です)。 序文 Windows8.1とOS X Mavericksのリリースが開始されました。 Windows8.1ではRC版にインストールされていた游ゴシックに加えて、游明朝もインストールされています。 OS X Maverick
Dev.Opera — Everything You Need to Know About the CSS will-change Property
Everything You Need to Know About the CSS will-change Property IntroductionIf you’ve ever noticed “that flicker” in WebKit-based browsers while performing certain CSS operations, especially CSS transforms and animations, then you’ve most likely come across the term “hardware acceleration” before. The CPU, GPU, and Hardware AccelerationIn a nutshell, Hardware Acceleration means that the Graphics Pr
Single Element CSS Spinners
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Hello Halloween
2014-09-09-performance-in-css-hikalab-yuya-saito.pdf
WordPress › Error
Blog - LINE ENGINEERING
モダンCSS設計の解説サイトまとめ - Qiita
CSS Regions で計算をする
イマドキCSS設計
