Training HTML5 CSS3 Ilkom IPB

Build Awesome
Website withHtml5 & Css3
2 Days Workshop
@ Lab. Ilkom IPB
16 – 17 May 2015
by Wahyu Putra

Abo
utSpeak
erWahyu Putra
Chief Technology Officer - UI/UX Designer
PT Startup Digital Indonesia
Tel. 082 123 840 840
Mail. realwahyuputra@gmail.com
Tw. @realwahyuputra
Fb. fb.com/wahyu.putra

Agen
daWorksh
opDay #1
• Fundamental HTML5
- HTML5 vs HTML
- HTML5 Forms
- HTML5 Semantics
• Fundamental CSS3
- CSS3 vs CSS
- CSS3 Media Queries
- CSS3 Visual Effects
- CSS3 Tools
Day #2
• Working with Frameworks
- Twitter Bootstrap
• Creating Website
- Case Study

The
Definiti
onHTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets)
are two of the core technologies for building Web pages. HTML provides the
structure of the page, CSS the (visual and aural) layout, for a variety of
devices. Along with graphics and scripting, HTML and CSS are the basis of
building Web pages and Web Applications.
“
“
+ =
Index.html Style.css WEB PAGES

WEB
isHTML +
CSSImagine your favorite website
without CSS. Just HTML.
• Type F12 > Click “Sources“ tab
• Choose file css and delete all

What
’sHTML5
HTML5 is the latest evolution of the standard that defines HTML. The term
represents two different concepts:
• It is a new version of the language HTML, with new elements, attributes,
and behaviors,
• and a larger set of technologies that allows more diverse and powerful Web
sites and applications. This set is sometimes called HTML5 & friends and
often shortened to just HTML5.
Designed to be usable by all Open Web developers, this reference page links
to numerous resources about HTML5 technologies, classified into several
groups based on their function.
• Semantics
• Connectivity
• Offline & Storage
• Multimedia
• 2D/3D Graphics & Effects
• Performance & Integration
• Device Access
• Styling

HTM
L5Vs
HTML4More simple doctype
HTML4
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 5 (Case Insensitive)
<!DOCTYPE HTML>
The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the
<html> tag.
The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what
version of HTML the page is written in.

HTM
L5Vs
HTML4More simple character sets
HTML4
<meta http-equiv="Content-Type"
content="text/html;charset=ISO-8859-1">
HTML 5
<meta charset="UTF-8">
To display an HTML page correctly, a web browser must know the character set used in the page.
Because ANSI and ISO was limited, the default character encoding was changed to UTF-8 in
HTML5.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.

HTM
L5Vs
HTML4More simple JS & CSS links
HTML4
<script src=“jquery.js” type=“text/javascript”></script>
<link href=“style.css" type="text/css"></link>
HTML 5
<script src=“jquery.js”></script>
<link href=“style.css"></link>

HTM
L5Vs
HTML4The / is no longer requred for self-closing elements
HTML4
<br />
<hr />
<img />
<input />
<link />
<meta />
HTML 5
<br>
<hr>
<img>
<input>
<link>
<meta>

HTM
L5Vs
HTML4Boolean attributes can be minimized
HTML4
checked="checked"
compact="compact"
declare="declare"
defer="defer"
disabled="disabled"
multiple="multiple”
selected="selected"
HTML 5
checked
compact
declare
defer
disabled
multiple
selected

Som
eGuideli
nes• Tetap membiasakan penggunaan huruf kecil (lowercase) dalam penulisan tag dan atribut,
seperti halnya di XHTML, walaupun di HTML5 tidak diharuskan.
• Tetap menutup setiap tag yang memerlukan tag penutup, walaupun tidak diharuskan.
• Tetap gunakan kutip(“) untuk setiap value dari atribut, walaupun di HTML5 boleh tanpa kutip.
• Tetap menambahkan penutup / pada tag tunggal seperti <img>, <input>
• Hindari penggunaan atribut Boolean secara berlebihan. Penggunaan <input type=“checkbox”
checked /> lebih baik dibanding <input type=“checkbox” checked=“checked”/>

Don’t
Use This Tags &
atributesAll of these just presentational purpose. Use css instead.
Tags
<font>
<center>
<frame>
<frameset>
<noframes>
<acronym>
<applet>
<basefont>
<big>
<dir>
<strike>
<tt>
Atributes
align
bgcolor
height
width
size
type

HTM
L5New
Features• New form controls, like calendar , date , time , email , url, search ……. And More
• New content-specific elements, like <article>, <footer>, <header>, <nav>, <section>
• The <canvas> element for 2D drawing
• The <video> and <audio> elements for media playback
• Support for local storage

HTM
L5Forms
HTML5 Input Type
HTML4 Input Elements
• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text
HTML5 New Input Elements
• search
• email
• url
• tel
• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• color

HTM
L5Forms
<input type=“search”>

HTM
L5Forms
<input type=“email”>

HTM
L5Forms
<input type=“url”>

HTM
L5Forms
<input type=“tel”>

HTM
L5Forms
<input type=“datetime-local”>

HTM
L5Forms
<input type=“date”>

HTM
L5Forms
<input type=“time”>

HTM
L5Forms
<input type=“month”>

HTM
L5Forms
<input type=“week”>

HTM
L5Forms
<input type=“number”>

HTM
L5Forms
<input type=“range”>

HTM
L5Forms
<input type=“color”>

HTM
L5Forms
New Form Atributes
• required
• placeholder
• pattern
• form
• autocomplete
• datalist
• autofocus

HTM
L5Forms
New Form Atributes - required
Untuk keperluan validasi form, elemen input harus diisi, tidak boleh kosong.

HTM
L5Forms
New Form Atributes - placeholder
Menambahkan keterangan di dalam elemen input

HTM
L5Forms
New Form Atributes - pattern
Validasi dengan mengikuti pattern dari regex (regular expression)
Tools: http://html5pattern.com/

HTM
L5Forms
New Form Atributes - form
Atribut form berguna untuk menentukan suatu elemen input masuk ke dalam
form tertentu sehingga elemen input tidak harus berada di dalam tag <form>

HTM
L5Forms
New Form Atributes - autocomplete
Mengaktifkan atau menonaktifkan fitur auto complete fill pada elemen input.
Default: on.
off
on

HTM
L5Forms
New Form Atributes – list & datalist
Elemen input teks yang memiliki kemampuan seperti dropdown untuk memilih predefined input
dan bersifat auto complete.

HTM
L5Forms
New Form Atributes – autofocus
Membuat cursor otomatis fokus ke elemen input tertentu pada saat halaman ditampilkan.
Hanya diperbolehkan memiliki satu elemen input dengan atribut autofocus dalam satu halaman.

HTM
L5New
Elements• <video>
• <audio>
• <track>
• <source>
• <embed>
• <mark>
• <datalist>
• <keygen>
• <output>
• <progress>
• <meter>
• <time>
• <canvas>
• <ruby>
• <rt>
• <rp>
• <wbr>
• <command>
• <menu>
• <details>
• <summary>

HTM
L5New
Elements<video>
Pemutar video native di browser tanpa
perlu dukungan 3rd party software/plugin.
Tipe video yang didukung:
• .flv
• .mp4
• .avi
• .m4v
• .ogg
• .webm
Tags:
• <video>
• <source>

HTM
L5New
Elements<audio>
Pemutar audio native di browser tanpa perlu dukungan 3rd party software/plugin.
Tipe audio yang didukung:
• .mp3
• .wav
• .ogg
Tags:
• <audio>
• <source>

HTM
L5Semantics
What are Semantics Elements?
Semantics is the study of the meanings of words and phrases in language.
Semantic elements are elements with a meaning.
A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.
Why Semantics Elements?
With HTML4, developers used their own favorite attribute names to style page elements:
header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ...
This made it impossible for search engines to identify the correct web page content.
With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.
According to the W3C, a Semantic Web:
"Allows data to be shared and reused across applications, enterprises, and communities."

HTM
L5Semantics<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML4</title>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<link href="style.css" type="text/css"></link>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div class="nav">
...
</div>
</div>
<div id="content">
<div class="section">
<div class="article">
...
</div>
</div>
<div class="aside">
...
</div>
</div>
<div id="footer">
...
</div>
</body>
</html>

HTM
L5Semantics<!DOCTYPE HTML>
<html>
<head>
<title>HTML5</title>
<meta charser=“utf-8”>
<link href="style.css"></link>
<script src="jquery.js"></script>
</head>
<body>
<header>
<nav>
...
</nav>
</header>
<div id="content">
<section>
<article>
...
</article>
</section>
<aside>
...
</aside>
</div>
<footer>
...
</footer>
</body>
</html>

HTM
L5Semantics
A New Perspective on Types of Content
Metadata content
Menyajikan informasi mengenai halaman itu sendiri.
contoh: <title>, <link>, <meta>, <style>
Flow content
Elemen-elemen yang digunakan untuk mengatur tata letak isi di halaman.
contoh: <header>, <footer>, <p>
Sectioning content
Terkait pengaturan bagian-bagian halaman
contoh: <section>, <article>, <aside>, <nav>
Heading content
Terkait dengan pengaturan level heading
contoh: <h1>…<h6>, <hgroup>

HTM
L5Semantics
A New Perspective on Types of Content
Phrasing content
Pengaturan tampilan tulisan pada suatu paragraf.
contoh: <em>, <i>, <cite>, <strong>, <b>
Embedded content
Berhubungan dengan penyertaan media seperti image, audio dan video
contoh: <img>, <object>, <embed>, <video>, <audio>, <canvas>
Interactive content
Berhubungan dengan interaksi dengan pengguna.
contoh: <form>, <input>

HTM
L5Semantics
<header>
Mendefinisikan bagian header/kepala dari sebuah halaman ataupun blok/section.
Biasanya dalam header berisi komponen seperti logo, link navigasi dan form pencarian.
<header>
<h1>Site name</h1>
<h2>Site slogan</h2>
<p>Supplementary information</p>
</header>
<article>
<header>
<h1>Article Title</h1>
<p>By Jhon Doe</p>
</header>
<p>Lorem Ipsum dolor set amet</p>
</article>

HTM
L5Semantics
<footer>
Mendefinisikan bagian bawah/akhir dari sebuah halaman.
Biasanya dalam footer berisi informasi seperti copyright, tentang dan kontak.
<footer>
<ul>
<li>copyright info</li>
<li>sitemap link</li>
<li>contact link</li>
<li>to top link</li>
</ul>
</footer>

HTM
L5Semantics
<nav>
Mendefinisikan sekumpulan link yang menghubungkan suatu halaman dengan halaman lain
dalam satu website.
Biasanya link yang berada dalam <nav> adalah link utama, misal untuk menampilkan navigasi
atau menu utama yang berada di atas halaman.
<nav>
<ul>
<li><a href=”#">Home</a></li>
<li><a href=”#">About</a></li>
</ul>
</nav>

HTM
L5Semantics
<section>
Berguna untuk membuat suatu blok wilayah/bagian tertentu pada suatu halaman.
Biasanya di dalam <section> selalu terdapat elemen heading.
<section>
<h1>Apple</h1>
<p>The apple is the fruit...</p>
...
</section>

HTM
L5Semantics
<article>
Berguna untuk mendefinisikan bagian artikel atau tulisan yang dapat digunakan dan didistribusikan
kembali, misal untuk dihubungkan dengan RSS (Rich Site Summary).
Biasanya bagian <article> berupa postingan blog, berita, artikel majalah, komentar, dsb.
<article>
<h3>Apple</h3>
<p>The apple is the fruit...</p>
...
</article>

HTM
L5Semantics
<aside>
Mendefinisikan bagian khusus dari suatu halaman yang berada pada sisi samping.
Biasanya sering disebut sebagai sidebar.
<aside>
<h2>Blogroll</h2>
<ul>
<li><a href="#">My Friend</a></li>
<li><a href="#">Another</a></li>
<li><a href="#">Best Friend</a></li>
</ul>
</aside>

HTM
L5Semantics
Layout <header>

HTM
L5Semantics
Layout <header> <nav>

HTM
L5Semantics
Layout <header>
<nav>

HTM
L5Semantics
Layout <header>
<nav>
<section>

HTM
L5Semantics
Layout <header>
<nav>
<section> <aside>

HTM
L5Semantics
Layout <header>
<nav>
<section><aside>

HTM
L5Semantics
Layout <header>
<nav>
<section><aside>
<footer>

HTM
L5Semantics
Layout <header>
<nav>
<section>
<aside>
<footer>
<section>

<section>
HTM
L5Semantics
Layout <header>
<nav>
<aside>
<footer>
<section>
<section>

<section>
HTM
L5Semantics
Layout <header>
<nav>
<aside>
<footer>
<article>
<article>

<section>
HTM
L5Semantics
Layout <header>
<nav>
<aside>
<footer>
<article>
<header>
<footer>

HTM
L5Limitation
Beberapa elemen/tag HTML5 semantics tidak didukung oleh browser IE 6 – 8. (but who cares! LOL)
Anyway, ini solusinya, menggunakan js html5shim & sedikit css hack.
Javascript:

CSS:
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section
{
display: block;
}
(Not
Really)

HTM
L5&
JavascriptDrag & Drop
Fitur drag & drop merupakan bagian dari standar HTML5. Memungkinkan untuk menggeser sebuah
objek ke posisi lain dalam sebuah halaman.

HTM
L5&
JavascriptCanvas
Elemen <canvas> berguna untuk menggambar grafik melalui kode javascript. Dengan javascript,
canvas dapat diisi dengan path, box, circle, teks, gambar, hingga animasi dan games.

HTM
L5&
JavascriptGeolocation
HTML5 Geolocation API berguna untuk mendapatkan posisi geografis pengguna melalui browser.
Hasil yang didapatkan yakni posisi koordinat latitude & longitude. Pengguna harus menekan allow
pada popup yang muncul jika halaman website meminta request lokasi.
navigator.geolocation.getCurrentPosition(showPosition);

HTM
L5&
JavascriptLocal Storage
Memungkinkan sebuah website untuk menyimpan data di browser pengguna. Tidak seperti cookies
yang hanya berkapasitas 4kb, local storage memiliki kapasitas yang jauh lebih besar, yakni 5mb.
Data yang disimpan di browser tidak akan ditransfer ke server. Penggunaan local storage terhubung
dengan masing-masing domain. Beberapa halaman sekaligus pada satu domain yang sama maka
data disimpan pada local storage yang sama.

HTM
L5&
JavascriptOffline Application Cache
Membuat website dapat diakses secara offline, dengan membuat file manifest cache. Website
dengan fitur ini dapat diakses tanpa koneksi internet dengan kelebihan seperti:
• Offline Browsing – pengguna dapat mengakses website walaupun offline
• Speed – website diakses dari cache di browser
• Reduced server load – browser hanya menghubungi server ketika ada update/perubahan
File Manifest
Merupakan file teks yang berfungsi untuk menyampaikan kepada browser apa yang harus di cache
dan tidak. File manifest disimpan dengan format .appcache dan diletakkan dalam atribut manifest
pada tag html.
contoh: <html manifest=“weboffline.appcache">
File manifest terdiri dari 3 bagian, yakni:
• Cache Manifest – berisi daftar file yang disimpan di cache
• Network – berisi daftar file yang tidak boleh disimpan di cache, harus memerlukan koneksi
• Fallback – berisi nama lokasi folder appcache dan file yang akan berada di dalamnya

HTM
L5&
Javascript
Contoh Isi File Manifest
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

What
’sCSS3
• “CSS” is an acronym for Cascading Style Sheets, a web-based markup
language used to describe the look and formatting of a website to the browser.
• The first iteration of CSS was published in late 1996, offering support for
font properties, colors for text and backgrounds as well as alignment of text,
images, tables and other web elements.
• CSS2 was introduced in 1998, bringing additional capabilities such as
absolute, relative and fixed positioning of elements ,before introducing CSS
2.1 in 2005.
History

What
’sCSS3
• Unlike CSS 2, which is a large single specification defining various features,
CSS 3 is divided into several separate documents called "modules".
• Each module adds new capabilities or extends features defined in CSS 2,
over preserving backward compatibility.
• Work on CSS level 3 started around the time of publication of the original
CSS 2 recommendation.
• The earliest CSS 3 drafts were published in June 1999.
History

What
’sCSS3
• Part of the problem with the first two generations of CSS was that the specification became too
large and complex to update frequently.
• Rather than continue down that path, the W3C created the module system for CSS3, so that
individual components can be updated and refined in pieces over time.
Some of the most important CSS3 modules are:
– Selectors
– Box Model
– Backgrounds and Borders
– Text Effects
– 2D/3D Transformations
– Animations
– Multiple Column Layout
– User Interface
Modules

What
’sCSS3
• CSS3 is not yet a W3C standard, but the major browsers support many of the new properties.
• The table @ w3schools web site lists the new CSS3 properties and their browser support
http://www.w3schools.com/cssref/css3_browsersupport.asp
• Or you can visit this site that shows how much CSS3 does your browser support
http://css3test.com/ or http://caniuse.com/
CSS3 Browser Support

What
’sCSS3
CSS3 Browser
Support

CSS
Advantage
• Layout
• Color
• Fonts & text
• Backgrounds
• Borders
• Floats

h1
{
color: blue;
font-size: 12px;
}
CSS
Basic
Component• Element
• Atribute
• Selector
• Properties
Selector
Declaration
Property
Value

CSS
Selector
• Tag
• ID
• Class
p { text-align:justify; color:blue; }
#header { float:left; margin:10px; }
.judul { font-size:15px; background-color:#0000ff; }

CSS
Selector
• Turunan (Descendant)
(E F) -> Selector F merupakan bagian dari E secara struktural.
• Anak (Child)
(E > F) -> Selector F merupakan anak (secara hierarki) dari E.
• Saudara dekat (Adjancent Sibling)
(E + F) -> Selector F merupakan selector yang secara structural satu parent dengan E.
• Saudara umum (General Sibling)
(E ~ F) -> Selector F adalah satu parent dengan E dan memiliki hubungan secara struktur.
Relasi antar selector

Select
orAttribute• E[attr]
Seleksi semua selector E yang memiliki atribut ‘attr’
Contoh: input[required]
• E[attr = val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dengan nilai ‘val’
Contoh: input[type=checkbox]
• E[attr |= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value sama atau diawali dengan ‘val’
Contoh: p[lang |= “en”]
• E[attr ~= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value mengandung kata ‘val’ dengan
batas spasi tiap value
Contoh: .info[title ~= “more”]
• E[attr ^= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value diawali dengan ‘val’
• E[attr $= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value diakhiri dengan ‘val’
• E[attr *= val]
Seleksi semua selector E yang memiliki atribut ‘attr’ dan value mengandung kata ‘val’

The Difference
betweenID & Class
#ID
ID’s are unique
• Each element can have only one ID
• Each page can have only one element
with that ID
• Information that is totally unique should
be kept in an ID
• Special browser functionality scroll to ID
that has same value to hash url
.CLASS
Classes are NOT unique
• You can use the same class on multiple elements.
• You can use multiple classes on the
same element
• Information that is reusable should be kept in a
class

CSS
Pseudo-
Class
• :link
• :visited
• :hover
• :active
• :focus
• :enabled
• :disabled
• :checked
• :indeterminate
• :target
• :default
• :valid
• :invalid
• :in-range
• :out-of-range
• :required
• :optional
• :read-only
• :read-write
A pseudo-class is used to define a special state of an element.
For example, it can be used to:
• Style an element when a user mouses over it
• Style visited and unvisited links differently

What
’sNew in
CSS3• 2D Transforms
• Backgrounds & Borders
• Color
• Values and Units
• Selectors
• Web Fonts
• Media Queries
• Name spaces
• 3D Transforms
• Animations
• Gradient
• CSS Exclusions (Floats)
• Flexible Box (“Flexbox”) Layout
• Grid Layout
• Multi-column Layout
• Region
• SVG Filter Effects
• Text Shadow
• Transitions

CSS
Browser
Compability
• Beberapa perintah CSS secara khusus berlaku di browser tertentu saja.
-moz-* -> Mozilla Firefox
-webkit-* -> Webkit-based browser
• Beberapa property CSS ada yang “diperlakukan” berbeda oleh setiap browser.
• Solusi?
Gunakan “important” -> !
Cobadi beberapa browser sekaligus -> Firefox, Chrome, IE
Gunakan tool cross-browser-tester.

CSS
Browser
Compabilitya.polaroid:active{
z-index: 999;
border-color: #6A6A6A;
box-shadow: 15px 15px20px rgba(0,0, 0, 0.4);
transform: rotate(0deg) scale(1.05);
}
Hope
a.polaroid:active{
z-index: 999;
border-color: #6A6A6A;
box-shadow: 15px 15px20px rgba(0,0, 0, 0.4);
-webkit-box-shadow: 15px 15px20px rgba(0,0, 0, 0.4);
-moz-box-shadow: 15px 15px20px rgba(0,0, 0, 0.4);
transform: rotate(0deg) scale(1.05);
-webkit-transform: rotate(0deg) scale(1.05);
-moz-transform: rotate(0deg) scale(1.05);
}
Reality

CSS
Browser
Compability
• CSS3 Property browser support chart
http://www.findmebyip.com/litmus
• CSS3 Selector browser support chart
http://www.standardista.com/css3/css3-selector-browser-support
• CSS3 Specifications
http://www.w3.org/standards/techs/css#w3c_all
• Cross-browser Tester
http://tredosoft.com/Multiple_IE
http://crossbrowsertesting.com(berbayar)
http://browsershots.org(gratis)

CSS
Media Query
• Layout website harus mampu menyesuaikan diri dengan device yang digunakan secara otomatis,
untuk meningkatkan kenyamanan pengguna.
• CSS3 Media Query memungkinkan untuk mendefinisikan perintah CSS yang akan dijalankan sesuai
dengan perangkat / device yang digunakan.
• Jenis media:
- Desktop browser, screen, print
- Mobile browser
- Tablet form-factor
- Televisi
- Game console
• Browser Support:
IE9+
Firefox3.5+
Safari 3.2+
Chrome8+
Opera 10.6+
iOS3.2+
Opera Mini 5+
Opera Mobile 10+
Android2.1+

CSS
Media Query
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
@media screen and (min-width:320px) and (max-width:480px) { }
@media not print and (max-width:600px) { }
Contoh

CSS
Media Query
• min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
Property

CSS
Media Query
/* Smartphones (landscape) -----------*/
@media only screen
and (min-width: 321px) {
/* Styles*/
}
/* Smartphones (portrait) -----------*/
@media only screen
and (max-width: 320px) {
/* Styles*/
}
Smartphone (Portrait & Landscape)

CSS
Media Query
/* iPads (portrait and landscape)-*/
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px) {
/* Styles*/
}
/* iPads (landscape) --------*/
@media only screen
and (max-device-width: 1024px)
and (orientation: landscape) {
/* Styles*/
}
/* iPads (portrait) -----*/
@media only screen
and (max-device-width: 1024px)
and (orientation: portrait) {
/* Styles*/
}
iPads (Portrait & Landscape)

CSS
Media Query
/* Desktops and laptops -----*/
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens -----------*/
@media only screen
and (min-width : 1824px) {
/* Styles */
}
Desktop

CSS
Media Query
/* iPhone 4 -----------*/
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
iPhone 4

CSS
Visual Effects
• Hexadecimal, contoh: #ff0000, #ffff00
• Textual, contoh: red, green
• RGB (Red-Green-Blue), contoh: rgb(255,255,255)
• RGBA (Red-Green-Blue-Alpha), contoh: rgba(0, 0, 0, 0.2)
• HSL (Hue-Saturation-Lightness)
- Hue : 0-359. 0=red, 60=yellow, 120=green
- Saturation: 0-100%
- Lightness: 0-100%
• HSLA (Hue-Saturation-Lightness-Alpha)
CSS3 Color

CSS
Visual Effects
CSS3 Color - RGBA

CSS
Visual Effects
• Safari, Chrome, Opera, IE9+
dan Firefox 4+:
border-radius: 10px;
-webkit-border-radius: 10px;
• Firefox 3 dan sebelumnya:
-moz-border-radius: 10px;
• Equal to:
border-radius:
10px 10px 10px 10px;
top-left top-right bottom-right bottom-left
CSS3 Rounded Corner

CSS
Visual Effects
CSS3 Box Shadow
-webkit-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
-moz-box-shadow: 2px 5px 0 0 rgba(72,72,72,1);
box-shadow: 2px 5px 0 0 rgba(72,72,72,1);

CSS
Visual Effects
CSS3 Box Shadow
-webkit-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
-moz-box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;
box-shadow: inset 0 1px 3px pink, inset 0 -5px 15px maroon, 0 2px 1px black;

CSS
Visual Effects
CSS3 Text Shadow
/* single shadow */
text-shadow: topOffset leftOffset blurRadius color;
/* multiple shadows */
text-shadow: topOffset1 leftOffset1 blurRadius1 color1, topOffset2 leftOffset2 blurRadius2 color2,
topOffset3 leftOffset3 blurRadius3 color3;

CSS
Visual Effects
CSS3 Text Shadow vs Image

CSS
Visual Effects
CSS3 Opacity
.opacity {
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; /* IE8 only */
filter: alpha(opacity=50); /* IE6, IE7, and IE8 */
}

CSS
Visual Effects
CSS3 Gradient
• Linear Gradient
• Radial Gradient
• Repeating Gradient
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-
stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /*
Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
/* IE6-9 */

CSS
Visual Effects
CSS3 Multiple Background
body {
background:
url(images/background_grass.png) bottom repeat-x,
url(images/background_stone.png) bottom right no-repeat,
url(images/background_clouds.png) left top repeat-x,
url(images/background_sun.png) right top no-repeat,
url(images/background_sky.png) top repeat-x
rgba(255,255,255,1);
}

CSS
Visual Effects
CSS3 Multiple Column Layout
.columns {
-moz-column-count: 3;
-moz-column-gap: 20px;
-moz-column-rule: 1px dotted #666;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px dotted #666;
}

CSS
Visual Effects
CSS3 Border Image
.border-img {
border: double orange 1em;
border-image: url("http://www.w3.org/TR/css3-background/border.png") 27 round;
}

CSS
Visual Effects
CSS3 Background Size
.background-size{
background-image: url(http://domain.tld/path/bg.png);
-webkit-background-size: 50% 50%; /* Safari */
-khtml-background-size: 50% 50%; /* Konquer*/
-moz-background-size: 50% 50%; /* Firefox*/
-o-background-size: 50% 50%; /* Opera */
background-size: 50% 50%; /* CSS3 */
}

CSS
Visual Effects
CSS3 Custom Text-Highlight Style
*::selection {
background: #E6E5C3;
color: #291F16;
}
*::-moz-selection {
background: #E6E5C3;
color: #291F16;
}

CSS
Visual Effects
CSS3 Web Font
• Tidak semua font tersedia di komputer pengguna.
• CSS3 memungkinkan untuk meng-embed font yang diinginkan di web, sehingga tidak lagi
bergantung pada ketersediaan font di komputer pengguna
• Tipefont:
- .eot
- .ttf
- .svg
- .woff
• Download font:
- http://www.fontsquirrel.com/fonts
- http://www.exljbris.com/

CSS
Visual Effects
CSS3 Web Font
@font-face{ /* declarefonts*/
font-family: “FertigoPro";
src: url("fonts/FertigoPro-webfont.eot");
src: local("FertigoPro"), local(" FertigoPro "),
url("fonts/FertigoPro-webfont.woff") format("woff"),
url("fonts/FertigoPro-webfont.ttf") format("truetype"),
url("fonts/FertigoPro-webfont") format("svg");
}
/* displayfonts*/
h1 { font: 24px/1 FertigoPro, Verdana, sans-serif; }

CSS
Visual Effects
CSS3 Web Font – google.com/fonts
Embed in HTML:
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
Add into CSS:
font-family: 'Oswald', sans-serif;

CSS
Tools
CSS3 Generator
http://www.css3please.com

CSS
Tools
CSS3 Generator
http://www.css3generator.com

CSS
Tools
CSS3 Generator
http://www.css3maker.com

CSS
Tools
CSS3 Generator
http://www.colorzilla.com/gradient-editor/

CSS
Tools
CSS3 Helper Script
• Membantu browser IE8 atau sebelumnya agar kompatibel dengan CSS3.
- IE7-JS http://code.google.com/p/ie7-js/
- CSS3Pie http://css3pie.com
- CSS Sandpaper http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library
• Modernizr http://modernizr.com
Untuk mendeteksi kompatibilitas browser dengan perintah CSS3 & HTML5
How to:
- http://www.alistapart.com/articles/takingadvantage-of-html5-and-css3-withmodernizr/
- http://webdesignernotebook.com/css/how-to-use-modernizr
- http://www.ericlightbody.com/2010/modernizr-your-tool-for-html5-and-css3-functionality

Best Practice for
BecomingAwesome
WebDesigner1. Design for Content. Not Lorem Ipsum.
2. Mockuping First.
3. Saving Time with HTML & CSS Framework.
4. Do Not Forget User Experience.
5. Spend Time on Behance, CodePen, Etc.
6. Use Jquery Plugin & Friends.
7. Following Web Design Trends.
8. Practice makes perfect. Always.

Best Practice for
BecomingAwesome
WebDesigner1. Design for Content. Not Lorem Ipsum.

Best Practice for
BecomingAwesome
WebDesigner2. Mockuping First.

Best Practice for
BecomingAwesome
WebDesigner3. Saving Time with HTML & CSS Framework.

Best Practice for
BecomingAwesome
WebDesigner4. Do Not Forget User Experience.

Best Practice for
BecomingAwesome
WebDesigner5. Spend Time on Behance, CodePen, Etc.

Best Practice for
BecomingAwesome
WebDesigner6. Use Jquery Plugin & Friends.

Best Practice for
BecomingAwesome
WebDesigner7. Following Web Design Trends.

Best Practice for
BecomingAwesome
WebDesigner8. Practice makes perfect. Always.

Worksheet
Create Html5 Todolist
App
?

See ya tommorow!
Tel. 082 123 840 840
Mail. realwahyuputra@gmail.com
Tw. @realwahyuputra
Fb. fb.com/wahyu.putra

Training HTML5 CSS3 Ilkom IPB

Recommended

More Related Content

What's hot (20)

Viewers also liked (8)

Similar to Training HTML5 CSS3 Ilkom IPB (20)

Recently uploaded (20)

Training HTML5 CSS3 Ilkom IPB