after { //AN_Xml: position: absolute; //AN_Xml: content: ""; //AN_Xml: width: 100%; //AN_Xml: bottom: 0; //AN_Xml: left: 0; //AN_Xml: border-bottom: 1px solid #AAA; //AN_Xml: z-index: 1; //AN_Xml:} //AN_Xml:

Here we introduced our first :after pseudo-element. Basically, :after appends another child to an element. It's not in the DOM (which is why it's called a pseudo element), so it is not a real child but it is completely stylable, as long as you add some content, in this case a single space character.

//AN_Xml:

In my opinion, the terms :before and :after are slightly confusing since the pseudo's aren't actually added before or after the element they apply to, but are inserted as children. This is also why you can't apply :before and :after to elements that can't contain children ("no content" elements), like <input>.

//AN_Xml:

In this case, we use the pseudo element to create a bottom border that doesn't influence the tabs' positioning. We could have just put a bottom border on the <ul> but that would've made the next step a little trickier.

//AN_Xml:

Above and beyond

//AN_Xml:

Now, an essential part of a convincing looking tab control, is that the selected tab sits in front of the edge while the rest fall behind the edge. To do this, we change its bottom border and do some z-index magic.

//AN_Xml:
//AN_Xml: //AN_Xml:
//AN_Xml:
.tabrow:before {
//AN_Xml:    z-index: 1;
//AN_Xml:}
//AN_Xml:.tabrow li {
//AN_Xml:    position: relative;
//AN_Xml:    z-index: 0;
//AN_Xml:}
//AN_Xml:.tabrow li.selected {
//AN_Xml:    z-index: 2;
//AN_Xml:    border-bottom-color: #FFF;
//AN_Xml:}
//AN_Xml:

Around the bends

//AN_Xml:

It is now time to add the elusive border that bends to the outside and we'll use :before and :after for this. Let's take this step by step and first just put everything in position.

//AN_Xml:
//AN_Xml: //AN_Xml:
//AN_Xml:
.tabrow li:before,
//AN_Xml:.tabrow li:after {
//AN_Xml:    position: absolute;
//AN_Xml:    bottom: -1px;
//AN_Xml:    width: 6px;
//AN_Xml:    height: 6px;
//AN_Xml:    content: " ";
//AN_Xml:}
//AN_Xml:.tabrow li:before {
//AN_Xml:    left: -6px;
//AN_Xml:}
//AN_Xml:.tabrow li:after {
//AN_Xml:    right: -6px;
//AN_Xml:}
//AN_Xml:.tabrow li:after, .tabrow li:before {
//AN_Xml:    border: 1px solid #AAA;
//AN_Xml:}
//AN_Xml:

Don't be such a square

//AN_Xml:

You can probably see where this is going. Let's remove the borders we don't want and add some rounded corners.

//AN_Xml:
//AN_Xml: //AN_Xml:
//AN_Xml:
.tabrow li {
//AN_Xml:    border-top-left-radius: 6px;
//AN_Xml:    border-top-right-radius: 6px;
//AN_Xml:}
//AN_Xml:.tabrow li:before {
//AN_Xml:    border-bottom-right-radius: 6px;
//AN_Xml:    border-width: 0 1px 1px 0;
//AN_Xml:}
//AN_Xml:.tabrow li:after {
//AN_Xml:    border-bottom-left-radius: 6px;
//AN_Xml:    border-width: 0 0 1px 1px;
//AN_Xml:}
//AN_Xml:

Cutting corners

//AN_Xml:

//AN_Xml:

There's something not quite right about this result. Let's look at it up close. As you can see both the original straight corner as well as the rounded corner are visible. We need to somehow get rid of the straight corner. To do that, we will cover it up with a shadow. To illustrate what's going on, let's make the shadow stand out a little bit.

//AN_Xml:
//AN_Xml: //AN_Xml:
//AN_Xml:
.tabrow li:before {
//AN_Xml:    box-shadow: 2px 2px 0 red;
//AN_Xml:}
//AN_Xml:.tabrow li:after {
//AN_Xml:    box-shadow: -2px 2px 0 red;
//AN_Xml:}
//AN_Xml:

Almost there

//AN_Xml:

//AN_Xml:

As you can see, the red shadows completely cover up the square corners we would like to hide. If we give the shadow the correct colors the illusion is complete.

//AN_Xml:
//AN_Xml: //AN_Xml:
//AN_Xml:
.tabrow li:before {
//AN_Xml:    box-shadow: 2px 2px 0 #ECECEC;
//AN_Xml:}
//AN_Xml:.tabrow li:after {
//AN_Xml:    box-shadow: -2px 2px 0 #ECECEC;
//AN_Xml:}
//AN_Xml:.tabrow li.selected:before {
//AN_Xml:    box-shadow: 2px 2px 0 #FFF;
//AN_Xml:}
//AN_Xml:.tabrow li.selected:after {
//AN_Xml:    box-shadow: -2px 2px 0 #FFF;
//AN_Xml:}
//AN_Xml:

Pieces of flair

//AN_Xml:

All that's left to do now is adding a sprinkling of gradients and shadows to spice it up just a little bit.

//AN_Xml:
//AN_Xml: //AN_Xml:
//AN_Xml:
.tabrow li {
//AN_Xml:    background:      -o-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
//AN_Xml:    background:     -ms-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
//AN_Xml:    background:    -moz-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
//AN_Xml:    background: -webkit-linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
//AN_Xml:    background: linear-gradient(top, #ECECEC 50%, #D1D1D1 100%);
//AN_Xml:    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4), inset 0 1px 0 #FFF;
//AN_Xml:    text-shadow: 0 1px #FFF;
//AN_Xml:    margin: 0 -5px;
//AN_Xml:    padding: 0 20px;
//AN_Xml:}
//AN_Xml:

If you're wondering about browser compatibility, it's exactly as you'd expect: everything but IE. It's very possible that it'll work in IE10, but I haven't had the chance to test with a preview release. Since IE8 and IE9 do support :before and :after but not border-radius you'll have to create a separate stylesheet for them if you want to give their users a nice visual experience.

//AN_Xml:

View Demo   Download Files

//AN_Xml:

Editor's note: I added anchor links inside the tabs in the demo since I think it's the most likely case that tabbed navigation like this have them. Most likely, they would have an href attribute that would link to the content they go with by id, and that behavior would be controlled by JavaScript. The fact that this tutorial doesn't need the anchor links for the extra pseudo elements is further testament to it being better than my original.

//AN_Xml:

(Better) Tabs with Round Out Borders is a post from CSS-Tricks

]]> //AN_Xml: http://css-tricks.com/better-tabs-with-round-out-borders/feed/ //AN_Xml: 90 //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: } } // Transform var content = myxml.transformNode(xsl); _AN_Call_write('write', document, content); } catch(e){ alert(e.description); } } } _AN_Display_xml(); it.

window.open(path-to-image, null, 'height=y, width=x, toolbar=0, location=0, status=0, scrollbars=0, resizeable=0');

Example:

The tricky part is figuring out just exactly what height and width values to pass. You can't just ask the image what size it is. Well you can, but it will lie. It will tell you its current size, not its natural size.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:img.width;  // current size, not natural size
//AN_Xml:img.height; // current size, not natural size

To get the natural size, we'll create a new image in the magical ether of JavaScript, set its source to the source of the on-screen image, and then test its width and height. It will report correctly as it's untainted by CSS on the page.

var img = document.getElementById('screenshot');
//AN_Xml:
//AN_Xml:var magicEtherImage = new Image();
//AN_Xml:magicEtherImage.src = img.src;
//AN_Xml:
//AN_Xml:var padding = 20; // little buffer to prevent forced scrollbars
//AN_Xml:
//AN_Xml:// Values to use when opening window
//AN_Xml:var winWidth = magicEtherImage.width + padding;
//AN_Xml:var winHeight = magicEtherImage.height + padding;

I use jQuery on my site, so ultimately my code is like this:

$(".view-full-size").click(function() {
//AN_Xml:
//AN_Xml:  var mainScreenshot = $("#main-screenshot");
//AN_Xml:
//AN_Xml:  var theImage = new Image();
//AN_Xml:  theImage.src = mainScreenshot.attr("src");
//AN_Xml:
//AN_Xml:  var winWidth = theImage.width + 20;
//AN_Xml:  var winHeight = theImage.height + 20;
//AN_Xml:
//AN_Xml:  window.open(this.href,  null, 'height=' + winHeight + ', width=' + winWidth + ', toolbar=0, location=0, status=0, scrollbars=0, resizable=0'); 
//AN_Xml:
//AN_Xml:  return false;
//AN_Xml:
//AN_Xml:});

You can see it in action on single gallery pages like this.

Obviously it doesn't do much on mobile, so I just remove the button with a media query.

Open a Window with Full Size Unscaled Image is a post from CSS-Tricks

]]> http://css-tricks.com/open-a-window-with-full-size-unscaled-image/feed/ 27 //AN_Xml: if(attr != null){ x.item(i).setAttribute("href", _AN_full_url(attr.nodeValue)); } } } var xsltProcessor = new XSLTProcessor(); xsltProcessor.importStylesheet(xsl); var result = xsltProcessor.transformToDocument(xmlDom); var xmls = new XMLSerializer(); var data = (xmls.serializeToString(result)); data = data.replace(/ if(x[i].namespaceURI == "http://www.w3.org/1999/XSL/Transform" && (x[i].baseName == "import" || x[i].baseName == "include")){ var attr = attrs.getNamedItem("href"); if(attr != null){ x.item(i).setAttribute("href", _AN_full_url(attr.nodeValue)); } } } // Transform var content = myxml.transformNode(xsl); _AN_Call_write('write', document, content); } catch(e){ alert(e.description); } } } _AN_Display_xml(); solution-should-you-use/feed/ //AN_Xml: 37 //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: l: Do Something //AN_Xml:</button> //AN_Xml:

What's the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an <a href="/example/"></a>) element).

//AN_Xml:

The <button> element, by itself, can't do that. There have …

//AN_Xml: //AN_Xml:

When To Use The Button Element is a post from CSS-Tricks

]]> //AN_Xml: You use it when, uhm, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. It's not too bad though, let's figure it out.

//AN_Xml:

//AN_Xml:

It looks like this:

//AN_Xml:
<button>
//AN_Xml:  Do Something
//AN_Xml:</button>
//AN_Xml:

What's the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link (an <a href="/example/"></a>) element).

//AN_Xml:

The <button> element, by itself, can't do that. There have been various conversations about allowing "href anywhere" over the years, but nothing has came of it.

//AN_Xml:

Clicking on a button does do something though, when used in its natural environment...

//AN_Xml:

Button is a Form Element

//AN_Xml:

Web forms have submit buttons. You might think of that like this:

//AN_Xml:
<form action="/" method="post">
//AN_Xml:  <input type="submit" value="Submit">
//AN_Xml:</form>
//AN_Xml:

A <button> element in a <form>, by default, behaves identically to that submit input above.

//AN_Xml:
<form action="/" method="post">
//AN_Xml:  <button>Submit</button>
//AN_Xml:</form>
//AN_Xml:

However gross the UX, forms can have reset buttons as well. You can duplicate that behavior by changing the default submit type to reset.

//AN_Xml:
<form action="/" method="post">
//AN_Xml:  <button type="reset">Reset</button>
//AN_Xml:</form>
//AN_Xml:

Clicking that button will clear all the other inputs (and textareas) with the parent <form>.

//AN_Xml:

Buttons can have content

//AN_Xml:

The primary reason for using a <button> is that it has both and opening and closing (</button>) tag. Which means there can be stuff inside. A common use case would be something like:

//AN_Xml:
<button>
//AN_Xml:  <img src="tiny_birthday_cake.png" alt="">
//AN_Xml:  Submit
//AN_Xml:</button>
//AN_Xml:

While an input can be <input type="image">, this mixed content would be hard to pull off.

//AN_Xml:

As far as I can tell, there is no limit to what kind of content you can put in a button, so feel free to get real weird with it. Pseudo elements can be used too.

//AN_Xml:

Let's leave styling <button>s for another day, but different browsers generally have a special style they apply to buttons. You'll want to either leave that alone so the default comes through, or remove it thoroughly so your new styling can be consistent across browsers.

//AN_Xml:

Let's consider: "if a button doesn’t have a meaningful href, it’s a <button>"

//AN_Xml:

I said recently that I enjoyed that sentiment. That's what kicked off this article for me. At the time, I was thinking of how I enjoyed the semantics of it. As in:

//AN_Xml:
<a href="#0">
//AN_Xml:  I'm kinda sick of doing this for buttons.
//AN_Xml:</a>
//AN_Xml:

There is no meaningful href there. The 0 is just there so it doesn't jump the page, because ID's can't start with a number.

//AN_Xml:

Chances are, HTML like the above means: I'm going to make clicking that do something with JavaScript. Somehow that feels better than a <div> whatever, because you get the cursor change and whatever else default styles.

//AN_Xml:

If you don't like those meaningless href's, a <button> can seem like a nice alternative. But unfortunately outside of the context of a <form>, a <button> is equally meaningless.

//AN_Xml:
<button>
//AN_Xml:  Outside of a <form>, I'm just as useless.
//AN_Xml:</button>
//AN_Xml:

But <button> feels better anyway

//AN_Xml:

Even if a <button> doesn't do anything outside of a form without the help of JavaScript, it still feels better for things you can click that do stuff other than change pages. A bogus href link definitely doesn't feel right.

//AN_Xml:

Alright. Let's insert it with JavaScript then.

//AN_Xml:

That's probably the best solution. If JavaScript is required for the clickable-thing to do anything at all, it might as well not even be there at all unless JavaScript runs. We can do:

//AN_Xml:
// 1. Create the button
//AN_Xml:var button = document.createElement("button");
//AN_Xml:button.innerHTML = "Do Something";
//AN_Xml:
//AN_Xml:// 2. Append somewhere
//AN_Xml:var body = document.getElementsByTagName("body")[0];
//AN_Xml:body.appendChild(button);
//AN_Xml:
//AN_Xml:// 3. Add event handler
//AN_Xml:button.addEventListener ("click", function() {
//AN_Xml:  alert("did something");
//AN_Xml:});
//AN_Xml:

You could easily have "button adding" be a part of your JavaScript workflow.

//AN_Xml:

When links make more sense

//AN_Xml:

If there is any kind of href you could put on that link that makes sense, by all means, use an anchor. Even if you override that behavior with JavaScript. That's progressive enhancement at it's finest. For instance:

//AN_Xml: //AN_Xml:

If nothing makes sense, insert the button with JavaScript.

//AN_Xml:

Accessibility concerns

//AN_Xml:

Let's say using an anchor link does make sense. After you give yourself a nice little back-pat for being good at progressive enhancement, there is accessibility to consider as well.

//AN_Xml:

You might be like, I got this!

//AN_Xml:
<a href="#meaningful" class="button" role="button">
//AN_Xml:  I'm good
//AN_Xml:</a>
//AN_Xml:

But you aren't out of the woods yet. MDN covers it well:

//AN_Xml:

Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words, when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.

//AN_Xml:

Get that? You activate links and buttons with different keys, so consider that.

//AN_Xml:

Go forth and uhm, make clickable things correctly.

//AN_Xml:

//AN_Xml: //AN_Xml:

When To Use The Button Element is a post from CSS-Tricks

]]> //AN_Xml: http://css-tricks.com/use-button-element/feed/ //AN_Xml: 94 //AN_Xml: //AN_Xml: //AN_Xml: //AN_Xml: