Michael Gaigg: Über UI/UX Design

13Mar4

Proposing: Feature Spotlight

Posted by Michael Gaigg

Feature Spotlight

Feature Spotlight

Let's say you want to highlight a feature on the map, e.g. a user has searched for a landmark, typically one would place a marker on the map and zoom to that location. The downside is that the user still needs to 'search' for the visual clue (the marker) on the map.

I think the missing link here is to 'black out' the whole map and only highlighting the area surrounding the landmark. This provides a natural focus on the feature and is a really elegant alternative I believe.

Optionally one could use the modal area to add a description or even photos (get creative for yourself). And yes, leave the marker also for browsers that don't support CSS3.

The code is as simple as could be, here is the CSS class called 'spotlight':

    .spotlight {
        display: block;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
	z-index: 100;
        border: 0;
        pointer-events: none;
        /* this is the sweet spot */
        background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, from(rgba(0,0,0,0)), to (rgba(0,0,0,0.8)), color-stop(0.8, rgba(0,0,0,0)));
        background-image: -moz-radial-gradient(50% 50% 45deg,circle closest-side,transparent 0,transparent 100px,rgba(0, 0, 0, 0.8) 120px);
    }

And here the HTML defining the spotlight container:

<span id="spot" class="spotlight"></span>

Implementation inspired by CSS3 Spotlight.

27Nov0

Highlights for Week 47/2011

Posted by Michael Gaigg

10Aug2

How to use the Google Font API

Posted by Michael Gaigg

Google fonts available

Google fonts available

If you love typography and want some new fonts for your next web project then Google Font API might be worth looking into. It's

  • easy to implement (as I will show)
  • well supported by IE, Firefox, Safari and obviously Chrome
  • open-source
  • free (I should have mentioned first huh?)

End Result

Tangerine font

Code Example

<html>
<head>
&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;
<style>
body {
	font-family: 'Tangerine', arial, serif;
	font-size: 2em;
}
</style>
</head>
 
<body>
This text is in <strong>Tangerine</strong>.
</body>
</html>

Implementation

The important parts in above code are to embed the font into your page through the

Link

The link element referencing the google api and your desired font family.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine:regular,bold' rel='stylesheet' type='text/css'&gt;

In above case I was referencing two variants delimited by a comma, the regular and the bold variant. Each variant will download an additional font and should be used only when really needed and used on the page to keep loading times as short as possible.

The variant parameter can be omitted for use of default.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine' rel='stylesheet' type='text/css'&gt;

One can chose to include multiple fonts by using the pipe symbol, same rules as above apply.

&lt;link href='http://fonts.googleapis.com/css?family=Tangerine|AnotherFontName:italic' rel='stylesheet' type='text/css'&gt;

Style

Use the font within your style sheet by simply referencing the font-family:

body { font-family: 'Tangerine', arial, serif; }

Above examples specifies fallback fonts (arial, serif) that will be displayed (depending on browser) while the font is not loaded yet or if the browser doesn't support the Google Font API (e.g. iPhone, iPad, iPod, or Android).

Oh yes, the fonts are rendered as text and therefore support CSS3 features like text-shadow and rotation.

Tools

Font previewer

Use the Font previewer to play with some style attributes, get the resulting CSS code and see how the end result will look like.

WebFont Loader

Look into the WebFont Loader for getting more control over loading the right fonts at the right time.

The WebFont Loader is a JavaScript library co-developed by Google and TypeKit that also lets you control how browsers behave while the font is still loading as well as using multiple web-font providers.

UPDATE: Chris Heilmann just posted a REALLY nice post about Controlling custom fonts with the Google WebFonts API.

What about you?

Post your link if you are using the Google Font API already. I'd like to see some really creative uses.

Are you using any other Font library?

19Mar0

Highlights of Week 11/2010

Posted by Michael Gaigg