CSS – egyedi betűtípus

Mérei Tamás webdesigner webodalán találtam a következő hasznos CSS megoldást egyedi betűtípusokhoz.

Először is töltsük fel a használni kívánt betűtípust és az elérhetőségét jegyezzük meg.

A sablonunk .css fájljába másoljuk be a következő sorokat:

@font-face {
font-family: az-en-betum;
src: url('betutipus-helye.otf');
}

A nevezzük el a feltöltött betűtípusunk: az-en-betum
és adjuk meg az elérését: betutipus-helye.otf

Majd (pl.: H1-nél) alkalmazzuk:

h1 {
font-family: az-en-betum;
}

Mérei Tamás videót is készített:

CSS – effektek kép hivatkozáson

CSS 3 segítségével különböző effekteket helyezhetünk hivatkozásra. Képeken látványos lehet és javasrciptet is megspóroljuk.

Legutóbb egy olyan megoldást készítettem, hogy a kép fekete-fehér, de ha rávisszük az egeret színes lesz.

A képen lévő hivatkozásba be kell írni:  class="eff"

<a class="eff" href="hivatkozas"><img src="kep.jpg"></a>

Majd az oldal .css fájljába be kell másolni a következő sorokat:

.eff img{
-webkit-filter: grayscale(1);
border-radius: 50%;
}
.eff:hover img{
-webkit-filter: none;
} 

Az .eff img adja meg az alap képet.

-webkit-filter: grayscale(1); 

Ez a sor leveszi a színeket a képről.

border-radius: 50%;

A négyzet képet lekerekíti.

Az .eff:hover img-nél megadott tulajdonságok akkor jelentkeznek ha rávisszük az egeret.

-webkit-filter: none;
Ez a rész visszaadja a színeket a képhez.

Bal oldali kép az eredeti állapot, a jobb oldali pedig mikor rávisszük az egeret:

A következő css kód pedig elhalványítja a képet:

.eff img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}
.eff:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
} 

A lenti oldalakon könnyen tudunk különféle CSS3 kódokat generálni:

http://html5-demos.appspot.com/static/css/filters/index.html

http://css3gen.com/border-radius/

http://css3generator.com/

http://www.css3.me/

http://www.css3maker.com/