Another example of using SVG-object as background-images for HTML elements.

Lorem ipsum dolor sit amet consectetuer nibh tellus Nulla ut tortor. Mauris nisl sem parturient urna amet Nam orci pretium Morbi nunc. Id pellentesque sed sed et et nunc Nam Vestibulum tincidunt penatibus. Nibh quis eu dolor tellus nulla malesuada condimentum sed Curabitur sed. Urna metus senectus Phasellus justo et Nulla leo tincidunt Curabitur turpis. Enim mauris eu sit lacus Ut Phasellus molestie eros nascetur tincidunt. Justo pretium cursus.

Metus massa eros ipsum consequat et dui id ligula sem nibh. Et ut malesuada Maecenas pede Cum fames Ut non convallis Quisque. Vitae nibh porttitor orci nisl semper vitae justo orci Curabitur eu. Elit quis condimentum ridiculus dictumst quis laoreet tempus consectetuer lacus vel. Lorem wisi porttitor sollicitudin auctor id ipsum tempus libero nec.

As pointed out in an earlier post, HTML5 and the webfont CSS @fontface property will phase out the need for font replacement techniques like sIFR or Cufon.

And another popular javascript driven UI-aid is gonna deprecate soon. The date-picker or calendar tool.

HTML5 that now incorporates the Webform2 specification which has internal support for a calendar tool, range slider and number spinners.

Opera is the only browser that has support for Webform now for several years. I made some internal tools that used it.

It so simpel and powerful. And no more localisation issues.

Some examples (need Opera 9+ to see)
With other HTML5 nonsupporting browsers it will degrade to an ordinary input field.

Datepicker

<input type="datetime-local" />

Email

<input type="email" />

*Note the automatically added special email icon in Opera

Number (with automatic spinner)

<input type="number" />

Range (slider)

<input type='range' />

Default range: 0 – 100. I guess this will be another UI favourite.

Webfonts is a technique for defining a variety of fonts to be displayed in a web browser.

In CSS authors typically specify font characteristics via a font property (font-family). In CSS1, all fonts were assumed to be present on the client system and were identified solely by name. Designers of webpages had no way to propose other fonts to the user other than generic default fonts installed on the client computer.

Now with CSS3 the situation, when there is no matching font on the client, has been expanded. Fonts can be downloaded over the web by the browser and used on the client. This gives the author much more control over the typography and design of the page, because it’s not longer dependend of locally stored fonts.

This means this is no need anymore for flash based work-arounds like sIFR. The other good thing is that browsers can fall back to more generic fonts, when they don’t support the webfonts.

So there is no reason at all to wait using them.

Like for most web-innovations based on open standards, Microsoft is NOT supporting it. They have there own implementation based on a proprietary standard EOT. This is not a W3C recommendation nor is it supported by any other company. I think we have to wait till Internet Explorers` marketshare is dropping under 30% before Microsoft is starting to support open standards Web Fonts.

To see this paragraph in a different font, try the appropriate buttons.

Pinewood
GothenburgFraktur
Pinocchio

You need a webfont supporting browser: Safari 3.1+, Opera 10 +, Firefox 3.1 + or Chrome 2 +.

Most SEO (Search Engine Optimization) experts claim they can offer services to any webmaster by helping pushing more traffic to their websites. Not necessarily the PageRank, which is an importance ranking of Google, but the position in Google result pages will be the goal most people are targeting.

Inbound links help, but most traffic to ordinary sites will come from search engine result pages. Even my aunt simply types everything in Google, including URL’s.

The power of Google is that they made their homepage so simple, and the searchbox is so centered, that newbies automatically start typing in there. Addressbar, what’s that? Even the technically smart and userfriendly way of making the addressbar a super searchfield, which was introduced years ago by Opera – and stole my heart immediately – and that is now copied by Firefox and Chrome, and now known as Omnibox – is too difficult for computer illiterates

I’m getting of topic. For generated traffic it does make a difference if your website is listed 7th or 68th. I prefer to have the default amount of results changed to 100. Sometimes it’s a bit hard to see, their is no explicit numbering in Google or Yahoo, so I’ve created a little CSS file that adds a that number: Search Engine Counter CSS

Works in Google

Works in Yahoo

As a CSS Userfile

For Opera users just save this file in the User CSS directory, normally in the profile/css/user path. The you can simply select it in the dropdown menu.

Operation

As a Javascript bookmarklet

An alternative way of operating is a bookmarklet powered by Javascript. Drawback: it doesn’t work, when javascript is disabled.

To install it: drag the bookmarklet to your Bookmarks Toolbar, Links Bar or Personal Bar or whatever it’s called.
Result-counter

A bookmarklet is a little javascript helper to execute some small automated tasks in your web browser

Use: push the button on a  Google or Yahoo result page.

Intro

There is a lot going on in the CSS3 and HTML5 development. Rounded borders (radius) and multi-image backgrounds are both supported in latest Safari/Webkit and Firefox beta’s. Opera has always been a pioneer with CSS and SVG support and has chosen to walk a more interesting road. Opera gives you the opportunity to treat SVG objects as any other image including background image declared in CSS. An SVG-object as a background options gives you all the power of radius and multi-image background plus a lot more: stars, ellipse, triangles, multi-images, animated background and easy javascript driven user customisable backgrounds.

Examples

Let’s have some examples.

SVG backgrounds are really nice and powerful. SVG can be used for gradients, rounded corners, watermarks, graphics and even animated backgrounds. SVG can also be used for list style images for and <li> elements in ordered and unordered lists.

There is a bug though. If you give a div a border there are rendering issues as you can see here.

Screenshot in Opera 9.6

Example 1  Background

Example 2 Background with border

Example 3 Background with padding

Example 4 Background with border and padding