New projects, methods and processes
Visit often to see the latest projects, case studies and to learn more about the methods and processes used to create graphic design pieces, websites and illustrations.
Adding CSS code to style image sprites
This is a continuation of my last post, CSS Image Sprites — Part 1. For my social media buttons, I used one image to create an “image sprite” which is used make links to Facebook, Twitter and LinkedIn.
In order for this one image sprite to create the effect of three separate social media links with “active” and “hover” states, CSS styling needs to be added for each button. In this example, my image sprite will be divided up into six equal sections, each representing the correct position for the various button states. These positions are broken into either “top” or “bottom” and then “left”, “center” or “right”. Exact positioning may also be used as well.
This is a simple example of using an image sprite to create three buttons with “active” and “hover” states. In the latest site I am working on, a similar technique was used on the navigation bar to create six main buttons that use a “active”, “hover” and “current” state. Using this technique to create website links will help the page load faster because it uses fewer images.
Here’s the CSS code that I used to style the Facebook, Twitter and LinkedIn buttons.
On the latest website that I am working on, I decided to use the “image sprite” technique that I recently learned in a CreativeLive class, Website Makeover.
Often in websites, there is a need to create a series of several image links that are placed closed together (ie. navigation bars). Usually with any kind of links, you want to the “active” and “hover” states visibly distinct. Traditionally to create this effect, I would use at least two different images to create a “rollover effect”. While this works, the website needs to upload these two images and if you have several of these kinds of links, the load time required grows.
Using the image sprite technique, only one image is used and the site loads faster. Below is a sample of using one image sprite to create a series of social media links.
Here’s how to create the image for the image sprite technique. Read more ►
One of the highlights of last week was taking my two nieces, Andy (age 17) and Hailey (age 11) to the Seattle Art Museum. Starting with the special exhibit of Nick Cave’s “Soundsuits”, we explored the entire museum, comparing favorite pieces and talking about what made these pieces special or important works of art.
Humans have been creating artwork for at least 35,000 years. Throughout this time, art has served many purposes which are unique to each culture and specific time period. As we walked through the various galleries, we talked about what kinds of artwork were being created and what the art told us about these cultures. Where these pieces supposed to tell a story? What did this painting tell us about the person? How did this piece make you feel?
Some of the pieces in the Modern Art Galleries lead Hailey to exclaim “That’s not art! I could have done that!” Without knowing it, Hailey touched upon the age-old question about what makes something a piece of art. Luckily for Hailey, a curator was present and he talked to her about a specific painting, which gave her a better appreciation for that piece. She left the room saying “I’m going to go home and create a painting that they will hang in a museum.” I hope someday this happens.
Art surrounds us — it informs and educates, encourages thought and discussion, challenges assumptions, and sometimes it is beautiful and inspiring. I have loved art and art history all of my life, and spending a day sharing this experience with my nieces was fantastic.