There are four potential values for the position property (ignoring inherit) which are static, relative, absolute, and fixed. Now, while this article will be focusing on the relative value, it is important to understand some key bits of information about the other values:

• Static positioning (the default value) is actually a lack of positioning.
• Absolute or fixed positioning removes the element from the flow of the document.
• Absolutely positioned elements are positioned relative to nearest positioned ancestor element.

Right, now that you have wrapped your head around that, let’s talk about the uses for relative positioning. There are three main instances where it comes in handy:

1. When you want to move an element (while keeping it in the flow of the document, but without disturbing any other elements).
2. When you want to define a containing box for absolutely positioned descendant elements.
3. When you need an element to have positioning so that you can use z-index.

Moving an element

Elements are naturally rendered in the flow of the document, and as such, they interact (i.e. they affect the position of each other). This is generally a good thing, as most of the elements on your page have a relationship with the elements around them. For instance, a footer being pushed down by your main content.

Sometimes though, you want to move an element without it affecting any of the elements around it. This is where position: relative; comes in handy. When using relative positioning with the top, right, bottom, or left properties, it is only the generated box that is actually shifted; the element still remains where it was in the flow of the document. Keep in mind that this can often result in overlapping elements.

Also, it is important to remember that the top, right, bottom, and left properties can’t change the size of a relatively positioned element (they can if the element is absolutely positioned).

Containing absolute descendants

When positioning an element absolutely—as it is removed from the flow of the document—the top, right, bottom, and left properties don’t act as they would on a relatively positioned element. These properties are now based on the nearest positioned ancestor (or the root element, if there are none). This means that if you are giving an element a position of absolute and you want to confine it to a certain ancestor, setting position: relative; on that ancestor will do the trick without affecting the flow of that element.

The terminology is a little tricky here as an element with position: static; appears as though it has a position set, but as static positioning is in fact no positioning at all, static elements can’t be containing boxes for absolute elements.

Using z-index

Lastly, z-index is only respected on elements that have a position set. So if you don’t want to remove an element from the flow of the document, but want to use z-index, relative positioning is your friend.

The post Position: Relative; What is It Good For? appeared first on Joshua Hibbert.

Demo

I love to play around with CSS. So much so that if I have a spare five minutes, I will often open up CodePen and experiment. Doing exactly this the other day, I discovered a couple of things. The first of which was a neat interaction using the :focus pseudo-class, and the second being a line-height issue when working with inputs. You can read about that here.

The fun bit

What I’m doing in the demo is something very similar to the checkbox hack, except instead of using the :checked pseudo-class, I’m using the :focus pseudo-class. This is pretty handy, as :focus has better browser support than :checked.

Using the following markup, I pair the label and input (i.e. clicking the label focuses the input):

<input id="search" type="search">
<label for="search">Search</label>

I then set the width of the input to 0, and increase it again on focus. For example:

input:focus {
    width: 18em;
}

I take the styling a little further in the demo to give a nice ‘slide to reveal’ effect.

Be sensible

As with anything, use this trick appropriately. There is a fair bit you could use it for, modal images for instance, but just because you can, doesn’t mean you should!

The post Here’s a Neat Trick Using the :Focus Pseudo-Class appeared first on Joshua Hibbert.

While Chrome and Safari respect line-height values on inputs, Firefox, Internet Explorer, and Opera do not. I found out about this when experimenting with this little :focus trick I recently discovered.

So why don’t all browsers behave the same way? Inconsistent behavior like this is very frustrating for a web designer. Ideally, I’d like all browsers to behave as Chrome and Safari do in this case and respect line-height values on inputs. Unfortunately, this is not the case, although at least Firefox explicitly state what they will be doing in their user agent style sheet:

input {
    line-height: normal !important;
}

Who has the time to look through each browser’s user agent style sheet though? Also, using the value ‘normal’ is unreliable as that depends on the typeface and can roughly range from 1 to 1.2. Each browser also renders ‘normal’ slightly differently. See this article by Eric Meyer for more information.

Now I assume that Firefox, Internet Explorer, and Opera don’t feel that it’s necessary to respect line-height on inputs because they only contain one line of text, and most of the time this is fine, but if you are working with a strict baseline, or doing something similar to the example I linked to earlier, then problems arise.

So what can we do?

If we want reliable input heights no matter the browser, then we must declare a height as well as using line-height. This is important; if we just used line-height, the results would be inconsistent as each of the browsers that don’t allow altered line-heights on inputs render the ‘normal’ value slightly differently.

So while this won’t work in Firefox, Opera, or Internet Explorer:

input {
    line-height: 2;
}

This will:

input {
    line-height: 2;
    height: 2em;
}

Update

As mentioned by Neil in the comments, when using height to deal with the issue, there is really no need to use line-height. This saves you from having to declare the same value twice, and also avoids a caret bug in webkit

The post Line-Height Doesn’t Work As Expected On Inputs appeared first on Joshua Hibbert.

Download

Considering how popular my CSS snippets for Sublime Text have been, I thought I’d better collate and release some of the HTML snippets I use regularly. Put simply, they allow you to turn this:

doctype

Into this:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="description" content="$1">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>$2</title>
        <link rel="stylesheet" href="css/main.css">
    </head>
    <body>
        $3
        <script src="js/main.js"></script>
    </body>
</html>

Note: the dollar signs indicate tab markers.

Further details can be found on the GitHub repository. If you have any suggestions, send a pull request, or let me know in the comments below.

Installation instructions

The easiest way to install these snippets is through Package Control; simply search for ‘HTML snippets’. If you don’t use Package Control (you really should, it’s awesome) then you can copy the set into the Sublime Text packages folder. On a Mac this can be found in:

Library > Application Support > Sublime Text 2 > Packages

For Windows, it can be found in:

C: > Users > {username} > AppData > Roaming > Sublime Text 2 > Packages.

Stay tuned for a more in-depth article on Sublime Text, including why I use it, a few hidden tricks, some of my favourite packages, and other work flow enhancements!

Update

If you are also using Emmet then you need to add the following to Emmet’s user settings file to avoid conflicts:

"disabled_single_snippets": "fig meta nav ol script style ul"

The post A Set of HTML Snippets for Sublime Text 2 appeared first on Joshua Hibbert.

I’ve been using the inherit value a lot more recently; it can easily reduce the amount of repetition in your style sheet. Here’s a basic example of what I am talking about. As you can see, when changing the values on the .foo element, the pseudo-element also changes accordingly. Here is another example.

Bonus transition trick

At the moment, only Firefox supports transitions on pseudo-elements, but by making full use of inherit, we can trick other browsers into doing the same. Here is a demonstration of how this works, and here is a more practicle example.

The post Don’t Forget the CSS Value ‘inherit’ appeared first on Joshua Hibbert.

The CSS property line-height seems pretty straightforward, but the way that it renders can cause some confusion when working out a typographic baseline. Here is an example of a 24px baseline (I am using pixels for simplicity, but I would generally use ems). Optically, it looks great, but let’s add a horizontal grid so that we can see exactly what is going on. I’m going to align the grid to the bottom of the h1; everything else should then line up accordingly. Here is the result.

Uh oh, what happened? We can immediately see that the baseline doesn’t line up, despite having used a consistent line-height and margin-bottom. How can this be? Well actually, this is expected behavior.

Here’s the catch: a baseline on the web is not calculated in the same manner as a print baseline. The distance between lines of type in print is referred to as leading, and while this concept is used in CSS, it is not implemented in the same manner.

CSS uses what is known as half-leading to render lines of text. This is determined by working out the difference between the line-height and the font-size, dividing by 2, and then placing the calculated amount of space above and below each line of text. So if you have a font-size of 16px and an effective line-height of 24px, the half-leading would be 4px. Here’s the process:

24px − 16px = 8px

8px ÷ 2 = 4px

So with that information, let’s have a look at how our baseline grid actually renders. Keep in mind that I haven’t changed the baseline at all, I have only moved the position of the grid.

Understanding how line-height actually works was a real eye-opener for me. It can be a difficult concept to explain, but it becomes pretty obvious once you see it. So, if you’re anything like me (particular about baselines), you can now get on with your work and stop worrying about using magic numbers to get everything perfectly aligned.

For those of you that would rather use ems, here is an updated baseline.

The post How Does Line-Height Actually Work? appeared first on Joshua Hibbert.

Demo

It has been best practice for some time now to ensure that navigation links have appropriate padding. This makes clicking these links much easier, especially if you are on a mobile device. Here is an article, written four years ago, discussing this very idea.

Why aren’t we taking this one step further? Links don’t only exist in menus, and inline links can be tricky to click accurately. Mobile users benefit the most from an increased click area, although I must admit that I occasionally misclick with my mouse too.

Now keep in mind that this is only a thought. There are almost certainly going to be some issues that I haven’t yet considered. One that is immediately apparent is that click areas can now overlap. As long as you keep this in mind, and don’t go crazy when increasing their size, I don’t think this will be a major concern. More often than not, links in body copy aren’t adjacent.

The trick is to be subtle with this technique; increase the click area enough that users don’t have to be 100% accurate, but don’t increase it too much so that the behavior becomes unexpected. It’s a pretty small change, but it’s the little things that make all the difference.

Here is an example of what the CSS rule might look like:

p a {
    margin: -.5em;
    padding: .5em;
    position: relative;
}

Notice the use of position: relative? This is due to a strange browser bug that doesn’t respect the right hand side of the click area if the position of the link is static.

What are your thoughts on this technique? I would love to start a discussion on the concept, and why it may, or may not be, a good idea.

The post Increasing the Clickable Area of Inline Links appeared first on Joshua Hibbert.

Well luckily for you, I have two to give away!

This isn’t a contest, and there are no criteria that you have to meet. Simply send me a tweet with your Dribbble username and some work that you are proud of. When I feel like enough time has passed, I will invite two people of my choosing.

Update

Both invites have now been given out. Congratulations Tom and CSS Deck.

The post Looking for a Dribbble Invite? appeared first on Joshua Hibbert.

Demo

This is a neat little trick that I stumbled upon when playing around with a CSS experiment a few months ago. Basically, by using multiple box-shadows, you can draw complex images with only a single element. As you may know, I’m a big fan of semantic markup, and I really don’t like using extra elements just for styling, so I was very happy with this discovery!

I played around with a few experiments that showcased the potential of this trick. These ranged from favicons, to logos and typefaces. It wasn’t long after posting these experiments on CodePen that I began to see other people using the technique to create awesome things of their own.

It isn’t something that you would normally think to do with box-shadow, and as others are starting to use the technique, I thought I had better share how I do it.

Okay, here’s the trick

Firstly, let’s create a basic element that we will use for this explanation:

<div class="box-shadow-trick"></div>

.box-shadow-trick {
    background: #000;
    height: 10px;
    width: 10px;
}

Alright, now let’s create a basic 4 × 4 checkerboard pattern using that element and the box-shadow property. We will need 15 shadows; a 4 × 4 checkerboard has 16 squares, but one of them will be the element itself. We aren’t going to use blur radius at all, only using the offset values. Here is the relevant code:

box-shadow: 10px 0    0 #f00,
            20px 0    0 #000,
            30px 0    0 #f00,
            0    10px 0 #f00,
            10px 10px 0 #000,
            20px 10px 0 #f00,
            30px 10px 0 #000,
            0    20px 0 #000,
            10px 20px 0 #f00,
            20px 20px 0 #000,
            30px 20px 0 #f00,
            0    30px 0 #f00,
            10px 30px 0 #000,
            20px 30px 0 #f00,
            30px 30px 0 #000;

So you can see that it isn’t too difficult to make copies of an element, and to position them wherever you would like. It can get even more interesting when you begin to use box-shadow’s optional spread value. The obvious downside to this technique is that it is a fair bit of code, but that shouldn’t be an issue for experiments.

We can also use gradients to draw things

The demo linked to at the top of this article showcases an experiment that uses both gradients and box-shadows to create a MacBook Pro using only a single element. You can use gradients on their own to create icons or slightly more advanced logos. The principle is the same: use multiple backgrounds (i.e. linear and radial gradients), and then use the other background properties such as repeat, position and size to get the effect you want.

Another nifty trick

Box-shadows, when used with transparent backgrounds, can produce some cool effects. Here is an example of what I’m talking about.

Word of warning

The techniques outlined in this article are a lot of fun, but they really shouldn’t be used in production. They are a nifty way to produce semantic CSS experiments, but they don’t have full browser support. Also, the box-shadow property can be one of the slowest to render, especially if you are chaining together tens, or even hundreds, of shadows!

Your turn

Now that you know my little secret, it’s your turn to get out there and experiment. I want to see what you guys can come up with! Leave your links for me in the comments. If I get enough, I’ll add them to the post.

Updates

Emad Elsaid has cleverly developed an image to box-shadow converter, so now you can make things like this! Keep in mind that it pumps out an incredible amount of shadows, so don’t use large images!

Also, Hugo Giraudel has hand drawn this incredible piece.

Thanks to a request from Paul Irish, I have also created this little piece of internet history.

If you are interest in seeing me tweak one of these experiments, you can check out this screencast.

The post Drawing Things with Box-Shadow appeared first on Joshua Hibbert.

Demo

CSS3 has given us some pretty powerful tools. Not so long ago we had to use JavaScript if we wanted an image slider, but now it isn’t too hard to do it with only CSS. This article will explain how.

I have tried to keep this as to the point as possible, so if you want me to clarify anything, feel free to ask. Also, keep in mind that you will need to use browser prefixes where required.

The plan

1. The markup
2. Basic styl­ing
3. Navigating
4. Finishing touches

Want to see the fin­ished code? Click here.

Step 1: The markup

Let’s get the foundation worked out. This slider will contain four panels, so let’s write up an unordered list containing four images. We will give it a class of slider so that we can target it in our style sheet. I am using images that are roughly 400 × 240, but feel free to use whatever size you would like.

<ul class="slider">
    <li>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 1">
    </li>
    <li>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 2">
    </li>
    <li>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 3">
    </li>
    <li>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 4">
    </li>
</ul>

Step 2: Basic styl­ing

I am using em instead of px to size up this slider. If you aren’t that comfortable with using em then this article may help, otherwise, feel free to simply multiple any value by 16, and use that as a pixel value instead.

.slider {
    height: 15em;
    width: 25em;
}
.slider li {
    list-style: none;
    position: absolute;
}
.slider img {
    height: 15em;
    width: 25em;
    vertical-align: top;
}

The height and width on the image aren’t strictly required, but they do guarantee that any larger images are resized to fit within the slider.

Step 3: Navigating

Now that we have the basics sorted, let’s introduce a technique that will allow us to navigate between the slides. To do this, I am going to use what is known as the checkbox hack (see here for more information).

Let’s add some form elements to our markup.

<ul class="slider">
    <li>
        <input type="radio" id="slide1" name="slide" checked>
        <label for="slide1"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 1">
    </li>
    <li>
        <input type="radio" id="slide2" name="slide">
        <label for="slide2"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 2">
    </li>
    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 3">
    </li>
    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 4">
    </li>
</ul>

You may have noticed that I marked the first radio button as checked. The checked image will be the one showing on page load. The others will be hidden so that we can fade them in when they are selected. We will do that via the following CSS:

.slider input {
    display: none;
}
.slider label {
    background-color: #111;
    bottom: .5em;
    cursor: pointer;
    display: block;
    height: .5em;
    position: absolute;
    width: .5em;
    z-index: 10;
}
.slider li:nth-child(1) label {
    left: .5em;
}
.slider li:nth-child(2) label {
    left: 2em;
}
.slider li:nth-child(3) label {
    left: 3.5em;
}
.slider li:nth-child(4) label {
    left: 5em;
}
.slider img {
    opacity: 0;
    visibility: hidden;
}
.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

Awesome, we now have an interactive slider using only CSS!

Step 4: Finishing touches

Alright, now it’s time to have some fun! Feel free to style the slider however you like. If you would like to see what I did, keep reading.

With the use of pseudo-elements and box-shadow, I’m going to transform our boring looking slider into a picture frame. I’ll use a few transitions to make it smooth, and hide the navigation elements until the slider is hovered. Check out my final code below.

Final product

<ul class="slider">
    <li>
        <input type="radio" id="slide1" name="slide" checked>
        <label for="slide1"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 1">
    </li>
    <li>
        <input type="radio" id="slide2" name="slide">
        <label for="slide2"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 2">
    </li>
    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 3">
    </li>
    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="http://joshnh.com/2012/08/14/making-a-pure-css-featured-image-slider/"Panel 4">
    </li>
</ul>​

.slider {
    background-color: #fff;
    box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
                0 3px 1px hsla(0,0%,100%,.75),
                0 -1px 1px 2px hsla(0,0%,0%,.1);
    height: 15em;
    left: 50%;
    margin: -8em -13em;
    padding: .5em;
    position: absolute;
    top: 50%;
    width: 25em;
}
.slider:before {
    background-color: #22130c;
    bottom: -2.5em;
    box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
                inset 0 -2px 1px hsla(0,0%,0%,.4),
                0 5px 50px hsla(0,0%,0%,.25),
                0 20px 20px -15px hsla(0,0%,0%,.2),
                0 30px 20px -15px hsla(0,0%,0%,.15),
                0 40px 20px -15px hsla(0,0%,0%,.1);
    content: '';
    left: -2.5em;
    position: absolute;
    right: -2.5em;
    top: -2.5em;
    z-index: -1;
}
.slider:after {
    background-color: #fff5e5;
    bottom: -1.5em;
    box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
                0 -1px 1px 1px hsla(0,0%,0%,.4),
                inset 0 2px 3px 1px hsla(0,0%,0%,.2),
                inset 0 4px 3px 1px hsla(0,0%,0%,.2),
                inset 0 6px 3px 1px hsla(0,0%,0%,.1);
    content: '';
    left: -1.5em;
    position: absolute;
    right: -1.5em;
    top: -1.5em;
    z-index: -1;
}
.slider li {
    box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
    list-style: none;
    position: absolute;
}
.slider input {
    display: none;
}
.slider label {
    background-color: #111;
    background-image: linear-gradient(transparent, hsla(0,0%,0%,.25));
    border: .2em solid transparent;
    bottom: .5em;
    border-radius: 100%;
    cursor: pointer;
    display: block;
    height: .5em;
    left: 24em;
    opacity: 0;
    position: absolute;
    transition: .25s;
    width: .5em;
    visibility: hidden;
    z-index: 10;
}
.slider label:after {
    border-radius: 100%;
    bottom: -.2em;
    box-shadow: inset 0 0 0 .2em #111,
                inset 0 2px 2px #000,
                0 1px 1px hsla(0,0%,100%,.25);
    content: '';
    left: -.2em;
    position: absolute;
    right: -.2em;
    top: -.2em;
}
.slider:hover label {
    opacity: 1;
    visibility: visible;
}
.slider input:checked + label {
    background-color: #fff;
}
.slider:hover li:nth-child(1) label {
    left: .5em;
}
.slider:hover li:nth-child(2) label {
    left: 2em;
}
.slider:hover li:nth-child(3) label {
    left: 3.5em;
}
.slider:hover li:nth-child(4) label {
    left: 5em;
}
.slider img {
    height: 15em;
    opacity: 0;
    transition: .25s;
    width: 25em;
    vertical-align: top;
    visibility: hidden;
}
.slider li input:checked ~ img {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

The post Making a Pure CSS Featured Image Slider appeared first on Joshua Hibbert.