This slideset is designed for Opera, and uses some features only available in the Opera Video Builds. However the basic content should work in any browser.
To see this in presentation mode using Opera, simply select "View" ->"Full Screen". To see how all this is done, view the source...
Web standards > SVG
Web standards > SVG code
<g id="m">
<line stroke-width="4"
y2="95" stroke="red" opacity=".9" />
file://localhost/Users/zibin/Desktop/Opera/test/teststyle.html
<animateTransform type="rotate"
attributeName="transform"
repeatCount="indefinite"
dur="60min" by="360" />
<circle r="6" fill="red"/> </g>
HTML 5
HTML 5 has:
autofocus
, required
, autocheck data types (eg email
, date
, url
, pattern
)<video>
and <canvas>
<canvas>
Web standards > Canvas
Web standards > Web forms 2.0
More robust forms
Easier to put together standards control archetypes that are complicated with HTML 4.x.
<input type=date>
:
<input type=range>
:
CSS 3
...but there is a lot of hacking involved to achieve complex design features.
Hence CSS 3 was born, which aims to make popular design features easier to achieve, and give designers more control.
CSS 3 Opacity
Opacity used to require JavaScript to achieve, but now it can be achieved using a single CSS property. Nice!
opacity: 0.15;
This can now also be done using RGBA or HSLA colours, eg:
p { background-color: rgba(255,0,0,0.15); }
Web standards > CSS > text shadows
It is very easy to set text shadows using CSS 3.
Let's have a look at a slightly demonic example!
text-shadow: #f00 0px 0px 30px;
CSS 3 zebra striping
tr.odd {background-color:green;}
<tr>…</tr>
<tr class="odd">…</tr>
tr.nth-child(odd) {background-color:green;}
<tr>…</tr>
<tr>…</tr>
Web standards > The mobile web > Media queries
CSS 3 constructs
Allow you to apply CSS selectively, depending on attributes such as viewport width.
@media all and (max-device-width: 480px) {
#big-wide-banner { display:none;}
#narrow-banner {display:block;}
}
Experimental stuff > HTML 5 <video>
Current way to embed video:
<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<embed src="http://www.youtube.com/v/LtfQg4KkR88&hl=en&fs=1" type="application/x-shockwave-flash"
allowfullscreen="true" width="425" height="344"></embed>
</object>
Experimental stuff > HTML 5 <video>
Exciting new way - labs.opera.com
<video src="video.ogv"
controls
autoplay
poster="poster.jpg"
width="320" height="240">
<a href="video.ogv">Download movie</a>
</video>
Experimental stuff > <abbr>HTML</abbr> 5 <video>