CSS Background-repeat: Round

CSS Background-repeat: Round

davidwalsh.name davidwalsh.name2 years ago in #Funny Love54

The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat: round. background-repeat: round repeats a background image without clipping! .my-element { background-image: url(logo.png); background-repeat: round; } Addy Osmani’s tweet beautifully depicts the effect of round: TIL CSS “background-repeat: round” https://t.co/sS9H9HmqQ6 ~ repeats background images without clipping ✂️ pic.twitter.com/R4rzDJ36R9 — Addy Osmani (@addyosmani) June 23, 2020 This background effect is really nice, as clipped backgrounds cheapen the look of any element! Recent Features Serving Fonts from CDN For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don’t work in Firefox or Internet Explorer (correctly so, by spec) though… Page Visibility API One event that’s always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back? Incredible Demos CSS Ellipsis Beginning of String I was incredibly happy when CSS text-overflow: ellipsis (married with fixed width and overflow: hidden was introduced to the CSS spec and browsers; the feature allowed us to stop trying to marry JavaScript width calculation with string width calculation and truncation.  CSS ellipsis was also very friendly to… dat.gui: Exceptional JavaScript Interface Controller We all love trusted JavaScript frameworks like MooTools, jQuery, and Dojo, but there’s a big push toward using focused micro-frameworks for smaller purposes. Of course, there are positives and negatives to using them.  Positives include smaller JS footprint (especially good for mobile) and less cruft, negatives…  » Read More

Like to keep reading?

This article first appeared on davidwalsh.name. If you'd like to keep reading, follow the white rabbit.

View Full Article

Leave a Reply