10+ hasznos CSS trükk

Szerző: Gergő | CSS | 2009 szeptember 10. 00:10

Íme néhány nagyon hasznos CSS trükk, amiről talán még nem hallottál, de feldobhatják az oldalad.

1. Változtasd meg a szöveg kijelölés színét

Ezt viszonylag kevesen ismerik, mivel csak Safari és Firefox alatt működik.

::selection{ /* Safari és Opera */
	background:#c3effd;
	color:#000;
}
::-moz-selection{ /* Firefox */
	background:#c3effd;
	color:#000;
}

2.Oldal törések nyomtatáshoz

Sokan nem csak gép előtt olvassák oldalad tartalmát, hanem ki is nyomtatják azt. Én is néha így teszek egy-egy velősebb  cikknél, mert 10-15 oldalnyi szöveg után már fájni szokott a szemem.

.page-break{ page-break-before:always; }

3. Szöveg helyettesítése képpel

Ez egy kereső optimalizálási trükk, ahol a felhasználó egy szépen designolt szöveget lát, viszont a kereső motor is el tudja olvasni mi állrajta. Hogy lehetséges ez? Nagyon egyszerű, mindössze annyit kell tennünk, hogy a szöveget tartalmazó elemnek háttérként megadjuk a képünket, magát a szöveget pedig jó messze kitoljuk a látótávból.

.header{
	text-indent:-9999px;
	background:url('someimage.jpg') no-repeat;
	height: 100px; /*méretek megegyeznek a kép méretével*/
	width:500px;
}

4.Új ablakban megnyíló link kiemelése

Ennek a kódnak a segítségével jelezheted a felhasználók számára, mely linkek nyílnak meg új ablakban. Mindezt  anélkül, hogy minden egyes ilyen linket egy külön osztállyal látnál el.

a[target="_blank"]:before,
a[target="new"]:before {
	margin:0 5px 0 0;
	padding:1px;
	outline:1px solid #333;
	color:#333;
	background:#ff9;
	font:12px "Zapf Dingbats";
	content: "\279C";
}

5.Rendezett lista formázása

Rendezett listánál nem tehetsz be képeket, valamilyen más módon kell elválasztani a számozást a tartalomtól. Íme a megoldás:

ol {
	font: italic 1em Georgia, Times, serif;
	color: #999999;
}
ol p {
	font: normal .8em Arial, Helvetica, sans-serif;
	color: #000000;
}

6.Iniciálé készítése

Iniciálé az, mikor az első betű több sort is elfoglal. Erre nagyon jól alkalmazható a következő módszer:

p:first-letter{
	display:block;
	margin:5px 0 0 5px;
	float:left;
	color:#FF3366;
	font-size:3.0em;
	font-family:Georgia;
}

7. Függőleges igazítás

Van, hogy egy fix magasságú elemben kell egy sornyi szöveget függőlegesen középre igazítani. Táblázatban ez még nem lenne gond, viszont máshol egy kis trükközésre van szükség. A  line-height tulajdonság segítségével kis próbálkozás után ez meg is oldható.

line-height:30px;

8. Aktív link körvonalának eltüntetése

Amikor a felhasználó egy linkre kattint, néhány böngésző pontozott körvonallal emeli ki. Ez hasznos dolog, viszont néha az oldal designjában már benne van egy ilyen kiemelés, és ez feleslegesen rontja az összképet. Íme hogyan kell eltávolítani:

a:active, a:focus{ outline:none; }

9. Ikon különböző kiterjesztésű fájlokhoz

Ha azt szeretnéd, hogy a különböző kiterjesztésű fájlokra mutató linkjeid előtt egy-egy speciális ikon jelenjen meg, akkor a CSS attribútum szűrőjét kell használnod.

a[href$='.doc'] {
	padding:0 20px 0 0;
	background:transparent url(/graphics/icons/doc.gif) no-repeat center right;
}

10.  Szöveg beviteli mező kiemelése

Így kell kiemelni az éppen fókuszban levő beviteli mezőt. Sajnos IE-ben nem működik.

input[type=text]:focus, input[type=password]:focus{
	border:2px solid #000;
}

11. Form táblázat nélkül

Gondolom sokatok használ táblázatot a formjaihoz, hogy jól tudja pozicionálni a feliratokat az egyes mezőkhöz. Sokáig én is így tettem, azonban a következő kód megszabadít minket egy csomó HTML elemtől, és elegánsabbá teszi a kódot

<form action="#" method="post"><input type="hidden" name="phpMyAdmin" value="da56dea1e0f8990b85cea0a498c5ae43" />
 
<label for="username">Username</label>
<input id="username" name="username" type="text" />
 
<label for="password">Username</label>
<input id="password" name="pass" type="password" />
<input type="submit" value="Submit" />
</form>

p label{
	width:100px;
	float:left;
	margin-right:10px;
	text-align:right;
}

12. CSS alapbeállítás

Minden egyes weboldalnál érdemes ezzel kezdeni a CSS kódot. Ennek segítségével az elemeket némiképp közös nevezőre hozhatjuk a különböző böngészőkben.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
 
/* a fókuszált elemek kiemelésének eltüntetése */
:focus {
outline: 0;
}
 
/* a tábláknak még mindig kell a 'cellspacing="0"' */
table {
border-collapse: collapse;
border-spacing: 0;
}

Kapcsolódó cikkek

Hozzászólások