The Zooming, Blurring Profile Photo by Tweetbot

Source: http://www.benpackard.org/blog/?p=125
This was originally published to CocoaCovers.com in March 2014. 
That website is now deceased, so I am re-posting the content (this 
single post) to benpackard.org.

Tweetbot is a Twitter client by Tapbots. It is full of thoughtful, playful interactions. One of my favorite details is the zooming header image effect when you scroll a user’s profile:

original

It’s a neat way to handle the extra canvas exposed by the elasticity of the scrolling behavior, which can otherwise look a little awkward when the uppermost content is a photo or some other visually busy element. This is especially true when a toolbar is present – Safari is a good example of the default behavior:

safari-scroll

There’s nothing egregious about this interaction; it’s just a little clumsy-looking. A big gray box, smack in the middle of the more artfully crafted toolbar and content. Tweetbot turns this same scenario into an opportunity to delight the user.

What’s Hapenning

There are three silmultaneous animations occurring as the user scrolls. First, and most obviously, the image expands to fill the available space. Note that the image maintains its aspect ratio, though – it never stretches. Also, if the background image happens to be taller than the content, the hidden edges of the photo are fully revealed before any scaling takes place.

We also have the gradual fade-out of the user’s profile information, and the un-blurring of the image. If you look carefully, the image also brightens as it is revealed – presumably to ensure enough contrast with the white text in its resting state.

My Cover

Let’s start by creating two main views inside a scrollview. The ‘profile view’ will hold the circular photo and all of the user info. I’ve given it a gray background for now so its easy to identify. Below the profile view, the ‘content view’ is just a screenshot from the app since we’re not going to be implementing that part.

two-subviews

Next, we place the header image underneath the profile view. The trick here is to make the image its own independent view in the scroller – a sibling of the profile view, not a child. This will let us adjust it with much more freedom since it won’t be constrained by the bounds of the profile view.

Also note that I’ve used an image that is taller than the profile view so that we can test the zooming action works correctly later.

background-added

Now we will start animating the zoom. First, we need to re-position the image as the user scrolls to make sure that the photo is always vertically centered between the bottom of the toolbar and the top of the content view. Remember that the profile view doesn’t grow in height – it just moves down the page with the rest of the content. So the center of the image actually moves away from the center of the profile view as the user scrolls. Since I’m a fan of autolayout (we do exist), I added an NSLayoutConstraint that does exactly that. For every two pixels of scrolling, one pixel of vertical adjustment is required to maintain a vertical center alignment.

centering

Now lets get the zoom working. We can add another constraint here to set the size of the image view to match the native proportions of the image itself. Just like before, this gives us a constant to tweak as the user scrolls.

stretching

Its a start, but the image is stretching. This is easily rectified using one more layout constraint to maintain the original aspect ratio.

aspect-ratio

Much better.

Next we need to blur and darken the image, and only reveal it incrementally. If we place a blurred and darkened copy of the image into the view heirarchy we can just update its transparency. I found a nice implementation of the necessary image adjustments by Brian Clark and slotted my new image into place above the real photo.

blurred-layer

The blurry image is constrained to maintain the same position and size of the original photo. Now we can simply fade out both the profile info and the blurry image to reveal the photo.

almost

We’re almost there. But we’re still missing that nice detail from the original – the hidden top and bottom slivers of the image should be revealed before any zooming takes place. This is accomplished by comparing the height of the image with that of the profile view and storing an ‘overlap’ value that represents how much of the photo is hidden. Only once the user has scrolled beyond that value does the scaling begin.

final

In the Wild

I added this same detail into my baseball app No-Hitter Alerts, though I didn’t need the blurring behavior since the image is a known quantity and doesn’t obscure the text.

no-hitter-alerts

The Tab

The source code for this implementation can be found on GitHub. Thanks for reading!

Update

Brian Clark improved his image darkening implementation after I posted this article. Thanks to him, and to Lukas Spieß for updating the demo project.

CSS Button Generator

You may need this tool : http://www.bestcssbuttongenerator.com/

Designing CSS Buttons: Techniques and Resources

Source : https://www.smashingmagazine.com/2009/11/designing-css-buttons-techniques-and-resources/

Buttons, whatever their purpose, are important design elements. They could be the end point of a Web form or a call to action. Designers have many reasons to style buttons, including to make them more attractive and to enhance usability. One of the most important reasons, though, is that standard buttons can easily be missed by users because they often look similar to elements in their operating system. Here, we present you several techniques and tutorials to help you learn how to style buttons using CSS. We’ll also address usability.

You may want to take a look at the following related posts:

Before we explain how to style buttons, let’s clear up a common misconception: buttons are not links. The main purpose of a link is to navigate between pages and views, whereas buttons allow you to perform an action (such as submit a form).

In one of his articles, Jakob Nielsen writes about command links, which are a blend of links and buttons. But he recommended that command links be limited to actions with minor consequences and to secondary commands. To learn more about primary and secondary commands (and actions), check out Primary and Secondary Actions in Web Formsby Luke Wroblewski. To learn more about the differences between links and buttons, read Creating Usable Links and Buttons at UXBooth.

Basic Styling Link

The simplest way to style links and buttons is to add background color, padding and borders. Below are examples of the code for the link, button and input (“Submit”) elements.

<a class="button" href="#">Sample buttona>
  <button class="button" id="save">Sample buttonbutton>
  <input class="button" value="Sample Button" type="submit" />
.button {
  padding:5px;
  background-color: #dcdcdc;
  border: 1px solid #666;
  color:#000;
  text-decoration:none;
}

This simple code minimizes the visual differences between links and buttons. And here are the rendered examples of the code above:

Screenshot

The important thing to note is that these three elements render differently with the same CSS. So, you should style these elements carefully to ensure consistency across your website or application.

IMAGES LINK

Adding images to buttons can make the buttons more obvious. Sometimes the image itself clearly communicates the purpose of a button; e.g. a loupe icon for searching or a floppy disk icon for saving. The easiest way to add an image to a button is to use a background image and then position it accordingly. Below are our examples with a checkmark icon.

.button {
  padding: 5px 5px 5px 25px;
  border: 1px solid #666;
  color:#000;
  text-decoration:none;
  background: #dcdcdc url(icon.png) no-repeat scroll 5px center;
}
Screenshot

BUTTON STATES LINK

In addition to their default state, buttons and links can have two other states: hover and active (i.e. pressed). It is important that buttons appear different in different states so that users are clear about what is happening. Any element in a hover state can be styled by invoking the :hover CSS pseudo-class.

a:hover {
  color:#f00;
}

Though very important, the active state is rarely implemented on websites. By showing this state, you ensure that your buttons are responsive and send a visual cue to users that a button has been pressed. This is called isomorphic correspondence, and it is “the relationship between the appearance of a visual form and a comparable human behavior” (Luke Wroblewski, Site-Seeing). The article Pressed Button State With CSS elaborates on the importance of the active state.

a:active {
  color:#f00;
}

There is yet one more state, one that is seen when navigating with the keyboard: the focus state. When the user navigates to a button using the Tab key, it should change appearance, preferably to have the same appearance as the hover state.

a:focus {
  color:#f00;
}

The examples below shows the common way to style button states. The hover state is a bit lighter than the normal state, while the active state has an inverted gradient that simulates a pressed action. Although you need not limit yourself to this styling, it is a good place to start.

Screenshot

We should talk about how to handle the outline property for the :active and :focus states. Handling this property well is important for the experience of users who employ the keyboard as well as the mouse. In the article Better CSS Outline Suppression,” Patrick Lauke shows how buttons and links behave in different combinations of states and explains why the outline property should be invoked only with the :active state.

Screenshot

The blue “Buy now” button on Apple.com has a slightly lighter background for the hover state and an inset style for active state. Even the main navigation button on Apple’s website implements all three states.

Screenshot

Although it doesn’t implement the active state, this fancy button on Tea Round has a nice fading effect on hover.

Screenshot

The “Read more” button on UX Booth turns green on hover and moves down one pixel in the active state, which simulates the effect of pressing a button.

USEFUL READING LINK

The article Rediscovering the Button Element shows the differences between links and buttons and explains how to style buttons easily.

Screenshot

Styling Form Buttons covers the basics of styling buttons, with many examples.

Screenshot

Beautiful CSS Buttons With Icon Set shows how to style buttons using background images. Although not scalable, these are really nice buttons.

Screenshot

Recreating the Button is a very good article that explains how Google ended up with the buttons that it uses on majority of its websites.

Screenshot

Scalable CSS Buttons Using PNG and Background Colors explains how to create really stunning buttons for all states. Although it uses jQuery, it degrades gracefully if JavaScript is turned off.

Screenshot

Sliding Doors: Flexible Buttons Link

One important consideration needs to be made when styling buttons: scalability. Scalability in this context means being able to stretch a button to fit text and to reuse images. Unless you want to create a different image for each button, consider the “sliding doors” technique. This technique enables you to create scalable, rich buttons.

Screenshot

The principle involves making two images slide over each other, allowing the button to stretch to the content. Usually, this is done by nesting a span element within a link. As shown in the image above, each element has its own background image, allowing for the sliding effect. The two code snippets below show the structure and basic styling for this effect.

<a href="#"><span>Typical sliding doors buttonspan>a>
a {
  background: transparent url('button_right.png') no-repeat scroll top right;
  display: block;
  float: left;
  /* padding, margins and other styles here */
}
a span {
  background: transparent url('button_left.png') no-repeat;
  display: block;
  /* padding, margins and other styles here */
}

The advantages of this technique are that it:

  • Is an easy way to create visually rich buttons;
  • Ensures accessibility, flexibility and scalability;
  • Requires no JavaScript;
  • Works in all major browsers.

USEFUL READING LINK

The “Sliding Doors of CSS” article on A List Apart (part 1 and part 2) covers the basics of this technique. Although a bit old, these articles are a must-read for every Web developer.

Screenshot

Also a bit old, Creating Bulletproof Graphic Link Buttons With CSS is an excellent article that shows how to create bulletproof, resizable, shrunk-wrap buttons. Also a must-read.

Screenshot

Filament Group has a variety of excellent articles and tutorials. Its second article on CSS buttons, Styling the Button Element With CSS Sliding Doors,” explains how to create buttons by combining techniques. Although it doesn’t support the active state, it can be easily extended.

Screenshot

If you want Wii-like buttons, the article Simple Round CSS Links (Wii Buttons) provides all the necessary resources and explanation on how to style them.

Screenshot

The common way to achieve the CSS sliding doors technique is to use two images. However, the article CSS Sliding Door Using Only One Image shows that it is possible to achieve the same effect with only one image.

Screenshot

CSS Oval Buttons and CSS Square Buttons from Dynamic Drive are two other articles that show the effectiveness of CSS sliding doors.

Screenshot

CSS Sprites: One Image, Not Many Link

With CSS Sprites, one image file contains multiple graphic elements, usually laid out in a grid. By tiling the image, we show only one Sprite at a time. For buttons, we can include graphics for all three states in a single file. This technique is efficient because it requires fewer resources and the page loads faster. We all know that many requests to the server for multiple small resources can take a long time. This is why CSS Sprites are so handy. They significantly reduces round-trips to the server. They are so powerful that some developers use CSS Sprites for all their graphics. The Holy Sprites round-up on CSS Tricks offers some very creative solutions.

The example below shows the simplest use of CSS Sprites. A single image contains graphics for all three button states. By adjusting the background-position property, we define the exact position of the background image we want. The image we’re choosing to show here corresponds to a background position of top: -30px and left: 0.

Screenshot
a {
  background: white url(buttons.png) 0px 0px no-repeat;
}
a:hover {
  background-position: -30px 0px;
}
a:active {
  background-position: -60px 0px;
}

For general information and resources on CSS Sprites, check out The Mystery of CSS Sprites: Techniques, Tools and Tutorials.”

USEFUL READING LINK

In this easy-to-follow tutorial How to Build a Simple Button with CSS Image Sprites,” Chris Spooner explains how to create a CSS Sprites image in Photoshop and use it with CSS.

Screenshot

Transforming the Button Element With Sliding Doors and Image Sprites shows how to enrich a button element with a combination of sliding doors and image Sprites. It implements the active state in a very interesting way, not by using different images or colors but rather by positioning.

CSS 3: Buttons Of The Future Link

CSS 3 allows us to create visually rich buttons with just a few lines of code. So far, this is the easiest way to create buttons. The downside of CSS 3 is that it is currently supported only by Firefox and Safari. The upside is that buttons styled with CSS 3 degrade gracefully in unsupported browsers. By using the browser-specific properties -moz-border-radius (for Firefox) or -webkit-border-radius (for Safari), you can define the radius of corners. Here are a few examples of what can be done with the border radius property.

Screenshot

For better results, you can combine CSS 3 rounded corners with the background image property. The example below shows a typical button with a gradient image, the first without rounded corners, and the second with.

Screenshot

Compared to sliding doors, this technique is far simpler. However, if you want to maintain visual consistency across all browsers, then use sliding doors, because it works in all major browsers, including IE6. To learn more about the capabilities of CSS 3, read CSS 3 Exciting Functions and Features: 30+ Useful Tutorials.” And here are a few good tutorials on styling buttons with CSS 3 features.

USEFUL READING LINK

Super Awesome Buttons With CSS 3 and RGBA shows the power of CSS 3 with rounded corners, Mozilla box shadows and RGBA, which is a color mode that adds alpha-blending to your favorite CSS properties. This is one of the best examples of CSS 3 buttons.

Screenshot

Creating buttons without Images Using CSS 3 explains the drawbacks of using images for buttons and shows several options for creating image-less CSS 3 buttons.

Screenshot

Instant Tools: Are They Useful? Link

Tools exist for creating buttons, such as Easy Button and Menu Makerand My Cool Button, and for creating CSS Sprites, such as CSS Sprite Generator, but the question is, do they really help you create buttons that fit your needs. Although they are configurable and easy to use, your creativity and control over the results are limited, which makes for average-looking buttons. Using one-size-fits-all buttons is not a good idea.

The solution is to use Photoshop (or a free alternative) and the proven techniques described in this article. If you are a beginner with Photoshop, here are several excellent tutorials on creating amazing buttons.

If you don’t know where to start, iPhone-Like Button in Photoshop is the perfect choice. In only 10 to 15 minutes, you will be able to create the kind of buttons seen on the iPhone.

Screenshot

How to Create a Slick and Clean Button in Photoshop is a very detailed tutorial that guides you through 30 simple steps and helps you learn the Photoshop basics. In addition, the article explains how to use these graphics in combination with HTML and CSS to create fully functional CSS buttons.

Screenshot

Buttons And Usability: Instead Of Conclusion Link

The techniques described above can help you create stunning buttons. However, because they play a critical role in website usability, the buttons should meet some key principles:

  1. First consider the labeling. Always label buttons with the name of the action that the user is performing. And always make it a verb. A common mistake is to label buttons “Go” for various actions such as searching, sending email and saving. Labels should also be short and to the point; no need to clutter the user interface.
  2. As mentioned, include all button states (default, hover, active) to provide clear visual cues to the user as to what is happening. Button outlines should remain in the active state only.
  3. Clearly distinguish between primary and secondary actions. The most important action should be the most prominent. This is usually done by giving primary and secondary actions different colors.
  4. Pay close attention to consistency. Buttons should be consistent throughout a Web application, both visually and behavior-wise. Use CSS sliding doors for reused buttons or CSS 3 rounded corners to maintain consistency.
  5. Though obvious, we should note that the entire button area should be clickable.

Creating Usable Links and Buttons explains why users expect buttons sometimes and links other times. It also shows how to choose between the two elements.

Screenshot

How to Design Buttons to Help Improve Usability explains some usability principles that should be considered when designing buttons. It covers the basics of icon usage, appearance, behavior, hierarchy and consistency.