Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

CSS 3

brief introduction to CSS3 features
by

Filip Jesiolowski

on 17 December 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of CSS 3

within HTML context
<style> </style>
http://www.w3schools.com/cssref/css3_browsersupport.asp
cascade
CSS: style
sheets
basics:
HTML tag
div {}
class attribute
.order {}
ID attribute
#author {}
basics:
separate *.css file(s), embedded by
<link rel="stylesheet" href="style.css">
on HTML tag level
<img style="" />
h1#likeaboss{
border: 1px solid green;
}

why bother?
the more tools we have,
the better
browsers compatibility
constantly improving
why not to learn new standard?
http://leaverou.github.io/prefixfree/#
what's new
border-radius
text-shadow
box-shadow
multiple backgrounds
opacity
rgba model
media queries
multi column layout
web fonts
transitions
pseudo-selectors
transforms
gradients
animations
where's the code ?
- media queries
http://jsfiddle.net/ZyZ1/Jrd2R/1/
- border radius
http://jsfiddle.net/ZyZ1/3Cn8N/
- multiple background images
http://jsfiddle.net/ZyZ1/kn33u/
- transitions
http://jsfiddle.net/ZyZ1/BzL3S/1/
where's the code ?
- transform
http://jsfiddle.net/ZyZ1/cm4Df/
- pseudo (extended) selectors
http://jsfiddle.net/ZyZ1/zkaad/
- gradients
http://jsfiddle.net/ZyZ1/9JdQF/
- box shadows
http://jsfiddle.net/ZyZ1/zyE53/1/
- text shadows
http://jsfiddle.net/ZyZ1/7RD9x/
and now the real deal
- animation
http://jsfiddle.net/ZyZ1/TBN7F/2/
of
of
of
inspirations
http://jsfiddle.net/ZyZ1/qsL7r/
inspirations
http://jsfiddle.net/ZyZ1/26WZ2/
inspirations
http://jsfiddle.net/ZyZ1/G5a5v/
inspirations
viewport > 600px
viewport < 600px
http://jsfiddle.net/ZyZ1/S2GpH/
inspirations
http://jsfiddle.net/ZyZ1/Q7cLs/1/
Full transcript