All posts by Lars Støttrup

CSS3 and Intellisense for CSS3

This post will focus on CSS3, and later how to get Visual Studio to recognize CSS3 attributes.
The CSS3 attributes we will focus on will be: border-radius and box-shadow.
CSS3 isn’t finalized yet, so it’s always a good idea to use browser specific tags, such as “-o-box-shadow, -moz-box-shadow, -webkit-box-shadow”.
These will be use in the rest of this post, but not be part of the code-examples.
Note: As of writing this article, Internet Explorer doesn’t support CSS3 at all, yet.

Lets begin with a simple unstyled button:

Lets start by rounding the corners using the border-radius attribute:

.button1
{
   border-radius: 6px / 4px;
   /* alternativ: border-radius: 6px 6px 6px 6px / 4px 4px 4px 4px */
}

The syntax for “border-radius” is similar to the other “border”-attributes. The edge in each corner is “pulled” down over an invisible circle, which has the defined radius. If you, as I have chosen here, use “/” then the circle will have 2 radii, and thus become oval.
The complete syntax can be found here.

Lets try “box-shadow”:

.button2
{
   background-color:#606EA6;
   border:1px solid #3B4466;
   color:#FFFFFF;
   box-shadow:0 3px 3px #8CA0F2 inset, 0 -5px 2px #3B4466 inset, 2px 2px 3px black;
}

The “box-shadow” attribute allows an unlimited amount of shadows, as long as they are comma-separated. On the button above, we thus add 3 shadows. The first 2 parameters define horizontal/vertical placement of the shadow; third param defines how strong a blur effect the shadow should have, where 0 is “no blur”. Then the color is defined, and “inset” (can be left out) defines that the shadow should be inside the element, as opposed to the outside.

So how do we get Visual Studio to recognize these new attributes?
(If you are not comfortable messing with the Windows registry, you might wanna skip this step.)
Visual Studio keeps the existing templates in your Visual Studio installation folder, in the subfolder: \Common7\Packages\1033\schemas\CSS
Take a copy of css21.xml and call the new file css3draft.xml. Open the file and find a section called “Edges Properties”.

Insert 2 new nodes with the following:




These define our 2 new CSS3 attributes.

Run regedit.exe and search through HKEY_LOCAL_MACHINE for a key (and only keys!) with the GUID: {A764E895-518D-11d2-9A89-00C04F79EFC3}
You have found the correct GUID if it has a subkey by the name “Schemas” (and still remain in the HKEY_LOCAL_MACHINE tree).
This subkey probably contains keys named “Schemas 1” up to “Schema 4”
Make a key by the name “Schema 5” and two strings with the names “File” and “Friendly Name”.
Set “File” to css3draft.xml and “Friendly Name” to whatever you want, for example “CSS 3 Draft”.

The styles menubar in Visual Studio will now have an extra value in it’s drop-down list of CSS schemas.
Visual Studio Style Menu Bar

Click tracking

Vi har installeret CrazyEgg click tracking på hinnerup.net.

CrazyEgg er et værktøj til at visualisere brugernes færden på ens site, og indeholder smarte funktioner som: Click-overlay, Heatmap og Confetti.

Man indsætter en enkelt linje kode på de sider der skal trackes:

Derefter opsættes de sider der skal trackes i CrazyEgg:

Efter nogle dage begynder statistikken at være på plads.

Her er de forskellige overlays.

Standard overlay:

Heatmap:

Confetti:

Standard overlayet giver os mulighed for at se hvor mange clicks et givet link har fået. Heatmap er rimeligt selvforklarende – den viser os hvor “populært” et link eller anden detalje er. Den mest interessante er Confetti, som har følgende indstillings-muligheder:

Alle disse overlays skulle sammenlagt give ens hjemmesidedesigner mulighed for at designe en mere brugervenlig oplevelse.