#morzsa ul li a ( kijelző : blokk ; lebegés : balra ; magasság : 50 képpont ; háttér : #3498db ; szövegigazítás : középre ; kitöltés : 30px 40px 0 40px ; pozíció : relatív ; margó : 0 10px 0 0 : 20px ; szövegdekoráció : nincs ; szín : #fff ; )

A kezdeti CSS-kód minden listaelemet egy tiszta kék téglalap stílushoz állít be. A szöveg középre van állítva, és minden oldala egyenlő kitöméssel van ellátva. Az abszolút következő elemek pozicionálásához egy pozíció: relatív tulajdonságot adtunk ezekhez az elemekhez, így az abszolút pozicionált elemek az adott szülőelemhez viszonyítva jelennek meg.

#morzsa ul li a:a:after ( tartalom : "" ; szegély felső : 40 képpont folytonos piros ; szegély-alsó : 40 képpont folyamatos piros ; szegély bal : 40 képpont tömör kék ; pozíció : abszolút ; jobb : -40 képpont ; felső : 0 ; )

Most létrehozunk egy chevron effektust a CSS-ben, ami korábban csak háttérkép használatával volt elérhető. A létrehozáshoz használja az :after választót kiegészítő elem, amely egyedileg formázható. A háromszög alakzat különböző CSS-szegélyekkel jön létre, így amint az előző képen is látható, a kék háromszöget úgy lehet létrehozni, hogy felső és alsó szegélyeket alkalmazunk a fedőterület metszetére. Ezeket a szegélyeket pirosra színezzük az áttekinthetőség kedvéért, de ha átlátszóak, kék háromszöget kapunk. Ez a szegélyeffektus azután a helyére kerül abszolút pozicionálással.

Szegély felső : 40 képpont tömör átlátszó ; keret-alsó : 40px tömör átlátszó ; border-left : 40px solid #3498db ;

A megfelelő színértékekkel rendelkező szegélyhatás létrehozza a kívánt háromszöget, amely a zsemlemorzsa népszerű chevron alakját adja.

#morzsa ul li a:before ( tartalom : "" ; szegély felső : 40 képpont tömör átlátszó ; szegély-alsó : 40 képpont tömör átlátszó ; keret-bal : 40 képpont tömör #d4f2ff ; pozíció : abszolút ; bal : 0 ; felül : 0 ; )

Ugyanezen elvek alapján egy másik háromszög alakzat is alkalmazható a zsemlemorzsa bal oldalára. Ezúttal a szegély színe megegyezik a háttér színével, hogy elrejtse a hivatkozás kék háttérszínének egy részét.

Kitöltés : 30px 40px 0 80px ;

Ahogy a linkek hozzáadódnak a HTML-hez, a kenyérmorzsák sorrendje növekszik, amelyeket érdekes alakú csíkok választanak el a háromszög alakú CSS-szegélyeffektusnak és egy enyhe jobb margónak köszönhetően.

#morzsa ul li:first-child a (szegély-bal felső-sugár: 10px ; szegély-balra-sugár: 10px ; ) #morzsa ul li:első gyermek a:előtte ( megjelenítés : nincs ; ) #morzsa ul li:last-child a ( jobb oldali kitöltés : 80 képpont ; szegély jobb felső sugár: 10 képpont ; szegély jobb alsó sugár: 10 képpont ; ) #morzsa ul li: utolsó gyermek a:után ( megjelenítés : nincs ;)

A teljes kenyérmorzsa-dobozt tovább formázhatjuk, ha az :first-child és :last-child választókkal eltávolítjuk a háromszög hatást az első és az utolsó elemről, majd a border-radius tulajdonsággal egy kis lekerekítést adhatunk a sarkoknak.

#crumbs ul li a:hover ( háttér : #fa5ba5 ; ) #crumbs ul li a:hover :after ( szegély-bal szín : #fa5ba5 ; )

Nincs más hátra, mint a hover effektus alkalmazása a hivatkozásokra. Ne felejtse el megváltoztatni a border-bal-color tulajdonság értékét a háromszög hatáshoz a lebegés állapotában, hogy az egész navigációs útvonal színe megváltozzon.

Fordítás - Íróasztal

Ha, ahogy gondolja, sok anyaggal rendelkezik, akkor ajánlott itt engedélyezni ezt a funkciót. A listastílus nem az, hogy elkerülje a lista fekete pontját vagy más alapértelmezett stílust. Mivel kategóriákba és feltétel nélkül modulokba rendezi, kezdve a kezdőlapés mindez stílusosan van bemutatva. Ebben az anyagban olyan válogatást figyelünk meg, amely ugyanabban a stílusban készült, lapos stílusban.

Itt formában teljesen mások, hogy valakinek nem is kell szerkesztenie, hogy illeszkedjen a dizájnjához, hiszen az tökéletesen beleillik. Most css kódot használunk az első lista horgonyjának létrehozásához, és az utolsó gyermek horgonyát állítjuk be alapértelmezettként, hogy a trilinge ne jelenjen meg az első gyermek horgonyjában a bal oldali és az utolsó horgonynál. gyermek a jobb oldalra.

Zsemlemorzsa készítése

1. Világos sárga árnyalatban:

2. Világos paletta zöld tónusokkal:

3. Málna színben

4. Kék palettában készült:

Ez egy egyszerű, egyenes lista lesz, háttérrel, párnázással és más stílussal. Ezt követően minden listahorgony jobb oldalán háromszög alakú struktúrát hozok létre CSS segítségével, a tágabb tulajdonságokkal játszva.

Ahogy a demóban is látható, ha bármely lista horgonyzót a panírozó ládákra helyezünk, az olyan hatást ad, amely azt jelenti, hogy meglátogatták vagy ebben a részben találhatók.

Vagy elképzelhetjük a hatását, hogy aktív zsemlemorzsaként aktivizáljuk. Mondhatjuk, hogy ezek a css zsemlemorzsa csak zsemlemorzsa, mert én csak a css-t és a css3-at fogom használni a zsemlemorzsa elkészítéséhez.

Kezdjük a telepítést:

A listastílus nem az, hogy elkerülje a lista fekete pontját vagy más alapértelmezett stílust. Minden soron belüli div lista list-inline lesz, hogy vízszintes legyen a css megjelenítéssel: list-inline.

#breadcrumb-isanchogives1 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}

#breadcrumb-isanchogives1 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives1 ul li (
kijelző: inline;
}

#breadcrumb-isanchogives1 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #ffd928;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;

betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;

}
#breadcrumb-isanchogives1 ul li a:after (
tartalom: "";

border-left: 40px tömör #ffd928;
z-index: 1;

#breadcrumb-isanchogives1 ul li a:before (
tartalom: "";
szegély felső: 40 képpont tömör átlátszó;
keret-alsó: 40px tömör átlátszó;

}

#breadcrumb-isanchogives1 ul li:first-child a (
}
#breadcrumb-isanchogives1 ul li:first-child a:before (
kijelző: nincs;
}

#breadcrumb-isanchogives1 ul li:last-child a (
padding-right: 80px;
}
#breadcrumb-isanchogives1 ul li:last-child a:after (
kijelző: nincs;
}

#breadcrumb-isanchogives1 ul li a:hover (
háttér: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum(
háttér: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a:hover:after (
border-left-color: #ff9a2d;
}
#breadcrumb-isanchogives1 ul li a.wesove-readcrum:after (
border-left-color: #ff9a2d;
}

#breadcrumb-isanchogives2 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}

#breadcrumb-isanchogives2 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives2 ul li (
kijelző: inline;
}

#breadcrumb-isanchogives2 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #56e9ae;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;

betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;

}
#breadcrumb-isanchogives2 ul li a:after (
tartalom: "";
szegély felső: 40 képpont tömör átlátszó;
keret-alsó: 40px tömör átlátszó;
border-left: 40px tömör #56e9ae;
pozíció: abszolút; jobbra: -40px; felső: 0;
z-index: 1;

#breadcrumb-isanchogives2 ul li a:before (
tartalom: "";
szegély felső: 40 képpont tömör átlátszó;
keret-alsó: 40px tömör átlátszó;
border-left: 40px tömör #f2f2f2;
pozíció: abszolút; balra: 0; felső: 0;
}

#breadcrumb-isanchogives2 ul li:first-child a (
}

#breadcrumb-isanchogives2 ul li:last-child a (
padding-right: 80px;
}

#breadcrumb-isanchogives2 ul li a:hover (
háttér: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum (
háttér: #49c593;
}
#breadcrumb-isanchogives2 ul li a:hover:after (
keret-bal-szín: #49c593;
}
#breadcrumb-isanchogives2 ul li a.wesove-readcrum:after (
keret-bal-szín: #49c593;
}

#breadcrumb-isanchogives3 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}

#breadcrumb-isanchogives3 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives3 ul li (
kijelző: inline;
}

#breadcrumb-isanchogives3 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #ff818b;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;

betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;

}
#breadcrumb-isanchogives3 ul li a:after (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
háttér: #ff818b;
pozíció: abszolút; jobbra: -40px; felső: 0;
z-index: 1;

#breadcrumb-isanchogives3 ul li a:before (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
border-radius:0px 40px 40px 0px;
háttér:#f2f2f2;
pozíció: abszolút; balra: 0; felső: 0;
}

#breadcrumb-isanchogives3 ul li:first-child a (
border-top-bal-sugár: 10px; keret-alul-bal-sugár: 10px;
}
#breadcrumb-isanchogives3 ul li:first-child a:before (
kijelző: nincs;
}

#breadcrumb-isanchogives3 ul li:last-child a (
padding-right: 80px;
szegély-jobb felső sugár: 10 képpont; szegély-jobb alsó-sugár: 10 képpont;
}
#breadcrumb-isanchogives3 ul li:last-child a:after (
kijelző: nincs;
}

#breadcrumb-isanchogives3 ul li a:hover (
háttér: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum (
háttér: #ea606b;
}
#breadcrumb-isanchogives3 ul li a:hover:after (
háttér: #ea606b;
}
#breadcrumb-isanchogives3 ul li a.wesove-readcrum:after (
háttér: #ea606b;
}

#breadcrumb-isanchogives4 (
szöveg igazítása: középre;
margó felső: 30 képpont;
}

#breadcrumb-isanchogives4 ul (
lista-stílus: nincs;
kijelző: inline-table;
}
#breadcrumb-isanchogives4 ul li (
kijelző: inline;
}

#breadcrumb-isanchogives4 ul li a (
display:block;
balra lebeg;
magasság: 50 képpont;
háttér: #2b97cc;
szöveg igazítása: középre;
padding: 30px 40px 0 80px;
pozíció: relatív;
margó: 0 10 képpont 0 0;

betűméret: 20 képpont
szöveg-dekoráció: nincs;
szín: #fff;

}
#breadcrumb-isanchogives4 ul li a:after (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
border-radius:0px 40px 40px 0px;
háttér:#2b97cc;
pozíció: abszolút; jobbra: -40px; felső: 0;
z-index: 1;

#breadcrumb-isanchogives4 ul li a:before (
tartalom: "";
magasság: 80px;
szélesség: 40 képpont;
háttér:#f2f2f2;
border-radius:0px 40px 40px 0px;
pozíció: abszolút; balra: 0; felső: 0;
}

#breadcrumb-isanchogives4 ul li:first-child a (
border-top-bal-radius: 0px; border-bottom-bal-radius: 0px;
}

#breadcrumb-isanchogives4 ul li:last-child a (
padding-right: 80px;
határ-jobb felső-sugár: 0px; szegély-jobb alsó-sugár: 0px;
}

#breadcrumb-isanchogives4 ul li a:hover (
háttér: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum (
háttér: #207ca8;
}
#breadcrumb-isanchogives4 ul li a:hover:after (
háttér: #207ca8;
}
#breadcrumb-isanchogives4 ul li a.wesove-readcrum:after (
háttér: #207ca8;
}

Ezeknek az azonosítóknak ugyanaz a belső szerkezete, azonosítójuk szerint különböző stílusok választják el őket.

Az előző cikk, „Navigálás a háromszögekkel a CSS-ben” című cikkben leírta, hogyan lehet menüt létrehozni tiszta CSS grafika használata nélkül.

A módszer mindenki számára jó, egy dolgot kivéve - egy ilyen menü támogatása a régebbi böngészőkben kétséges. Ennek a cikknek a fordítása során azonban megemlítettek egy linket, amely a navigáció grafikával történő létrehozásának módjára mutat.

A cikk már régen íródott, de a módszer teljesen bevált. A cikk szerzője Veerle Pieters, magát a bejegyzést pedig „Egyszerű skálázható CSS ​​alapú kenyérmorzsa”-nak hívják. Az alábbiakban nem is szabad fordítását adok, hanem egy szabad újramesélést.

Néhány nappal ezelőtt az volt a feladatom, hogy készítsek egy panírmorzsa stílusú navigációs menüt egy webhelyhez, amelyen dolgoztam. Nem hiszem, hogy minden oldalra szükség lenne egy ilyen menüre, de bizonyos esetekben nagyon hasznos és praktikus.

Ez a példa azonban mintegy bővíthető és a gyakorlatban is alkalmazható alap. A menü rendszeres felsorolásjelekkel jön létre

De először nézzük meg a mintát, amellyel dolgozni fogunk:

A menü meglehetősen egyszerű, csakúgy, mint a kód, amellyel elkészítjük.

HTML kód - felsorolásjeles lista ul

• itthon
• Fő rész
• alszakasz
• Al-alszakasz
• Az oldal, amelyen éppen tartózkodik

Minden menüpont tartalmaz hivatkozásokat, kivéve az utolsót – „Az oldal, amelyen éppen tartózkodik” (Az az oldal, amelyen éppen tartózkodik). Az étlapon dolgozva azon töprengtem – vajon a lista a legmegfelelőbb struktúra egy menü létrehozásához? Úgy gondolom, hogy a lista használata ebben az esetben nem szigorú szabály, de számomra úgy tűnik, hogy ez a legszemantikusabb és leghelyesebb lehetőség.

CSS kód – stílusok létrehozása a menühöz

Beállítjuk a menü általános stílusait – távolítsa el a jelölőket és állítsa vissza a behúzásokat Firefox böngészők.AZAZ:

… amit jobbra „tolunk” (100%) és pontosan függőlegesen (50%) helyezünk el. A hivatkozást is behúzzuk jobbra

Már szinte minden megtörtént. A hivatkozás szövegéhez be kell állítani a stílusokat. Távolítsa el a szabványos aláhúzást, és változtassa meg a színét:

Munkánk eredményét itt mutatjuk be:

A fordító megjegyzése:

A cikk szerzője amennyire csak lehetett, leegyszerűsítette a példát, illetve magát a kódot, ha jól értem. A helyzet az, hogy az egyes menüpontok lineáris vízszintes gradiense jól látható a példában. Ez azonban nem szerepelt a kódban. Nos, nem számít – valóban probléma a lineáris gradiens létrehozása a CSS3-ban? Maga a feladat kész!

Üdvözlet. A kenyérmorzsa nagyon hasznos blokk bármely webhelyen, mert lehetővé teszi az aktuális oldal teljes elérési útját. És ma elmondom, hogyan kell css-ben zsemlemorzsát stílusozni? Nem alkotni, mégpedig rendezni. Általában sok lehetőség van, kettőt érintek.

Egyszerű tervezési lehetőség - kép nélkül

A html kód a kenyérmorzsát utánozza. Legyen ez így:

Elvileg csak le lehet tenni egy szögletes konzolt, de akkor nem lesz mód a vonal vastagságának szabályozására. Azt javaslom, hogy másként, átalakítások segítségével csináljuk. Itt van a kód, ami ezt megteszi:

Cumbs1 a:not(:last-child):after(
tartalom: "";
kijelző: inline-block
szélesség: 5 képpont
magasság: 5px;
keret-felső: 2px tömör fekete;
szegély-jobb: 2px tömör fekete;
transzformáció: forgatás (45 fok);
margó balra: 5 képpont
}
.cumbs1 a:hover(
szín: narancssárga;
}

Lehet, hogy az Ön számára bonyolult válogatók lesznek, akkor nézze meg ezt a cikket. A lényeg a következő: a pszeudoelem használata (arról, hogy mi ez és hogyan kell használni - ) azután hozzáadja az elválasztónkat az egyes hivatkozások végéhez. Két keretből van kialakítva és 45 fokkal elforgatva. Narancssárga színt is adunk a lebegő hivatkozásokhoz. Itt elvileg, és az összes tervezés.

Egy másik tervezési lehetőség - képpel

Ebben az esetben a zsemlemorzsa érdekesebbnek tűnik, például:

Ehhez szükségünk van egy képre és néhány css stílusra:

Cumbs2(
háttér: narancs;
maximális szélesség: 250 képpont
}
.cumbs2 a(
kijelző: inline-block
kitöltés: 7 képpont 0
szín: # 000;
}
.cumbs2 a:not(:last-child)(
háttér: url(arrow.png) no-repeat 100% 50%;
padding-right: 33px;
}

html kódot Nem idézek, mert ugyanaz, mint az első esetben. Hol kezdjem itt? Először a teljes blokk háttérszínét és méretét határozzuk meg kenyérmorzsával. Ezután beállítjuk a hivatkozások általános stílusait – blokk-inline típus, behúzás felül és alul, valamint szín.

A következő lépés a legérdekesebb - a nem pszeudoosztály használatával jelölje ki az összes hivatkozást a blokkban, kivéve az utolsót, és állítson be nekik háttérképet arrow.png , ismétlés nélkül, a háttér pozíciójával a közepén magasságban és a legvégén egy link szélességében. Az első két hivatkozásnak szüksége van a jobb oldali belső behúzásra, csak a kép elhelyezéséhez. Ha nem lenne ott, a kép belefutna a szövegbe.

Azt hiszem, már kitalálta, hogy a nem álosztály hogyan működik - minden elemet kiválaszt, kivéve a zárójelben feltüntetetteket. Ha valami, a jövőben írok még egy rövid megjegyzést a pszeudoosztály:notokkal való munkáról, ahol minden egyértelműbb lesz. Nos, itt van 2 egyszerű zsemlemorzsa minta, amelyek segítségével elkészítheti saját magát.