This offer ends soon! Act now and don’t miss out on cash back when trying a monthly Tuts+ Premium subscription.

At $19 a month, Tuts+ Premium is fantastic value. But it’s even better when we hand your first $19 right back to you!

For a limited time, we’re offering $19 cash back to new Tuts+ Premium monthly subscribers when signing up via PayPal. If you’ve been thinking about checking out our extensive library of courses, tutorials, eBooks and guides there’s never been a better time to join up and dive in.

This offer ends at noon on the 20th of May AEST, so act fast.

Become a Tuts+ Premium Member and take your creative & technical skills to a new level.

Join now and get instant access to your very own library of courses, tutorials, and eBooks, available whenever you need them. Become part of a community of over 15,000 members and start getting better at the skills you care about. Our dedicated team adds new content weekly, so there’s always something fresh to sink your teeth into.

Join Tuts+ Premium

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.

<div class="slider" id="slider">
      <div class="holder">
        <div class="slide" id="slide-0"><span class="temp">74°</span></div>
        <div class="slide" id="slide-1"><span class="temp">64°</span></div>
        <div class="slide" id="slide-2"><span class="temp">82°</span></div>
      </div>
    </div>

The container might be a <section>, slides might be <article>. 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:

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.

<nav class="slider-nav">
      <a href="#slide-0" class="active">Slide 0</a> 
      <a href="#slide-1">Slide 1</a> 
      <a href="#slide-2">Slide 2</a> 
    </nav>

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

Email is not dead yet.

Google announced support for embedding and using semantic information in gmail messages in either Microdata or JSON-LD. They currently handle several use cases (actions) that use the semantic markup and a way to define new actions.

Providing a way to embed data in JSON-LD should open up the system for experimentation with other vocabularies beyond schema.org. Since the approach just leverages the general ability to embed semantic data in HTML it is not restricted to gmail and can be used by any email environment that supports messages whose content is encoded as HTML.

We hope that this will lead to many exciting ideas, as developers experiment with applications that use the mechanism to embed and understand concepts, entities and facts in email messages.

Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers before captions.

In this example I will be demonstrating how to achieve this by creating a simple recipe for pancakes and making CSS search for the beginning of each paragraph and adding the number of the step before it.

The HTML

<section>
    	<p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
    	<p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
    	<p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
    	<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
    	<p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
    </section>
    

The objective in this HTML is that each paragraph is a different step and with CSS we can add those dynamically by writing as little as 3 lines of code.

The CSS

CSS counters use the property counter-increment. It has been around for a while it was actually implemented in CSS 2.1, to use it we must first reset the counter’s default value to 0 before anything we want to count shows up on the page, so it’s a good idea to define this in the body styles, like so:

body {
      counter-reset: steps;  
    }
    

This line just sets the counter back to 0 and it also names it, allowing us to later call it and also allowing us to have more than one counter on the page.

The next step is to use the pseudo element :before to target all the paragraphs and add the step number before all the text begins. To do that we need to use counter-increment, then specify the content. We can just use the number or we can append or prepend some text , in this case we’ll prepend “Step ” before the counter’s value, like so:

p:before {
      counter-increment: steps; 
      content: "Step " counter(steps) ": ";
    }
    

We should also make this content stand out a little and to do that we’ll give it a bigger font-size than the paragraphs and make it bold:

p {
     color: #242424;
     font-family: arial, sans-serif;
     font-size: 16px;
     line-height: 20px;
    }
    
    p:before {
      counter-increment: steps; 
      content: "Step " counter(steps) ": ";
      font-weight: bold;
      font-size: 18px;
    }
    

If you want to see this idea in action, you can see the pen I created.

Browser support

A constant concern when working with CSS is the browser support, but since this is a CSS 2.1 implementation the browser support is great: it’s supported by all major browsers, desktop and mobile , the only significant browser that doesn’t support it is IE7, and according to my stat counter IE7 is used by only 0.61% of people so I think we can say that IE7 will be departing soon. Whether or not you need to support IE7 is dependent on the stats of your own site.

Conclusion

CSS counters is not something that you will use in every project but it’s something that you should keep in the back of your mind because someday it may come in handy.

Have you used CSS counters in a project? What uses can you see for them? Let us know in the comments.

Featured image/thumbnail, counting image via Shutterstock.

Magnolia: 150+ Professional Infographic Elements – only $9!

Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers before captions.

In this example I will be demonstrating how to achieve this by creating a simple recipe for pancakes and making CSS search for the beginning of each paragraph and adding the number of the step before it.

The HTML

<section> <p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p> <p>Now add 1 tbsp vegetable oil and whisk thoroughly.</p> <p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p> <p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p> <p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p> </section> 

The objective in this HTML is that each paragraph is a different step and with CSS we can add those dynamically by writing as little as 3 lines of code.

The CSS

CSS counters use the property counter-increment. It has been around for a while it was actually implemented in CSS 2.1, to use it we must first reset the counter’s default value to 0 before anything we want to count shows up on the page, so it’s a good idea to define this in the body styles, like so:

body { counter-reset: steps; } 

This line just sets the counter back to 0 and it also names it, allowing us to later call it and also allowing us to have more than one counter on the page.

The next step is to use the pseudo element :before to target all the paragraphs and add the step number before all the text begins. To do that we need to use counter-increment, then specify the content. We can just use the number or we can append or prepend some text , in this case we’ll prepend “Step ” before the counter’s value, like so:

p:before { counter-increment: steps; content: "Step " counter(steps) ": "; } 

We should also make this content stand out a little and to do that we’ll give it a bigger font-size than the paragraphs and make it bold:

p { color: #242424; font-family: arial, sans-serif; font-size: 16px; line-height: 20px; } p:before { counter-increment: steps; content: "Step " counter(steps) ": "; font-weight: bold; font-size: 18px; } 

If you want to see this idea in action, you can see the pen I created.

Browser support

A constant concern when working with CSS is the browser support, but since this is a CSS 2.1 implementation the browser support is great: it’s supported by all major browsers, desktop and mobile , the only significant browser that doesn’t support it is IE7, and according to my stat counter IE7 is used by only 0.61% of people so I think we can say that IE7 will be departing soon. Whether or not you need to support IE7 is dependent on the stats of your own site.

Conclusion

CSS counters is not something that you will use in every project but it’s something that you should keep in the back of your mind because someday it may come in handy.

Have you used CSS counters in a project? What uses can you see for them? Let us know in the comments.

Featured image/thumbnail, counting image via Shutterstock.

Magnolia: 150+ Professional Infographic Elements – only $9!

On Thursday May 23^rd starting at 1pm LDAP master, Kerberos and Webadmin will be taken down for system maintenance.  During this time account creations and password changes will be unavailable.  The maintenance window will allow staff to apply needed security and application updates.  The outage window is expected to last three hours with services being restored by 4pm on Thursday May 23^rd.  

The new Offscreen Magazine has launched and it features none other than our very own Ryan Carson. It’s no secret that Offscreen is one of my favorite magazines for its integrity, in-depth interviews with the internet’s brightest, great photography, amazing layout, and useful features.

Creator Kai Brach has clarity of intent and passionate conviction when building each issue and it shows in the final product.

Hey Look, It’s Ryan!

It was really cool to see Ryan in this issue of Offscreen, and to read about how passionate he is about family, life and the mission of Treehouse.

If you’d like to peek inside the life of the man that is leading the future of tech education (we’re not biased or anything), then grabbing a copy of issue #5 would be the perfect way to do it.

Real Interviews You Can Learn From

One of the elements that I appreciate most about Offscreen is that Kai gets to the heart of what makes our internet heroes tick through well-executed and personal interviews.

Anthony Casalena is the Founder and CEO of Squarespace, which he started from his dorm room in 2003. I learned a lot from his interview this issue and I got to see what it was really like in the beginning of such a great product. During the company’s early years, Anthony acted as the sole engineer, designer and support representative for the entire Squarespace platform, allowing for it to be a stable and profitable business without the need for large teams.

Anthony’s interview is just one of the many great interviews that Offscreen consistently delivers issue after issue.

We’re Giving Away 3 Copies

Here’s the deal dear readers of the Treehouse blog. We want to give 3 copies away to the people that will use its information the most.

In the comments, tell us the story of a project that you hope to complete by the end of this year. (It’s important to note that I am “of age” and I can smell B.S. a mile away.) Don’t worry about selling or being overly-clever, just be yourself and let us know what dream you want to build.

I’ll pick the best stories myself and announce the winners via Twitter on next Thursday, May 23rd. I can’t wait to hear about your great ideas!

Update: Winners Announced!

The winners of the Offscreen Mag giveaway are Sebastian, Ricky E Eckhardt, & Jordan Earle! Congrats!

Send an email to josh@teamtreehouse.com to claim your prize!

The post Giveaway: New Offscreen Mag Featuring Ryan Carson appeared first on Treehouse Blog.