Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

CSS kincsesláda

2013. május 07. | Szijártó József

# # # # # # # #

Amit eddig nem tudtál, vagy nem mertél megkérdezni, az most itt lesz. Egy nagy csokor CSS okosság.

Alapvető dolgok

CSS box modell

Az a fránya box modell… Általában ezt a legnehezebb elsajátítani, amikor valaki első ízben találkozik a CSS-el, pedig egyáltalán nem olyan nagy ördöngösség az egész. Alapvetően minden layout dobozokból áll, amiket egymás mellé-alá-fölé igazítunk.

Készítettünk egy kinyomtatható segédletet hozzá, amit itt tudsz letölteni PDF formátumban: CSS és a box modell

CSS rövítítések

Mikor már kellően összemelegedtél a CSS tulajdonságokkal, biztosan feltűnik sok helyen, hogy egyes tulajdonságokat összevonva is jól működő eredményt kapunk. Egyszerűen csak tudni kell a helyes sorrendet, és máris több kilobájtot spórolhatsz a CSS fájlon.

[css]margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
[/css]

…helyett:

[css]margin: 10px 20px 30px 40px;[/css]

Ehhez is készült egy letölthető és kinyomtatható segédlet: CSS rövidítések

Középre igazítás

Az összes CSS kérdés közül talán mindenkinél ez az első: hogyan lehet középre igazítani valamit? (És itt most nem szövegre, hanem egy css boxra gondolunk.)
Elég egyszerű:

[css]div {
width: 960px; /*hogy tényleg box legyen, meg kell adni legalább a szélességét*/
margin: 0 auto; /*a margó felülről és alulról 0, jobbról és balról automatikus*/
}[/css]

Ez esetben nem lehet az elemet úsztatni (float-olni).

A másik módszer az abszolút középre igazítás. Ezt akkor tudjuk alkalmazni, ha ismerjük az elem pontos méretét:

[css]div {
position: relative;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -100px;
}[/css]

Működéséről annyit, hogy az elemet relatív pozícióba helyezzük, majd fentről (top) és balról (left) 50%-ra pozicionáljuk (a <body>-hoz képest). Ezzel az elem felső és bal szélső oldala pontosan középre kerül. De mi azt szeretnénk, hogy az elem középponja kerüljön középre, ezért negatív értékű felső és bal margóval (margin-top, margin-left) az elem méretének felével (200px/2=100px) arrébb húzzuk. A top és a margin-top opcionális, ha felülről nem akarod középre igazítani, akkor ez a rész elhagyható.

Hosszú szövegek levágása

Tudtad, hogy CSS segítségével is levághatod a szövegek végét? Erre találták ki a text-overflow tulajdonságot.

Adott egy hosszabb szöveg:

Applicake pie bonbon brownie. Brownie croissant topping. Muffin toffee dessert toffee brownie icing.

Amit le lehet rövidíteni:

Applicake pie bonbon brownie. Brownie croissant topping. Muffin toffee dessert toffee brownie icing.

[css]
width: 500px; /*ilyen széles lesz a szöveg*/
white-space: nowrap; /*ne legyen benne sortörés*/
overflow: hidden; /*ami kilóg, az ne legyen látható*/
text-overflow: ellipsis; /*ellipsis, azaz három pont a levágásnál*/
[/css]

Ez egy igényes megoldás akkor, amikor generált tartalmakat kell megjeleníteni. Előnye, hogy bár a látogató számára nem látható a szöveg, a keresőrobot számára továbbra is látható marad a teljes tartalom.
Az ellipsis-en kívül lehet még az értéke clip (levágás), illetve string is, de utóbbit az eddigi tapasztalatok alapján csak nagyon kevés böngésző támogatja.

CSS “nullázása” (CSS reset)

Csak jó alapokra lehet építkezni, de ha az egyik böngészőben a <h1> alsó margója 10px a másikban meg 20px, akkor egy idő után képes az őrületbe kergetni. Íme a legnépszerűbb CSS reset kódrészlet, melyet Eric A. Meyer készített:

[css]
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/

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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
[/css]

A CSS kódolást kezd mindig úgy, hogy ezt bemásolod a CSS fájl elejére. Így, hogy minden közös nevezőre lett hozva, már elkezdheted definiálni a saját szabályaidat.

CSS keretrendszerek

Miért jók a keretrendszerek? Mert egy kész alapot adnak a munkára, amire aztán építkezhetünk. Ezekből jön most három:

HTML5 Boilerplate
html5-boilerplateMinden benne van, amire szükségünk lehet építkezés közben, ráadásul testre is lehet szabni letöltés előtt.
html5boilerplate.com

960 Grid System
960gs_smallBár a reszponzív hullámmal kezd kimenni a divatból, mégis érdemes észben tartani és megismerni a 960.gs-t.
960.gs

Foundation
foundationEgy kimondottan reszponzív oldalakhoz készített, grid alapú CSS framework, aminek használtat pillanatok alatt el lehet sajátítani.
foundation.zurb.com

Update: Itt egy összehasonlító táblázat a jelenleg legnépszerűbb CSS keretrendszerekről – usablica.github.io/front-end-frameworks/compare.html

Optimalizálás

cssuai.js

A CSSUserAgent egy JS eszköz, amit ha bekötsz a HTML oldaladba, akkor a <html> címkét ellátja az aktuális böngészőnek megfelelő osztályokkal (class). Így tudsz böngészőkként eltérő CSS tulajdonságokat hozzáadni az egyes elemekhez.

skitch

A bekötés igen egyszerű:

[html]&lt;script src=&quot;cssua.min.js&quot;&gt;&lt;/script&gt;[/html]

Ez után meg is nézheted a forráskódban, hogy a <html> címke milyen osztályokat kapott. Egy pléda: tételezzük fel, hogy Internet Explorer 8-ban egy elem 10px-el szélesebb, mint a többi böngészőben.

[css]div {
width: 200px; /*ezt értelmezi minden böngésző…*/
}
.ua-ie-8 div {
width: 190px; /*…de IE8 esetén ezt felülírjuk*/
}[/css]

Ennyire egyszerű, és még szabványos megoldás is. (Halkan megjegyzem, hogy mi is ezt használjuk.) Ha az összes IE verzióban fennáll a probléma, akkor csak .ua-ie, ha Chrome böngészőben, akkor .ua-chrome, ha Chrome és Safari egyaránt, akkor lehet a böngészőmotorra hivatkozni a .ua-webkit osztállyal.
A js fájlt itt tudod letölteni: cssuseragent.org

-prefix-free

prefix-freeEzt már egy múltkori bejegyzésben is említettem. A CSS3 szabvány nem végleges még, ezért a legtöbb böngésző még csak előtagokkal támogatja az egyes CSS3 tulajdonságokat. Az előzőhöz hasonlóan itt sincs más teendőd, mint bekötni a HTML fájlba a JS-t, és onnantól kezdve elfelejthetjük a -moz, -webkit, -o, -ms előtagok használatát. Ráadásul csak 2kB a mérete.
Beszerzés itt: leaverou.github.io/prefixfree

Vegyes

Ahogy általában mikor egy dobozt pakolunk ki, az alján találjuk meg az apróságokat, hát most jöjjön itt is ez a rész:

CSS matic
cssmatic-logoOnline CSS3 generátor. Gradient, border-radius, noise texture, box shadow.
cssmatic.com

CSS3, please!
Kb. az összes CSS3 tulajdonság összefoglaló oldala.
css3please.com

CSS3 Generator
Egy másik nagy tudású online generátor.
css3generator.com

Font Squirrel webfont generator
Feltöltöd a betűtípust, és generál belőle @font-face kitet, amit aztán beköthetsz a saját css fájlodba. Az oldalon még találhatsz készen letölthető készleteket is.
fontsquirrel.com/tools/webfont-generator

<html>ipsum
htmlipsumTeszteléshez jól jöhet. Biztosan nem kell bemutatnom a lipsum.com-ot <html>ipsum annyiban más, hogy egyből html kódot fog generálni belőle.
html-ipsum.com

JQuery plugins
Bár ez már JS-ről szól, akkor is érdemes körülnézni. Egy igényes magyar nyelvű oldal, rengeteg JQuery bővítménnyel, és azok leírásával, használatuknak bemutatásával.
jquery-plugins.hu

CodePen
codepenA kódolós közösségi oldal. Rengeteg érdekes megoldást találhatsz itt, érdemes körülnézni. (Engem is megtalálsz itt.)
codepen.io

Remélem sok kérdésedre választ kaptál a bejegyzésből. Like?

Iratkozz fel YouTube csatornákra!

blog

Tanulás Designer Karrier Kérdezz-Felelek

Designer Karrier Kérdezz-Felelek

2022. január 25.

A múlt hét végén megtartott Kreatív Karriernavigátor nap után nagyon sok kérdés jött hozzánk, ezekre tegnap egy rögtönzött FB Live-ban válaszoltam, illetve fel tudtatok tenni egyéb kapcsolódó kérdéseket is. Kiből lehet designer? Én azt gondolom, hogy nem kell hozzá extra képesség. Nyilván aki tudja magáról, hogy általában nincs szépérzéke, nehezebben fog boldogulni, de már sok […]

Tovább a cikkre
Secured By miniOrange