@font -face example

@font -face is supported by the top browsers using various font types, for example Safari, Opera, Firefox and Chrome handle .TTF and .OTF, Internet Explorer can handle .EOT, and what’s probably worth a mention, Firefox 3.6 now handles .WOFF, and Opera supports .SVG.

@font-face implementation:

CSS:

@font-face {
font-family: “Museo 300”;
src: url(“fonts/Museo300-Regular.eot”);
src: local(“Museo 300”), local(“Museo 300”),
url(“fonts/Museo300-Regular.otf”) format(“opentype”),
url(“fonts/Museo300-Regular.woff”) format(“woff”),
url(“fonts/Museo300-Regular.svg#Museo 300”) format(“svg”);
}

Explanation:

font-family: “Museo 300”;
This is the font name, and how you will call it in your stylesheet.

src: url(“Museo300-Regular.eot”);
This will enable your font on Internet Explorer.

src: local(“Museo 300”), local(“Museo 300”),
This is the local setting which will call it from your machine if it exists.

url(“Museo300-Regular.otf”) format(“opentype”),
This covers Safari, Opera and Firefox below 3.6

url(“Museo300-Regular.woff”) format(“woff”),
This is the Firefox 3.6 file type.

url(“Museo300-Regular.svg#Museo 300”) format(“svg”);
This is the Opera font type. This will cover Safari, Firefox, Internet Explorer, Chrome and Opera at the very least and it provides a local setting which will find the local file on your machine. This can be altered to accommodate any other OpenType font or TrueType font (IF you have permission to use it!)

Usage:
#main {font: 18px “Museo 300”, Helvetica, Arial, sans-serif;}

When using the @font-face font in other elements, its good practice to have a few fallback fonts for users who are using a dated browser or browser that don’t support @font-face.

You can download the example along with the various font types which you can run locally and view in the various browsers, and use the sample code to adapt for your own uses.
If you have the .OTF file you can use the  Font Squirrel Generator, http://www.fontsquirrel.com/fontface/generator  , which will create the .SVG, .WOFF and .EOT formats for you to use.

Download Bestanden Bekijk Demo

CSS Menu

Deze tutorial zal ik laten zien hoe je een css menu maakt..
We maken (un-typical) list menu met behulp van de position waarde.

Hier is een overzicht van het menu (je kunt het downloaden als rar bestand).

overzicht

Achtergrond:

Open de Photoshop-bestand. Schakel alle layers uit behalve de achtergrond en logo en sla de achtergrond op als menu-bg.jpg.

background

Buttons:

Zet de achtergrond en logo layer uit en laat alleen de menu teksten zichtbaar.
Maak een rechthoekige selectie van de “home” knop, ga naar menu Edit > Copy Merged.

copy-merged

Maak een nieuw bestand en kijk naar de bestands dimensie (bxh), in mijn geval is “home” 82 x 40px.
Verdubbel de hoogte van het nieuwe bestand dus 82 x 80px.
Plak nu de afbeelding en plaats deze aan de onderkant. Dupliceer nu de laag en plaats dit aan de bovenkant.
Wis nu de omlijsting van de bovenste laag.

duplicate-layer

Herhaal deze stap voor de andere knoppen.

HTML code

We beginnen met het maken van een un-ordered list

Download Bestanden Bekijk Demo

Centereer een logo precies in het centrum

Voor het maken van een site gebruik ik regelmatig een tijdelijke pagina todat de uiteindelijke site klaar is. In deze tijdelijke pagina wil ik dan een logo plaatsen dat precies gecentreerd wordt in het midden van het scherm, dat is, zowel verticaal en horizontaal gecentreerd.

Eerste poging was om het logo element een class “gecentreerd”  te geven en vervolgens class te definiëren als:


.centered {

position: fixed;

top: 50%;

left: 50%;

}

not-centered

Maar werkt niet helemaal. De linkerbovenhoek van de afbeelding komt nu precies in het midden van de pagina, niet in het midden van de afbeelding in het midden van de pagina.

Om het logo precies gecentreerd te krijgen  is het een kwestie van toevoegen van een negatieve marge voor  boven van de helft van de hoogte van het logo, en een negatieve linkermarge van de helft van de breedte van het logo  . Voor dit voorbeeld:

 .centered {
 position: fixed;
 top: 50%;
 left: 50%;
 margin-top: -50px;
 margin-left: -100px;
}

centered