A small collection of useful CSS techniques and a quick reminder that print style sheets are still a thing.
![I totally forgot about print style sheets](https://cdn-ak-scissors.b.st-hatena.com/image/square/760353adaf9b9b3f6b14cc6b81d2fe4bf01aa45b/height=288;version=1;width=512/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F1200%2F1%2Aj62alEthWSrkEDXmTPVj4Q.png)
CSSでの色については単純な変数だけでは少し足らない。それはCustom Propertiesがあったとしても同じで、論理的に操作したいという欲求があるからだ。少し明るくしたいとか、ここはビビットにとか、補色から30度近づけたい(Triad)とか、計算できるものを計算で生成できると良いわけだ。そこで明るさや鮮やかさをベースに色を定義できるhsl()関数とcalc()関数を組み合わせ、さらにそれをCustom Propertiesを通して合成することで色を生成するというアイディアを考えた。既にChrome 54やSafari 10では実現可能だ。 Demo: Generating Colors hsl()そのものを計算することはできないので、色相・彩度・明度をそれぞれ定義し、それを計算するという方針になる。最終的にCustom Propertiesを駆使してhsl()に合成している(本当はル
入社して僕が最初にアサインされたのがこのプロジェクト。 サービスをスタートさせたのは今年の2月。最初は外注でとりあえずサービスを作ることに集中していたらしい... その結果、どのスタイルがどこに作用するか全く分からないCSSの魔境でした。 これでは簡単なページを追加するにも一苦労。 そこで、20,000行あるCSSファイルのリファクタリングに踏み切りました。 当時の問題 スタートアップのサービスなのでもっと機能を追加したり、変更したりしたいと言う要望は日に日に大きくなっていました。 一方で、実際に機能を作ったとしてもそれを view に反映させるのも日に日に苦しくなっていました。 僕たちを苦しめていた理由は以下の通りです。 どこにスタイルが作用しているか分からないので、CSSを安易に変更ができない。 新しい部品を付け足す時にCSSの影響範囲を考慮しなくてはならず、プロダクトのUI変更が困難
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Let’s get into the spirit a little bit this year with some Halloween themed posts! I’ll kick it off with some CSS selectors FROM BEYOND THE GRAVE. Er. CSS selectors that will CHILL YOU TO THE BONE. OK maybe not, but they will be at least kinda weird. The Lobotomized Owl Selector Heydon Picke
CSS の作業量について考えたことはありますか?1 つの属性を変更すると、突然ウェブサイト全体が別のレイアウトで表示されます。これは魔法のようなものです。私たちウェブ開発者のコミュニティはこれまで、 その魔法を目の当たりにし、観察できただけです。独自の魔法を考案したい場合は どうすればよいでしょうかマジシャンになりたいとしたら? Houdini に登場! Houdini のタスクフォースは Mozilla、Apple、Opera、Microsoft、HP、Intel、Google のエンジニアが連携し、CSS エンジンの特定部分をウェブ デベロッパーに公開しています。このタスクフォースは、W3C に承認されて実際のウェブ標準になることを目指して、ドラフトのコレクションに取り組んでいます。チームはいくつかの上位レベルの目標を設定し、それを仕様のドラフトに変換し、それからサポートの下位レベルの
CSS3 is the latest evolution of the Cascading Style Sheets language and aims at extending CSS2.1. It brings a lot of long-awaited novelties, like rounded corners, shadows, gradients, transitions or animations, as well as new layouts like multi-columns, flexible box or grid layouts. Experimental parts are vendor-prefixed and should either be avoided in production environments, or used with extreme
May 30, 2022The Cicada Principle and Why It Matters to Web Designers (updated) I’m going to start off on a seemingly wild tangent today, but bear with me — I promise I do have a purpose. A few years ago, I read an interesting study on the lives of periodical cicadas. We generally don’t see a lot of these little guys as they spend the vast majority of their lives quietly tunneling away underground
Built for designing. Create fast loading, highly readable, and 100% responsive interfaces with as little css as possible. Modules can be altered, extended, or changed to meet your design needs. You shouldn’t need to write css everytime you want to build a new ui component. By learning the composable building blocks in tachyons, you can quickly start to build out interfaces while writing little to
CSS has been around for a long time — since 1994 depending on who you ask — and has become the de facto standard for styling websites. New specs (like the new CSS4 modules) keep adding cool functionality with animations, transforms, box-shadows, and a smattering of new units and selectors. Awesome stuff, but those aren’t the properties we’ll be discussing today. With all the hotness in the world o
I have been looking for a way to scroll down when clicking on a button that is located on top of a page using CSS3 only. So I've found this tutorial: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/ Demo: http://tympanus.net/Tutorials/SmoothTransitionsResponsiveLayout/ But it's a bit too advanced for my needs since I just want the browser to scroll down on
Serendipity Banksy adipisicing eiusmod banh mi sed. Squid stumptown est odd future nisi, commodo mlkshk pop-up adipisicing retro. Happiness Art party readymade beard labore cosby sweater culpa. Art party whatever incididunt, scenester umami polaroid tofu. Tranquillity Sint aute occaecat id vice. Post-ironic fap pork belly next level godard, id fanny pack williamsburg forage truffaut. Positivity Mi
Click on a pattern to expand Textareas are editable Browser support Submit a new one Github repo Enjoy! Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial
#circle { float: left; -webkit-shape-outside: circle(0, 0, 100px); -webkit-shape-margin: 5px; } これだけでOKです。shape-outside はそのdivの外縁となるシェイプを定義する。そしてshape-marginの設定はそのシェイプの周りのマージンを追加する。 ただしここで重要なポイント:float設定は必須です!なぜかというと、CSS Shapesはエレメントの「float area」を定義する仕様です。右か左にフロートしない限り、エレメントのfloat areaは無視されるのでShapesの設定が無効となる。 ちなみに、上記サンプルの circle(0, 0, 100px) の値はCSS Shapes仕様で定義される新しいものである。シェイプを定義する方法はいくつかあるけど、最も役に立
久しぶりにcssレイアウトでハマってしまった。 floatレイアウトは一般的なレイアウトとしていろいろとノウハウが溜まっているように思いますが、flex box layoutはまだまだ思いもよらない挙動をすることがありますね。 今回ハマったのは「flex box layoutで中に長いテキストなどを含む幅可変要素のレイアウト」という一言にするとよくわからない感じですが… 要は2カラムレイアウトで、片方は固定幅、もう片方は可変幅の(幅いっぱいになるような)カラムレイアウトであり、可変幅の方の子要素として長いテキストを含んでいるもののレイアウトです。 単純に考えて↓こんな感じで書けば、1つ目の要素が幅100pxの固定になり2つ目の要素が残りをエリアの幅になると思うのですが、そうはなりません…。 <style type="text/css"> .flex { display: flex; wid
Why Cutestrap? Cutestrap is a progressive CSS Framework built with modern techniques and an eye towards the future with a simple API and robust customization options. Forms Form controls are unified in both their display and in their semantic markup. Because they are modified using only CSS, accessibility doesn't suffer. Your Name Cone Bowl Flavor Special Requests Add Sprinkles <form> <label class
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く