From
smashingmagazine.com
Email Address
newsletter@smashingmagazine.com
Sent On
Tue, Jan 3, 2023 03:09 PM
Email Preheader Text
With CSS skewed highlights, CSS trees, CSS overlaps and shiny new CSS techniques. Issue #386 •
HTML
With CSS skewed highlights, CSS trees, CSS overlaps and shiny new CSS techniques. Issue #386 ⢠Jan 23, 2023 ⢠[View in the browser]( ð¨ [Smashing Newsletter]( Namaste Smashing Friends, 2023 is here, a new year with new hopes, new goals and new experiences. And as weâre diving into the new year, weâd like to send you a lot of positive energy and optimism in hopes that 2023 will bring us all peace, stability, calmness and plenty of wonderful and unforgettable memories of that year. Good memories, with a lot of fun, laughter, and human kindness shared with your family and friends. Itâs about time. In this very first edition of the newsletter this year, weâd love to start with something thatâs always been very close to our hearts: CSS. Below youâll find a few useful CSS techniques that hopefully will help you resolve some of your UI troubles. And perhaps as a good start to the year, letâs begin with an [act of kindness](. Send a word of support to everybody who needs it, send a kind message or make somebody smile, or tell them how much you love and appreciate them. And: donât forget to reserve time for yourself in your calendar before it gets blocked with all the meetings. Have a good one, everyone! — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Skewed Highlights With CSS So you need to design a âhighlighterâ effect using only CSS while adapting to text changes. How would you go around building it? In his tutorial on [Skewed Highlight]( Vadim Makeev describes a simple way to make it work. [Skewed Highlights With CSS](
[Skewed Highlights With CSS]( Vadim suggests using the element, with side angles achieved with CSS gradients: left and right rectangles with a diagonal gradient and a part in between with just a fill. And if the text wraps onto multiple lines, we can use box-decoration-break: clone, so every line of the element is decorated like its own element. Solved! And it looks fantastic! (vf) --------------------------------------------------------------- 2. Tree Views In CSS We all had to create a tree view at some point: a collapsible list with nested accordions resembling a file folder structure. Typically we would use JavaScript to make it work, but as it turns out, thatâs really not necessary. [Tree Views In CSS]( In [CSS Tree Views]( Kate Rose Morley provides a tutorial on how to make the tree view work with a few simple nested lists and
/
inside of each list item. Screen readers will understand the tree view as lists nested inside disclosure widgets, and the standard keyboard interaction is supported automatically. Et voila! (vf) --------------------------------------------------------------- 3. Overlaps In CSS So your designer wants stuff to overlap. Perhaps itâs a few boxes that belong together, but one needs to live on top of another. Or maybe you have boxes stacked atop boxes next to boxes nested within boxes. Thatâs the trouble that Hui Jing has run into. And she decided to figure it out once and for good. Overlaps In CSS In [her article]( Hui Jing explored various options to get things just right, from negative margins and translation using transform to absolute positioning and CSS Grid. In the end, the easiest way to reason with layout seemed to be CSS Grid, with each item not âdisturbingâ others on the grid, and we can use the box-alignment properties to adjust them within their allocated spaces. (vf) --------------------------------------------------------------- 4. Upcoming SmashingConfs And Workshops Every year we bring bright and kind people who care about the web to share what theyâve learned. For 2023, we canât wait to welcome you to [SmashingConf Freiburg 2023]( (Sep 4â6, 2023) with adventures into design systems, accessibility, CSS/JS and interface design patterns. [Get your early-bird ticket!]( [Smashing Online Workshops]( Weâre also very excited about our very first [SmashingConf Front-End @ SF 2023]( (May 23â26, 2023), entirely focused on cutting-edge front-end. From accessibility and advanced CSS to JavaScript gems and web performance. With a dash of Tailwind, Next.js and TypeScript. [Get your early-bird ticket!]( [Smashing Online Workshops]( As always, hereâs an overview of our [upcoming workshops]( - [Successful Design Systems]( Workflow with Brad Frost. Jan 10–24 - [Designing For Complex UI Masterclass]( UX with Vitaly Friedman. Jan 19 – Feb 2 - [New Front-End Adventures, 2023 Edition]( DEV with Vitaly Friedman. Feb 8–22 - [Universal Principles of Typography Masterclass]( UX with Elliot Jay Stocks. Mar 2–16 - [Interface Design Patterns UX Training]( UX with Vitaly Friedman. Mar 10 – Apr 7 - [Smart Interface Design Patterns (Videos)]( UX 9h-video + UX training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. CSS Blend Modes Blending modes are a way of creating new colors based on two input colors, a foreground color, and a background color. There are [plenty of options out there]( but how exactly would we apply them in CSS? [CSS Blend Modes]( In his post, Scott Vandehey shows how to create some nifty effects with CSS blend modes by using radial gradients, a layered breakdown approach for filters, and then applying mix-blend mode to the result. Michelle Barker highlights more visual effects in [CSS Halftone patterns]( too. (vf) --------------------------------------------------------------- 6. Twelve Days Of Web A celebration of CSS has just wrapped up on [12 Days of Web](. Itâs a lovely project curated by Stephanie Eckles every year to highlight the wonders of CSS. This year, there is quite a menu: from new viewport units and CSS image() to cascade layers, CSS scroll snap, :has() and CSS subgrid. 12 Days Of Web All articles come with ready-to-use demos and detailed tutorials, and Stephanie also [reviews]( exciting additions to CSS that became fully or nearly cross-browser in 2022: container queries, :focus-visible, accent-color, overscroll-behavior, and (almost there!) subgrid! The article also highlights references to articles to get started. What a time to write CSS! (vf) --------------------------------------------------------------- 7. CSS Style Queries With container queries available in the browsers already, we might settle down and get used to replacing media queries with container queries and call it a day. But not so fast. Recently, the Chrome team released experimental support for a new proposed CSS spec and style queries. And it might be quite a game-changer, too. [CSS Style Queries]( CSS style queries allow us to query a container based on its style rather than just its size, e.g. we could check if the container is a Flexbox and then style the child based on that. Or we could adjust the color of a headline if it lives on top of a dark photo. In [CSS Container Style Queries]( Ahmad Shadeed goes through a few use cases and shows how to use style queries. There are plenty of fine details covered by Una Kravets in her article [Style Queries]( too. Browser support? Currently still considered to be experimental and is only implemented in Chrome Canary. (vf) --------------------------------------------------------------- 8. CSS Mesher Who doesnât like a lovely gradient? Or perhaps even a palette of gradients that would make up a beautiful mesh gradients mess, only with CSS? [CSS Mesher]( allows you to choose a randomly generated CSS mesh or finetune the colors to create a perfect custom one. [CSS Mesher]( And if you need a few more generators for all your visual needs, [SVG Generators]( and [CSS Generators]( are handy little round-ups we prepared a while back, featuring everything from doodle patterns and text warping to perfect shadows and funky border-radii! Ones for the bookmarks! (vf) --------------------------------------------------------------- 9. New On Smashing Job Board - [UX/UI Web & Mobile Application Designer / Digital Designer]( at Air Line Pilots Association (West Mclean, VA) - [Frontend Engineer]( at Alasco GmbH (Munich, Germany) - [Senior Designer]( at DUMBO (Cologne, Germany) --------------------------------------------------------------- 10. Recent Smashing Articles - [The State Of Usability In 2023 ð]( - [Opening The Doors To 2023 (January Wallpapers Edition)]( - [Fluid Typography: Predicting A Problem With Your Userâs Zoom-In]( - [A Guide To Command-Line Data Manipulation]( - [Deploying CSS Logical Properties On Web Apps]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- Thatâs All, Folks! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time! --------------------------------------------------------------- This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris LjeÅ¡njanin (il). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( ⢠[Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( ⢠[update preferences]( ⢠[view in your browser](
EDM Keywords (124)
zoom
year
written
wrapped
would
work
word
wonders
wonderful
within
welcome
web
way
wait
user
use
usability
understand
tutorial
turns
trouble
top
time
tell
support
subgrid
style
state
start
something
shows
share
send
run
right
resolve
reason
really
ready
reading
quite
query
problem
prepared
point
plenty
perhaps
part
palette
overview
options
optimism
newsletter
needs
need
much
might
menu
meetings
maybe
make
love
lot
lives
live
like
learned
item
implemented
hopes
hopefully
highlight
help
headline
guide
grid
gradients
generators
friends
forget
flexbox
finetune
find
filters
fill
figure
family
experimental
excited
everybody
end
edited
doors
diving
design
decided
day
dash
css
create
container
colors
color
close
choose
celebration
care
call
calendar
browser
boxes
begin
articles
appreciate
apply
another
always
also
almost
adventures
adjust
adapting
act
accessibility
2023