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


25 bookmarks. First posted by flov 10 weeks ago.


complicated demo of using css calc to resize type or images for different window widths, instead of using media queries
webdesign  web  design  scale  responsive  fluid  proportion  aspect  ratio  css  calc 
7 weeks ago by piperh
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 FitText (meant of headings, of course) until the calc() function was shipped giving us a pure CSS solution.
fridayfrontend  css  cssbasics  calc  layout 
9 weeks ago by spaceninja
I'm a big fan of using the lock method for most typography. It provides you the ability to gracefully scale your type with the viewport, but not to go too small or too big. This article continues that exploration into hero modules
newslettered  334  tutorial 
9 weeks ago by justinavery
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 FitText (meant of headings, of course) until the calc() function was shipped giving us a pure CSS solution.

p {
font-size: calc(16px + (24 - 16)*(100vw - 400px)/(800 - …
The post Fun Tip: Use calc() to Change the Height of a Hero Component appeared first on CSS-Tricks.
Article  calc  fluid  type 
10 weeks ago by inxilpro
flexible text size
css  responsive 
10 weeks ago by dalton
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
10 weeks ago by simps
»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 FitText (meant of headings, of course) until the calc() function was shipped giving us a pure CSS solution.«
webdesign  css  tutorial 
10 weeks ago by flov