[B! CSS][calc] sh19eのブックマーク

Fun Tip: Use calc() to Change the Height of a Hero Component | CSS-Tricks

The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between the two sizes. We had a jQuery solution for this in Fit Text (meant of headings, of course) until the calc() function was shipped giving us a pure CSS solution. p { font-size: calc(16px

sh19e 2018/11/14

リンク

Between The Lines | CSS-Tricks

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Media queries are great for changing values in sudden snaps at different screen sizes. But, combining the power of calc() and viewport units like vw and vh , we can get an awful lot of fluidity across our layouts. For this we’ll use a technique called linear interpolation. Linear interpolati

sh19e 2017/05/14

リンク

CSS で計算（四則計算）が行える calc() 関数を使ってみよう

CSS プロパティに指定する値を計算式で書くことができる仕様、calc() 関数について、具体的なサンプルソースをそえて解説してみたいと思います。 CSS の calc() 関数は、CSS プロパティに指定する値を計算式で書くことができる仕様です。ちょっと前に Firefox 48 が、この calc() 関数の入れ子表記に対応した件で下記のような記事を書いたのですが、その時参考にリンクを張ろうとした、過去に calc() 関数についての解説を書いた記事がもう6年も前の記事で、さすがに古すぎるということでリンクを張れなかったんですが、いい機会なのでちょっと書き直してみます。 Firefox 48 は CSS calc() 関数の入れ子に対応、CSS カスタムプロパティとの併用がより便利になお、上記記事でも書いたとおり、calc() 関数は現時点で IE （IE11）や Edge を始め

sh19e 2016/05/23

calc
CSS

リンク

Ayke van Laethem – Fix 'jumping scrollbar' issue using only CSS

When centering a page with CSS like margin: 0 auto;, there's a small gotcha: the page will 'jump' a little on certain browsers when navigating between short and long pages. This is because the scrollbar gets hidden with short pages and is shown again with longer pages, which makes the page move a little horizontally. The classic fix for this is the following css: This makes the scrollbar always ap