Archívum

A(z) ‘CSS’ kategória archívuma

Valósidejű, 3D-s weboldal szerkesztés

2011. nov. 2. 20:08 Nincsenek hozzászólások

Ma jelent meg ez a cikk, kipróbáltan a Firefox kiegészítőt, elég érdekes:

Categories: CSS, HTML Tags: ,

Chrome input keret eltüntetése

2010. nov. 14. 21:39 Nincsenek hozzászólások

Ki ne ismerné, hogy a Chrome előzékenyen kiemeli az aktív input mezőket. Gondolhatnánk elsőre, hogy ezzel nem tudunk mit kezdeni, mivel a böngésző által nyújtott szolgáltatás, azonban mégis. Tehát akit zavar:

1
2
3

input {
   outline: none;
}
Categories: CSS Tags: ,

Cross browser opacity

2010. okt. 3. 21:58 Nincsenek hozzászólások

Ha böngészőfüggetlenül szeretnénk átlátszóságot használni, akkor használjuk az alábbi kódot:

1
2
3
4
5

.opaque {
   opacity: .5;	
   -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
   filter: alpha(opacity=50);
}

Az utolsó sor teszi IE 5-7, a középső IE 8 kompatibilissé a kódot, míg az első sor minden böngészőre érvényes.

Categories: CSS Tags: , ,

Font Squirrel és Google Font API

2010. okt. 3. 17:59 4 hozzászólás

Múltkori bejegyzésemben írtam pár általam próbált és használt font replace módszerről. Azóta két forradalmian új megoldást is találtam, mely még egyszerűbbé teszi fontok beágyazását oldalunkba.

Az egyik ilyen a Font Squirrel, mellyel csupán az oldalán található @font-face Kit Generatort kell használnunk. Úgy (vagy még egyszerűbben) csak  feltöltjük a fontot, mint cufonnál, majd elkészül egy zip, melyben megtalálunk egy eot, svg, ttf, woff kiterjesztásű fájlt, valamint egy css-t. A css-t én célszerűnek tartom átnevezni a többi fájloknak meglelő formátumura, így a következő fájlokat kell a projekt könyvtárunkba másolni:

daxlinepro-light-webfont.css
daxlinepro-light-webfont.eot
daxlinepro-light-webfont.svg
daxlinepro-light-webfont.ttf
daxlinepro-light-webfont.woff

Az oldalunk fejlécébe belinkeljük a CSS-t:

1

<link rel="stylesheet" href="css/daxlinepro-light-webfont.css" type="text/css" charset="utf-8" />

Ezek után már csak a következő pár sort kell elhelyeznünk a css fájlunkban:

1
2
3
4
5
6
7

.DaxlineProLight {
	font-weight: normal;
	font-style: normal;
	line-height:normal;
	font-family: 'DaxlineProLight', sans-serif;
	font-size-adjust: 0.54;
}

Majd ezt az osztály használva azonnal az általunk kiválasztott betűtípussal jelenik meg a vonatkozó szöveg. Ezzel a megoldással szinte bármilyen fontot gyorsan és kényelmesen megjeleníthetünk weben.

Másik lehetőség a nem olyan régen létrejött Google Font API, mely szintaktikára a következőképp nézni ki:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<html>
   <head>
   <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
      <style>
      body {
         font-family: 'Tangerine', serif;
         font-size: 48px;
      }
      </style>
   </head>
   <body>
      <h1>Making the Web Beautiful!</h1>
   </body>
</html>

Ez ha lehet még az előzőeknél is egyszerűbb, egyetlen hátránya, hogy csak a Google Font Diretory-ból választhatunk. De ok nincs aggodalomra, mert folyamatosan bővül az oldal újabb és újabb betűtípusokkal.

Categories: CSS, HTML Tags: , ,

IE6 min-height hack

2009. aug. 31. 18:48 Nincsenek hozzászólások

A kedves sok-sok éves 6-os Internet Explorer nem szereti a min-height CSS tulajdonságot, ezen segíthetünnk az alábbi kóddal:

1
2
3
4
5

div#container {
   min-height: 630px;
   height: auto !important;
   height: 630px;
}
Categories: CSS Tags: , ,