Hogyan lehet háttérszínt adni a cím szövegéhez? Érdekes stílusok a pszeudoelemeket használó címsorokhoz A h1, h2 címsorok stílusának módjai
: eltávolította a felesleges h címkéket a sablonelemekből, minden cikk címét megjelenítette a h1 címkében, h2 címkéket rendeltek a kategóriákba tartozó bejegyzések közleményeihez.
Mostantól a h1-h6 címkék használatával olyan egyértelmű szerkezetet adhat bejegyzéseinek, amelyet a keresőmotorok annyira szeretnek. De itt van a probléma – a címsorok stílusa finoman szólva is sok kívánnivalót hagy maga után.
Egy egyszerű nagy fekete betűtípus túl unalmasnak tűnik. Az élénk színek egyértelműen címszavakat kérnek.
A cikk címe a h1-ben csak valami vonallal, kerettel, vagy akár egy szép, levágott élű háttérképpel szeretne kiemelni. Az is kívánatos, hogy a következő alsó szint fejléce valamivel kisebb legyen, mint az előző.
Szeretné, hogy weboldala kellemes legyen a szemnek? Ezután tanuljuk meg, hogyan rendelhetünk stílusokat a webhelyfejlécekhez.
A hagyomány szerint a Twenty Eleven sablonnal fogunk dolgozni. Az alábbiakban felsorolok néhány fejlécstílust, amelyeket ízlése szerint módosíthat. Addig is azonnal találjuk ki, hogy a sablonban hol vannak a címsorstílusok írva, és hova illesztjük be a kódunkat.
Hol jelennek meg a sablonban a címsorstílusok?
Nyissa meg a "Megjelenés" - "Szerkesztő" elemet. Keresse meg a style.css stíluslapot. Keressen egy /* =Globális nevű szövegblokkot.
A következő sorokat tartalmazza:
/* Címsorok */ h1,h2,h3,h4,h5,h6 ( egyértelmű: mindkettő; )
Ezekkel fogunk dolgozni.
A kód helyett a következőket kell írnunk:
/* Címsorok */ h1 (bla bla bla) h2 (bla bla bla) h3 (bla bla bla) h4 (bla bla bla)
A bla-bla-bla helyett a saját értékeivel helyettesítheti a betűtípusokat, behúzásokat és színátmeneteket.
Ha valamelyik érték, például a betűméret nem működik, akkor stílusütközés van. Ebben a konkrét sorban, a pontosvessző előtt, a varázsszót kell beírni!fontos Ez a szó felülírja a dokumentum más részeiből származó stílusok hatását, és kényszeríti ennek a parancsnak a végrehajtására.
Így fog kinézni:
Betűméret: 23px !fontos;
Általában így volt:
Kész fejlécstílusok webhelyekhez
Fejléc keretezett háttérképpel
Ez a stílus tömör kitöltést és képet használ a fejléc hátterének. A CSS kód helyesen van megszerkesztve: a behúzások százalékban vannak megadva, így a kép kicsinyítésekor a cím szövege nem olvad össze a háttérképpel. Betűtípusok - Titillium Web (sans-serif), Muli (sans-serif).
A fejléceket itt az oldalon készítettem ennek a stílusnak a alapján.
H1 ( margó: 1em 0 0,5em 0; betűsúly: 600; betűcsalád: "Titillium Web", sans-serif; pozíció: relatív; betűméret: 36px; sormagasság: 40px; kitöltés: 15px 15px 15px 15%; szín: #355681; box-shadow: beillesztés 0 0 0 1px rgba(53,86,129, 0,4), beillesztés 0 0 5px rgba(53,86,129, 0,5), betét -285px 0 35px: fehér; 0 10px 0 10px; háttér: #fff url(../images/bartoszkosowski.jpg) nem ismétlés középen balra; ) h2 ( margó: 1em 0 0,5em 0; betűsúly: normál; pozíció: relatív; szöveg-árnyék : 0 -1px rgba(0,0,0,0,6); betűméret: 28px; sormagasság: 40px; háttér: #355681; háttér: rgba(53,86,129, 0,8); szegély: 1px, tömör #fff; kitöltés: 5px 15px; szín: fehér; szegélysugár: 0 10px 0 10px; box-shadow: beillesztés 0 0 5px rgba(53,86,129, 0,5); betűcsalád: "Muli", sans-serif; ) h3 ( margó: 1em 0 0,5em 0; betűsúly: 600; betűcsalád: "Titillium Web", sans-serif; pozíció: relatív; szövegárnyék: 0 -1px 1px rgba(0,0,0,0,4); betűméret: 22 képpont, vonalmagasság: 40 képpont, szín: #355681; szöveg-átalakítás: nagybetűk; border-bottom: 1px tömör rgba(53,86,129, 0,3); ) h4 ( margó: 1em 0 0,5em 0; betűsúly: 600; betűcsalád: "Titillium Web", sans-serif; pozíció: relatív; betűméret: 18px; vonalmagasság: 20px; szín: #788699 ; font-család: "Muli", sans-serif; )
A példában használt képet teljes méretre hozom.
A javasolt kép helyett bármilyen más, például érdekes textúrát készíthet.
A kép címe a következő sorba van írva:
Háttér: #fff url(../images/bartoszkosowski.jpg) nincs ismétlés középen balra;
Kérjük, adja meg a webhelyén található kép teljes URL-jét. A médiafeltöltőn keresztül hozzáadhat képet az oldalhoz anélkül, hogy azt a cikkben közzétenné. Ott a letöltéskezelőben láthatod az új képed címét.
A szöveg színe a sorban bármely más színre módosítható
Szín: #355681;
Sötét megjelenésű webhely fejléce
Az arc kontrasztja élénk kék szín és sötétszürke háttér. Betűtípusok - Hammersmith One (sans-serif), Questrial (sans-serif).
H2:after, h3:after, h4:after ( pozíció: abszolút; tartalom: ""; bal: 0; felül: 0; alul: 0; szélesség: 5 képpont; szegélysugár: 2 képpont; doboz-árnyék: beillesztés 0 1px 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3); ) h2:after ( háttér: #0AF; ) h3:after ( háttér: #3BF; ) h4:after ( háttér: # 6Cf; ) h1 (betűméret: 36 képpont; sormagasság: 40 képpont; margó: 1em 0,6 em 0; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; szöveg- árnyék: 0 -1px 0 rgba(0,0,0,0.4); pozíció: relatív; szín: #6Cf; ) h2 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba(0,0,0,0.4); pozíció: relatív; betűméret: 30px; sormagasság: 40px; ) h3 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba(0,0,0,0,4); pozíció: relatív; betűméret: 24 képpont; sor magassága: 40 képpont; font-family: "Questrial", sans-serif; ) h4 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba (0,0,0,0,4); pozíció: relatív; betűméret: 18 képpont; sormagasság: 20 képpont; betűcsalád: "Questrial", sans-serif; )
Fejléc a fa textúra háttér
Betűtípusok - Scada (sans-serif), Carrois Gothic (sans-serif). A h2 fejléchez tartozó szórólap betűtípussal van megvalósítva, nem képen keresztül.
H1 i, h2 i, h3 i, h4 i ( jobb oldali kitöltés: 10 képpont; szín: #A8D13B; betűméret: 0,8 em; ) h2:after, h3:after, h4:after (pozíció: abszolút; tartalom: " "; magasság: 1 képpont; szegélysugár: 2 képpont; bal: 0; alsó: 0; doboz árnyéka: 0 -1 képpont 0 rgba(0,0,0,0,1), 0 1px 0 rgba(255,255,255,0,6); ) h2:after (szélesség: 100%; ) h3:after (szélesség: 75%; ) h4:after (szélesség: 50%; ) h1 (margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344 ; betűsúly: normál; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 36px; sormagasság: 40px; betűcsalád: "Carrois Gothic", sans-serif; ) h2 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344; betűsúly: normál; betűtípus-család: "Scada", serif nélkül; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 30 képpont; sormagasság: 40 képpont; ) h3 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344; betűsúly: normál; font- család: "Scada", sans-serif; pozíció: relatív; szöveg-árnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 24 képpont; vonalmagasság: 40 képpont; ) h4 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344; betűsúly: normál; betűtípus-család: "Scada", serif nélkül; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 18 képpont; sormagasság: 20 képpont; )
A címsorok félkövér betűtípussal
Egyszerű és nem feltűnő. Talán ez a színséma új ötletet ad.
H1 ( margó: 1em 0 0,5em 0; betűsúly: 100; szövegátalakítás: nagybetűk; szín: #00caa6; betűstílus: dőlt; betűcsalád: "Josefin Sans", sans-serif; betűméret: 58px; sormagasság: 54px; szövegárnyék: 2px 5px 0 rgba(0,0,0,0,2); ) h2 (margó: 1em 0 0,5em 0; szín: #148773; betűméret: 26px; vonal- magasság: 40 képpont; betűsúly: vastag ; betűsúly: 100; szövegátalakítás: nagybetűk; betűcsalád: "Josefin Sans", sans-serif; betűköz: 1px; betűtípus: dőlt; ) h4 ( margó: 1em 0 0,5em 0; szín : #343434; betűméret: 18 képpont; sormagasság: 20 képpont; betűvastagság: félkövér; betűcsalád: "Josefin Sans", sans-serif; )
Egyszerű újságstílusú címsorok
A stílus tökéletes egy médiawebhelyhez. Nincs sallang. Betűtípusok – Ultra (sans-serif), Orienta (sans-serif).
A stílusok angol forrása: http://tympanus.net/codrops/2012/11/02/heading-set-styling-with-css/
Fejléc web 2.0 stílusban
A fejléc egyedül CSS-ben készül, képek nélkül. Egy áttetsző blokk fedi a fő szöveget. Szín, háttér, méret ízlés szerint változtatható.
Ha több, különböző fokú átlátszóságú elemet használ, a cím szövegét csíkokkal színezheti, vagy gyönyörű színátmenetet hozhat létre.
1. példa: Web 2.0 stílusfejléc
H3#example ( betűtípus: normál 27px tahoma; pozíció: relatív; háttér: #000; szín: #0cf; kitöltés: 10px 0px; ) h3#example span ( pozíció: abszolút; felül: 29px; bal: 0; szélesség: 100 %; magasság: 15 képpont; háttér: #000; /* a fedőblokk színének meg kell egyeznie a fő blokk háttérszínével */ túlcsordulás: rejtett; átlátszatlanság: 0,45; szűrő: alpha(opacity=45); )
Ennek a módszernek azonban van egy hátránya: a szövegnek az áttetsző blokk alatti része nem választható ki a kurzorral.
Fejléc mintával
Itt nem egy áttetsző blokk kerül egymásra, hanem egy teljes értékű kép PNG vagy GIF formátumban. A kép bármilyen minta lehet. Csak egy szín legyen a minta spektrumában - a háttérszín.
2. példa Fejléc tervezése mintákkal
H3#example2 ( betűtípus: normál 27px tahoma; pozíció: relatív; háttér: #000; szín: #0cf; kitöltés: 10px 0px; ) h3#example2 span ( pozíció: abszolút; felül: 15px; bal: 0; szélesség: 100 %; magasság: 30 képpont; háttér: url(lines.gif); /* képminta */ túlcsordulás: rejtett; átlátszatlanság: 0,60; szűrő: alfa(átlátszatlanság=60);/ )
Ebben a példában a szöveg árnyékolt, de bármilyen textúrát adhatunk neki: fémes fényű, szemcsés, színátmenetes, virágmintás.
Ezen stílusok bármelyike alapján létrehozhat saját egyedi címsorokat. Befejezésül adok egy kis táblázatot a szöveg főbb tulajdonságairól, amelyek hasznosak lehetnek az Ön számára.
| Tulajdonságok | leírás |
|---|---|
| betűméret | Szövegméret |
| betűtípus család | szöveg betűtípusa |
| szöveg igazítás | szöveg elrendezése |
| szöveg-behúzás | piros vonal |
| betűtávolságok | betűtávolságok |
| vonalmagasság | sorköz |
| szóköz | szavak közötti távolság |
| fehér űr | szóközöket jelenít meg a szavak között |
| font-variáns | szöveg megjelenítése nagy/kis betűkkel |
| font-weight | betűvastagság |
| szöveg-árnyék | árnyék szöveg körül |
A weben található szöveges információk kialakításának megvannak a maga sajátosságai. Ha valamilyen tartalmat tesz közzé az oldalon, akkor általában jól strukturáltnak kell lennie - ehhez a címsorokat használják. Segítségükkel a szövegek a lehető legkönnyebben olvashatóvá és érthetőbbé válnak.
Néhány pont a kezdés előtt:
- Az összes példa-betűtípus ingyenes, és elérhető a Google WebFonts-on.
- A példákban csak a H1-H4 fejlécek szerepelnek, mivel ezek a leggyakrabban használtak.
- A CSS-stílusok szerzője egy olyan modellt használt, amelyben [szélesség] = [tényleges elemszélesség] + [padding] + [szegélyek]. Ehhez van egy részlet a kódban:
| *, *: utána , *: előtte ( doboz-méret : keret-doboz ; ) |
*, *:utána, *:előtte ( box-sizing: border-box; )
Végül a bevezető említi a „függőleges ritmus” fogalmát. Valójában beállítja az összes kitöltést az oldalon lévő blokkok között – legyen szó címsorokról, szöveges bekezdésekről, képekről vagy akár csak webhelysablonelemekről. Ez különösen igaz, ha szokatlanokat használ. Tehát a CSS-stílusok minden példája ugyanazt a „ritmust” használja:
| h1 (betűméret: 36 képpont; vonalmagasság: 40 képpont;) h2 (betűméret: 30 képpont; vonalmagasság: 40 képpont;) h3 (betűméret: 24 képpont; vonalmagasság: 40 képpont;) h4 (betűméret : 18 képpont ; sor magassága : 20 képpont ; ) |
h1 ( betűméret: 36 képpont; vonalmagasság: 40 képpont; ) h2 ( betűméret: 30 képpont; sormagasság: 40 képpont; ) h3 ( betűméret: 24 képpont; vonalmagasság: 40 képpont; ) h4 ( betűméret : 18 képpont; sor magassága: 20 képpont; )
Most közvetlenül a gyakorlatba léphet.
1. példa
Kezdjük egy többé-kevésbé egyszerű lehetőséggel. A tipográfia nagyszerű egy médiawebhelyhez, esetleg egy újsághoz. Ez a megoldás nem kínál különleges funkciókat, kivéve, hogy 2 betűtípust használ - Ultra (sans-serif), Orienta (sans-serif). Végső CSS kód:
| .demo-1 .main h1 ( margó: 1em 0 0,5em 0; szín: #343434; betűsúly: normál; font-család: "Ultra", sans-serif; betűméret: 36px; sormagasság: 42px ; szövegátalakítás : nagybetűs ; szövegárnyék : 0 2px fehér , 0 3px #777 ; ) .demo-1 .main h2 ( margó : 1em 0 0,5em 0 ; szín : #343434 ; betűsúly : normál ; font- méret : 30px ; sormagasság : 40px ; betűcsalád : "Orienta" , sans-serif ; ) .demo-1 .main h3 ( margó : 1em 0 0.5em 0 ; szín : #343434 ; betűméret : 22px sormagasság : 40 képpont ; betűsúly : normál ; szövegátalakítás : nagybetűs ; betűcsalád : "Orienta" , sans-serif ; betűköz : 1px ; betűstílus : dőlt ; ) .demo-1 .main h4 ( margó : 1em 0 0,5em 0 ; szín : #343434 ; betűméret : 18px ; vonalmagasság : 20px ; betűvastagság : normál ; betűcsalád : "Orienta" , sans-serif ; ) |
Demo-1 .main h1 ( margó: 1em 0 0,5em 0; szín: #343434; betűsúly: normál; font-család: "Ultra", sans-serif; betűméret: 36 képpont; vonalmagasság: 42 képpont; szövegátalakítás: nagybetűk; szövegárnyék: 0 2px fehér, 0 3px #777; ) .demo-1 .main h2 ( margó: 1em 0 0,5em 0; szín: #343434; betűsúly: normál; betűméret : 30px; sormagasság: 40px; betűcsalád: "Orienta", sans-serif; ) .demo-1 .main h3 ( margó: 1em 0 0,5em 0; szín: #343434; betűméret: 22px; vonal -magasság: 40 képpont; betűsúly: normál; szövegátalakítás: nagybetűk; betűcsalád: "Orienta", sans-serif; betűköz: 1px; betűstílus: dőlt; ) .demo-1 .main h4 ( margó: 1em 0 0,5em 0; szín: #343434; betűméret: 18px; vonalmagasság: 20px; betűvastagság: normál; betűcsalád: "Orienta", sans-serif; )
2. példa
Itt van egy kicsit érdekesebb megvalósítás - a cím hátterét szilárd kitöltés és kép formájában adjuk hozzá. A CSS kód teljesen helyesen van megírva, a behúzások százalékban vannak feltüntetve, hogy a kép kicsinyítésekor a cím szövege ne olvadjon össze a háttérképpel. Használt betűtípusok: Titillium Web (sans-serif), Muli (sans-serif).
| .demo-2 .main h1 ( margó : 1em 0 0,5em 0 ; betűsúly : 600 ; betűcsalád : "Titillium Web" , sans-serif ; pozíció : relatív ; betűméret : 36 képpont ; sormagasság : 40 képpont ; Padding: 15px 15px 15px 15%; szín: #355681; Box-Shadow: beillesztés 0 0 0 1px RGBA (53, 86, 129, 0,4), beillesztés 0 0 5px RGBA (53, 86, 129, 0,5), beillesztési beillesztés -285px 0 35px fehér ; szegélysugár : 0 10px 0 10px ; háttér : #fff url (../images/bartoszkosowski.jpg ) nem ismétlés középen balra ; ) .demo-2 .main h2 (margó : 1em 0 0 0. Em0 rgba (53, 86, 129, 0,8); szegély: 1px tömör #fff; kitöltés: 5px 15px; szín: fehér; szegélysugár: 0 10px 0 10px; keretes árnyék: beillesztés 0 0 5px rgba (53, 86, 129, 0,5); font-család: "Muli", sans-serif; ) .demo-2 .main h3 ( margó : 1em 0 0.5em 0 ; betűsúly : 600 ; betűcsalád : "Titillium Web" , sans-serif ; pozíció : relatív ; szövegárnyék : 0 -1px 1px rgba ( 0 , 0 , 0 , 0,4 ) ; betűméret : 22 képpont , sormagasság : 40 képpont , szín : #355681 ; szövegátalakítás : nagybetűs ; szegély-alsó : 1 képpont tömör rgba (53 , 86 , 0.3 ) ; .demo-2 .main h4 ( margó : 1em 0 0,5em 0 ; betűsúly : 600 ; betűcsalád : "Titillium Web" , sans-serif ; pozíció : relatív ; betűméret : 18px ; sormagasság : 20px ; szín : #788699 ; betűcsalád : "Muli" , sans-serif ; ) |
Demo-2 .main h1 ( margó: 1em 0 0,5em 0; betűsúly: 600; font-család: "Titillium Web", sans-serif; pozíció: relatív; betűméret: 36 képpont; sormagasság: 40 képpont; padding: 15px 15px 15px 15%; szín: #355681; box-shadow: inset 0 0 0 1px rgba(53,86,129, 0,4), inset 0 0 5px rgba(53,86,129, inset, -035p) ; szegélysugár: 0 10px 0 10px; háttér: #fff url(../images/bartoszkosowski.jpg) nincs ismétlés középen balra; ) .demo-2 .main h2 ( margó: 1em 0 0.5em 0; font- súly: normál; pozíció: relatív; szövegárnyék: 0 -1px rgba(0,0,0,0,6); betűméret: 28px; vonalmagasság: 40px; háttér: #355681; háttér: rgba(53,86,129 , 0,8); szegély: 1px tömör #fff; kitöltés: 5px 15px; szín: fehér; szegélysugár: 0 10px 0 10px; doboz-árnyék: beillesztés 0 0 5px rgba(53,86,129, 0,5); betűcsalád: "Muli", sans-serif; ) .demo-2 .main h3 ( margó: 1em 0 0.5em 0; betűsúly: 600; font-család: "Titillium Web", sans-serif; pozíció: relatív; szöveg- árnyék: 0 -1px 1px rgba(0,0,0,0,4);betűméret: 22px; vonalmagasság: 40 képpont; szín: #355681; szöveg-átalakítás: nagybetűk; border-bottom: 1px tömör rgba(53,86,129, 0,3); ) .demo-2 .main h4 ( margó: 1em 0 0,5em 0; betűsúly: 600; font-család: "Titillium Web", sans-serif; pozíció: relatív; betűméret: 18px; sormagasság: 20px; szín: #788699; betűcsalád: "Muli", sans-serif; )
3. példa
Most egy példa fejlécek megvalósítására egy sötét kialakítású webhelyen. Erre a célra egy meglehetősen világos, kontrasztos kék színt választottak a sötétszürke háttérrel ellentétben. A használt betűtípusok: Hammersmith One (sans-serif), Questrial (sans-serif).
| .demo-3 .main h2: after , .demo-3 .main h3: after , .demo-3 .main h4: after ( pozíció : abszolút ; tartalom : "" ; balra : 0 ; felül : 0 ; alul : 0 ; szélesség : 5 képpont ; szegélysugár : 2 képpont ; keretes árnyék : beillesztés 0 1 képpont 1 képpont rgba (0 , 0 , 0 , 0.5 ), 0 1px 1px rgba (255 , 255 , 255 .de ,-3 . h2: after ( háttér : #0AF ; ) .demo-3 .main h3: after ( háttér : #3BF ; ) .demo-3 .main h4: after ( háttér : #6Cf ; ) .demo-3 .main h1 ( betűméret: 36 képpont; sormagasság: 40 képpont; margó: 1em 0,6em 0; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", serif nélkül; szövegárnyék: 0 - 1px 0 rgba (0, 0, 0, 0,4); pozíció: relatív; szín: #6Cf;) .demo-3 .main h2 ( margó: 1em 0,6em 0; kitöltés: 0 0 0 20px; betűsúly: normál ; szín : fehér ; betűcsalád : "Hammersmith One" , sans-serif ; text-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.4 ); pozíció: relatív; betűméret: 30 képpont; vonalmagasság: 40 képpont; ) .demo-3 .main h3 ( margó : 1em 0 .6em 0 ; kitöltés : 0 0 0 20px ; betűsúly : normál ; szín : fehér ; betűcsalád : "Hammersmith One" , sans-serif ; text-shadow : 0 -1px 0 rgba (0, 0, 0, 0,4); pozíció: relatív; betűméret: 24px; sormagasság: 40px; font-család: "Questrial" , sans-serif ; ) .demo-3 . fő h4 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba (0 , 0 , 0 , 0,4 ) ; pozíció : relatív ; betűméret : 18 képpont ; sormagasság : 20 képpont ; betűcsalád : "Questrial" , sans-serif ; ) |
Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( pozíció: abszolút; tartalom: ""; bal: 0; felül: 0; alul: 0; szélesség: 5px; szegélysugár: 2px; keretes árnyék: beillesztés 0 1px 1px rgba(0,0,0,0,5), 0 1px 1px rgba(255,255,255,0,3); ) .demo-3 .main h2:after háttér: #0AF; ) .demo-3 .main h3:after ( háttér: #3BF; ) .demo-3 .main h4:after ( háttér: #6Cf; ) .demo-3 .main h1 ( betűméret: 36 képpont; sormagasság: 40 képpont; margó: 1em 0 ,6 em 0; betűvastagság: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba(0 ,0,0,0,4); pozíció: relatív; szín: #6Cf; ) .demo-3 .main h2 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér ; font-család: "Hammersmith One", sans-serif; szövegárnyék: 0 -1px 0 rgba(0,0,0,0.4); pozíció: relatív; betűméret: 30px; sormagasság: 40px; ) .demo-3 .main h3 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0,4); pozíció: relatív; betűméret: 24 képpont; vonalmagasság: 40 képpont; font-family: "Questrial", sans-serif; ) .demo-3 .main h4 ( margó: 1em 0 .6em 0; kitöltés: 0 0 0 20px; betűsúly: normál; szín: fehér; betűcsalád: "Hammersmith One", sans-serif; text-shadow : 0 -1px 0 rgba(0,0,0,0.4); pozíció: relatív; betűméret: 18px; sormagasság: 20px; betűcsalád: "Questrial", sans-serif; )
4. példa
Kísérletezzünk a háttérrel – mit szólnál egy fa textúra hozzáadásához. A Scada (sans-serif), Carrois Gothic (sans-serif) betűtípusok és a H2 szórólapja szintén betűtípussal, nem képpel valósul meg.
| .demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-right : 10px ; color : #A8D13B ; font-size : 0.8em ; ) .demo-4 .main h2: after , .demo-4 .main h3: after , .demo-4 .main h4: after ( pozíció : abszolút ; tartalom : "" ; magasság : 1px ; border- sugár : 2px ; bal : 0 ; alsó : 0 ; box-shadow : 0 -1px 0 rgba (0 , 0 , 0 , 0.1 ), 0 1px 0 rgba (255 , 255 , 255 , 0.6 demo )-4 fő h2: after ( szélesség : 100% ; ) .demo-4 .fő h3 : után { szélesség: 75% ; } .demo-4 .fő h4 : után { szélesség: 50% ; } .demo-4 .fő h1 { árrés: 1em 0 0,75 em; párnázás: 0 0 5 képpont 0 ; szín: #6B5344; font-weight: Normál; pozíció: relatív; szöveg-árnyék: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; betűméret: 36 képpont; vonalmagasság: 40 képpont; betűtípus család: "Carrois Gothic", sans-serif; } .demo-4 .fő h2 { árrés: 1em 0 0,75 em; párnázás: 0 0 5 képpont 0 ; szín: #6B5344; font-weight: Normál; betűtípus család: "Scada", sans-serif; pozíció: relatív; szöveg-árnyék: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; betűméret: 30 képpont; vonalmagasság: 40 képpont; } .demo-4 .fő h3 { árrés: 1em 0 0,75 em; párnázás: 0 0 5 képpont 0 ; szín: #6B5344; font-weight: Normál; betűtípus család: "Scada", sans-serif; pozíció: relatív; szöveg-árnyék: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; betűméret: 24 képpont; vonalmagasság: 40 képpont; } .demo-4 .fő h4 { árrés: 1em 0 0,75 em; párnázás: 0 0 5 képpont 0 ; szín: #6B5344; font-weight: Normál; betűtípus család: "Scada", sans-serif; pozíció: relatív; szöveg-árnyék: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; betűméret: 18 képpont; vonalmagasság: 20 képpont; } |
Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-right: 10px; color: #A8D13B; font-size: 0.8em; ) .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( pozíció: abszolút; tartalom: ""; magasság: 1px; határsugár : 2px; bal: 0; alsó: 0; box-shadow: 0 -1px 0 rgba(0,0,0,0,1), 0 1px 0 rgba(255,255,255,0,6); ) .demo-4 .main h2:after ( szélesség: 100%; ) .demo-4 .main h3:after ( szélesség: 75%; ) .demo-4 .main h4:after ( szélesség: 50%; ) .demo-4 .main h1 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5 képpont 0; szín: #6B5344; betűvastagság: normál; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 36 képpont; vonalmagasság: 40 képpont; betűcsalád: "Carrois Gothic", sans-serif; ) .demo-4 .main h2 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344; betűsúly: normál; betűtípus -család: "Scada", sans-serif; pozíció: relatív; szöveg árnyéka: 0 2px 0 rgba(255,255,255,0,5); betűméret: 30px; sormagasság: 40px; ) .demo-4 .main h3 ( margó: 1em 0 0,75em; padding: 0 0 5px 0; szín: #6B5344; betűsúly: normál; font-család: "Scada", sans-serif; pozíció: relatív; text-shadow: 0 2px 0 rgba(255,255,255,0,5); betűméret: 24 képpont; vonalmagasság: 40 képpont; ) .demo-4 .main h4 ( margó: 1em 0 0,75 em; kitöltés: 0 0 5px 0; szín: #6B5344; betűsúly: normál; font-család: "Scada", sans-serif; pozíció: relatív; szövegárnyék: 0 2px 0 rgba(255,255,255,0,5); betűméret: 18px; sormagasság: 20px; )
5. példa
Egy másik érdekes és szokatlan színséma - talán ez ösztönzi Önt néhány saját ötletére és megvalósítására. A címsoroknál elvileg nem lehet mindig félkövér, nagy betűtípus – vannak ilyen lehetőségek.
| .demo-6 .fő h1 { árrés: 1em 0 0,5 em 0 ; font-weight: 100 ; szöveg-átalakítás: nagybetűs; szín: #00caa6; betű stílus: dőlt; betűtípus család: Josephine Sans, sans-serif; betűméret: 58 képpont; vonalmagasság: 54 képpont; szöveg-árnyék: 2px 5 képpont 0 rgba(0 , 0 , 0 , 0.2 ) ; } .demo-6 .fő h2 { árrés: 1em 0 0,5 em 0 ; szín: #148773 ; betűméret: 26 képpont; vonalmagasság: 40 képpont; font-weight: bátor; betűtípus család: Josephine Sans, sans-serif; } .demo-6 .fő h3 { árrés: 1em 0 0,5 em 0 ; szín: #343434 ; betűméret: 22 képpont; vonalmagasság: 40 képpont; font-weight: 100 ; szöveg-átalakítás: nagybetűs; betűtípus család: Josephine Sans, sans-serif; betűtávolságok: 1 képpont; betű stílus: dőlt; } .demo-6 .fő h4 { árrés: 1em 0 0,5 em 0 ; szín: #343434 ; betűméret: 18 képpont; vonalmagasság: 20 képpont; font-weight: bátor; betűtípus család: Josephine Sans, sans-serif; } |
Demo-6 .main h1 ( margó: 1em 0 0,5em 0; betűsúly: 100; szövegátalakítás: nagybetűk; szín: #00caa6; betűstílus: dőlt; font-család: "Josefin Sans", sans-serif ; betűméret: 58 képpont; vonalmagasság: 54 képpont; szövegárnyék: 2 képpont 5 képpont 0 rgba(0,0,0,0,2); ) .demo-6 .main h2 ( margó: 1em 0 0,5em 0; szín: #148773; betűméret: 26 képpont; vonalmagasság: 40 képpont; betűvastagság: félkövér; betűcsalád: "Josefin Sans", sans-serif; ) .demo-6 .main h3 ( margó: 1em 0 0.5em 0 ; szín: #343434; betűméret: 22px; sormagasság: 40px; betűvastagság: 100; szövegátalakítás: nagybetűk; betűcsalád: "Josefin Sans", sans-serif; betűköz: 1px; betűtípus -stílus: dőlt; ) .demo-6 .main h4 ( margó: 1em 0 0,5em 0; szín: #343434; betűméret: 18px; vonalmagasság: 20px; betűsúly: félkövér; betűcsalád: " Josefin Sans, sans-serif;)
Ha szinte alaposan ismeri a CSS-t, akkor az eredeti cikkben megtudhatja, hogyan kell bizonyos előfeldolgozókat stílusokban használni a kód mennyiségének csökkentése és egyszerűsítése érdekében. Hogy őszinte legyek, ez az első alkalom, hogy egy CSS-stílusfájlban funkciókat és paraméterek helyettesítését láttam, de a kód nagyon vizuálisnak bizonyult. Természetesen az eredeti cikkben találsz hivatkozásokat a forrásokhoz és az összes lehetőség demóverziójához.
P.S. T Azok számára, akik az interneten dolgoznak, vagy most kezdik, egy cikk arról, hogy mi az a TIC, segít eligazodni az internet egyik legrelevánsabb és legvitatottabb fogalmában.
Azt mondják, nem lehet megítélni egy könyvet a borítója alapján, pedig az emberek nap mint nap ezt teszik. Felvesznek egy könyvet, megnézik a borítót, aztán felvesznek egy újat, vagy visszateszik, vagy megfordítják és megnézik, mi van a hátulján, VAGY kinyitják úgy, hogy ránéznek a borítóra. A webhelyeket a borítójuk és az első benyomásuk alapján is megítélik, ami gyakran a főcímből származik.
Az emberek általában a webhely címét látják először. Az oldal tetején található írásból vagy rajzból az emberek elsöprő ítéleteket hoznak arról, hogy mit fognak látni és olvasni. Ugyanazok az emberek, akik azt mondják, hogy nem lehet megítélni egy könyvet a borítója alapján, azt is mondják, hogy csak 30 másodperced van jó benyomást kelteni. Az internetes világban, ahol a következő oldal csak egy kattintásnyira van, sokkal kevesebb ideje van erre.
Végigvezetjük a WordPress fejléc-architektúráján, és tippeket adunk a testreszabásához, hogy saját „könyvborítóvá” váljon, amely jó benyomást keltve csalogatja az embereket a webhelyére. Ezután kínálunk néhány szakértői tanácsot arra vonatkozóan, hogy pontosan mi minősül jó webhelycímnek.
Tartalom
WordPress fejléc
Alapértelmezés szerint a WordPress fejléce egy egyszerű kódrészlet. A WordPress-témához tartozó fejléc módosításához nem kell értenie semmilyen kódot. Blogja vagy webhelye címét és webhelyleírását > > értékre kell állítania, és a WordPress elvégzi a többit.
A legegyszerűbb formában - a klasszikus téma - a WordPress fejléc a wp-content/themes/classic/header.php sablonfájlban található kód:
">
A cím a h1 címkében található, és azt a funkciót tölti be, hogy két különböző beállításban vagy paraméterben használják. Ezekről a lehetőségekről bővebben itt olvashat. Alapvetően az első a hivatkozásban szereplő webhelyen jelenik meg, a második pedig a blog vagy webhely nevét a > > panelen beállított módon. Amikor a felhasználó a kurzort egy címcím fölé viszi, a címre kattintva visszatérhet a webhely főoldalára vagy kezdőlapjára a >> panelen látható módon.
Az alapértelmezett WordPress téma érzékeli a háttérben lévő képek jellemzőit, és így jeleníti meg a fejlécet a wp-content/themes/default/header.php fájlban:
">
Az alapértelmezett/Kubrick-téma fejléce
A sabloncímke a linkben szereplő blog vagy webhely nevét mutatja, de ez a fenti URL-hez hasonló lekérdezés egy másik használatát mutatja. Ugyanazt az információt kapja, csak más módon. Hozzáteszi tőle leírások webhely itt: >> .
Egyszerűen fogalmazva, ez a két fejlécpélda ugyanazt a dolgot különbözteti meg. Fejléc-információkat biztosítanak, amelyekben képet is tartalmazhatnak, és a létrehozás segíthet a webhelyen való navigálásban. Csak azon múlik, hogy mennyi információt szeretne látni a fejlécében, és hogy ezek az információk hogyan jelennek meg.
A klasszikus téma első példáját használva a kép továbbra is használható háttérképként beállított stíluslapon a h1 választóban, a második téma jobban szabályozza a fejlécben lévő kép használatát azáltal, hogy saját felosztást ad neki. terület. A megjelenését teljes mértékben a stíluslap szabályozza.
Címsor stílusa
A fenti két példában leírtak szerint a fejléc stílusait a kiválasztók tartalmazzák: h1 , header , headerimg és description . Ez mind a style.css fájlban található, bár lehet a header.php stílusú fájlokban is az Ön által használt témából. Mindkét helyen ellenőrizni kell. Egy klasszikus témában a fejléc CSS-je egyetlen #header választóban található.
#fejléc (háttér: #90a090; szegély-alsó: dupla 3px #aba; szegély balra: tömör 1px #9a9; szegély jobbra: tömör 1px #565; szegély felső: tömör 1px #9a9; betűtípus: dőlt normál 230% "Times New Roman", Times, serif; betűköz: 0,2 em; margó: 0; kitöltés: 15 képpont 10 képpont 15 képpont 60 képpont; )
A fejléc körüli háttérszínként és szegélyként zöld árnyalatot választunk, de a szegély más árnyalatú, és süllyesztett, árnyékhatást hoz létre. A Times New Roman betűtípus 230%-ra van állítva, a normálnál szélesebb karakterközzel. Az oldalsó behúzás behúzást hoz létre a szöveghez a címsoron belül.
Mindegyik egyszerűen módosítható az egyes stílusattribútumok egyszerű szerkesztésével: a szegély vastagsága növelhető, és mindegyik azonos színű, módosítható a háttérszín, a betűméret és -stílus, a betűköz stb.
Ugyanez vonatkozik az alapértelmezett WordPress-téma fejlécére is, kivéve, hogy még néhány stílusra ügyelni kell. A header.php fájlban találhatók a "head" címkében És stílusban.css. Ha sok stílus létezik, jobb, ha minden információt áthelyez egy stíluslapra.
A fejléc megjelenését szabályozó stílusok a h1-en belül vannak, fejléc , fejlécimg és leírás CSS-választók. Csakúgy, mint a klasszikus téma esetében, itt is megtalálhatja ezeket a hivatkozásokat, és módosíthatja a megjelenést.
Az alapértelmezett képcím megváltoztatása A WordPress téma leegyszerűsödött a Kubrickr nevű segédprogram bevezetésével. Egyszerűen megkéri, hogy adjon meg egy új képfájlnevet a címhez, majd lefordítja azt, hogy ne kelljen áttúrnia a kódot. Ha csak a fejlécképet szeretné megváltoztatni, ez egy rendkívül hasznos és egyszerű eszköz.
Ha akarja, programozzon vagy ásson bele a fejlécstílusokba, és hajtsa végre a szükséges módosításokat. Az alábbiakban egy egyszerű oktatóanyag található a kép címének manuális megváltoztatásához.
A fejléckép módosítása
Számos különböző fejléckép és -terv áll rendelkezésre szerkeszthető és használható. Az alapértelmezett fejléckép vagy a Kubrick WordPress-téma stílusa, valamint az ezen a témán alapuló bármely téma stílusa bonyolultabb, mint a klasszikus témák módosítása. A stílusok megtalálhatók a header.php "head" szakaszában, valamint a styles.css fájlban. Ha csak a képfejléc-hivatkozásokat szeretné módosítani, nyissa meg a sablon header.php fájlját, és keresse meg a következő stílusokat:
#header ( háttér: url("/images/wc_header.jpg") nem ismétlődik alul középen; ) #headerimg ( margó: 7px 9px 0; magasság: 192px; szélesség: 740px; )
JEGYZET: A bloginfo használata csak akkor lehetséges, ha a stílust a fő sablonfájllal együtt használják. A WordPress sabloncímkék nem működnek stíluslapon (style.css). Ha ezt a stílust át szeretné helyezni a stíluslapra, módosítsa a sabloncímkét a fejléckép tényleges URL-jére.
A fájl módosításához cserélje ki a „kubrickheader.jpg” fájlt a webhelyére feltöltött új grafika nevére, hogy lecserélje. Ha egy másik könyvtárban van, módosítsa úgy, hogy a bloginfo() címkéket lecseréli a grafikus hely adott címére.
Ha azonos méretű képet használ, egyszerűen cserélje ki a képet. Ha eltérő méretű, adja meg a kép magasságát és szélességét a következő #headerimg részben. Ha nem ismeri és nem használja a Windows rendszert, tekintse meg számítógépén azt a mappát, amelyben a kép található miniatűr nézetben. Kattintson a "Nézet > Bélyegkép" gombra a Windows Intéző menüjében. Miniatűr nézet módban keresse meg a képet, és tartsa lenyomva az egérgombot. Egy kis jegyzetgolyó jelenik meg a méretek listájával. Használja ezt az információt a stílusokban. Ellenkező esetben kattintson a jobb gombbal a grafikus fájlra, és válassza a "Tulajdonságok" lehetőséget, és ez megadja a fájl méretét és méreteit.
Ha a fejléckép a helyén van, ideje foglalkozni a többi fejléccel. Nyissa meg a style.css stíluslap fájlt, és vegye figyelembe a következőket:
- fejléc
- headerimg
- leírás
Lehet, hogy a témája mindegyiket tartalmazza, de lehet, hogy nem, de az alapértelmezett témában mindegyik megtalálható a stíluslap különböző helyein. Előfordulhat, hogy ezek mindegyikét vagy néhányat módosítani kell a fejléc megjelenésének megváltoztatásához. A fejlécképek vagy a fejlécképek átméretezésekor ügyeljen arra, hogy átméretezzen más strukturális CSS-választókat, például a tartalmat vagy az oldalsávot, hogy megfeleljen a fejlécméret változásainak.
Képfejléc specifikáció
Az alapértelmezett WordPress témához illeszkedő fejléc körülbelül 192 x 740 pixeles. Ha bármely WordPress-témában fejlécet cserél, ellenőrizze a fejléckép méretét, majd keresse meg a méretnek megfelelő cserét. Ha olyan fejlécképet választ, amely kisebb, szélesebb vagy magasabb, mint a csere, előfordulhat, hogy módosítania kell a weboldal egyéb szerkezeti elemeit a fejléc méretének megfelelően.
Ha egy teljes webhely témáját módosítja, akkor a teljes oldal vagy tartalomterület szélességét figyelembe kell venni a fejléckép méreténél. A két leggyakoribb képernyőméret az 1024x768 és a 800x600 pixel. A széles monitorok azonban egyre nagyobb lendületet kapnak, és a webtervezőknek most már az 1280x1024-es és az 1600x1200-as képernyőszélességekre kell felkészülniük.
Ha a webhelyet "lebegő"-re állítja, amely a böngészőablak közepén helyezkedik el, és mindkét oldalán hely van, akkor a fejléc szélességét tetszőlegesre állíthatja. Rugalmas vagy "rugalmas" képernyőszélességű téma tervezésekor a fejléc szélessége válik fontossá.
Ha olyan képfejlécet használ, amely megismételhető, és rugalmas szélességet használ, stílusokat állíthat be az ismétlődő fejlécben, hogy kitöltse a helyet:
#header ( háttér: url("/images/kubrickheader.jpg") ismétlés-x bal felső sarokban; )
Ez azt eredményezi, hogy a fejléc kép vízszintesen ismétlődik a bal felső saroktól a végéig. Ezt a viselkedést bármilyen háttérpozícióra testreszabhatja, műszaki és tervezési igényei szerint.
Fejléc art
A webdizájn területén megjelent új kifejezés az Mesterséges fejléc(fejléckép). Ezek fejlécképek, amelyeket jellemzően kézzel rajzolnak színek, formák, szimbólumok, képek és szöveg kombinációival. Egy ilyen cím létrehozása nehéz lehet, és sok időt vesz el a szerzőtől. Bár léteznek ingyenes mesterséges fejlécek, néhány webhely saját, kézzel készített mesterséges fejlécet árul. Míg a fénykép egyedülálló lehet, és közvetítheti a kívánt vizuális stílust, a kézzel készített címsor könnyebben összeilleszthető más weboldal színeivel, és jellegzetes jellege miatt általában esztétikusabb.
A kész fejléckép kiválasztásának van néhány előnye. a művészek elvégezték a munkát, és csak annyit kell tennie, hogy kiválasztja a webhelyéhez legjobban illő dizájnt. És a grafika készen áll a használatra, már méretezve és kis fájlméretként mentve.
Ebben a példában a list_cats() sabloncímke beállítja az azonosító alapján rendezendő kategórialapot egy rendezetlen lapra (
- ) nem tartalmaz dátumokat vagy bejegyzések számát, nem rejt üres kategóriákat, a linkben a címhez a "leírás" kategóriát használja, nem jeleníti meg a szülőkategória leszármazottait, és kizárja az 1-es és 33-as kategóriákat. A saját " kategóriák" blokk. Kérjük, vegye figyelembe, hogy a bfla "főoldalára" vagy főoldalára mutató hivatkozás manuálisan került a lap elejére.
- ITTHON
">
A munkalap stílusához használja a #categorylist parancsot a style.css fájlban:
#categorylist (betűméret:12px; font-style:normal; text-transform:uppercase; ) #categorylist ul (lista-stílus-típus: nincs; listastílus-kép:nincs; margó:0; padding-bottom: 20px; ) #categorylist li ( display: inline; padding: 0px 5px;) #categorylist a:link, #category a:látogatott (szín:kék) #categorylist a:hover (szín:piros)
A blokk így fog kinézni: Íme néhány tipp és információ a WordPress-webhely fejlécének kiválasztásához és testreszabásához.
Ügyeljen a szöveg elhelyezésére és színére. A cím szövegének színe és elhelyezése hozzáadható vagy kivonható a prezentációból. Íme néhány tipp.
- Ha fehér szöveget használ, ügyeljen arra, hogy a fejlécben és/vagy a headerimg-ben állítsa be a háttérszínt, hogy újra megjelenjen a fehér szöveg, ha valamilyen oknál fogva a kép nem jelenik meg a képernyőn, vagy a felhasználó "képek megjelenítése" ki van kapcsolva. Ez lehetővé teszi, hogy a fehér szöveg továbbra is látható legyen.
- Ha a kép a fő jellemző vagy elem, helyezze el a szöveget úgy, hogy az ne terjedjen ki a kép fő témájára.
- Ha a szöveg nehezen olvasható a grafikai terület foglaltságához képest, helyezze el a szöveget egy kevésbé telített képcímterületre.
- Győződjön meg arról, hogy a szöveg színe minden webhelylátogató számára könnyen látható, és nem ütközik a címkép színeivel. A fluoreszkáló narancssárga szöveg lime zöld alapon morbid.
- Ne feledje, hogy a művészet címében előforduló színeltérések és minták miatt a szövegbetűk „eltűnhetnek” az átfedő szövegben. Ugyanez vonatkozik arra az esetre is, ha szöveget szúr be a kép felső rajzába vagy címébe.
A merész és drámai fejlécek merészen megtervezett webhelyekre, míg a lágy és pasztell színű oldalak gyengédebb grafikai fejlécekre alkalmasak. A punk rocknak és grunge-nak szentelt webhely fejlécének punknak és szutykosnak kell lennie. Rajtad múlik, de gondolj a következetességre.
A félkövér és szemet gyönyörködtető fejlécek a félkövér webhelyek számára vannak fenntartva, míg a lágy és pasztell színű webhelyek lágy grafikus fejlécekké válnak. A punk rock és grunge zenekaroknak szentelt webhelynek punk vagy grunge címet kell viselnie. Rajtad múlik, de tedd ezt következetesen.
A címsoroknak nem kell mindig képeknek lenniük. Nem kell minden címnek fotókat és képeket tartalmaznia. Néha a szavak fontosabbak, akár mosott színben, akár fehér háttérben vannak. A zsúfolt fejléc még zsúfoltabbá teszi a webhelyet. Kerülje a tolakodó hirdetéseket, a zsúfolt navigációt, az olvashatatlan szöveget, a hosszú hírfolyamokat a fejlécben. Minél egyszerűbb, annál jobb. Kövesse a fejlécben található akadálymentesítési szabványokat. Beszéltünk már, de még többet tehet annak érdekében, hogy címsora megfeleljen a kisegítő lehetőségeknek. Használjon h1 címkéket, majd speciális programok, amelyek szöveget olvasnak ki a képernyőről, fejlécként ismerik fel. Alt használata linkekben és képekben. A címsorok bármilyen magasságúak lehetnek, de ne feledje, a tartalom a király. Az átlagos fejléc magassága kevesebb, mint 200 pixel, de a fejlécek magassága a nagyon vékonytól az oldal feléig terjed. Ne feledje, hogy a fő ok, amiért az emberek felkeresik webhelyét, annak tartalma, és minél többet kell lefelé görgetniük a fejléc mellett, hogy elérjék a tartalmat, annál kevésbé érdeklődnek. Segíts elvezetni őket a címben szereplő tartalomhoz. Gondoljon a „Webhely személyiségére”. A cím a webhely identitásának része; az embereknek meg kell bizonyosodniuk arról, hogy ugyanazon a webhelyen vannak, amikor a webhely másik oldalára mutató hivatkozásra kattintanak. Tekintse a címsort és/vagy a mesterséges címsort webhelye „márkajelzéseként”.
Mindig fel akarja hívni a figyelmet egy webhely vagy blog címsoraira, szeretné őket széppé tenni és lehetőleg effektusokkal (például árnyék, ragyogás vagy 3D). Az Adobe Photoshopban elég szép fejléceket lehet készíteni, de a végén képek, vagyis a szövegüket a keresőrobotok nem tudják elolvasni... Mit tegyünk? Van kijárat!
Valójában, amikor meghatározza a weboldal relevanciáját bizonyos keresési lekérdezésekhez, és helyet rendel hozzá a keresési eredmények között, a címsorok TÁVOLIAN játszanak az utolsó helytől. Még azt is mondanám, hogy az egyik legjelentősebb. Meglehetősen meggondolatlanság lenne őket kép formájában meghagyni (bár egyszer átterveztem egy honlapot, aminek több oldalon a teljes szövege egy kép volt... igen, igen, ez is előfordul...).
Természetesen elfelejtheti a szépséget, és hétköznapivá teheti a címlapokat, mint mindenhol. De miért, ha van egy meglehetősen egyszerű módszer, amely szöveges formátumban hagyja a címsorokat, és nagyon szép és érdekes hatásokat kölcsönöz nekik? És ma megmutatom nektek ezeket a technikákat. Úgy gondolom, hogy ha egyszer elsajátítja ezeket a technikákat, folyamatosan használni fogja őket. Egyszóval két legyet ölsz egy csapásra: tedd lenyűgözőbbé a webdizájnt, és az oldal relevanciája sem fog ártani.
Kezdjük!
3D fejléc készítése
Tehát közvetlenül effektusokat fogunk létrehozni a weboldal elrendezése során.
1. Először létre kell hoznia egy új html fájlt, valamint egy stíluslap (css) fájlt.
Hogy megmutassam, hogyan történik mindez, létrehoztam egy html fájlt, és elneveztem „title.html”-nek (ha szükséges, letöltheti a lecke összes forrásfájlját, és megtekintheti a „forrásokban”). Íme a html fájlunk forráskódja:
Névtelen dokumentum 3D szöveg itt
Árnyékcím itt
Glow Text Here
Anaglif szöveg
Ez egy HTML5-ös dokumentum, amelyhez egy stíluslap (css.css fájl) kapcsolódik, és a body tag-en belül mindössze négy különböző kaliberű címsor található.
Ezekkel a címsorokkal fogunk dolgozni. Semmi másra nincs szükségünk a html fájlba.
2. Ahogy már mondtam, szükségünk van egy stíluslap fájlra. Már csatlakoztattuk, de ha még nem hozta létre, akkor hozza létre.
Létrehoztam egy css.css nevű fájlt, és ugyanabba a könyvtárba helyeztem, mint a html fájlt.
Mielőtt elkezdené a 3D fejléc létrehozását, adjunk hozzá néhány alapvető stílust az oldalhoz, hogy egy kicsit vonzóbbá tegyük.
Adjuk meg az oldal magasságát, szélességét, színét, központosítsuk, és állítsunk be egy pontozott keretet a body tag számára.
Azonnal igazítsuk az összes címsorunkat is középre.
Itt van a kód, amelyet be kell írni a stíluslap fájlba:
Törzs (magasság: 700 képpont; szélesség: 90%; háttérszín: # 069; margó: 0 automatikus; szegély: 1 képpont szaggatott # 000066; ) h1, h2, h3, h4 (szöveg igazítása: középre;)
Indítsa el a html fájlt a böngészőjében. Az oldal így fog kinézni:
3. Most kezdjük az átalakítást. A h1 címsort 3D szöveggé alakítjuk.
Mindez ugyanabban a stíluslapfájlban történik.
Helyezze el a következő kódot mindazok alá, amelyeket eddig a css.css fájlban írt:
H1(betűméret:72px; szín:#fff; szövegárnyék:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px6p6 -5p 0 ;)
Most nézzük meg ezt a kódrészletet. Az első két sorban a betűméretet és a fő színt állítjuk be. De aztán kezdődik a móka. A text-shadow tulajdonság használatával egyfajta árnyékot hozunk létre a betűtípus számára, de nem egészen.
A helyzet az, hogy a kettőspont után ez a tulajdonság a következő paramétereket sorolja fel: szín, vízszintes eltolás, függőleges eltolás és elmosódás.
Mit csinálunk?
Először is: a fő színhez közeli, de sötétebb színt választunk. Példánkban az előtér színe fehér, a szöveg-árnyék színe pedig szürke (de nem túl sötét). Itt addig kell kísérleteznie, amíg el nem éri a kívánt eredményt.
Másodszor: fokozatosan mozgatjuk (minden alkalommal 1 pixellel) ezt az árnyékot jobbra és felfelé. Ezt a következő 2 paraméter jelzi (1px -1px, 2px -2px stb.).
Harmadszor: az elmosódást mindenhol nullára hagyjuk, mert egyszerűen nincs rá szükségünk a 3D-s szöveg létrehozásához.
Ennek eredményeként ezt a képet kapjuk:
Ebben a példában 5 képpontos eltolást választottam, de többet vagy kevesebbet is megtehet. Minden attól függ, hogy milyen eredményt szeretne elérni.
Kísérletezzen a színekkel is, és próbáljon természetesebb megjelenést teremteni.
Hozzon létre egy fejlécet árnyékkal
Fejléc létrehozása árnyékkal nagyon egyszerű. És ezt néhány sornyi kóddal elérjük.
Most a h2 címsoron fogunk dolgozni.
Először is be kell állítani a méretét és a fő színét (én a méretet pontosan ugyanannak állítottam be, mint a h1 fejlécet, de természetesen minden fejlécet úgy alakítasz ki, ahogy kell).
A szín és a méret beállítása után ismét a text-shadow tulajdonságot fogjuk használni. Az első paraméter a szín megadása; sötétebbnek kell lennie (végül is egy árnyék). A második és harmadik paraméter a vízszintes és függőleges eltolások. A szövegem nagy, ezért 5 pixelessé teszem őket. És az utolsó paraméter az elmosódási sugár. Az árnyéknak szüksége van rá, ezért 4 pixeles értéket rendelünk hozzá. Ennek eredményeként a kód így fog kinézni:
H2(betűméret:72px; szín:#F90; szövegárnyék:#191919 5px 5px 4px; )
És így fog kinézni:
Kísérletezhet a paraméterekkel, és mégis eltérő eredményeket kaphat. Vegye figyelembe a szöveg betűméretét, színét és azt, hogy mit szeretne elérni.
Hozzon létre egy fényes fejlécet
Ez is egyszerű. Itt a h3 címsorral fogunk dolgozni.
Az elv ugyanaz: először beállítjuk a betűméretet és annak fő színét, majd a text-shadow alkalmazást.
Válassza ki a ragyogás színét. Amint érti, világosabb lesz, mint a cím fő színe. A második és harmadik paraméter nulla lesz (itt nem tolunk el semmit sehova). De az elmosódási sugárnak nagyobbnak kell lennie (a mérete attól is függ, hogy milyen fényt szeretnél elérni).
Ennek eredményeként a kód a következő lesz:
H3(betűméret:72px; szín:#333; szövegárnyék:#fff 0 0 20px; )
A világító címünk pedig így fog kinézni:
Fejléc sztereó hatással
Nevezhetjük anaglif szövegnek is. A 3D-s filmnézéshez használható szemüveghez hasonlítható.
Nem kínozlak... Ahogy mondani szokták: jobb egyszer látni, mint egy hosszú leírást hallgatni.
A hatás nagyon érdekes, és elvileg nem nehéz létrehozni.
Kezdjük. Itt egy h4 fejléccel fogunk dolgozni.
1. Először is állítsuk be a fejléc méretét. A példánk többi fejlécével megegyezővé teszem.
Most el kell helyeznünk a fejlécet. Állítsuk a pozíció tulajdonságot relatívra. Ez azt jelenti, hogy az elem pozíciója az eredeti helyéhez képest lesz beállítva.
Most adjunk színt. Ezt rgba formátumban fogjuk megtenni. Ha még nem találkozott ezzel a színdefinícióval, ne ijedjen meg. Egyszerű: a zárójelben lévő első három paraméter határozza meg a színt (rgb formátum), az utolsó paraméter pedig az átlátszatlanságának mértékét. Példánkban ez az érték 0,5 (azaz 50%) lesz.
Íme az összes fenti kód:
H4(betűméret:72px; pozíció:relatív; szín:rgba(0,0,102,0,5); )
2. Most jön a szórakoztató rész. Létrehozunk egy pszeudo elemet a h4 elemünkhöz. Ehhez regisztrálnia kell a stíluslapon mint h4:utána.
Ennek a pszeudo elemnek számos érdekes tulajdonsága lesz. Például ingatlan tartalom, amelybe pontosan ugyanazt a szöveget kell beírni, mint a h4 címsort.
A pszeudo elemet abszolút pozícionálni kell (pozíció:abszolút).
A színét a h4 elem ellentétes színére kell állítani. Vagyis ha a h4 kék színű, akkor a pszeudo elem piros színű lesz. És az átlátszatlanság még mindig 50%.
Ezenkívül beállítjuk a pszeudoelem helyzetét a bal és a felső tulajdonságok segítségével. Meg kell győződnünk arról, hogy a pszeudo elem, amely tartalmában megkettőzi a h4 elemet, kissé jobbra és alul helyezkedjen el (most mindent meglátsz). Itt a beállítások egyéniek lesznek, és a betűmérettől, betűtípustól és a kívánt hatástól függenek.
Íme az összes fenti kód:
H4:after(tartalom:"Anaglif szöveg"; pozíció:abszolút; bal:361px; top:2px; szín:rgba(255,0,0,0,5); )
És itt van annak a hatása, amit kapunk:
Ennyit akartam megtanítani neked ebben a leckében.
Feltétlenül használja ezt a technikát! Először: Gyönyörű, Másodszor: minden címsor tökéletesen olvasható a keresőrobotok számára, Harmadszor: Miután megírta a kódot, használhatja a címet webhelye vagy blogja bármely weboldalán, egyszerűen deklarálva azt a html-kódban.
Ha tetszett ez a lecke, Írja meg észrevételét(ha nem tetszett, akkor is :)). Hálának fogják tekinteni.
A leckét a közösségi hálózatok gombjaival is megoszthatja barátaival.
És természetesen iratkozz fel a blogfrissítésekre (ha még nem tetted meg). Sok hasznos és érdekes dolgot ígérek!
Jó hangulatot és viszontlátásra!
Függetlenül attól, hogy milyen webhelyet vagy webes alkalmazást fejlesztenek, mindig szükség van stílusok létrehozására az olyan címsorokhoz, mint a h1 vagy a h2. Ebben az oktatóanyagban számos effektust fogunk megvizsgálni, amelyeket a pszeudoelemeket használó címsorokra alkalmaznak.
Miért használnak pszeudo elemeket? A válasz egyszerű: nincs szükség további jelölésekre.
HTML
Fogadd alázattal a leckét
Nincsenek speciális jelölések. Az osztályt jelző szabályos cím.
CSS
Törzs (szélesség: 60%; margó: 50 képpont automatikus; kitöltés: 15 képpont; pozíció: relatív; /*szükséges a fejléchez 4*/ z-index: 0; /*szükséges a fejléchez 4*/ keret: 7 képpont tömör #cecece; keret : 7px tömör rgba(0,0,0,.05); háttér: #fff; háttér klip: padding-box; -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5); box-shadow: 0 0 2px rgba(0, 0, 0, .5); ) h1( font-family: "Droid Sans", sans-serif; betűméret: 22 képpont; )
Vegye figyelembe a background-clip deklarációját: padding-box . Érdekes hatást érhet el: átlátszó keret a konténerünkhöz. A CSS background-clip tulajdonsága határozza meg, hogy egy elem háttere (szín vagy kép) kölcsönhatásba lép-e az alatta lévő rétegekkel.
Ez az egyszerű és szép hatás a border tulajdonság használatával érhető el:
Headline1 (szegély-alsó: 1px szaggatott #aaa; szegély balra: 7px tömör #aaa; szegély balra: 7px tömör rgba(0,0,0,.2); margó: 0 -15px 15px -22px; kitöltés: 5px 15 képpont ;)
2. címsor
Ez a stílus a háromszög módszerrel érhető el:
Headline2 (szegély-alsó: 1px tömör #aaa; margó: 15px 0; kitöltés: 5px 0; pozíció: relatív; ) .headline2:before, .headline2:after( tartalom: ""; szegély jobbra: 20px tömör #fff; border-top: 15px tömör #aaa; alsó: -15px; pozíció: abszolút; bal: 25px; ) .headline2:after( border-top-color: #fff; border-right-color: átlátszó; alul: -13px; bal: 26px;)
3. címsor
De ez a szalageffektus cím megtervezésére is használható:
Headline3(pozíció: relatív; margó balra: -22px; /* 15px kitöltés + 7px szegélyszalag árnyéka*/ jobb margó: -22px; kitöltés: 15px; háttér: #e5e5e5; háttér: -moz-linear-gradient(# f5f5f5, #e5e5e5); háttér: -webkit-gradient(lineáris, bal felső, bal alsó, from(#f5f5f5), to(#e5e5e5)); háttér: -webkit-linear-gradient(#f5f5f5, #e5e5e5); háttér: -o-linear-gradient(#f5f5f5, #e5e5e5); háttér: -ms-linear-gradient(#f5f5f5, #e5e5e5); háttér: linear-gradient(#f5f5f5, #e5e5e5); -webkit-box- árnyék: 0 -1px 0 rgba(255,255,255,.8) beillesztés; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) beillesztés; box-shadow: 0 -1px 0 rgba(255,25,8) beszúrás; szövegárnyék: 0 1px 0 #fff; ) .headline3:fore, .headline3:after( pozíció: abszolút; bal: 0; alul: -6px; tartalom:""; keret-felül: 6px szilárd #555; border-left: 6px tömör átlátszó; ) .headline3:before( border-top: 6px solid #555; border-right: 6px solid átlátszó; border-left: none; left: auto; right: 0; bottom: -6px; )
A box-shadow tulajdonság segítségével nagyszerű címet is létrehozhat:
Headline4 (pozíció: relatív; szegélyszín: #eee; szegély stílusa: tömör; szegély szélessége: 5px 5px 5px 0; háttér: #fff; margó: 0 0 15px -15px; kitöltés: 5px 15px; -moz-box -árnyék: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); box-shadow: 1px 1px 1px rgba(0) ,0,0,.3); ) .headline4:after ( tartalom: ""; pozíció: abszolút; z-index: -1; alsó: 15 képpont; jobbra: 15 képpont; szélesség: 70%; magasság: 10 képpont; háttér: rgba(0, 0, 0, .7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7); box-shadow: 0 15px 10px rgba(0, 0, 0, .7); -webkit-transform: forgatás (2deg); -moz-transform: forgatás (2deg); -o-transzformáció: forgatás (2 fok); -ms-transzformáció: forgatás (2 fok); transzformáció: forgatás (2 fok); )
