See the Pen centered gap in navigation by Martin Blase (@mblase75) on CodePen.
A site I recently built had a relatively unique design: the top navbar was split into two, with the logo was centered in the space between them. Easy enough, except for two things: (1) this was being built in WordPress, which doesn’t like putting logos in the middle of a list of menu links, and (2) the site was being built responsively, and the mobile design had the usual logo-on-left, hamburger-menu-on-right header.
A short search on StackOverflow came up with a couple of answers, but the most elegant in my opinion used a combination of
:nth-last-child to detect when an element was in the center (or near the center) of a group of siblings.
So, I wanted to select only the first element after the halfway point in an even-numbered list.
:nth-child(3):nth-last-child(2) would identify the third element in a list if and only if that list had four elements. Similarly,
:nth-child(4):nth-last-child(3) would identify the fourth element in a six-element list. By using SCSS to generate these in a loop, I could target all possible middle or just-past-the-middle elements with only few lines of code.
But, you may ask, why that particular element? Well, by using flexbox to display the entire navbar in a row, I could target the center-most list item and add
margin-left: auto to put all the available whitespace to the left that one element. This would leave a large gap on all browsers above a certain width (targeted with responsive media queries, naturally) in which I could absolutely position the company logo. By adding both
transform:translateX(-50%) to that logo, I could center it perfectly within the header.
See the Pen pure HTML/CSS star rating widget by Martin Blase (@mblase75) on CodePen.
I love pure CSS solutions to complex design problems.
Methods for Contrasting Text Against Backgrounds
This was an interesting little problem to solve: How do we make a column of text display on top of an angled background color? Better yet, how do we cut a corner out of the text to make it fit better?
The answer to the first problem was comparatively straightfoward: two nested blocks, one rotated 45 degrees down and the other rotated 45 degrees right back. The second problem was trickier, but can be solved if you’re using a browser that supports CSS Shapes.
In the spirit of New Earth USA, here’s some minimalist crop rows in 3D CSS.
Let’s look at how this is built. Continue reading 3D CSS crop rows
Only suitable for modern browsers, naturally.
Of course, you have to start with the traditional spinning cube. It’s practically the “Hello World!” of 3D animation:
That’s the easy part. The hard part is using equilateral CSS triangles to build a spinning octahedron:
And then pulling together even more trigonometry to build an icosahedron:
Which was, while confusing at times, a surprisingly fun puzzle to solve.
Seriously, how did I never know about this until today?
An invisible, “soft” hyphen. This character is not rendered visibly; instead, it suggests a place where the browser might choose to break the word if necessary. In HTML, you can use
­ to insert a soft hyphen.
A couple of pure (mostly) CSS widgets/toys I came up with as part of an actual project today.
Continue reading Fun with CSS
Most browsers won’t print background colors, and print-only CSS can (or should) be set to force all text to be black so it looks good on a white background. But what about images? What if you have a logo with white text and a transparent background that’s normally displayed over a dark background? Webkit browsers support the
-webkit-print-color-adjust: exact style, but that still leaves out Firefox. Continue reading force browsers to print background colors of elements