Oddball

You gotta love when using percentages goes exactly as planned. In this post I'll go over exactly how to master positioning percentages to achieve those tricky pivots. With a deep breath and a firm grasp, you'll be prepared for the next time you see a crazy pivot requirement in your design. Kinda like this tricky love fest right here:

Model Family

All the examples covered in today's post has one oddball nested inside one parent:

< div class = "ex-parent" > < span class = "ex-oddball" > </ span > </ div >

For the CSS, each parent will be positioned relatively with a height and width to give it some breathing room. Each oddball will be positioned absolutely and be a portion of its parent:

.ex-parent { position : relative; height : 4em ; width : 4em ; } .ex-oddball { position : absolute; height : 25% ; width : 25% ; }

Let's Roll!

For the first example, let's make the oddball rest on top of the parent and to the left. Which properties do you think will work? top & left ? Inspect and find out!

Believe it or not, bottom & left is the correct answer. Surprised, huh ;) There are two properties to keep in mind when using top, right, bottom, and left to position:

The element repositions based on the dimensions of the parent

By setting a position value, you are also setting the element's positioning anchor

To observe these properties, let's take a look at aligning the bottom end of the oddball to the bottom of the parent's center line:

.ex2-oddball { bottom : 50% ; left : 0 ; }

In this example, the bottom position becomes the anchor line for the y-axis. Then the oddball moves 50% of the parent's height. We've seen the result of bottom: 100%; and bottom: 50%; . Could you imagine the result of top: 50% ?

.ex3-oddball { top : 50% ; left : 0 ; }

Rather than the oddball aligning to the middle of the center line (it is 50% smack dab in the middle territory after all), the top end of the oddball hooks to the top of the center line. This mimics the exact same behavior of our previous example. After setting top: 50% , the anchor of the y-axis become the top end of the oddball.

Can you figure out how to align the top end of the oddball to the bottom of the parent? Get inspectin to find out the answer if you're stumped ;p

Reverse

At this point, you're all set with pivoting around the top and bottom . What about the right and left ? Luckily for us, they behave the exact same way. Each position sets an anchor line for that axis and repositions based on the parent's dimensions. I'll cover a few examples in round 1 of Rapid Fire Oddballs!

Top / Outside Left

.ex5-oddball { top : 0 ; right : 100% ; }

Top / Outside Right

.ex6-oddball { top : 0 ; left : 100% ; }

Bottom / Outside Left

.ex7-oddball { bottom : 0 ; right : 100% ; }

Bottom / Outside Right

.ex8-oddball { bottom : 0 ; left : 100% ; }

Combining Forces

Now that we've established single axis pivoting, it's time to dive into combining the two together to reach those tricky spots in the parent's corner. Can you figure out how to achieve the very first oddball example using what you've learned already?

If you guessed bottom: 100% and right: 100% , you're absolutely right! Give yourself a pat on the back and get ready for round 2 of Rapid Fire Oddballs:

Outside Top / Outside Right

.ex9-oddball { bottom : 100% ; left : 100% ; }

Outside Bottom / Outside Left

.ex10-oddball { top : 100% ; right : 100% ; }

Outside Bottom / Outside Right

.ex11-oddball { top : 100% ; left : 100% ; }

Text Bomb

The real tough shit comes when you throw some text in the mix. What if you want to pivot text around the parent? Well with some advanced techniques, you can accomplish just that. Let's showcase our new text bomb with an example:

Boo

.ex1-bomb { bottom : 100% ; left : 0 ; transform-origin : left bottom; transform : rotate (-90deg); }

Time for a breakdown of what's going on:

Move the bottom end of the bomb up towards top end of the parent Ensure the left end of the bomb is aligned to the inward left side of the parent Create an anchor point on the bottom left of the bomb Rotate the bomb counter clockwise 90 degrees

As a result of our CSS, the top left corner of the bomb ends up flush with the top end of the parent. Give the inspector a whirl and toggle transform off and on. You'll see it looks similar to our previous examples ;)

Things are getting a little trickier! By mixing in transform and transform-origin we can extend the flexibility of percentage based positioning. What would it look like if we tried to pivot around the upper left corner?

Boo

.ex2-bomb { right : 100% ; bottom : 100% ; transform-origin : right bottom; transform : rotate (-90deg); }

Pretty neat! Let's combine all these properties to review:

" Anchor lines " are determined by position properties

" are determined by position properties Repositioning is based on the parent's dimensions

"Anchor points" are created when combining position properties with transform-origin

I hope you're ready for round 1 of Dynamite Bomb Drops!

Outside Top / Outside Right

Boo

.ex3-bomb { right : 0 ; bottom : 100% ; transform-origin : right bottom; transform : rotate (90deg); }

Top / Outside Right

Boo

.ex4-bomb { bottom : 100% ; left : 100% ; transform-origin : left bottom; transform : rotate (90deg); }

Bottom / Outside Left

Boo

.ex5-bomb { bottom : 0 ; left : 0 ; transform-origin : left bottom; transform : rotate (-90deg); }

Outside Bottom / Outside Left

Boo

.ex6-bomb { right : 100% ; bottom : 0 ; transform-origin : right bottom; transform : rotate (-90deg); }

Outside Right / Bottom

Boo

.ex7-bomb { bottom : 0 ; right : 0 ; transform-origin : right bottom; transform : rotate (90deg); }

Outside Top / Outside Right

Boo

.ex8-bomb { bottom : 0 ; left : 100% ; transform-origin : left bottom; transform : rotate (90deg); }

The Ultimate Bomb

You're right on track for mastering percentage based pivots. The last trick in your arsenal is combining what you've learned with the translate() property. Time to get cookin and form the ultimate bomb!

Boo

This is really gettin spicy! Here's a breakdown of what's going on:

Move the bottom end of the bomb up to the center line of the parent Align the right side of the bomb to the left side of the parent Shift the anchor point towards the bottom right of the bomb Rotate the bomb counter clockwise 90 degrees along the origin Using that new rotation, translate the bomb 50% along the x-axis

Prep your hard hats, clasp onto your leather gloves, and hold on to your keys, it's time for the final round - Ultimate Nuke Blast:

Outside Right / Center Rotation

Boo

.ex10-bomb { bottom : 50% ; left : 100% ; transform-origin : left bottom; transform : rotate (90deg) translate (-50%, 0); }

Outside Top / Center

Boo

.ex11-bomb { bottom : 100% ; left : 50% ; transform : translate (-50%, 0); }

Outside Bottom / Center

Boo

.ex12-bomb { top : 100% ; left : 50% ; transform : translate (-50%, 0); }

With the pivot playbook of oddballs and bombs laid out on the table, you've mastered percentage pivoting! Give yourself a huge pat on the back and rock the layout world.

Quite a post! As always, I'm fired up to hear what you all have to say. Drop a comment below and let me know what you think!