Transcript
>> My name is Jing.
I will show you how you can create
some great transitional animations
that you would normally associate
with plug-ins, with just CSS.
If you already have a site that works on the iPad, I
will show you how you can use CSS to create effects
that replaces the need for images, and your
site will load faster and use less bandwidth.
So, first, I would like to take you
through a very brief history of the Web,
to show you why using these open Web
technologies have become necessary.
So, in the olden days, websites were mostly about
how much information you could get to the user.
And the challenge designers faced were how do I get
all this text, all these documents, to the user.
But as the Web advanced, and there
is more and more information,
the challenges designers face are more
of How do I organize this information?
and How do I attract the user and make an immersive
experience so the user can absorb this information?
So, for a while, Web technologies have lagged behind
these needs, so people had to turn to plug-ins like Flash
to implement some of these great animated experiences.
But now, these open Web technologies have advanced enough
that you can use them to create some very immersive sites.
And one of the advantages of using these technologies is
that you will have a consistently immersive
experience both on the Mac and on the iPad.
I keep saying open Web technologies.
Specifically, I am talking about HTML5 technologies.
You may be familiar with that term in two different ways.
It could mean the HTML specification, or, in this case, I'm
using it to mean the technologies HTML, CSS and JavaScript.
In addition to working on the iPad, these
technologies have a lot of benefits.
For example, they're lightweight,
because they replace images and plug-ins.
That means your site will be smaller, it
will load faster onto your user's browser,
and especially for your mobile users, that means
they'll see less money on their monthly bill.
They're also faster, because these technologies are built
into the browser, and therefore optimized by the browser.
They're accessible, because all the text is searchable,
indexable by search engines, and readable by screen readers.
And lastly, they intergrate well with older browsers.
So to show you some of these advantages,
we've built a sample Web page,
and I'd like to invite my colleague Mike Thole, who
is also an engineer on the Safari and WebKit team,
to show you how we created this great page.
[ Applause ]
>> Thanks, Jing.
So, like Jing said, we've created a demo site
to show off some of these great technologies.
And we call it The CSS Site of Awesomeness.
The name may be just a little bit over-the-top, but it does
a great job of showing off some of CSS's awesome powers.
So when you look at this page, the
first thing that I want you to know is
that there are absolutely no images used in this page.
It's all just CSS styling.
So let's take a look at a few of the elements,
starting with this red badge on the left.
You'll notice it has a shadow, as well as a
reflection, and it gives it some visual depth.
It actually looks like it's sitting on a plane.
If we look at the sticky, we can see a
subtle light gradient on the bottom portion
of the sticky, and a shadow underneath it.
And we combine these effects to make it look like
the bottom width of the sticky is actually curled up.
The sticky itself looks like it's stuck to the page.
Even the paragraphs for the text
have some visual depth to them.
They look like they're stamped into
the page, using this Inset Shadow.
Next, let's look at the headline.
The CSS Site of Awesomeness.
You probably don't recognize this font, and that's because
it's not a standard font that is usually used on websites.
It's not installed on most users' systems,
so you generally wouldn't be able to use it.
Traditionally, if you wanted to be able to use
a custom font like this, to brand your site,
or get just the look you wanted, you
would need to basically render your text
into an image and then use that image on your page.
Here, what we're using is a CSS font face,
which instructs the browser to go out,
download the actual font, and use it to render this text.
So next, let's look at these buttons.
They have some nice, smooth interactions, where they
-- it's called the accordian effect,
where the one we hover over is
expanded and the others contract.
And we implemented a variety of
different submenu animations.
Please don't make four different animations on your
own site; this is just for demonstrative purposes.
[Laughter].
I like that one; we'll see it again.
It's called the zoom-down animation.
So usually when you see these kinds of
smooth interactions, you think, Well,
that's not HTML; that must be some sort of a plug-in.
But with CSS transitions, you can
do this all in the browser.
And another great thing about that -- it works
on the iPhone, the iPad, and on the desktop.
So, as I mentioned at the beginning, this
site is all done with CSS -- no images.
One advantage of that is that it
makes your site more accessible.
I'm going to do a Find On Page for the word "awesome".
If that headline were rendered as an
image, we wouldn't be able to find that.
I'm also going to look for the word "Javascript",
or "avascript" since I'm missing my "J",
and you'll see that it finds it
even in that graphical red badge.
This isn't just useful for Find On Page.
It's also useful for search engines that are indexing
your site, and for Voiceover, which is a screen reader,
or any screen reader, to make your site
more accessible for the visually-impaired.
And finally, another advantage of using these
technologies is that it makes your site more lightweight.
So I just opened up the Web Inspector, which
is a built-in developer tool in Safari,
and you can see all the resources
that we used to create this page.
You can see I have an index page,
the HTML, a little bit of JavaScript,
a couple of CSS files, and then the Lobster Web font.
Everything all together comes in a little over 70 kilobytes.
The vast majority of that is actually the Web font.
So without the Web font this would be
like 15 kilobytes, which is really small.
If you took the more traditional approach of
cutting up your images into a bunch of pieces
and using that to render your page, which we did, it took 28
different images and weighed about 190 kilobytes at the end.
So this is less than half the amount of bandwidth necessary
to give this page, which is really important especially
on a 3G connection, where those 100
kilobytes could be several seconds.
And with that, I'll turn it back over to Jing, and she'll
show you how to use these technologies on your own sites.
[ Applause ]
>> Thanks, Mike.
So Mike just showed you this really pretty page
we've implemented with just HTML, CSS and JavaScript.
And in today's session, I will show
you how to do three different things.
First, I'll show you how you can create
some of these rich visual effects you see
on this page for your site, without using any images.
Then, I'll be talking about giving you some
tips and tricks you can use to make the text
on your site searchable, accessible,
and easily maintainable.
And lastly, I will show you how to create
those animations you just saw in the menus.
So first, let's look at what types
of visual effects are on this page.
For example, there's this effect on these paragraphs, where
the paragraphs look like they're stamped into the page.
And there's also the gradient, the shine
on the top navigational menu buttons,
something that you've probably seen around the Web.
And then here's this really graphically-rich
badge that's really eye-catching.
So I'll show you how to do each of those things.
So perhaps you've tried to create this paragraph style
before, and if you tried to create this with images,
you probably know that you need a total of
nine different images to create such an effect.
And after you upload those images, you still
have to position them correctly in your page,
and it's just really a pain to implement and to maintain.
So, with CSS, you can do this exact
effect with only two lines of code.
So with the first line of code, all you need to do is use
the Border Radius property to add the rounded corners.
And this gives you the same rounded
corners on all four corners.
So if you wanted different types of corners on each
side, you could also specify a different radius
on each different corner, giving
you some kind of really funky shape.
Even cooler than that is that you
can specify a different horizontal
and vertical radii to make some kind of leaflet page look.
So this is really, really useful.
You can use this to create something similar to
the sticky effect that we've created on our site.
All right, but let's go back to the
basics, just having the round corners.
Now, the next thing you need to do is add the shadow on.
And you can use the Box Shadow property.
You may know this, but here the
Box Shadow has a -webkit prefix.
I will explain why it has a prefix later, but all you need
to know now is, you can start using this property now,
and it will work on all current
and future versions of Safari.
So, to add the box shadow, just specify the style,
which means you want a shadow on the inside; the color,
the horizontal offset, the vertical
offset and the blur radius.
And this gives you a shadow, when put on top of a
lighter background image, you get this inset look.
So say if you wanted your paragraph to jump out
from the page, instead of set into the page.
You can still use the Box Shadow
property without the Inset style.
And that will help you create a drop shadow.
So with only two lines of CSS code, you can
create this awesome inset paragraph effect.
Now, let's take a look at an effect that you
might have seen somewhere on the Internet,
where navigational menu buttons look like they're
shiny because they have this glossy sheen to them.
And you might have seen how they were made.
Usually they're made with a different background
color and a semi-transparent image on top.
And together, they make this nice gradient.
So you can get rid of that image by
replacing it with a WebKit gradient.
And it's very easy to do.
Just specify the type of gradient, the starting and ending
points of the gradient, and the starting and ending colors.
So this creates a smooth gradient, which, if you're
looking for the sheen look, is probably not enough.
So to add that sharpness to it, you can use a
color stop between the front and ending colors.
So color stop, you specify where you want it
to be and what color should be at that point.
So adding a few color stops, you
can create this sharp sheen, which,
applied to the background color,
looks like the button you want.
And you can just replace that background
image with this code.
And in fact, CSS gradients can replace
any images you're using in the CSS styles.
So, you may be thinking that if you already had
this made as an image, it's not really worth it
to learn the actual line of code
and to have to change all of it.
But CSS gradients can do some things
that bitmap images can't.
For example, if you had a diagonal image, and you
wanted to scale your element up really, really big,
if you're using CSS gradients, you're
preserving the quality of the gradient.
You still get that sharp line, which you
can't reasonably do with bitmap images.
So, with just that one line of gradient,
you've created an image for your glossy button.
Now let's look at this shiny badge.
This badge is really useful for calling out important
things on your site, because it's very eye-catching.
It's very visually pleasing, and it's really useful for,
say, highlighting a new feature or something like that.
So I'll show you how you can have
a similar badge on your page.
So for this badge, there are several different effects.
There is a gradient that comes down from the top, there's
this embossed border looking thing around the badge,
and there's a reflection and a shadow, which together
make the badge look like it's sitting on the flat plane.
So I'll show you how to do each
of those four things in turn.
But first, if you're wondering
how did I get the round thing,
this is just applying a border radius to a square element.
That's the easiest way you can make a round element in HTML.
Now, let's look at the shine.
You're only seeing part of the effect here, because the
rest of it is being clipped by the borders of the element.
So if you want to see the whole
thing, it actually looks like that.
And this can be created using a CSS radial gradient.
And it's similar to a linear gradient, so you specify
the type first, then you specify the starting circle
for your colors, and then you specify
the ending circle for your colors.
And just like linear gradients, you
specify the starting and ending colors.
And all of this is being clipped by the borders
of your element, creating a nice smooth gradient.
So to create that shine look, we'll do the same thing we
did with the linear gradient, by adding some color stops.
And to make it off to one side, just adjust the radius
a little bit and move the centers of the gradient off
to the bottom right, so that you can only see the top
left, giving you this very nice-looking shine effect.
So, radial gradients are great
for creating a shine like this,
but they're also great for creating
dynamic borders on your round elements.
For example, this embossed border is actually a
second radio gradient applied to your elements.
And you can do this by just comma-separating your
radial gradients inside the background image.
Okay, so let's see what you've learned.
I've shown you how to create that shine
and that border on your round elements.
So just with those two, you already have a very
eye-catching, non-standard element on your page.
To go a step further, you can create
some feel of three-dimensionality
by using the addition of a reflection and the bottom shadow.
So let's look at the reflection first.
Using the Box Reflect property, you can
specify where you want your reflection to be,
how far it is from your element, and the mask for it.
The easiest thing to do is to make a white mask, and
that just shows you a completely opaque reflection,
which doesn't really look like a reflection.
So, to make it look realistic,
you need something that fades out.
So you could use an image that has a color that slowly
fades from black to gray, but as I mentioned before,
you can use CSS gradients anywhere you use images.
So instead of embedding another image,
let's just use a CSS gradient for this.
And that gives you the desired reflection look.
So the last thing you need to make this badge look
like it's standing on the floor is the shadow.
And since you want the shadow to be a different shape than
your badge element, the easiest thing to do is probably
to just create another element using
the CSS after pseudo-element.
And to make it look like a shadow, just
give it a black to transparent gradient.
Now, now that we want to squish
this, the way we would do this
in an image editing program is
to just drag the top knob down.
Well, you can do this kind of transforms
also in CSS, using the Transform property.
So, there's four different things
you can do with Transforms.
You can rotate your elements, you can skew the elements and
slant them, you can make your elements bigger or smaller,
also only bigger in one dimension, and
you can also move your elements around.
And this is really convenient because Transforms
don't change the layout of anything else on the page.
So going back to the shadow, all we need is
a scale y to make the shadow really short.
And that looks like the shadow we want,
but that's probably not what you want.
Because it's right behind your badge.
So to make it below your badge, just
give it a transform origin of Bottom.
And there you have this nice, shiny badge that
looks like it's standing on the flat plane.
[ Applause ]
So I've shown you how you can use some CSS
effects to create some very graphical looks.
And actually, the things I've shown you are
the only CSS properties you need to create all
of the graphical effects you see on this page.
We did a little experiment.
How much more efficient is this, compared to using images?
We built this exact same design using images and we
ended up with a total of 28 images and 190 kilobytes.
That's a lot of images to be managing.
So by using CSS, we've reduced the size
of the page to zero images and half --
less than half of the size of what it had before.
And this was a really simple site
that only had a few visual effects.
So imagine what you could do with your site.
Okay, so I've shown you how to create some rich visuals, and
eliminate some unnecessary images, making your site faster.
Now, let's talk about how you can make some
nice-looking text that's also maintainable.
So, as you can see, for the title of my page,
I'm using a custom font, and also a glow effect.
And if you were doing this with images,
you'd have a couple of challenges.
And one is that this font can only be used for
static text; it can't be used for body text,
or anything that is changing or is duplicated.
And you know, if you wanted to change, if you found
a spelling mistake and you wanted to change it,
then you would have to re-render
the image and upload it again.
And this is a problem that a lot of designers face today.
It is how can you get pretty-looking fonts on your page,
when there are only about a dozen
common fonts between Windows and Mac?
So the great thing about CSS is that you
can embed a custom font into your page.
So I had this font file, and before you
embed, you should check to make sure
that you have the rights to embed your file.
So I had this Lobster Font file
that I have the rights to embed.
And all you have to do is specify the font face rule
with the font family and the URL to that font file.
And using this font will be exactly the same
as using any other font that you've been using,
and this gives you a custom font that's still text,
still easily editable, searchable and accessible.
Just one more small thing to really make your
text stand out and give a really subtle glow:
glows are done with the same thing
as shadows, using Text Shadow.
So you just use the Text Shadow property with a
white color and no offset, and that's your glow.
So in addition to being able to create shadows
and glows with the Text Shadow property,
you can also create another, different effect for your text.
Here in this badge, you see that the text
looks like it's engraved into the badge,
and that's just using a text shadow
that's offset to the left and top.
It's that easy.
So those are just some tips to get your text working
well, accessible, searchable, and easily editable.
Now let's talk about animations.
I said it earlier in the presentation: nowadays
you really need animations to draw in your users.
And so far, you've done so much work making a great
site that goes fast, that has accessible text,
so you just need to add that final
polish and really engage your users
with animations when they're interacting with your site.
And we showed you four different
effects we made with animations.
There's the menu that fades in, there's the
drop-down menu, there's one that comes in one
after another, and there's another one that goes "Bam!"
or something.
So I'll show you -- Mike and I, actually,
together, will show you how to do some of these.
And they're really, really easy.
So first, let me explain how this is done.
All of these are done with the CSS Transition property.
And the Transition is something that makes an instantaneous
state change into one that can happen over a period of time.
So let's look at this fading menu in slow motion
to see what type of effect you can create.
So the menu is waiting for a button
to expand fully and fading in.
And when the user hovers out of the
menu, it disappears immediately.
So, to create this effect, the first thing you need to do is
to define the starting and ending states for your animation.
And for a menu like this, your starting
state would be the Mouse Out state,
and the ending state would be the Hover state.
So on the starting state, you want
your menu to be transparent,
and on your ending state, you want
it to be completely opaque.
Now, to transition between the two, all you need is
the Transition property with the CSS property you want
to transition, and the duration for which you transition it.
And this is a shorthand way for
writing these two properties.
If you wanted to write them out separately, you
can also use the Transition Property property,
and the Transition Duration property.
So let's take a look at what this code does.
So it looks like the menu is fading in.
But it's not waiting for the button to expand fully.
So to chain your animations together, to make them wait
for one another, you can use the Transition Delay property.
And here I know that button expands for a
quarter-second, so I'll just add Delay of a quarter-second.
So now, what will happen is, when the user mouses into
your button, your button would wait a quarter-second,
and then become opaque over a period of a quarter-second.
When the user mouses out of your button,
it will do exactly the same thing,
because you're applying the same cell to both states.
So if you want a different animation on Mouse Out,
you know, Mouse In, you can separate the animation.
So for example here, I want no animation on Mouse Out
So what I would do is to take the Transition Duration
and Delay and put it in the Active state.
That means when you're going from the Inactive
state to the Active state, the transitions defined
in the Active state will be used, and when you're
going from the Active state to the Inactive state,
the transitions defined in the Inactive
state, in this case nothing, will be used.
So that's all you need to create this fade-in menu.
Now let's look at something that's
a completely different effect.
This drop-down menu.
And let's look at it again in slow
motion to see what it does.
So it looks like the button is getting
bigger, the same as the Fade In menu,
and then your menu items slowly get taller.
And the easiest way to do this is probably
to just change the height of the entire menu.
And if you already have your fade-in
menu, there's very little you need
to change to get this completely different effect.
Just change the Opacities to webpage
Transforms, and the Transition Property --
change the Transition property to the Transforms.
So you're transforming from a height
of 0 to a normal height.
And that's just two and a half lines of changing code,
and you end up with a completely different menu effect.
So CSS transitions are a great way to
use, to prototype and to experiment
with what types of effects you can have on your page.
Now, I want to show you the last two effects.
Those are really cool because they're coming individually.
But you're probably tired of hearing me talk, so I'm going
to invite Mike back on stage to show you these things.
[ Applause ]
>> Thanks, Jing.
So like Jing said, I'm going to work you through
implementing the third and fourth transitions.
Here I have the demo site.
We learned how to make these two,
and now I'm going to show you how
to make the Blinds transition Let's
look at that one more time.
Do you see how each item comes in slightly after
the previous animation begins, so it's one,
two, three, four, rather than all at once?
And we have the same kind of effect here, except
that they're zooming in, one, two, three, four.
So we have a second demo site, which looks
exactly the same, except for these third
and fourth buttons aren't yet implemented.
You can see, it just comes in instantly
when I hover in this area.
So let's open the site up in TextMate.
So I've separated out the CSS for the transitions into this
pretty small file, to make things a little easier to follow.
And I've got two selectors here, for the Blinds transition.
First here is the starting state, the standard
state when the button is not hovered over.
And we're selecting each list item of the Blinds submenu.
And what we do to it is, we set Opacity to zero,
its Height to zero, and we modify the Padding
and Margins so its vertical dimension is zero.
This basically compresses each
individual list item to a height of zero,
which will move it up directly underneath
the button and make it invisible.
For the destination state, when we hover over it,
we want to of course restore the Opacity to 1,
and we want to restore the Height, Padding
and Margin back to its default value.
That's what we see today when we hover over this.
The menu looks right.
There just isn't a transition.
So, in a very small amount of code, I'm going to follow my
nice to-do here, and add the WebKit transition property.
What we want to transition is the
Opacity, Height, Padding and Margin,
and we're going to set a Transition
Duration of a quarter-second.
Just like we did for the other menu items, and we'll use a
delay of a quarter-second, again, just like the other items.
So I'm going to save, go back to
the demo, and now when I mouse in,
you'll see we get a Blinds effect,
but it's not exactly what we want yet.
They're all coming in at once.
We want them to come in one, two, three, four.
So to do that, what we really want to
do is for each individual list item,
to give it a different transition delay property.
So that each one is slightly longer than the one before it.
Now, we could do that manually, but I think it would be
a little bit cleaner to use some JavaScript to do that.
So I have a JavaScript file here, and I already have a
function stubbed out called SetIncreasingTransitionDelay.
It takes a container element, which is going to be
the container of the list items, the initial delay,
and the delay increment, which is going to be how much
time we want to pause between one, two, three, four.
So let's implement this stub function.
I will cheat to avoid typos.
So, all we're doing is getting an array of
the children, writing a varisome For loop.
For each child, it's going to set
the transition delay property
to be the initial delay plus the delay increment
times the iterator, and we're going to append S
because the units we're using here are seconds.
So that looks good.
But of course we need to actually call that somewhere.
So I've already got this in a thing called
Load, which is called when the page loads.
And inside of it, I'm going to get the Blinds
submenu, just using Document.GetElementByID.
And we're going to call the SetIncreasingTransitionDelay
helper function on it, passing in the Blinds submenu,
and we're going to use a quarter-second initial
delay, and a .15 second delay increment.
So it's just that little bit of JavaScript,
which is just setting up the CSS property.
It's not actually doing anything at animation time.
We can go back here, and there we go.
One, two, three, four.
[ Applause ]
And we're going to do this fourth button as well,
and we're going to go back to the completed site
to remind you of what it should look like.
And because I love seeing it.
So notice that when it starts out, the items are very large.
And then they get smaller, and zoom into place.
So what we're going to want to do is go back to
our Transition CSS, go down to the Zoom area.
I have these same two selectors, one for the
Unselected state and one for the Selected state.
And right now, I'm transitioning the
Opacity from 0 to 1, but it's instantaneous.
There's not yet a transition here.
So the first thing we need to do
is to make our items very large.
And we're going to use a Transform property to do that,
and we're going to make it five
times as large in both directions.
So that's the Transform property, where we scale 5 by 5.
I'm also going to make the Transform Origin be the top
center, so that they all align underneath the button.
So if we just do this, we'll get
something pretty ridiculous looking.
Whoops, wrong one.
We'll get something pretty ridiculous looking.
That's actually what we want as a starting
state, obviously not as an ending state.
So let's modify the Destination CSS and
reset this Transform back to a scale of 1 1.
So now, when we hover over it, we'll
just see this standard, boring menu.
That's because we haven't yet implemented
the transition to make the state change,
transition nicely, rather than be atomic.
So that's very easy to do, as you've already seen,
and we're just going to add the Transition property,
this time with the WebKit Transform and Opacity as its
value, and again with a duration of a quarter-second.
So with that change, we now have all
of the items zooming down at once,
which is pretty neat, but that's
still not the effect we want.
And I bet you can guess what we're going to do now.
We just need to use our Helper function again, and
set up a delay for each of those different list items.
So we get the Zoom-down submenu,
just like we got the Blinds submenu.
We call our helper function, use the same
quarter-second initial delay where we're going
to make the delay increment a little bit smaller,
because for this particular effect I just think
it looks a little bit better if it's pretty fast.
So with that change, I'll reload, and there we go!
[ Applause ]
So you saw how we got four different effects
with just the few lines of CSS, and it was all,
I think, pretty simple to understand and explain.
So with that, I'll turn it back over to Jing.
[ Applause ]
>> Thanks, Mike.
That was awesome, wasn't it?
I hit the slide.
So, Mike just showed you how to
create some really cool transitions,
and you saw that there really wasn't a
lot of code involved, and this is great.
Okay. So I'm going to go back to something
I referred to earlier in the presentation.
I told you that I will talk about why some
of these properties have the -webkit prefix.
And that's because CSS properties take a very long time to
finalize, and during revisions, their syntax can change,
and different properties, and different
parameters could change meanings.
And as Web developers, you don't want your
site to break if you're using these properties.
So that's why browsers have browser-specific prefixes.
This differentiates them from the finalized CSS syntax,
so you can start implementing using these
properties now, and have them work in the future.
All right, so we've bombarded you with a lot of information,
and just as a summary, if you learned nothing else,
remember that you can create a lot
of rich visuals with CSS properties.
You don't -- for all the things that you think
you might need images for, you actually don't.
You can also make your text more searchable, more accessible
to screen readers, better indexed by search engines,
and more easily maintainable by using custom text effects.
And you can really add polish to your site and
differentiate it from the millions of other sites out there
by using these transitions when interacting with the user.
So this is just a really small sample
of all the things you can do with CSS.
And if you're interested in learning more, you should refer
to the CSS specifications that have all the properties,
and if you're a Web designer, A List Apart, if you
haven't heard of it, is a really good resource site,
talking about how to create great designs
on the Web with open Web technologies.
And the Font Squirrel is also a really good resource
for finding fonts that you can embed into a Web page,
and they even generate the embedding code for you.
So all you do is click, copy, paste, and you're done.
If you have questions for us, you can contact
our Safari technology evangelist, Vicki Murley.
You should also check out the HTML5
demos if you haven't already done so,
and obviously also go to the Safari
dev center and development forums
to learn about all the features that we support.
And we also have many sessions coming up
this week to help you build a great website.
So right after this session in this same room is
CSS Effects Part 2, in which you will learn how
to create amazing 3D transforms and keyframed
animations, things that you see a lot in photo galleries.
If you're interested in how to really integrate your
website with the iPhone OS, you should attend the Touch
and Gesture Detection that happens tomorrow afternoon.
And we've shown you how you can inspect
how much space your Web page is taking
and how fast it's loading using Web Inspector.
And there's a session tomorrow morning here that
teaches you how you can really take advantage of it
to more streamline your Web development process.