Have you ever been working on a project and you realize that at some point you altered a file for the worse? The code was fine before, but you went in and changed it, thinking it was an improvement, and now you want it back?
If you’ve been tracking it with Git, as you really should with any project, it’s easy to hop in your time machine and retrieve the file. Simply enter the following command:
git log --follow -- public/functions/main.php
This will show you a history of commits where that file was changed, along with the author of the commit, the date of the commit, and the commit message. You’ll see something like this:
Author: Your Name <Name@host.local>
Date: Tue Oct 16 16:40:32 2018 -0700
adding helper functions to main.php
Author: Your Name <Name@host.local>
Date: Tue Oct 14 13:10 2018 -0700
updated all functions in main.php
Author: Your Name <Name@host.local>
Date: Tue Oct 11 20:40:02 2018 -0700
refactored code in main.php
Let’s say looking back at the history of this file, you decide that “update all functions in main.php” is the last commit before you made the bad changes to file.php. Simply run the following command:
git checkout b43123 public/functions/main.php
This does exactly what it looks like, it checks out the file “main.php” from the commit starting with hash b43123. This version of main.php is now in your working directory. Review and test it, and if you’re happy with it, commit it and push it back to the tip of your branch. Voila!
Step 1: Write the HTML
This is pretty simple. We have a <header>, <main>, and <footer> tag, with a <textarea> tag in the main section so when we’re done we can see how the page works when we expand it.
Step 2: Add color and dimension
We do a couple straightforward things in step 2. First we add a background color to each of the three main elements. Second, we give the header and footer a minimum height so when we apply the flexbox they will stay static (Once display:flex is applied in step 3, min-height can be replaced with flex-basis).
Step 3: Add the flexiness
Step 3 is crucial because here we apply display:flex to the body element, which we will see will give the footer its sticky appearance in step 3. We’ve also set the flex-flow to column, because the header, main, and footer sections need to be stacked on top of each other in a single column.
Finally, we’ve added some styling to the textarea element to make things look more like an actual webpage.
Step 4: Add flex-grow to the main section
Finally, we give the body and html elements a 100% height, and set main to flex-grow:1. Setting main to flex-grow:1 means that the body container (the flexbox) will expand to at least the height of the viewport on load. Giving main a setting of flex-grow:1 means that it will expand to fill the middle section of the container that the fixed height header and footer don’t. In tandem, this will mean that the direct children of the body tag (the header, main, and footer sections) will always fill at least the height of the viewport, and will expand as needed.
The way we see if the sticky footer works is to expand the textarea in the main section. Click and drag it around to see the final effect in action.
Step 1: Create the HTML
If you think about it, a menu is nothing more than a list of hyperlinks, so an unordered list with anchor tags works perfectly. Here we’ve created a list with three main items, the last one containing three sub-items:
Step 2: Make the top-level menu flexible
This step involves setting the top level ul element to display: flex, and giving it’s children, the top level li’s, a flex-grow of 1, so they expand to the full width of the viewport. Now we have a horizontally oriented, responsive, and flexible menu. To make the flex-box layout look correct, we’ve also removed the default margin and padding from the ul and li elements, and we’ve removed the bullet points from the list items:
Step 3: Add color and dimension
Before we add the dropdown functionality, we need to give the menu some style. There are a number of small steps here, but they all relate to each other, so I think its easiest to keep them together. See the /*Step 3*/ code in the code window to follow along:
Color: The top list items have been given a background color of dimgray, with a margin-right of 2px to distinguish them. The secondary list items have been colored dodgerblue and tomato, with top margins of 2px. In addition, the color of the anchor tags has been changed to white and the anchors have been given some basic style.
Dimension: Each anchor tag has been given a padding of 1em, and set to display: block to show the padding. In addition, we’ve given the submenu’s ul tag (containing Item 3-1 through 3-3), a width of 100% and set it to position: absolute, which along with it’s parent li element set to position: relative, will allow it to flexibly stretch along with its parent, Item 3 (for more information on absolute relative positioning, see this article) .
Step 4: Add the dropdown effect
This step is relatively simple, but it deserves its own step, as it is where we give the menu its namesake functionality. We do this with only two declarations. First we give the submenu’s ul tag a display of none as default. Then we give it a display of block when its parent li element (i.e. Item 3) is hovered over.
Step 5: Add additional hover effects on the list items
To give the menu more of an interactive feel, the final step is to add hover effects to each of the list items. To do this I assigned rgba functions to the hover states of each item, with an opacity value of .7 (70% opaque). Again, the three declarations (one for each color) are at the top of the code window for visibility:
And that’s it. Hopefully this demystifies the process of creating a dropdown menu. You can use these principles to add as many menu items and effects as you want.
A lot of articles have been written about cool CSS features, but not all of them can be described as “automagical.” Here’s dictionary.com’s definition of the term, edited a little bit for clarity:
[a process] (especially in relation to the operation of a computer process) [that is executed] in a way that seems ingenious, inexplicable, or magical.
So in other words, “automagical” is that which makes the complex appear simple, often in a dazzling way. So without further ado, here are the top five automagical features in CSS, as I see them:
5. Animation and Transition
See how the star hovers up and down as suspended in air? That’s CSS animation at work. Now hover over it with your mouse. See how it spins? That’s a CSS transition. Transition and animation are very similar, the main differences being you can trigger transitions on user input (like mouse hover), while animations occurs on page load and can be fine tuned a bit more. They also work in tandem with each other, to create ever more automagical effects.
4. Linear and Radial Background Gradients
Linear and radial gradients let you design and create really cool background effects with just a few lines of code. You can make your gradients as simple or complex as you want by using multiple colors, repeated patterns, blending colors or creating hard color stops, and stacking gradients on top of images or even other gradients to create complex effects. There is a ton of creative potential with gradients, and the fact that they function like background images means that they don’t interfere at all with the rest of your layout.
3. :nth-child Expressions
Take a look at the list items above. Each has a different color, yet no classes or ids have been assigned to the elements. That’s because the :nth-child pseudo-selector is being used to target specific elements in the list. For example, li:child(5) selects the fifth list item, while li:child(even) selects every evenly numbered one.
The really automagical part of :nth-child expressions though is found in the use of expressions, which are short algebraic phrases that the browser interprets when the page is rendered. “n” here is an algebraic variable that starts at zero and counts up in increments of 1. For an example, here’s how we calculate the expression 3n + 4 (aka li:nth-child(3n + 4):
3 x 0 + 4 = the 4th list item
3 x 1 + 4 = the 7th list item
3 x 2 + 4 = the 10th list item
3 x 3 + 4 = the 13th list item
...repeat until we reach the end of the list...
For even more automagical effects, use negative factors of n to count up the list of items instead of down. Here is how li:nth-child(-1n + 3) is interpreted by the browser:
-1 x 0 + 3 = the 3rd list item
-1 x 1 + 3 = the 2nd list item
-1 x 2 + 3 = the 1st list item
...stop, we've reached the beginning of the list...
2. Centering Elements with Flex-Box
If you’re not already using this centering technique, I recommend that you take a couple seconds to learn it here. It will save you a ton of time in the long-run.
For ages, centering items in their parent containers was more difficult than it should have been. We had to rely on hacky solutions like absolute positioning, negative margins, carefully calculated fixed length positioning, and other hacks like “transform: translateY(-50%)”. Then flex-box came along and made centering possible with two declarations:
When combined, “display: flex” and “margin: auto” do perfectly what developers have been hacking at for years. What’s even cooler is that this technique is completely responsive, as “margin:auto” item stays centered in flex-box no matter the width or height of the container. Flex-box can do a lot more than this, but this centering technique is an automagical feature that is worth hilighting.
Transform allows you to rotate, skew, and scale elements on your webpage. Combined with transition, you can achieve some really cool effects, like the card flipping demo above. To learn how to create flippable with CSS transform, check out this article.
That’s it for now. Stay tuned for more features and automagical CSS tricks in the future.
Step 1: Create the front and back of the card
With some basic html, we’ll first create three divs: a container div with the class “card”, and two inner divs with classes “front” and “back”. Make sure that the .front div appears before the .back div:
I’ve given the back card some text and gave it a display type of flex, so I can center the text with align-items and justify-content. Also, both sides of the card have their own background color, and I’ve given each a border-radius of 14px to mimic rounded edges. Finally, I’ve given both .front and .back a fixed width and height.
Step 2: Flip the back side over
In real life, the sides of a playing card are facing away from each other. We can do that by giving .back a declaration of transform: rotateY(180deg).
Step 3: Place the sides on top of each other
Giving the back and front sides of the card a position of absolute will place them on top of each other. We then give the .back side a declaration of backface-visibility: hidden. This is so when the .back side is rotated 180 degrees (showing its backface), we only see the .front side. This video shows how this all works:
Step 4: Flip both sides over on hover
Here we’ve added a hover state to .card, and added two declarations of type transform:rotateY to the .front and .back sides. When the card is hovered over, the .front side gets flipped over 180 degrees, and the .back side, which is already flipped over 180 degrees, thanks to step 2, gets flipped back to its original state of 0 degrees.
Step 5: Add a transition to make everything smooth
To really get the feeling of a 3D card being flipped, we need to add the transition property. This allows us to animate transform:rotateY in a smooth manner.
Here, transition: transform 1s ease-in tells the browser to animate the change in transform over 1 second, starting slowly and speeding up at the end.
And that’s it! You can create as many cards on a page as you want with this method, and style them any way you like. So try it out, experiment, and get creative.
One of the trickier hurdles when leveling up your CSS skills is learning the various options for background-size. There are so many values and value combos to work with that initially it’s even a little intimidating. You’ve got the contain, cover, and auto keywords. Then there are relative units like em and %, and absolute units like px and pt. And then there are all the combinations of relative units, absolute units, and the auto keyword. Instead of going through each possibility one by one, which would be a very long article, I’ve decided to cover five common values/value combinations that each attempt in their own way to solve the most common problem with background images: stretching the background image across its element’s canvas without distorting the image or cutting it in half. Along the way, you will learn how to compare and combine values to achieve 95% of your background-sizing goals.
For the purpose of this article, an element’s canvas is defined as the physical shape on the screen of the element that the background image is applied to, and is represented by the orange-red dashed border in the examples below.
The default background-size is auto, so it’s the first effect we see when we add the background-image declaration to our CSS, before we even declare the background-size (if we decide to declare it at all). The full value is auto auto, meaning auto width and auto height. You can declare it as simply auto because when a single value is assigned to the background-size property (unless the value is cover or contain), a second value of auto is implied. The first (or only) value is always assigned to the width of the background image, the second (or implied, auto) value is assigned to the height.
That’s how to declare the auto keyword, but what does it do? The answer is, auto automatically calculates the width or the height of a background image based on the length of the opposing dimension (width or height), while maintaining the aspect ratio of the original picture. The aspect ratio is simply the ratio of the width to the height of an element. For example, a rectangle that is 400px wide and 100px tall has an aspect ratio of 4:1.
So to reiterate, if width has a set length, the auto keyword (e.g. background-size: 100px auto) will give the image the image the height it needs to display undistorted. If both width and height are set to auto, the background picture is set to its initial width and height. That’s what we see here:
The image is repeated to fill the canvas (the canvas is represented by the dashed orange-red border). When the image runs out of room, it is cut short. The problem is of course that we don’t want to use a repeating pattern, and we don’t want the image, or in this case images, to be cut off when they reach the edge of the canvas. So we need to move on from background-size: auto.
Background-Size: 100% 100%
Background-size: 100% 100% (100% width and 100% height) solves a couple of the problems we ran into with auto. It fills the element’s entire canvas with a single version of the image, and the image isn’t cropped at all. Of course the downside here is that the background image is distorted when its aspect ratio is different from the aspect ratio of the element’s canvas:
In the situations above, we end up with a stretched out, squished cat. That’s not what we’re after. But we’ve reached an interesting point in our journey. We’ve now found two value combos (Auto auto and auto 100%) that do some of the things we want them to, but not all. It’s time to combine them.
Background-Size: 100% Auto
This gets us a lot closer to our goal. 100% width and automatic height means that the background image is stretched to fill the width of the element’s canvas, and then its height is calculated on the fly (at page load and every time the browser’s viewport is resized), to maintain the original aspect ratio of the background image:
At this point you might be tempted to pack up and call it a day. If the element never changes its aspect ratio this would be fine. But chances are you want the element to change its height and width based on the height and width of the browser’s viewport. That’s where background-size: 100% auto runs into problems. Take a look at background-size: 100% auto when the element maintains same width, but has a taller height:
Now we can see what’s happening more clearly. Background-size: 100% auto leaves a gap at the bottom of the canvas when the element has a taller/skinnier aspect ratio. In the initial example, the element had a shorter/wider aspect ratio compared to the background image, but it wasn’t very noticeable because the image was simply cropped at the bottom (notice kitty’s collar was missing).
We can partly remedy the situation by setting another style rule, background-position, to center, but this will just center the background image vertically in the element’s canvas, leaving a gap above and below the image:
Side Note: If you can imagine, background-size: auto 100% (auto width and 100% height) will do the exact same thing, except that the background image will be expanded to fit the height of the element’s canvas, and then the width will be auto generated, either cutting off the side of the image or leaving white space to the side. Same problem, different perspective.
So background-size: 100% auto is the best value combo we’ve come across so far, but it still isn’t perfect. Our next logical step is to explore background-size‘s two remaining keywords, contain and cover.
This is in my opinion and the opinion of many, as good a solution as any when faced with the problem of placing a background image on an element’s canvas. Especially when the canvas’s shape and size will change with the shape and size of the browser’s viewport. To fully understand how cover works, it was important that we went on the journey we did, seeing how cover uses techniques from 100% and auto sizing, and how it is similar to contain. Now that you’ve learned it, you know exactly how it acts in different situations, which is where you want to be as a CSS developer. You have leveled up in your knowledge of CSS, go forth with renewed confidence.
If you liked (or hated) the article, please leave your comments below. See you next time!
You may or may not know that you can create a single div star in CSS pretty easily. But if you haven’t examined the code in depth, you may be curious to know what’s going on under the hood. This article shows you how to build a single div star in five basic steps. Once you have these five steps down, you can make a huge array of other CSS single div shapes.
Step 1: Create three shapes from one div, using the :before and :after pseudo-elements:
The single div star starts with CSS’s :before and :after pseudo-elements. If you don’t already know, :before and :after are a handy way to add dynamic content to an element without additional markup. Take a look at the following code:
Clicking between the HTML, CSS, and Result tabs, you can see that we were able to give each part of our div (:before, :after, and square) its own background color and dimensions. Also, the :before and :after pseudo-elements have been positioned absolutely, relative to the main element (see more about this effect in my article, Absolute Relative Positioning). The next step is to transform these shapes into the pieces of our single div star.
Step 2: Turn the pieces of the element into triangles
The key to creating triangles (or any angular shape) in CSS is using the border property. Take a look at the following shape’s multicolored border:
See how I’ve given each side of the border its own color? That way you can see that they meet each other at 45 degree angles at the bottom two corners of the square. If we then reduce the width and height of the square to zero, we have nothing but borders left, meeting together at the top center:
I’ve increased the size of each border to 150px so you can see the triangles that emerge more clearly. The final step to creating a triangle is to set the background color of all but one of the border sides to transparent:
Be sure to remove the background color of the element as well, or it will show through. So now we have a triangle. That’s great! The next step to creating our single div star is to combine steps 1 and 2.
Step 3: Create three triangles using steps 1 and 2
By using our pseudo-elements in conjunction with the border triangle trick, it’s not too hard to create three triangles from one div:
Notice we have one smaller acute triangle, and two larger obtuse triangles. This was achieved by altering the size of the left, bottom, and right borders for each triangle to create the specific shapes. The bottom border of the acute triangle is much taller than it’s two side borders, while the obtuse triangles’ bottom borders are slightly smaller than their adjacent borders.
You probably already see a single div star in the making. The next step is to rotate the shapes.
Step 4: Rotate the Shapes
Each section of an element (:before, main, and :after) can be altered independent of its siblings. So next we rotate each shape to its unique position, using the transform property:
Nothing magical here. I’ve rotated the main element thirty-five degrees clockwise with the “transform: rotate(35deg)” style rule . This rotated the :before and :after pseudo-elements thirty-five degrees as well, so next I rotated the :before element back to its initial position with “transform: rotate(-35deg)”. Finally I rotated the after element thirty-five degrees counter-clockwise with “transform: rotate(-70deg)”, which corrected for the thirty-five degrees it had been rotated clockwise, and then rotated it thirty-five degrees more counter-clockwise. Our shapes are now ready to be merged.
Step 5: Merge the shapes to create a single div star
The final step is to move the shapes together. Utilizing the absolute relative positioning technique we employed earlier, we just need to position the :before and :after pseudo-elements to rest on top of the main element:
And voila! Our single div star is complete!
The coolest thing about what I’ve shown you here today is that you can use the combination of border generated polygons, rotation, and the :before and :after pseudo-elements to create a huge array of different shapes, from cut diamonds, to eight and twelve point starbursts, to chevrons, and so on. Using other CSS properties like box-shadows, skews, and border-radiuses allow you to make a ton more amazing shapes. Check out this CSS Tricks article to learn more.