Soumettre la recherche
Mettre en ligne
New HTML5/CSS3 techniques
•
Télécharger en tant que PPTX, PDF
•
4 j'aime
•
5,771 vues
M
mbeatrizoliveira
Suivre
New HTML5/CSS3 techniques
Lire moins
Lire la suite
Signaler
Partager
Signaler
Partager
1 sur 60
Télécharger maintenant
Recommandé
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
umapst
The Basics of (X)HTML Tags
The Basics of (X)HTML Tags
LearningNerd
Html Ppt
Html Ppt
vijayanit
Learning HTML
Learning HTML
Md. Sirajus Salayhin
Html Presentation Of Web Page Making
Html Presentation Of Web Page Making
Sandeep Supal
Html ppt
Html ppt
sanjay joshi
Html ppt
Html ppt
Sanmuga Nathan
Basic HTML
Basic HTML
coachhahn
Recommandé
LAMP_TRAINING_SESSION_3
LAMP_TRAINING_SESSION_3
umapst
The Basics of (X)HTML Tags
The Basics of (X)HTML Tags
LearningNerd
Html Ppt
Html Ppt
vijayanit
Learning HTML
Learning HTML
Md. Sirajus Salayhin
Html Presentation Of Web Page Making
Html Presentation Of Web Page Making
Sandeep Supal
Html ppt
Html ppt
sanjay joshi
Html ppt
Html ppt
Sanmuga Nathan
Basic HTML
Basic HTML
coachhahn
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
shabab shihan
Html text formatting
Html text formatting
derekoei
Introduction to html
Introduction to html
veena parihar
Html basic tags
Html basic tags
umesh patil
Html Ppt
Html Ppt
Hema Prasanth
Html
Html
irshadahamed
Introduction to html
Introduction to html
vikasgaur31
Html introduction
Html introduction
Dalia Elbadry
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
Html1
Html1
learnt
Htmltag.ppt
Htmltag.ppt
anandha ganesh
HTML & CSS
HTML & CSS
jlinabary
Understanding THML
Understanding THML
Hinopak Motors Limited
Intro to html
Intro to html
anshuman rahi
Learning Html
Learning Html
Damian Gonz
Html ppt
Html ppt
Iblesoft
Introduction To HTML
Introduction To HTML
Mehul Patel
Lecture 2 introduction to html
Lecture 2 introduction to html
palhaftab
HTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
Html
Html
charu gupta
Html 5 a step towards semantic web
Html 5 a step towards semantic web
Sachin Khosla
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
pemaquid
Contenu connexe
Tendances
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
shabab shihan
Html text formatting
Html text formatting
derekoei
Introduction to html
Introduction to html
veena parihar
Html basic tags
Html basic tags
umesh patil
Html Ppt
Html Ppt
Hema Prasanth
Html
Html
irshadahamed
Introduction to html
Introduction to html
vikasgaur31
Html introduction
Html introduction
Dalia Elbadry
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Jayapal Reddy Nimmakayala
Html1
Html1
learnt
Htmltag.ppt
Htmltag.ppt
anandha ganesh
HTML & CSS
HTML & CSS
jlinabary
Understanding THML
Understanding THML
Hinopak Motors Limited
Intro to html
Intro to html
anshuman rahi
Learning Html
Learning Html
Damian Gonz
Html ppt
Html ppt
Iblesoft
Introduction To HTML
Introduction To HTML
Mehul Patel
Lecture 2 introduction to html
Lecture 2 introduction to html
palhaftab
HTML presentation for beginners
HTML presentation for beginners
jeroenvdmeer
Html
Html
charu gupta
Tendances
(20)
Eye catching HTML BASICS tips: Learn easily
Eye catching HTML BASICS tips: Learn easily
Html text formatting
Html text formatting
Introduction to html
Introduction to html
Html basic tags
Html basic tags
Html Ppt
Html Ppt
Html
Html
Introduction to html
Introduction to html
Html introduction
Html introduction
HTML (Web) basics for a beginner
HTML (Web) basics for a beginner
Html1
Html1
Htmltag.ppt
Htmltag.ppt
HTML & CSS
HTML & CSS
Understanding THML
Understanding THML
Intro to html
Intro to html
Learning Html
Learning Html
Html ppt
Html ppt
Introduction To HTML
Introduction To HTML
Lecture 2 introduction to html
Lecture 2 introduction to html
HTML presentation for beginners
HTML presentation for beginners
Html
Html
Similaire à New HTML5/CSS3 techniques
Html 5 a step towards semantic web
Html 5 a step towards semantic web
Sachin Khosla
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
pemaquid
HTML5: 5 Quick Wins
HTML5: 5 Quick Wins
Jeff Leombruno
HTML5 - One spec to rule them all
HTML5 - One spec to rule them all
Stu King
Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)
Evan Hughes
HTML and CSS workshop
HTML and CSS workshop
Manchester Girl Geeks Geeks
Html5 Overview
Html5 Overview
Owen Williams
HTML5
HTML5
Mark Embling
Understanding html
Understanding html
Ray Villalobos
HTML Fundamentals
HTML Fundamentals
Doncho Minkov
Html5: What is it?
Html5: What is it?
joeydehnert
Developing Gadgets
Developing Gadgets
Quirk
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
Carlos Ramon
PL2235 2009 1 HTML
PL2235 2009 1 HTML
Aliamat UBD
Html5
Html5
Peeyush Chandel
XHTML basics
XHTML basics
Todd Barber
Html5
Html5
dotNETUserGroupDnipro
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
Sugree Phatanapherom
Lca2009 Video A11y
Lca2009 Video A11y
guesta3d158
Successful Teams follow Standards
Successful Teams follow Standards
Christian Heilmann
Similaire à New HTML5/CSS3 techniques
(20)
Html 5 a step towards semantic web
Html 5 a step towards semantic web
HTML5 - techMaine Presentation 5/18/09
HTML5 - techMaine Presentation 5/18/09
HTML5: 5 Quick Wins
HTML5: 5 Quick Wins
HTML5 - One spec to rule them all
HTML5 - One spec to rule them all
Html basics IML 140 (weeks 2-3)
Html basics IML 140 (weeks 2-3)
HTML and CSS workshop
HTML and CSS workshop
Html5 Overview
Html5 Overview
HTML5
HTML5
Understanding html
Understanding html
HTML Fundamentals
HTML Fundamentals
Html5: What is it?
Html5: What is it?
Developing Gadgets
Developing Gadgets
HTML5 - What h#@$ is it?
HTML5 - What h#@$ is it?
PL2235 2009 1 HTML
PL2235 2009 1 HTML
Html5
Html5
XHTML basics
XHTML basics
Html5
Html5
Optimizing Drupal for Mobile Devices
Optimizing Drupal for Mobile Devices
Lca2009 Video A11y
Lca2009 Video A11y
Successful Teams follow Standards
Successful Teams follow Standards
New HTML5/CSS3 techniques
1.
Make your design
shine with HTML5 and CSS3
2.
Beatriz Oliveira
3.
4.
5.
6.
HTML5
7.
HTML5 Collection of
features Don’t throw anything away Easy to get started It already works! It’s here to stay!
8.
<!DOCTYPE html>
9.
New semantic elements
HTML5 elements
10.
<!DOCTYPE html> <html
lang="en"> <head>…</head> <body> <header> <hgroup>…</hgroup> <nav>…</nav> </header> <section> <article>…</article> <article>…</article> </section> <footer>…</footer> </body> </html>
11.
demo
12.
CSS3
13.
CSS3 It’s here
to stay! Use in non critical areas Focus on experience level Start today!
14.
multiple background images
CSS3 properties
15.
.foo { background:url(image1.png)
no-repeat top left,url(image2.png) repeat-x bottom left,url(image3.png) repeat-y top right;}
16.
parallax scrolling
17.
18.
web fonts CSS3
properties
19.
prepare your IIS
server for “.otf” web.config <system.webServer> <staticContent> http://html5boilerplate.com/ http://madskristensen.net/post/Prepare-webconfig-for-HTML5-and-CSS3.aspx
20.
border-radius CSS3 properties
21.
.foo { border-radius:
10px; }
22.
box-shadow CSS3 properties
23.
.foo { box-shadow:
1px 1px 2px 2px #999 inset; }
24.
opacity CSS3 properties
25.
.foo { color:
rgba(0, 0, 0, 0.75); }
26.
.foo { opacity:
0.5; }
27.
vendor-specific prefixes CSS3
properties
28.
29.
css transforms CSS3
properties
30.
what are 2D
transforms?
31.
“transform" property
32.
transform functions
33.
.foo { transform:
rotate(3deg); }
34.
.foo { transform:
scaleX(2) scaleY(3); }
35.
.foo { transform:
scale(2,3); }
36.
.foo { transform:
skewX(5deg) skewY(-20deg); }
37.
.foo { transform:
skew(5deg, -20deg); }
38.
.foo { transform:
translateX(10px) translateY(20px); }
39.
.foo { transform:
translate(10px, 20px); }
40.
“transform-origin" property
41.
.foo { transform-origin:
left bottom; }
42.
css transitions CSS3
properties
43.
smooth property changes
44.
.foo {transition-property: background;transition-duration:
0.3s;transition-timimg-function: ease; transition-delay: 0.5s;}
45.
.foo { transition:
background 0.3s ease 0.5s; }
46.
text-shadow CSS3 properties
47.
p { text-shadow:
1px 1px 2px #999; }
48.
new selectors CSS3
selectors
49.
.foo:empty
50.
.foo:first-child
51.
.foo:nth-child(n)
52.
.foo:only-child
53.
.foo:last-child
54.
.foo:target
55.
.foo:checked
56.
.pre ~ .foo
57.
input boxes, css
buttons and focus states CSS3 forms
58.
59.
Contacts www.bind.pt Twitter
– bindskins beatrizoliveira@bind.pt
60.
questions?
Notes de l'éditeur
<system.webServer> <staticContent> <!-- HTML5 Audio/Video mime types--> <removefileExtension=".mp3" /> <mimeMapfileExtension=".mp3" mimeType="audio/mpeg" /> <removefileExtension=".mp4" /> <mimeMapfileExtension=".mp4" mimeType="video/mp4" /> <removefilextension=".ogg" /> <mimeMapfileExtension=".ogg" mimeType="audio/ogg" /> <removefileExtension=".ogv" /> <mimeMapfileExtension=".ogv" mimeType="video/ogg" /> <removefileExtension=".webm" /> <mimeMapfileExtension=".webm" mimeType="video/webm" /> <!-- Proper svgserving. Required for svg webfonts on iPad --> <removefileExtension=".svg" /> <mimeMapfileExtension=".svg" mimeType="images/svg+xml" /> <removefileExtension=".svgz" /> <mimeMapfileExtension=".svgz" mimeType="images/svg+xml" /> <!-- HTML4 Web font mime types --> <!-- Remove default IIS mime type for .eotwhichis application/octet-stream --> <removefileExtension=".eot" /> <mimeMapfileExtension=".eot" mimeType="application/vnd.ms-fontobject" /> <removefileExtension=".otf" /> <mimeMapfileExtension=".otf" mimeType="font/otf" /> <removefileExtension=".woff" /> <mimeMapfileExtension=".woff" mimeType="font/x-woff" /> <removefileExtension=".crx" /> <mimeMapfileExtension=".crx" mimeType="application/x-chrome-extension" /> <removefileExtension=".xpi" /> <mimeMapfileExtension=".xpi" mimeType="application/x-xpinstall" /> <removefileExtension=".safariextz" /> <mimeMapfileExtension=".safariextz" mimeType="application/octet-stream" /> <!-- Flash Video mime types--> <remove fileExtension=".flv" /> <mimeMapfileExtension=".flv" mimeType="video/x-flv" /> <removefileExtension=".f4v" /> <mimeMapfileExtension=".f4v" mimeType="video/mp4" /> </staticContent>
Télécharger maintenant