Web Design Trends 2010 - What Is CSS3 All About? A presentation about the features of CSS3.

1. WEB
DESIGN
trends
2010
• What is CSS3 all about?
http://alexandralocascio.com

2. Box & text
shadow
With the CSS3 box-shadow and
text-shadow rules designers
can create drop shadows,
without the use of Photoshop.
example: tweetcc.com
Box-shadow: 10px 10px 25px
#ccc;
Text-shadow: 2px 2px 5px #ccc;

3. Custom
web fonts
With the @font-face rule in
CSS3, there is a wider selection
of fonts to chose from when
designing.
example: taptaptap.com
@font-face {
Font-family:'Anivers';
Src: url('/images/Anivers.otf')
format('opentype');
}

4. Layers
Transparency is a key design
feature. Now, an alpha value
or opacity rule can be specified
directly in the CSS. CSS3 also
allows for multiple background
images.
example: 24ways.org
Background: RGBA(200, 54, 54,
0.5);
Color: RGBA(200, 54, 54, 0.5);
Color: #f00; opacity: 0.5;
Background: url(body-top.png)
top left no-repeat, url(body-
bottom.png) bottom left no-
repeat;

5. Rounded
corners
Use the border-radius rule to
transform standard HTML block
elements from 90-degree
corners to rounded corners.
This can be given to all
corners, or to one corner only.
example: twitter.com
Border-radius: 20px;
Border-top-right-radius: 20px;

6. Animation
Neutron Creations’s blog uses
webkit-transform to spin the
circle graphics (view it with
Mac Chrome or Safari). If your
browser doesn’t support
webkit-transform, it will just
show the static circles.
example: neutroncreations.com/blog
Transform: rotate(45deg);
Transform: scale(1.0,2.0);
Transform: translate(10px,0);

7. ALEXANDRA LO CASCIO
web designer
FOLLOW ME twitter.com/alelocascio
PORTFOLIO alexandralocascio.com