Fun With Line-height! | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The line-height property in CSS controls the space between lines of text. It is often set in a unitless value (e.g. line-height: 1.4;) so that it is proportional to the font-size. It’s a vital property for typographic control. Too low and lines are awkwardly squished together; too high and l
The CSS At... | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There was a fun little trend toward the end of last year where companies were posting their approach to CSS. The tools involved, the methodologies, the thinking, and the data and numbers behind it. Mark Otto kicked it off, best I can tell. I mostly just wanted to post a list of them here, si
Designing For Print With CSS — Smashing Magazine
Print style sheets is the main thing that comes to mind if you mention printing with CSS. But CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all. In this article, Rachel Andrew will take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. She’ll explai
SUIT CSS: style tools for UI components
Introduction SUIT CSS is a reliable and testable styling methodology for component-based UI development. A collection of CSS packages and build tools are available as modules. SUIT CSS plays well with React, Ember, Angular, and other component-based approaches to UI development. Scope styles The SUIT CSS naming convention helps to scope component CSS and make your widgets render more predictably.
:checked擬似クラスの隣接セレクターのWebkit系での挙動とか
:checked擬似クラスはCSS3で追加されたセレクターで、ラジオボタンやチェックボックスがチェックされた状態を指定する擬似クラスです。 See the Pen test :checked pseudo class by You Sakai (@webcre8) on CodePen. このデモはinput要素に隣接したラベルに、さらに隣接した非表示になっている要素をチェックの入ったときにのみ表示させるというものです。これがFirefoxやChrome（ちなみにMac）では動くんですが、iPhoneのSafariとChromeでうまく動きませんでした。Android（4.4）はいけました。 原因 これはどうやらWebkitのバグであるらしいです。FirefoxはGecko、ChromeはBlinkですが、iOSのSafariはWebkitですね。iOSはChromeもWebkitなので全
CSS-only Weather App Concept
Dribbble rework of an original shot by Sergey Valiukh....
Chrome/Safariではtrにbox-shadowが効かない #CSS珍百景
CSS珍百景 Calendar 2014 3日目の記事です。 日をまたいでしまいましたが、書きます。すいません。 今年の9月ごろにChromeとSafariで発現した珍百景です。 Chrome/Safariにおいて、tr要素に対し、box-shadowプロパティを指定した時、それが適用されないというものです。 ちなみに後述しますがFirefoxではちゃんと適用されます。 ということで再現してみた以下の様なHTMLとCSSでこの現象は再現できます。 The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. /*css*/ table { box-shadow: 0 0 10px black; padding: 10px; } tr { box-shadow: 0 0 10
MUI: The React component library you always wanted
Ready-to-use foundational React components, free forever.
Creating 3D worlds with HTML and CSS
Last year I created a demo showing how CSS 3D transforms could be used to create 3D environments. The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection. This post documents how I did
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
The Anti-hero of CSS Layout -
Anti-hero - a central character in a story, movie, or drama who lacks conventional heroic attributes. The topic of table usage in layouts is a sensitive one. In general, web developers consider table-based layout a taboo. Although the reasons against it are well-documented, most developers are unable to provide a sound background for decrying table-base layout except for, "tables are bad". The mom
before疑似要素のcontentの文字化け回避
beforeやafter疑似要素内でcontentプロパティを使ったとき文字化けしないよう変換するコンバータを作ってみました． :before疑似要素のcontentに日本語や記号などを使用した際にたまにブラウザで文字化けを起こしてしまうことがあります．Safari特有のバグなのか何なのか分かりませんが，最初は大丈夫だったのにCSSをいじっている間に文字化けし始める事態に遭遇しました． Safariでのcontentプロパティが文字化けするバグの対策を参考にしたところ，回避するにはHTMLで使用できるエンティティ文字を16進数に直したものを使えば良いみたいです．そこでBootstrapのformsを試してみるついでに直接変換するコンバータを作ってみました． フォームに文字を入れてConvert!で変換できます．日本語も大丈夫なはずです．チェックボックスをオンにするとcontent:"…"
リガチャー(合字)を使うとき必要なCSSプロパティーの解説
どちらかというとこっちが本題だったんですが、文章が長くなる感じだったんで分けてみました。リガチャーアイコンフォントを使うにはまずはWebフォントの指定を知ってから、という感じですね！というわけでWebフォントのCSS指定について知りたい人はWebフォントのCSS指定2014年度版とこれまでの歩みを読んでみてください。 リガチャーアイコンフォントの実例 もともと私がリガチャーアイコンフォントというものを知ったのは@fladdictさんのアイコンを合字Webフォントとして扱うSymbolSetが革新的にステキ | fladdictという記事でした。ここで紹介されたSymbolsetを知ったときはかなりの衝撃を受けました。 そして@kudakurageさんが制作したLigature Symbolsなどの登場もあり、アイコンフォントには実装の多様性が生まれたように思います。 以下はデモです。 Se
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Chrome CSS Bug That Crashed Our Site – Hacking UI
https://bugs.chromium.org/p/chromium/issues/detail?id=174583
なんでCSSすぐ死んでしまうん
CSS Triangle Generator | Built in AngularJS
Equating Color and Transparency | Viget
BEM modifiers: multiple classes vs @extend