CSS-Tricks

Upping Your Type Game

Chris Coyier — Fri, 24 May 2013 13:07:49 +0000

The ultimate primer on web type for web developers by Jessica Hische.

jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $25 off.

Upping Your Type Game is a post from CSS-Tricks

Just One of Those Weird Things About CSS: Background on

Chris Coyier — Fri, 24 May 2013 12:58:21 +0000

So you want to make the background of your website red eh? You'll probably put this in your CSS:

body {
  background: red;
}

Done!

Check out this Pen!

You're going about your business and then all the sudden one day this happens:

Check out this Pen!

What in the heck? Why is the red cut off like that? I put red as the background color on the body?

You did, but the fact that that red color floods the background is just a strange anomaly of CSS. The body element isn't actually as tall as the browser window. It's only as tall as the content inside it, just like a div or anything else.

See:

In the absence of a background on the html element, the body background will cover the page. If there is a background on the html element, the body background behaves just like any other element.

Somewhere along the line, a background-color got set on the html element.

Perhaps you're using normalize.css 2.1.1, which included setting the background to white on the html element to "Prevent system color scheme's background color being used in Firefox, IE, and Opera." This has since been reverted, presumably because it caused this issue too widely.

To "fix" it, just remove the background on the html element, or move whatever you want to "flood" always to the html element as its behavior is consistant.

Just One of Those Weird Things About CSS: Background on is a post from CSS-Tricks

This Website Brought To You By…

Chris Coyier — Fri, 24 May 2013 12:56:58 +0000

I always wanted to write something on all the technologies that a website relies on in order to have been created and work. My attempts have so far failed because it spirals out of control so quickly. Kevin Kelly sums it up:

A web page relies on perhaps a hundred thousand other inventions, all needed for its birth and continued existence. There is no web page anywhere without the inventions of HTML code, without computer programming, without LEDs or cathode ray tubes, without solid state computer chips, without telephone lines, without long-distance signal repeaters, without electrical generators, without high-speed turbines, without stainless steel, iron smelters, and control of fire. None of these concrete inventions would exist without the elemental inventions of writing, of an alphabet, of hypertext links, of indexes, catalogs, archives, libraries and the scientific method itself. To recapitulate a web page you have to re-create all these other functions. You might as well remake modern society.

The article isn't about the web hardly at all, it's about the interconnectivity of tools and how far we'll be set back if that is disrupted. I enjoyed the term "upcreation tool." So many of the tools we use as web workers are tools in which to make more complex tools.

Direct Link to Article — Permalink

This Website Brought To You By… is a post from CSS-Tricks

Logic in Media Queries

Chris Coyier — Wed, 22 May 2013 19:06:15 +0000

Just in case you have brain farts about this constantly like I do.

If

That's what media queries are: logical if statements. "If" these things are true about the browser, use the CSS inside.

And

The keyword and.

@media (min-width: 600px) and (max-width: 800px) {
  html { background: red; }
}

Or

Comma separate.

@media (max-width: 600px), (min-width: 800px) {
  html { background: red; }
}

Technically these are treated like to separate media queries, but that is effectively and or.

Not

Reverse the logic with the keyword not.

@media not all and (max-width: 600px) {
  html { background: red; }
}

Just doing not (max-width: 600px) doesn't seem to work for me, hence the slightly funky syntax above. Perhaps someone can explain that to me. Note that not only works for the current media query, so if you comma separate, it only affects the media query it is within. Also note that not reverses the logic for the entire media query as a whole, not individual parts of it. not x and y = not (x and y) ≠ (not x) and y

Exclusive

To ensure that only one media query is in effect at time, make the numbers (or whatever) such that that is possible. It may be easier to mentally manage them this way.

@media (max-width: 400px) {
  html { background: red; }
}
@media (min-width: 401px) and (max-width: 800px) {
  html { background: green; }
}
@media (min-width: 801px) {
  html { background: blue; }
}

Logically this is a bit like a switch statement, only without a simple way to do "if none of these match do this" like default.

Overriding

There is nothing preventing more than one media query from being true at the same time. It may be more efficient to use this in some cases rather than making them all exclusive.

@media (min-width: 400px) {
  html { background: red; }
}
@media (min-width: 600px) {
  html { background: green; }
}
@media (min-width: 800px) {
  html { background: blue; }
}

Media queries add no specificity to the selectors they contain, but source order still matters. The above will work because they are ordered correctly. Swap that order and at browser window widths above 800px the background would be red, perhaps unintuitively.

Mobile First

Your small screen styles are in your regular screen CSS and then as the screen gets larger you override what you need to. So, min-width media queries in general.

html { background: red; }

@media (min-width: 600px) {
  html { background: green; }
}

Desktop First

Your large screen styles are in your regular screen CSS and then as the screen gets smaller you override what you need to. So, max-width media queries in general.

html { background: red; }

@media (max-width: 600px) {
  html { background: green; }
}

Gettin Wacky

You can be as complex as you want with this.

@media 
  only screen and (min-width: 100px),
  not all and (min-width: 100px),
  not print and (min-height: 100px),
  (color),
  (min-height: 100px) and (max-height: 1000px),
  handheld and (orientation: landscape)
{
  html { background: red; }
}

Note the only keyword was intended to prevent non-media-query supporting browsers to not load the stylesheet or use the styles. Not sure how useful that ever was / still is.

Logic in Media Queries is a post from CSS-Tricks

CSS-Tricks Chronicle XIII

Chris Coyier — Tue, 21 May 2013 21:24:29 +0000

I'll be speaking at the upcoming Front End Design Conference in Florida. If you have tickets, see you there! If not, sorry, this one is sold out.

I recently spoke at TXJS, and they recorded the talks, so mine and a bunch of others are available on their Vimeo channel.

Next week I head out for Graves Mountain, as I do every year. So this week I'm planning for that, both getting ready for it as well as getting ready to be unplugged for the week.

ShopTalk is going strong! We have lots of great guests lined up. We've recorded a show in advance to air while I'm away at Graves. I'm sure we'll have a show every week for a very long time to come.

Recent shows include Ben Frain, Pam Selle, and Ben Schwarz.

CodePen is going strong as well. The team has made the huge leap of taking it full time. It's been a touch slow, but it's because both Tim and I moved across the country (me to Milwaukee, WI) and we've been settling in a bit. We're also working on big new features. There will be little new stuff coming here and there, but a lot of time has been sunk into big stuff that'll take a bit to get out.

The Patten Rodeo is back as well, in Season Two.

There are also CodePen PENS now, as well as stickers, and get get both if you order a T-Shirt.

Kern and Burn have a book called Conversations With Design Entrepreneurs and there is a bit of an interview with me in there. I got the book and it is super nice. One of the nicest feeling and reading books I have.

I have a few new articles on The Pastry Box Project. One is a story of a person opening a mustard packet and... well just take of that one what you will. The other is the only bit of life advice I have to offer.

I have some ideas burning for new stuff for The Lodge so I'll be launching into that the next few months. Nothing to share yet, but I'll let you know. I also have a nice list cooking for CSS-Tricks v11. It probably won't be a huge redesign, but more re-align-y focusing on enhanced functionality.

CSS-Tricks Chronicle XIII is a post from CSS-Tricks

Prepros

Chris Coyier — Mon, 20 May 2013 14:14:03 +0000

Is an open-source app modeled after CodeKit. Prepros runs on Windows where CodeKit is Mac only. From people who have tried it, it seems good.

Direct Link to Article — Permalink…

Prepros is a post from CSS-Tricks

Chrome’s requestAutocomplete()

Chris Coyier — Mon, 20 May 2013 14:09:55 +0000

Auto-filling forms is nice because it saves time and is less prone to user error. Even better is not even needing to see a form in the first place.

Direct Link to Article — Permalink…

Chrome’s requestAutocomplete() is a post from CSS-Tricks

Replace the Image in an with CSS

Guest Author — Mon, 20 May 2013 12:43:13 +0000

The following is a guest post by Marcel Shields. Marcel in a difficult place where he needed to change the image on a page but didn't have access to the HTML. Rare, but I'm sure we've all be in weird situations like this. He explains how he managed to replace that image without needing to access the HTML or JavaScript. Also turns out to be a pretty good way to replace anything with an image.

I just wanted to share something I found really cool about using CSS box-sizing. Chris wrote a really good introduction a few years back if you're not familiar with the property. It makes things a lot more sane when thinking about layout. People love it so much, they put it on everything like hot sauce. I wanted to share how I found it useful as (yet) another image replacement technique.

A few days ago at work, I was asked to replace an on our site with another image hosted elsewhere. Simple right? But the catch was I would not be able to replace the markup as it was already deployed to production, but could inject CSS or JS through our CMS. For whichever technology I chose, it would be inserted on all site pages. I only needed on one specific page, and the attributes of parent containers were non-specific to the desired page.


  Really Cool Page

This is simple to do with JavaScript, but I wanted to see if there was another, even simpler, way. After a few iterations in Chrome Dev Tools, I thought to use the box-sizing property to keep dimensions strict, add the new image as a background image, and just push the inline image out of the way with padding and see what happened.

/* All in one selector */
.banner {
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */
}

It worked beautifully. Here's what's cool:

It works on just about any element, even empty ones like or
Browser support is excellent (Chrome, Firefox, Opera, Safari, IE8+) http://caniuse.com/#feat=css3-boxsizing
Refrains from using SEO unfriendly display: none or other properties

That last point seemed important, as it works really well for text replacement too without any adjustment. Check it out!

Check out this Pen!

Replace the Image in an with CSS is a post from CSS-Tricks

Slider with Sliding Backgrounds

Chris Coyier — Fri, 17 May 2013 15:14:52 +0000

Among the many super nice design features of the Yahoo! Weather app for iOS is the transition between city screens. The background image doesn't just move away as the screen moves from one screen to the next, the background image itself slides. It appears to be hiding some of the "old" screen and revealing more of the "new" screen those closer you have it to being in full view.

Let's try and pull it off on the web.

The HTML

Like any slider, there are three main components:

The container that holds everything into shape
A sliding container that is as wide as all the slides in a row
Each individual side container

We won't bother too much with content inside the slide. I'll just add the temperature to show each slide can indeed hold content on top.

The container might be a

, slides might be

. It really depends. I'll let you make the semantic choices for your own needs.

The layout plan is like this:

The CSS

The "slider" (visual container) and the slides need to have explicity the same size. We'll use pixels here but you could make it work with anything.

.slider {
  width: 300px;
  height: 500px;
  overflow-x: scroll;
}
.slide {
  float: left;
  width: 300px;
  height: 500px;
}

Floating those slides to the left isn't going to make them line up in a row, because the parent element of the slides isn't wide enough to let them do that. That's one of the reasons we need the holder element. It will be 300% wide (Num. of slides × 100%) which will fit three slides exactly.

.holder {
  width: 300%;
}

Each one of our slides has a unique ID. This is useful because, if we choose, we can create anchor links that link to those ID's and the slider will "jump" to those slides. We'll add JavaScript to do some actual "sliding", but our slider will work even without that. ID's make that possible, so let's use them here to drop in some lovely background images.

#slide-0 {
  background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
  background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}

With all this in place, our layout comes into shape:

The CSS (black fading)

Just as a small detail, the temperature set in white may be in danger of not being visible depending on the photo behind it. To ensure that it is, we can make the photo subtly fade to black toward the bottom. A pseudo element will do nicely.

.slide:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(transparent, black);
}

A picture explanation is in order here:

The JavaScript (background sliding)

We're going to use jQuery here because we love life. Our goal is the adjust the background-position of the slides as we scroll. We can set background-position in percentages in CSS, but that alone doesn't do the cool hide/reveal more effect we're looking for. Based the amount scrolled (which we can measure in JavaScript), we'll adjust the background-position. Alone, that would look something like this:

$("#slider").on("scroll", function() {
  $(".slides").css({
    "background-position": $(this).scrollLeft()/6-100+ "px 0"
  });  
});

The "6" and "-100" in there are magic numbers. Not CSS magic numbers that are prone to frailty, but traditional magic numbers. Just some numbers that happen to make the effect work. A bummer, perhaps, but not that big of a deal. Design-y things are sometimes like that. Perhaps best to leave a comment in the code to that effect. These particular numbers are based on the images I used and their size and what looked good.

The effect here is the background shifting we're after:

Notice the less of the yellow streetcar is visible when the slide is almost out of view.

The JavaScript (imparting structure)

That little snippet of JavaScript looks lonely up there without any structure behind it. A slider is a great excuse to look at a simple way to structure JavaScript.

We can make everything slider-related one object.

var slider = {

};

Then we'll group up the related elements into one area, bind our events together, and write little functions that do very specific things.

var slider = {
  
  el: {
    slider: $("#slider"),
    allSlides: $(".slide")
  },
 
  init: function() {
    // manual scrolling
    this.el.slider.on("scroll", function(event) {
      slider.moveSlidePosition(event);
    });
  },
  
  moveSlidePosition: function(event) {
    // Magic Numbers
    this.el.allSlides.css({
      "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
    });  
  }
  
};

slider.init();

The HTML (adding navigation)

Adding swipe stuff would be super (super) sweet (hint). But for now let's add little press-able links to change slides, rather than relying on the scrollbar. You might even remove the scrollbar in real life (straight up overflow: hidden; on the container). What we need is anchor links that link to the ID's of the individual slides.


  Slide 0 
  Slide 1 
  Slide 2

Style those as you will. For the demo, I make them little tiny gray circles with the text hidden.

The JavaScript (adding navigation)

Our structure is more useful now. We simply add a few more elements we're dealing with, add a new event we're watching for (clicks on nav), and write a little function to deal with that event.

We know how far to animate the scroll position when a nav link is clicked from the ID on the link itself. The link might be href="#slide-1", which we can get "1" from easily. Then the position we need to scroll to is (1 × width of slide), so 300 in our case. We'll store that 300 value right in the JavaScript.

var slider = {
  
  el: {
    slider: $("#slider"),
    allSlides: $(".slide"),
    sliderNav: $(".slider-nav"),
    allNavButtons: $(".slider-nav > a")
  },
  
  timing: 800,
  slideWidth: 300, // could measure this
  
  init: function() {
    // You can either manually scroll...
    this.el.slider.on("scroll", function(event) {
      slider.moveSlidePosition(event);
    });
    // ... or click a thing
    this.el.sliderNav.on("click", "a", function(event) {
      slider.handleNavClick(event, this);
    });
  },
  
  moveSlidePosition: function(event) {
    // Magic Numbers
    this.el.allSlides.css({
      "background-position": $(event.target).scrollLeft()/6-100+ "px 0"
    });  
  },
  
  handleNavClick: function(event, el) {
    // Don't change URL to a hash, remove if you want that
    event.preventDefault();

    // Get "1" from "#slide-1", for example
    var position = $(el).attr("href").split("-").pop();
    
    this.el.slider.animate({
      scrollLeft: position * this.slideWidth
    }, this.timing);
    
    this.changeActiveNav(el);
  },
  
  changeActiveNav: function(el) {
    // Remove active from all links
    this.el.allNavButtons.removeClass("active");
    // Add back to the one that was pressed
    $(el).addClass("active");
  }
  
};

slider.init();

We have an "active" class on the nav links just to use in CSS to visually indicate which slide is active. We handle that by removing "active" from all links and then adding it back to the one that was clicked.

Demo!

Check out this Pen!

Slider with Sliding Backgrounds is a post from CSS-Tricks

Photo Swivel

Guest Author — Wed, 15 May 2013 12:06:33 +0000

The following is a guest post by Alex Young (@the_alexyoung). Alex has created a simple technique to "rotate" the subject of a photo simply by hiding and showing multiple stacked photographs taken at different angles. Enjoy!

Web designers and developers have always fascinated us with fun and engaging ways we interact with their websites. I love discovering new techniques that these designers/developers have come up with. One technique in particular that sparked my interest is something that I saw on Warby Parker’s website. They were able to create a cool effect where model follows the user’s mouse, showing off the different angles of the frames.

I’ve seen this technique mainly used for showing off sunglasses, but I’m interested to see what you guys can come up with for other real-world applications.

Before we begin, you will need a few things. Well, seven things to be exact. You are going to need seven photos of something taken at seven different angles.

HTML Setup

What we are setting up is a container called “faces”, then have created an area that we are going to use to display the photos – “face-area”. We also have a div to hold each of the seven individual images.

Now we'll create a div that is going to do exactly what the name implies. It is going to lay on top of the other div. We can divide this div into 7 small columns and divide them equally across it. These 7 columns will be used to listen for when the mouse is hovering over that specific one. Adding “data-number” to each div will allow us to refer to each in jQuery later on.

CSS Setup

Most of the CSS is pretty self-explanatory. There is one thing I need to mention that is important, make sure that the 7 columns fit perfectly together across the span of the div.

body {
  background: #333 
}

#faces {
  height: 333px;
  width: 500px;
  margin: 0 auto;
  border: 8px solid white;
}

#face-area {
  height: 500px;
  width: 333px;
  position: relative;
}

#the_faces_overlay {
  position: absolute;
  width: 500px;
  top: 0;
  left: 0;
}

#faces .the_faces {
  height: 333px;
  width: 14.2857143%;
  float: left;
  margin: 0;
  padding: 0;
}

jQuery Setup

We need to listen for when each of the columns are hovered over. This is where those “data-numbers” come in handy. If we wanted to add more columns down the road we wouldn't have to add any more JavaScript.

// Reveal the "center" image
var centerImage = $("#image-4").show();

// Bind hovers to each column
$(".the_faces").each(function() {

  $(this).on("mouseover", function() {
  
    $("#image-" + $(this).attr("data-number")).show();
  
  }).on("mouseout",function() {
  
    $("#image-" + $(this).attr("data-number")).hide();

  });
  
});

// Reset center image
$("#face-area").on("mouseleave", function() {
  centerImage.show();
}).on("mouseenter", function() {
  centerImage.hide();
});

Tada!

Check out this Pen!

There you have it! Now you have your very own, head turning model. Use it to show off your very own products. There are tons of uses for this out there. Let me know what you come up with.

Editor's note: this would be a fun demo to work on adding touch support, wouldn't it? Follows a swipe or something.

Photo Swivel is a post from CSS-Tricks