This document discusses several web design trends for 2010, including CSS3 features like box shadows, custom web fonts, transparency layers, rounded corners, and animation. It provides examples of websites that demonstrate these trends and the relevant CSS code. The document also includes contact information for the web designer author.

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