html5 and css3
TRANSCRIPT
About MeI am Web Designer and Themer for Drupal Mediacurrent
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
Resources1. 2. 3. 4.
CodePenCan I UseCSS3Please.comHTML5Doctor.com
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;
}
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
AgendaSyntax and code formatAdding CSS to a pageFloatsPositionsz-indexBox ModelWeb fontsMedia QueriesFlexboxTransitionsPreprocessors - Introduction to Sass
Adding CSS to a pageInternal Stylesheet
<head>
<style>
</style>
</head>
h1 {
color: red;
font-size: 24px;
}
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
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
Download slides: Download slides source code:
Any questions?about.me/mario.hernandez
@Designsdriveslideshare.net/marequi
github.com/mariohernandez/html5-css3