HTML5 and CSS3
57
HTML5 & CSS3 Building a mobile website By Mario Hernandez
-
Upload
mario-hernandez -
Category
Technology
-
view
78 -
download
0
Transcript of HTML5 and CSS3
Course Agenda1. HTML52. CSS33. Feature Support and Polyfills4. Resources
About MeI am Web Designer and Themer for Drupal Mediacurrent
ExperienceWorked for the Federal Government as lead Front-end
Developer
Noticeble Projects1. 2. 3. 4. 5. 6. 7.
Teens Exploring TechnologyFederal Court in Los AngelesDallas CowboysNew England PatriotsSan Diego ChargersHarvard UniversityHabitat for Humanity
Public SpeakerI conduct community-driven and private workshops
DrupalCamp Los AngelesCodeCamp Los Angeles & San DiegoSan Diego .Net User GroupMeetups througout Los Angeles
HTML5HyperText Markup Language
Progressive Enhancements and Graceful DegradationIt’s official!Block Level Elements vs. Inline Level ElementsForms and Form ElementsAudio & VideoPictureExtending Semantics & AccessibilityPerformance and Optimization
CSS3SyntaxAdding CSS to a pageFloatsPositioningBox ModelWeb fontsMedia QueriesPreprocessors - Introduction to Sass
Tools andPollyfills
ModernizrHTML5ShivRespond.js
Resources1. 2. 3. 4.
CodePenCan I UseCSS3Please.comHTML5Doctor.com
Graceful Degradation
Progressive Enhancement
Example of GracefulDegradation
.selector {
background-color: rgba(0,0,0,.5);
}
.lt-ie9 .selector {
background-color: #999;
}
Example of ProgressiveEnhacement
.selector {
background: url(images/image.png) 0 0 no-repeat;
}
.lt-ie9 .selector {
background: url(images/image.gif) 0 0 no-repeat;
}
It's Official!!!HTML5 declared complete on October 28,
2014
Picture
How <picture> works <picture>
<source srcset="mobile.png">
<source media="(min-width: 480px)" srcset="tablet.png">
<source media="(min-width: 960px)" srcset="desktop.png">
<img src="default.png" alt="Alternate text is added in img tag">
</picture>
View article for descriptionAnother great article
CSS3Cascading Style Sheets
AgendaSyntax and code formatAdding CSS to a pageFloatsPositionsz-indexBox ModelWeb fontsMedia QueriesFlexboxTransitionsPreprocessors - Introduction to Sass
Syntax selector {property: value; property:value;}
Syntax body {background: white; color:blue;}
Syntax body {
background: white;
color: blue;
}
Adding CSS to a pageInline
<h1 style="color:red;font-size:24px;">Hello World!</h1>
Adding CSS to a pageInternal Stylesheet
<head>
<style>
</style>
</head>
h1 {
color: red;
font-size: 24px;
}
Adding CSS to a pageExternal Stylesheet
<link rel="stylesheet" href="css/styles.css">
Positioning
Static Positioning
Fixed PositioningAn element with fixed position is positioned relative to the
browser window. It will not move even if the window is scrolled:
h1 {
position: fixed;
top: 30px;
right: 5px;
}
Relative PositioningA relative positioned element is positioned relative to its normal
position.
h2 {
position: relative;
left: -20px;
}
h2 {
position: relative;
right: 20px;
}
Relative PositioningThe content of relatively positioned elements can be moved and
overlap other elements, but the reserved space for the element isstill preserved in the normal flow.
Demo
Absolute PositioningAn absolute position element is positioned relative to the firstparent element that has a position other than static. If no such
element is found, the containing block is <html>:
h2 {
position: absolute;
left: 100px;
top: 150px;
}
Absolute PositioningAbsolutely positioned elements are removed from the normal
flow. The document and other elements behave like theabsolutely positioned element does not exist. Absolutely
positioned elements can overlap other elements.
Overlapping ElementsWhen elements are positioned outside the normal flow, they can
overlap other elements.
The z-index property specifies the stack order of an element(which element should be placed in front of, or behind, the
others).
An element can have a positive or negative stack order:
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
An element with greater stack order is always in front of anelement with a lower stack order.
If two positioned elements overlap without a z-index specified,the element positioned last in the HTML code will be shown on
top.
Box ModelThe CSS box model is essentially a box that wraps around HTMLelements, and it consists of: margins, borders, padding, and the
actual content.
Demo&
Code Example
Web Fonts
Media Queries @media screen and (max-width: 300px) {
body {
background-color: lightblue;
} }
Sass(Syntactically Awesome Style Sheets)Introduction to Preprocessors
What is Sass?Sass is an extension of CSS that adds power and elegance to the
basic language. It allows you to use variables, nested rules,mixins, inline imports, and more, all with a fully CSS-compatible
syntax.
Features of SassFully CSS3-compatibleLanguage extensions such as variables, nesting, and mixinsMany useful functions for manipulatingWell-formatted, customizable outputFor more visit sass-lang.com
Getting Started with SassInstalling Sass
MacSass requires Ruby
gem install sass
Confirm Sass is up and running sass -v
CompassThe awesome sauce!
Installing Compass gem install compass
Download slides: Download slides source code:
Any questions?about.me/mario.hernandez
@Designsdriveslideshare.net/marequi
github.com/mariohernandez/html5-css3
Basic Markup<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 and CSS3</title>
<link rel="stylesheet" href="css/styles.css?v=1.0">
<head>
<body>
Content goes here ...
<script src="js/scripts.js"></script>
</body>
</html>
