So, I realize I haven’t blogged in awhile. I have been making this book on our Europe trip (and I also got a new phone that I can’t stop playing with…the new EVO, it’s amazing). I used Blurb and was really impressed. It turned out pretty good, although I wish we would have had a better camera for some of the shots, next time we’ll have to splurge on a digital SLR. The cool thing about Blurb.com is you can download InDesign templates that mark the bleed and margins you will need. It’s also nice because you can layout the whole book in InDesign and then just save out and upload a high res pdf.
The 185 page book turned out surprisingly well (even with just a point and shoot camera). You can view it here.
If you’ve designed a website that uses Web fonts, enter the Web Font Awards for your shot at bragging rights, publicity, and cash and prizes. Browse the gallery to see how Web fonts are being put to use and to help pick our Community Choice winner. Attend the Future of Web Design conference where a live panel will select the Judges’ Choice winners. Learn more.
Gap’s new logo (above). I like the old logo better, more of a classic look. The new logo looks really generic.
Read more about the new logo at Brand New.
And the next “How To” is going to be with animation in CSS3. This is a quick and really simple way to animate buttons, or any div on your site. You can view a demo of what you will be creating here. I’ve created two boxes with just a slight difference in animation. As you can see in the demo, one animates after you hover over it and the other animates after the page is loaded.
Your going to start off with a blank HTML and CSS document, just like we did in the Transitions “How To”.
The HTML is pretty simple. You have a container div that wraps around each box (I did this so that they could float next to each other, but it is not necessary). Then you will have a div that creates the actual boxes and a <p> tag that creates the type. My HTML looked like this:
<body>
<h2>DEMO</h2>
<div id=”animationDemo”>
<div id=”box”></div>
<p>Hover over me</p>
</div>
<div id=”animationDemo”>
<div id=”box2″></div>
</div>
</body>
The CSS is pretty simple as well. Here is the CSS that styles the box and type:
#container {
width:500px; height:340px; margin:0 auto; border:1px #aaa solid; padding:10px; }
#box {
width:50px; height:50px; margin-bottom:17px; background-color:#333; -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5);}
#box2 {
width:50px; height:50px; margin-bottom:17px; background-color:#333; -webkit-box-shadow: 0 0 16px rgba(66, 140, 240, 0.5); }
p {
font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#333;}
h2 {
font-family:Arial, Helvetica, sans-serif;font-size:48px;margin:10px auto;text-transform:uppercase;}
#animationDemo {
width:50%; float:left}
Now for the CSS that animates the box on the right:
#box2 {
-webkit-animation-name: resize; the name of the animation (later we will declare what this should do)
-webkit-animation-duration: 1s; the length/time of the animation
-webkit-animation-iteration-count: 4; the number of times the animation repeats (you can notice it repeating when it pauses and keeps going), this number is actually doubled if you count the total number expanding and contracting
-webkit-animation-direction: alternate; this causes the box to animate back to it’s original size (delete this line and post to see the difference)
-webkit-animation-timing-function: ease-in-out; the type of animation (see the transitions demo to view different functions)
}
The CSS for the hover animation on the box on the left is the same as above. All you need to do is add a hover to the div (like you do to style a link):
#animationDemo:hover #box, #animationDemo.hover_effect #box {
-webkit-animation-name: resize;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 4;
-webkit-animation-direction: alternate;
}
And the last of the CSS, which declares the “resize” animation/tells the browser what size to resize to and changes the color from gray to red:
@-webkit-keyframes resize {
0% {
padding: 0;
}
50% {
padding: 0 20px;
background-color:rgba(255,0,0,0.2);
}
100% {
padding: 0 100px;
background-color:rgba(255,0,0,0.9);
}
}
Finished! Preview your page in either Safari or Chrome and you will see the animation! Play around with the numbers and you will see what is possible…
Stay tuned for more on CSS3!
I’ve been playing around with CSS3 and thought I would post some “how to’s”. CSS3 takes CSS2 to a whole new level. With it, you can even create transitions, animations, and transforms, lowering the need of javascript and flash within your page. Eventually I will do a tutorial on creating a photo gallery in straight HTML5 and CSS3, but first I thought I would explore, separately, the different parts of CSS3 that make up the photo gallery.
I’m starting off with transitions. Currently, transitions is only supported in Safari and Chrome. You can view a demo of what you will be creating here.
Your going to start off with a blank HTML document. We will add styles later on through an external style sheet, which you can go ahead and attach in your header.
Now, starting the html code. You’re going to have a container div (the gray box holding the smaller boxes inside). Inside the container div, you will have 5 separate boxes. Each of these boxes will have there own id’s, but share a class. Wrap tags around your text and it’s that simple! Here’s what your html will look like:
<h2>Demo</h2>
<div id=”container”>
<div id=”ease” class=”box”><p>Ease</p></div>
<div id=”ease-in” class=”box”><p>Ease In</p></div>
<div id=”ease-out” class=”box”><p>Ease Out</p></div>
<div id=”ease-in-out” class=”box”><p>Ease In Out</p></div>
<div id=”linear” class=”box”><p>Linear</p></div>
</div>
Now for the CSS. Since implementation of CSS3 across browsers is inconsistent, for the time being they use browser prefixes in the CSS, so the CSS will look more complicated than it actually is…hopefully as more browsers accept CSS3 we won’t have to use the prefixes.
Let’s start with the container div. I wanted this div centered in the browser window and a little bit of padding. My coding for it looks like this:
#container {width:500px; margin:0 auto; border:1px #aaa solid; padding:10px; }
Next, you want to style the 5 boxes through the “box” class. You can make them look however you like, I just kept them simple…You can also style the <p> tag now.
.box {width:50px; height:50px; margin-bottom:17px; background-color:#333; }
p { font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#fff; padding:10px; }
Now for the CSS3 components. In your html, we set up each box with there own id. I did this to show you the different transition options (there are 5: ease, ease-in, ease-out, ease-in-out, and linear). In the demo, you can see the differences in speed between the boxes. The syntax order for transition is pretty simple: the style on your div(color, border radius, … or all), the time to run, then the transition timing function. Here is what your code should look like:
#ease.box {-webkit-transition: all 3s ease; -moz-transition: all 3s ease; -o-transition: all 3s ease;
-webkit-transition: all 3s ease; transition: all 3s ease; }
#ease-in.box { -webkit-transition: all 3s ease-in; -moz-transition: all 3s ease-in; -o-transition: all 3s ease-in; -webkit-transition: all 3s ease-in; transition: all 3s ease-in; }
#ease-out.box { -webkit-transition: all 3s ease-out; -moz-transition: all 3s ease-out; -o-transition: all 3s ease-out; -webkit-transition: all 3s ease-out; transition: all 3s ease-out; }
#ease-in-out.box { -webkit-transition: all 3s ease-in-out; -moz-transition: all 3s ease-in-out; -o-transition: all 3s ease-in-out; -webkit-transition: all 3s ease-in-out; transition: all 3s ease-in-out; }
#linear.box { -webkit-transition: all 3s linear; -moz-transition: all 3s linear; -o-transition: all 3s linear; -webkit-transition: all 3s linear; transition: all 3s linear;}
Again, there is a lot of repetitive code due to the browser prefixes, but hopefully in the near future you won’t need all of it.
Now the only thing left to code is the hover action, which is where you will tell the boxes to rotate, change color, change shape and move to the right. Your code should look something like this:
#container:hover .box, #container.hover_effect .box {margin-left:450px; -webkit-border-radius:30px; -moz-border-radius:30px; -o-border-radius:30px; -webkit-transform: rotate(330deg); -moz-transform: rotate(330deg); transform: rotate(330deg); background-color:#ccc; }
Finished! Preview your page in either Safari or Chrome and you will see the transition! Stay tuned for more on CSS3!
In the last few years, Cartoon Network moved away from there checker box logo and just recently simplified it once more. Along with there new/simplified logo they created different patterns and icons to be used with the logo and branding. I really like all the patterns and icons and with the logo being simple, the patterns and icons really bring out the “cartoony” side of the network. Read more via Brand New
Saks Fifth Avenue’s new campaign “Think about…”, by Pentagram, uses type to get shoppers to consider new style ideas. Love the use of black and white and the simplicity of it. http://www.saksfifthavenue.com/main/thinkabout.jsp
The best of show this year at the Dieline Awards. Nice simple packaging with good copyrighting and typography. See other winners…
Caribou Coffee redesigned there logo. I like there old logo better. I do like the writing on the coffee cups and napkins.
Swedish firm, Hampus Jageland, designed this spice packaging for the Visually Impaired. Nice, clean look that focuses attention on the Braille to make it easier for the visually impaired person reading it. I like how simple it is, I would have never guessed that the packaging was for spices…
