Scribd
Upload
6 views

Building Web Applications with HTML5, CSS3, and Javascript

The document provides an introduction to building web applications using HTML5, CSS3, and JavaScript, highlighting new features and functions of CSS3. It covers various CSS techniques such as vendor prefixes, box sizing, gradients, transitions, and media queries, along with practical examples and resources. Additionally, it includes an assignment to apply the learned concepts in a template for HTML5 development.

Uploaded by

nurzatkg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Building Web Applications with HTML5, CSS3, and Javascript

The document provides an introduction to building web applications using HTML5, CSS3, and JavaScript, highlighting new features and functions of CSS3. It covers various CSS techniques such as vendor prefixes, box sizing, gradients, transitions, and media queries, along with practical examples and resources. Additionally, it includes an assignment to apply the learned concepts in a template for HTML5 development.

Uploaded by

nurzatkg
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 31

Building Web Applications with

HTML5, CSS3, and Javascript:


An Introduction to HTML5

Jason Clark
Head of Digital Access & Web Services
Montana State University Libraries
pinboard.in #tag

pinboard.in/u:jasonclark/t:lita-html5/
twitter #hashtag

#litahtml5
Overview

• New Features and Functions


• Demos
• Getting Started
• Questions
CSS3 example - http://css3exp.com/moon/
Evolution into CSS3
Rethinking web displays and styles
Vendor Prefixes
• Add support for emerging parts of CSS
spec

Android: -webkit-
Chrome: -webkit-
Firefox: -moz-
Internet Explorer: -ms-
iOS: -webkit-
Opera: -o-
Safari: -webkit-
Minification
• Removing unnecessary characters and
spacing from code to reduce size, and
optimizing the code to improve load times

CSS compressor
http://www.minifycss.com/css-compressor/
Box Sizing
• Set how the browser calculates the width of
an element to include (or not include)
padding, borders, and margins

div.doc {!
width: 200px;!
padding: 0 30px;!
-webkit-box-sizing: border-box; !
-moz-box-sizing: border-box;!
box-sizing: border-box;!
}!
Resize
• Set element to be resized vertically and/or
horizontally using a bottom-right UI handle

div.doc {!
overflow: hidden;!
-moz-resize: both; !
resize: both;!
}!
Rounded Elements
• border-radius declaration
• smooth out your interfaces
• button effects

-moz-border-radius: 10px 5px;!


-webkit-border-top-left-radius: 10px;!
-webkit-border-top-right-radius: 5px;!
-webkit-border-bottom-right-radius: 10px;!
-webkit-border-bottom-left-radius: 5px;!
border-radius: 10px 5px;!
Gradients and Opacity
• no more images for showing gradient
• transparency
Selectors
• Target specific elements or markup in a
series

div[attr] and a[href$=pdf]!


Attribute selector (starts with, ends with, contains)!

ul > li!
Immediate descendant (child) selector!

td:last-child {border-right:0 none;}!


li:nth-child(n+6) {color: grey;}!
Multiple Backgrounds
• Position background images
• Create layered effects

body {!
background: !
url(../images/top-left.png) top left fixed
no-repeat, !
url(../images/bot-left.png) bottom left
fixed no-repeat, !
url(../images/bot-right.png) bottom right
fixed no-repeat;!
background-color: #2f2626;!
}!
CSS generated content
• Uses CSS content property
• Applied with :before or :after pseudo
elements
o :first-letter, :first-line (CSS 1 & 2)
o ::selection (CSS 3)

h1:before {
content: "I.";
}

a:after {
content: attr(href)
}
Transitions
• Animation behavior
• Scaling, fading, easing, etc.

body { !
!-o-transition:all .2s linear; !
!-moz-transition:all .2s linear; !
!-webkit-transition:all .2s linear;!
!transition:all .2s linear; !
}!
Transform
• Applies a 2D or 3D transformation to an
element
• Rotate, scale, move, etc.

li:hover { !
-moz-transform:scale(1.15);!
-ms-transform:scale(1.15);!
-o-transform:scale(1.15);!
-webkit-transform:scale(1.15);!
transform:scale(1.15);!
}!
position:fixed
• Create an element that stays in the same
position even after scrolling the page

nav {
position:fixed;
top:2%;
right:2%;
}
min/max-width/height
• Set and control the width and height of
element boxes.
• min-width, max-width, min-
height, max-height

main {
min-height: 480px;
height: 520px;
width: 100%;
}
Columns and Grids
• Layout and page structure
• Goodbye, float?
ul#content {!
-webkit-column-count: 3;!
-webkit-column-rule: 1px solid #eee;!
-webkit-column-gap: 1em;!
-moz-column-count: 3;!
-moz-column-rule: 1px solid #eee;!
-moz-column-gap: 1em;!
column-count: 3;!
column-rule: 1px solid #eee;!
column-gap: 1em;!
display: block;!
} !
Flexbox
• A flexible box model?

body>div#main {!
display: -webkit-flexbox; !
display: -moz-flexbox;!
display: -ms-flexbox;!
display: -o-flexbox;!
height: 500px;!
padding: 1em;!
background-color: gray;!
} !
@supports
• Detect support of CSS features directly in
CSS

@supports (display: flex) {!


div {!
display: flex;!
}!
}!

@supports (column-count: 1) or (-moz-


column-count: 1) { ... } !
Media Queries
• switch stylesheets based on width and
height of viewport
• same content, new view depending on
device

@media screen and (max-device-


width:480px) {… mobile styles
here… }!
* note “em” measurements based on base sizing of main body font are
becoming standard (not pixels)
Media Queries in Action
<link rel="stylesheet"
type="text/css” media="screen
and (max-device-width:480px) and
(resolution: 163dpi)”
href="shetland.css" />!

Responsive Web Design, Ethan Marcotte


http://www.alistapart.com/articles/responsive-web-design
@Font-Face
• bring in fonts
• use any licensed TrueType (.ttf) or
OpenType (.otf) font
• independent of machine it's being rendered
on...
Demos & Examples
It's your call....
Demos
• Mozilla Developer Network - CSS3
o https://developer.mozilla.org/en-US/demos/tag/
tech:css3
• 24 ways CSS3 demo
o http://24ways.org/
• HTML5 Demos
o http://html5demos.com/
Resources
• CSS3 Previews
o http://www.css3.info/preview/
• HTML5rocks
o html5rocks.com
• HTML5 Please
o html5please.com/#use
Assignment 2
• Using HTML5 CSS template
• http://www.lib.montana.edu/~jason/files/html5-mobile-
feed/template.css
1. Add columns to HTML5 template
2. Add animation to an element in HTML5
template
3. Create "touchable" nav buttons for main
navigation
4. Add media query for mobile device to
HTML5 template
Questions?
twitter.com/jaclark
www.lib.montana.edu/~jason/talks.php
http://www.gesteves.com/experiments/starwars.html

You might also like