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.
Ikke at jeg kan lide IE (jeg har spist for meget af IE6), men IE9 (beta'en kommer i morgen) kender faktisk mange CSS3 funktioner (media queries, selectors, border-radius...)
http://ie.microsoft.com/testdrive/
http://www.quirksmode.org/css/contents.html
Også box-shadow, har jeg glemt at skrive.
Here we go for IE9 http://www.beautyoftheweb.com/
Tak for kommentarerne.
Ja IE9 bliver formentligt et skridt frem.
Bliver dog sjovt at se hvordan den klarer ACID testen og Dromaeo's tests.