New HTML5/CSS3 techniques
Upcoming SlideShare
Loading in...5
×
 

New HTML5/CSS3 techniques

on

  • 4,097 views

New HTML5/CSS3 techniques

New HTML5/CSS3 techniques

Statistics

Views

Total Views
4,097
Views on SlideShare
3,982
Embed Views
115

Actions

Likes
2
Downloads
126
Comments
0

4 Embeds 115

http://hydwebdesigns.blogspot.in 66
http://127.0.0.1 28
http://hydwebdesigns.blogspot.com 20
http://feeds.feedburner.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <!-- HTML5 Audio/Video mime types--> <!-- Proper svgserving. Required for svg webfonts on iPad --> <!-- HTML4 Web font mime types --> <!-- Remove default IIS mime type for .eotwhichis application/octet-stream --> <!-- Flash Video mime types-->

New HTML5/CSS3 techniques New HTML5/CSS3 techniques Presentation Transcript

  • Make your design shine with
    HTML5 and CSS3
  • Beatriz Oliveira
  • HTML5
  • HTML5
    Collection of features
    Don’t throw anything away
    Easy to get started
    It already works!
    It’s here to stay!
  • <!DOCTYPE html>
  • New semantic elements
    HTML5 elements
  • <!DOCTYPE html>
    <html lang="en">
    <head>…</head>
    <body>
    <header>
    <hgroup>…</hgroup>
    <nav>…</nav>
    </header>
    <section>
    <article>…</article>
    <article>…</article>
    </section>
    <footer>…</footer>
    </body>
    </html>
  • demo
  • CSS3
  • CSS3
    It’s here to stay!
    Use in non critical areas
    Focus on experience level
    Start today!
  • multiple background images
    CSS3 properties
  • .foo { background:url(image1.png) no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}
  • parallax scrolling
  • web fonts
    CSS3 properties
  • prepare your IIS server for “.otf”
    web.config
    <system.webServer>
    <staticContent>
    http://html5boilerplate.com/
    http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx
  • border-radius
    CSS3 properties
  • .foo { border-radius: 10px; }
  • box-shadow
    CSS3 properties
  • .foo { box-shadow: 1px 1px 2px 2px #999 inset; }
  • opacity
    CSS3 properties
  • .foo { color: rgba(0, 0, 0, 0.75); }
  • .foo { opacity: 0.5; }
  • vendor-specific prefixes
    CSS3 properties
  • css transforms
    CSS3 properties
  • what are 2D transforms?
  • “transform" property
  • transform functions
  • .foo { transform: rotate(3deg); }
  • .foo { transform: scaleX(2) scaleY(3); }
  • .foo { transform: scale(2,3); }
  • .foo { transform: skewX(5deg) skewY(-20deg); }
  • .foo { transform: skew(5deg, -20deg); }
  • .foo { transform: translateX(10px) translateY(20px); }
  • .foo { transform: translate(10px, 20px); }
  • “transform-origin" property
  • .foo { transform-origin: left bottom; }
  • css transitions
    CSS3 properties
  • smooth property changes
  • .foo {transition-property: background;transition-duration: 0.3s;transition-timimg-function: ease; transition-delay: 0.5s;}
  • .foo { transition: background 0.3s ease 0.5s; }
  • text-shadow
    CSS3 properties
  • p { text-shadow: 1px 1px 2px #999; }
  • new selectors
    CSS3 selectors
  • .foo:empty
  • .foo:first-child
  • .foo:nth-child(n)
  • .foo:only-child
  • .foo:last-child
  • .foo:target
  • .foo:checked
  • .pre ~ .foo
  • input boxes, css buttons and focus states
    CSS3 forms
  • Contacts
    www.bind.pt
    Twitter – bindskins
    beatrizoliveira@bind.pt
  • questions?