Tag: CSS
Responsive, JavaScript-Free Masonry Layouts with CSS3 Columns

I recently needed to create a number of masonry layouts for a WooCommerce website I’m building for a friend. I didn’t want to resort to jQuery, and that’s how, at long last, I found CSS3’s columns property. It lets you do CSS-only layouts that look like this:
Browser-Relative Heights with CSS3 Viewport Percentage

In the first of a few “Whaaaat I had no idea CSS3 did that” posts from me: You can set elements to be a percentage of the height of your browser window!
How to Customize the CSS on Your WordPress Site

WordPress 4.7, which launched on December 6, 2106, makes customizing the CSS on your site a whole lot easier. Easier enough that I think it’s worth an explanation. So that’s the topic of this Quick Guide. If you want to know even more about the cool new developer-relevant features of 4.7, check out Fred’s post from Tuesday.
Three This-Changes-Everything Features in WordPress 4.7

Three major changes in WordPress 4.7 jump out as having the power to significantly transform how I do my work every day.
CSS Wildcards for More Tamper-Proof Post Content Styling
I’m building a client site, and I wanted to write a couple of CSS rules:
What Looks Amazing in WordPress 4.7 Beta 1
If you’ve been wanting to get your hands on WordPress 4.7, you can now get the Beta 1 version from wordpress.org. The feature list is looking really spicy. Standouts include:
Fixing the Gaps in inline-block
If you need to line HTML elements up horizontally in CSS, display: inline-block is a great solution that comes with a lot less baggage than float.
How to Create a Text Outline in CSS
Sometimes you need an outline around your text. A recent project required me to place white text on a multicolored image background, so giving that text a black outline was important for readability.
jQuery Smooth Scrolling from CSS-Tricks
As it says at the top, “Performs a smooth page scroll to an anchor on the same page.” The beauty of this code snippet is that it just works, everywhere across the site: anywhere there’s a link to an anchor on the same page, that becomes a smooth JavaScript scroll rather than a choppy instantaneous jump.
Patching Holes in CSS with jQuery: A Practical Example

Today we look at a real-world problem that CSS can’t easily solve, and examine the jQuery fix.