Ever since we've had responsive images we've been able to add media queries to control the conditions that will trigger a match for a specific child element. But we haven't been able to do the same thing with videos. We have to make a good guess and hope that the videos we send down the wire are small enough that they won't slow down user experiences on mobile or consume large chunks of a user's data plan. The first example uses two source elements: The first one will match windows smaller than 599px The second one will match otherwise and...
Duotone is a graphic design technique that makes for contrasting graphics that can be combined with text and other CSS effects. This post will look at what are duotone colors and how to create duotone colors in CSS to use with images. How To Create Duotone Colors in CSS? The CSS portion of the process consists of three layers: A base layer layer1 with a background image grayscale and brightness CSS filters Two 2 layers layer2 and layer3 Each with a background color and mix-blend-modehttps://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode to blend the layer with the other layers css .layer { position: absolute; width: 100%;...
If you use web.dev or MDN, you may have seen blocks indicating baseline availability like those in Figures 1 and 2. !Baseline message as shown on web.devhttps://res.cloudinary.com/dfh6ihzvj/image/upload/v1717014095/webdev-baselinev0be1b.png !Baseline message as it appears on MDNhttps://res.cloudinary.com/dfh6ihzvj/image/upload/v1717014095/mdn-baselineolvxqk.png So what does this mean? Web Platform Baseline baseline provides clear information about browser support for web platform features. It gives developers clear information about which web platform features are ready to use in your projects today. The core browsers used to determine baseline support are: Chrome desktop and Android Edge Firefox desktop and Android Safari macOS and iOS There are two stages of feature baseline...
Even after all these years, I've struggled to understand the difference between auto-fill and auto-fit values when used in creating grid layouts. The easiest way to create a grid of equal columns is to use the repeathttps://developer.mozilla.org/en-US/docs/Web/CSS/repeat function: css .grid { display: grid; grid-template-columns: repeat12, 1fr; } But this may cause each column to be smaller than we'd like it to be, especially on phones and other small form factor devices. To prevent this, we use the minmaxhttps://developer.mozilla.org/en-US/docs/Web/CSS/minmax function. Similar in intent to clamp, this function defines a size that is greater than or equal to the min value and...
Rather than using media queries to control the dimensions of an element, we can use the clamphttps://developer.mozilla.org/en-US/docs/Web/CSS/clamp to accomplish the same task with less code. According to MDN: > The clamp CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound. The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value. The first example uses CSS variables to establish the values for the default value scaler, min and max values. We then tell the browser to use 10vw as the value of the font...
There is an interesting discussion going on about masonry layouts and how they should be added to the web platform. This post will analyze the different proposals and then express an opinion as to which one I think would work best. Expressing the problem I'm not going deep into each proposal. You can read the posts and the current Grid Level 3 specification. It is important to understand the differences. In Help us invent CSS Grid Level 3, aka “Masonry” layouthttps://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/, Jen Simmons now from the Safari team presents their view of what masonry should look like and how it's...
This articlehttps://meiert.com/en/blog/april-24-is-js-naked-day/ made me think, again, about one of the eternal battles of the web: Graceful Degradation versus Progressive Enhancement but it also made me think about something new. I'm all for Graceful Degradation myself, but I also feel that both arguments miss the point. The post will, again, review the definitions of Progressive Enhancement and Graceful Degradation and will cover why I think we're all missing the point. Definitions The definitions for these terms haven't changed much over the years but it's important to bring them back to the front to have a context for the following section. Graceful...
There are times when we may want to style content differently based on whether the browser has enabled Javascript or not. This is different than using Javascript to detect whether a script has run or not, this technique will only change the UI where necessary. The technique The technique is simple: We use the @media at-rule with scripting as the property and one of the two valid values for the media query: enabled and none. When using scripting: enabled, we can use the technique to progressively enhance the UI by adding CSS to elements where appropriate. css @media scripting: enabled...
text-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow allows for interesting effects on text. The property takes two or three values with an optional color as the fourth value offset-x and offset-y Required : These values specify the shadow's distance from the text. : offset-x specifies the horizontal distance; a negative value places the shadow to the left of the text. : offset-y specifies the vertical distance; a negative value places the shadow above the text. : If both values are 0, the shadow is placed directly behind the text, although it may be partly visible due to the effect of blur-radius. blur-radius Optional. : The higher...
In developing a card with box-shadowhttps://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow I realized that it's harder than I remembered so I decided to take another look. Box shadow takes two, three or four parameters. If two values are specified, they are interpreted as offset-x horizontal offset and offset-y vertical offset values. : Negative offset-x value places the shadow to the left of the element. Negative offset-y value places the shadow above the element. : If not specified, the value of 0 is used for the missing length. If both offset-x and offset-y are set to 0, the shadow is placed behind the element and may...
