A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com

A brief look at CSS3
techniques

by Aaron Rodgers
web designer @ vzaar.com

• Essential properties

• Demo website

• CSS3 within vzaar

• Useful apps, tools & cheats

• Examples and further reading

A brief look at CSS3 techniques
- Essential properties

Border Radius

.block {
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}


Box Shadow

.block {
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}


Text Shadow

h1 {
text-shadow: 2px 2px 5px #fff;
}


Multiple Backgrounds
body {
background: url(images/bg1.jpg) 0 0 no-repeat,
url(images/bg2.jpg) 50% 50% repeat;
}

**Remember to compensate for older browsers.
body {
/*FALLBACK*/
background: url(images/bg.jpg) 0 0 no-repeat;

/*NEWER BROWSERS*/
background: url(images/bg1.jpg) 0 0 no-repeat, url(images/bg2.jpg) 50% 50% repeat;
}


Transition
.block {
background-color: rgba(255,255,255,0.6);
transition: background-color 1s ease-in-out;
}

.block:hover {
background-color: rgba(255,255,255,1);
}


Transition using Transform properties
.block {
-moz-transform: rotate(7deg);
-moz-transition-duration: 1s;
}

.block:hover {
-moz-transform: rotate(354deg) scale(1.3);
}


Columns
.footer p {
column-count: 3;
column-width: 200px;
column-gap: 30px;
column-rule-style: solid;
column-rule-width: 1px;
column-rule-color: #dedede;
}


@font-face (web fonts)
@font-face {
font:family: ‘Comic Sans’;
src: url(fonts/comicsans.otf) format(‘otf’),
url(fonts/comicsans.ttf) format(‘ttf’),;
}

h1 {
font-family: ‘Comic Sans’;
}
Browser font ﬁle types
Internet Explorer only supports EOT
Mozilla browsers support OTF and TTF
Safari and Opera support OTF, TTF and SVG
Chrome supports TTF and SVG.


rgba
.block {
}

**Remember to add fallback for older browsers
body {
/*FALLBACK*/
background-color: #ffc896;

/*NEWER BROWSERS*/
}

CSS3 Example Site
http://www.aaronjamesrodgers.com/applicake/
Includes all of the examples mentioned within this talk.
Feel free to download the html and css from here.

- CSS3 within vzaar

http://vzaar.com/for/agencies
An example of transitions using the transform property

- CSS3 within vzaar

http://vzaar.com/signup
Box shadow on input:focus ﬁeld (try it, Sign Up for a 30 day trial) :P

- CSS3 within vzaar

http://vzaar.com/is
An example of added styles on hover only using the transition & transform properties

- Useful apps, tools and cheats

• Typekit
Use the @font-face property with hundreds of fonts. Paid subscription based on the number
of websites you use. Just place some javascript within the <head> tag.
http://typekit.com/

• Border Radius generator
Not the hardest property to code, but this site gives you a live preview as well as providing
the CSS with all browser preﬁxes.
http://border-radius.com/

• Adobe Edge
Available from the Adobe Labs, this is a ﬂash like program which allows you to select elements
from your page and apply css3 effects. Timeline based UI. Still quite buggy as it’s an early version.
http://labs.adobe.com/technologies/edge/
http://www.youtube.com/watch?v=8FnNtX73v8k

- Examples and further reading

Silverback
Great use of multiple backgrounds. Gives a sense of depth to the site. Resize your browser
window to experience it.
http://silverbackapp.com/

For the Record
Nice mix of HTML5 and CSS3 to showcase the guys record collection stats.
http://www.fortherecord.simonfosterdesign.com/

A book apart
A book by Dan Cederholm, founder of http://simplebits.com/. Easy to digest guide of the best
practices in CSS3 in use today.
http://www.abookapart.com/products/css3-for-web-designers

A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com

More Related Content

What's hot

Viewers also liked

Similar to A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com

Recently uploaded

A brief look at CSS3 techniques by Aaron Rodgers, Web Designer @ vzaar.com

Editor's Notes