Torry Harris Integration Solutions (THIS), is an advisor to enterprises worldwide in extending the power of digital access through integration. The company recently announced the launch of its product portal with new SaaS plans to ease the purchasing journey of customers.
A First Look at `aspect-ratio`
Oh hey! A brand new property that affects how a box is sized! That’s a big deal. There are lots of ways already to make an aspect-ratio sized box (and I’d say this custom properties based solution is the best), but none of them are particularly intuitive and certainly not as straightforward as declaring a single property.
So, with the impending arrival of aspect-ratio
(MDN, and not to be confused with the media query version), I thought I’d take a look at how it works and try to wrap my mind around it.
Shout out to Una where I first saw this and boy howdy did it strike interest in folks. Here’s me playing around a little.
Just dropping aspect-ratio
on an element alone will calculate a height based on the auto
width.
Without setting a width, an element will still have a natural auto width
. So the height can be calculated from the Aspect ratio and the rendered width.
.el {
aspect-ratio: 16 / 9;
}
If the content breaks out of the Aspect ratio, the element will still expand.
The Aspect ratio becomes ignored in that situation, which is actually nice. That’s why the pseudo-element tactic for Aspect ratios was popular, because it didn’t put us in dangerous data loss or awkward overlap territory when content got too much.
But if you want to constrain the height to the Aspect ratio, you can by adding a min-height: 0;
:
If the element has either a height or width, the other is calculated from the Aspect ratio.
So aspect-ratio
is basically a way of setting the other direction when you only have one.
If the element has both a height and width, aspect-ratio
is ignored.
The combination of an explicit height and width is “stronger” than the Aspect ratio.
Factoring in min-*
and max-*
There is always a little tension between width
, min-width
, and max-width
(or the height versions). One of them always “wins.” It’s generally pretty intuitive.
If you set width: 100px;
and min-width: 200px;
then min-width
will win. So, min-width
is either ignored because you’re already over it, or wins. Same deal with max-width
: if you set width: 100px;
and max-width: 50px;
then max-width
will win. So, max-width
is either ignored because you’re already under it, or wins.
It looks like that general intuitiveness carries on here: the min-*
and max-*
properties will either win or are irrelevant. And if they win, they break the aspect-ratio
.
.el {
aspect-ratio: 1 / 4;
height: 500px;
/* Ignored, because width is calculated to be 125px */
/* min-width: 100px; */
/* Wins, making the Aspect ratio 1 / 2 */
/* min-width: 250px; */
}
With value functions
Aspect ratios are always most useful in fluid situations, or anytime you essentially don’t know one of the dimensions ahead of time. But even when you don’t know, you’re often putting constraints on things. Say 50% wide is cool, but you only want it to shrink as far as 200px. You might do width: max(50%, 200px);
. Or constrain on both sides with clamp(200px, 50%, 400px);
.
This seems to work inutitively:
.el {
aspect-ratio: 4 / 3;
width: clamp(200px, 50%, 400px);
}
But say you run into that minimum 200px, and then apply a min-width
of 300px? The min-width
wins. It’s still intuitive, but it gets brain-bending because of how many properties, functions, and values can be involved.
Maybe it’s helpful to think of aspect-ratio
as the weakest way to size an element?
It will never beat any other sizing information out, but it will always do its sizing if there is no other information available for that dimension.
The post A First Look at `aspect-ratio` appeared first on CSS-Tricks.
PureCSS Gaze
Diana Smith with another mind-bending all HTML & CSS painting.
I love that these occupy a special place on the “Should I draw this in CSS?” curve. Things like simple shapes are definitely on the “yes” side of the curve. Then there’s a large valley where things get a little too impractical to draw that way, and using some other image format (e.g. SVG) makes way more sense.
Diana’s work pulls the curve back up to the “yes” side. Not only because it’s proof that CSS can be an amazing expressionistic art tool, but also from a performance standpoint — it’s only 2 KB of HTML and 10 KB of CSS.
Direct Link to Article — Permalink
The post PureCSS Gaze appeared first on CSS-Tricks.
10 Pro Tips for WordPress Customizing That Looks Professional
Are you trying to figure out how to make your WordPress site look professional with WordPress customizing? Read this article to learn more.
The post 10 Pro Tips for WordPress Customizing That Looks Professional appeared first on WPArena.
17 Tips for Designing with Type on a Photo
This post is originally published on Designmodo: 17 Tips for Designing with Type on a Photo
One of the best techniques to have in your toolkit is designing with type on and around images. But it can also be one of the toughest concepts to pull off successfully. You have to have the right photo, a …
For more information please contact Designmodo