Training HTML5 CSS3 Ilkom IPB

Build Awesome Website withHtml5 & Css3

2 Days Workshop@ Lab. Ilkom IPB16 – 17 May 2015

by Wahyu Putra

AboutSpeakerWahyu PutraChief Technology Officer - UI/UX DesignerPT Startup Digital Indonesia

Tel. 082 123 840 840Mail. [email protected]. @realwahyuputraFb. fb.com/wahyu.putra

AboutSpeaker

AgendaWorkshopDay #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

HTMLMilestone

TheDefinitionHTML (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 is HTML + CSSImagine your favorite websitewithout CSS. Just HTML.

• Type F12 > Click “Sources“ tab• Choose file css and delete all

What’sHTML5HTML5 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

HTML5Vs 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.

HTML5Vs 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.

HTML5Vs 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>

HTML5Vs HTML4The / is no longer requred for self-closing elements

HTML4<br /><hr /><img /><input /><link /><meta />

HTML 5<br><hr><img><input><link><meta>

HTML5Vs HTML4Boolean attributes can be minimized

HTML4checked="checked"compact="compact"declare="declare"defer="defer"disabled="disabled"multiple="multiple”selected="selected"

HTML 5checkedcompactdeclaredeferdisabledmultipleselected

SomeGuidelines• 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’tUse This Tags & atributesAll of these just presentational purpose. Use css instead.

Tags<font><center><frame><frameset><noframes><acronym><applet><basefont><big><dir><strike><tt>

Atributesalignbgcolorheightwidthsizetype

HTML5New 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

HTML5Browser Supports

HTML5FormsHTML5 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

HTML5Forms<input type=“search”>

HTML5Forms<input type=“email”>

HTML5Forms<input type=“url”>

HTML5Forms<input type=“tel”>

HTML5Forms<input type=“datetime-local”>

HTML5Forms<input type=“date”>

HTML5Forms<input type=“time”>

HTML5Forms<input type=“month”>

HTML5Forms<input type=“week”>

HTML5Forms<input type=“number”>

HTML5Forms<input type=“range”>

HTML5Forms<input type=“color”>

HTML5FormsNew Form Atributes• required• placeholder• pattern• form• autocomplete• datalist• autofocus

HTML5FormsNew Form Atributes - requiredUntuk keperluan validasi form, elemen input harus diisi, tidak boleh kosong.

HTML5FormsNew Form Atributes - placeholderMenambahkan keterangan di dalam elemen input

HTML5FormsNew Form Atributes - patternValidasi dengan mengikuti pattern dari regex (regular expression)Tools: http://html5pattern.com/

HTML5FormsNew Form Atributes - formAtribut form berguna untuk menentukan suatu elemen input masuk ke dalam form tertentu sehingga elemen input tidak harus berada di dalam tag <form>

HTML5FormsNew Form Atributes - autocompleteMengaktifkan atau menonaktifkan fitur auto complete fill pada elemen input. Default: on.

off

on

HTML5FormsNew Form Atributes – list & datalistElemen input teks yang memiliki kemampuan seperti dropdown untuk memilih predefined input dan bersifat auto complete.

HTML5FormsNew Form Atributes – autofocusMembuat cursor otomatis fokus ke elemen input tertentu pada saat halaman ditampilkan.Hanya diperbolehkan memiliki satu elemen input dengan atribut autofocus dalam satu halaman.

HTML5New Elements• <video>• <audio>• <track>• <source>• <embed>• <mark>• <datalist>• <keygen>• <output>• <progress>• <meter>• <time>

• <canvas>• <ruby>• <rt>• <rp>• <wbr>• <command>• <menu>• <details>• <summary>

HTML5New 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>

HTML5New Elements<video>

HTML5New Elements<audio>Pemutar audio native di browser tanpa perlu dukungan 3rd party software/plugin.

Tipe audio yang didukung:• .mp3• .wav• .ogg

Tags:• <audio>• <source>

HTML5SemanticsWhat 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."

HTML5Semantics<!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>

HTML5Semantics<!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>

HTML5SemanticsA New Perspective on Types of ContentMetadata contentMenyajikan informasi mengenai halaman itu sendiri.contoh: <title>, <link>, <meta>, <style>

Flow contentElemen-elemen yang digunakan untuk mengatur tata letak isi di halaman.contoh: <header>, <footer>, <p>

Sectioning contentTerkait pengaturan bagian-bagian halamancontoh: <section>, <article>, <aside>, <nav>

Heading contentTerkait dengan pengaturan level headingcontoh: <h1>…<h6>, <hgroup>

HTML5SemanticsA New Perspective on Types of ContentPhrasing contentPengaturan tampilan tulisan pada suatu paragraf.contoh: <em>, <i>, <cite>, <strong>, <b>

Embedded contentBerhubungan dengan penyertaan media seperti image, audio dan videocontoh: <img>, <object>, <embed>, <video>, <audio>, <canvas>

Interactive contentBerhubungan dengan interaksi dengan pengguna.contoh: <form>, <input>

HTML5Semantics<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>

HTML5Semantics<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>

HTML5Semantics<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>

HTML5Semantics<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>

HTML5Semantics<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>

HTML5Semantics<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>

HTML5Semantics Layout <header>

HTML5Semantics Layout <header> <nav>


<nav>


<nav>

<section>


<nav>

<section> <aside>


<nav>

<section><aside>


<nav>

<section><aside>

<footer>


<nav>

<section>

<aside>

<footer>

<section>

<section>


<nav>

<aside>

<footer>

<section>

<section>

<section>


<nav>

<aside>

<footer>

<article>

<article>

<section>


<nav>

<aside>

<footer>

<article>

<header>

<footer>

HTML5LimitationBeberapa 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)

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

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

HTML5& JavascriptGeolocationHTML5 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);

HTML5& JavascriptLocal StorageMemungkinkan 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.

HTML5& JavascriptOffline Application CacheMembuat 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 ManifestMerupakan 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

HTML5& Javascript

Contoh Isi File ManifestCACHE 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’sCSS3CSS3 Browser Support

CSSAdvantage• Layout

• Color

• Fonts & text

• Backgrounds

• Borders

• Floats

h1

{

color: blue;

font-size: 12px;

}

CSSBasic Component

• Element

• Atribute

• Selector

• Properties

Selector

Declaration

PropertyValue

CSSSelector• Tag

• ID

• Class

p { text-align:justify; color:blue; }

#header { float:left; margin:10px; }

.judul { font-size:15px; background-color:#0000ff; }

CSSSelector• 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

SelectorAttribute• 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’

CSSSelector Browser Support



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

CSSPseudo-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

CSSBrowser 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.

CSSBrowser 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

CSSBrowser 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)

CSSMedia 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+

CSSMedia 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

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

Property

CSSMedia QueryContoh

CSSMedia Query/* Smartphones (landscape) -----------*/@media only screenand (min-width: 321px) {/* Styles*/}

/* Smartphones (portrait) -----------*/@media only screenand (max-width: 320px) {/* Styles*/}

Smartphone (Portrait & Landscape)

CSSMedia Query/* iPads (portrait and landscape)-*/@media only screenand (min-device-width: 768px)and (max-device-width: 1024px) {/* Styles*/}/* iPads (landscape) --------*/@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation: landscape) {/* Styles*/}/* iPads (portrait) -----*/@media only screenand (min-device-width: 768px)and (max-device-width: 1024px)and (orientation: portrait) {/* Styles*/}

iPads (Portrait & Landscape)

CSSMedia Query/* Desktops and laptops -----*/@media only screenand (min-width : 1224px) {/* Styles */}

/* Large screens -----------*/@media only screenand (min-width : 1824px) {/* Styles */}

Desktop

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

iPhone 4

CSSVisual 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

CSSVisual EffectsCSS3 Color - RGBA

CSSVisual 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

CSSVisual EffectsCSS3 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);

CSSVisual EffectsCSS3 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;

CSSVisual EffectsCSS3 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;

CSSVisual EffectsCSS3 Text Shadow vs Image

CSSVisual EffectsCSS3 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 */}

CSSVisual EffectsCSS3 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 */

CSSVisual EffectsCSS3 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); }

CSSVisual 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;}

CSSVisual EffectsCSS3 Border Image

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

CSSVisual EffectsCSS3 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 */}

CSSVisual EffectsCSS3 Custom Text-Highlight Style

*::selection {background: #E6E5C3;color: #291F16;}

*::-moz-selection {background: #E6E5C3;color: #291F16;}

CSSVisual EffectsCSS3 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/

CSSVisual EffectsCSS3 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; }h2 { font: 18px/1 FertigoPro, Verdana, sans-serif; }h3 { font: 14px/1 FertigoPro, Verdana, sans-serif; }

CSSVisual EffectsCSS3 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;

CSSToolsCSS3 Generator

http://www.css3please.com


http://www.css3generator.com


http://www.css3maker.com


http://www.colorzilla.com/gradient-editor/

CSSToolsCSS3 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.

WorksheetCreate Html5 Todolist App

?

See ya tommorow!

Tel. 082 123 840 840Mail. [email protected]. @realwahyuputraFb. fb.com/wahyu.putra

Training HTML5 CSS3 Ilkom IPB

Education