CSS background-repeat: round
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:
This background effect is really nice, as clipped backgrounds cheapen the look of any element!
![CSS @supports]()
Feature detection via JavaScript is a client side best practice and for all the right reasons, but unfortunately that same functionality hasn't been available within CSS. What we end up doing is repeating the same properties multiple times with each browser prefix. Yuck. Another thing we...
![Write Simple, Elegant and Maintainable Media Queries with Sass]()
I spent a few months experimenting with different approaches for writing simple, elegant and maintainable media queries with Sass. Each solution had something that I really liked, but I couldn't find one that covered everything I needed to do, so I ventured into creating my...
![New York Times-Style Text Selection Widget Using MooTools or jQuery]()
Aaron Newton made a great request to me last week: why not make my MooTools Documentation Bookmarklet function more like the New York Time's text selection widget. NYT's text selection widget listens for text selection and presents the user with a "search" icon...
![Fancy FAQs with jQuery Sliders]()
Frequently asked questions can be super boring, right? They don't have to be! I've already shown you how to create fancy FAQs with MooTools -- here's how to create the same effect using jQuery.
The HTML
Simply a series of H3s and DIVs wrapper...
