Antraštės dizainas. Kaip pridėti fono spalvą prie pavadinimo teksto? Antraštės h1 tekstas

Iš autoriaus: Sveiki atvykę į mūsų tinklaraštį apie svetainės kūrimą. Bet kuri svetainė turi kažką, dėl ko ji paprastai įsimenama ir išsiskiria iš kitų. Paprastai tai yra svetainės antraštė. CSS leidžia padaryti jį taip, kaip norite.

Svetainės antraštė – kokia ji yra

Nuostabu, kiek daug šiandien gali priklausyti tik nuo žiniatinklio šaltinio dizaino. Bet kas ypač skiria žiniatinklio išteklius nuo kitų? Paprastai tai yra svetainės antraštė su įmonės logotipu ir unikaliu dizainu. Dažniausiai taip žmonės prisimena kokį nors interneto projektą. Tai labai gerai įsimena žmonių atmintyje.

Pavyzdžiui, jei mėlyname fone matote baltą raidę „B“, tikriausiai iš karto darote išvadą, kad tai yra socialinio tinklo „VKontakte“ piktograma. O pašto karvelio įvaizdis visiems iškart asocijuojasi su Twitter. Visa tai tapo įmanoma, nes šių svetainių antraštėse buvo kaip tik tokie vaizdai ir žmonės juos puikiai įsiminė.

Gerai, tai buvo šiek tiek mintis, dabar pereikime prie techninės dalies.

Kaip sukurti svetainės antraštę CSS?

Apskritai skrybėlės yra skirtingos. Pagal plotį juos galima suskirstyti į dvi grupes: lygiuojamus į centrą ir tas, kurios apima visą tinklalapio plotį.

Anksčiau antraštė buvo daroma taip pat, kaip ir bet kuris kitas blokas - įprastai div žymai buvo suteiktas reikiamas identifikatorius, po kurio į ją patekdavo visas reikalingas turinys, o tada visa tai buvo suformatuota. Šiandien jau įprasta šrifuoti kitaip. Ypač kuriant svetainės antraštę HTML5, atsirado suporuota žyma – antraštė. Jo naudojimas yra skatinamas, jis leidžia naršyklėms suprasti, kas yra ši šablono dalis ir ką ji daro. Beje, jei norite išmokti HTML5 pagrindus, turite tiesioginį kelią į mūsų, kur galėsite žiūrėti šios technologijos pamokas.

Todėl, norėdami sukurti paprastą antraštę, tiesiog parašykite šį kodą html:

< header > < / header >

Žinoma, puslapyje kol kas nieko neatsiras – dar reikia į jį įtraukti turinį ir suprojektuoti. Bet, pavyzdžiui, padarykime bloką, apimantį visą ekrano plotį, ir šiek tiek papuoškime.

antraštė (plotis: 100 %; fonas: #D8E3AB; aukštis: 70 pikselių; )

antraštė (

plotis: 100%;

fonas : #D8E3AB;

aukštis: 70 pikselių;

Apskritai, jei viskas padaryta teisingai, blokui turėtų būti suteikta kokia nors klasė ar net identifikatorius (kadangi tai yra svarbus tinklalapio elementas), tačiau kol kas mes tiesiog nurodysime elementą pagal žymą.

Plotis: 100% savybė leidžia mūsų blokui ištempti visą plotį, nepaisant ekrano dydžio. Jei vis dėlto reikia kažkaip apriboti matmenis, naudokite papildomą max-width savybę, kur absoliutus dydis rašomas pikseliais, kurį pasiekus konteineris nebesiplečia.

Dabar prieš mus liko tik juostelė, nudažyta pasirinkta spalva. Dažniausiai aukštis nenurodomas – jis nustatomas automatiškai pagal elementus, kurie bus antraštėje.

< div id = "wrap" >

< header > < / header >

< / div >

Tokiu būdu mūsų svetainės viršus bus tiksliai centre. Belieka tik užpildyti.

Ryžiai. 1. Kol kas tai tik konteineris, kuriame bus visas turinys.

Kas paprastai yra skrybėlėje?

Paprastai ten įterpiamas svetainės logotipas, pavadinimas ir aprašymas. Taip pat gali būti tam tikra kontaktinė informacija, puslapio naršymas ar net reklama.

Logotipas paprastai įterpiamas kaip fono paveikslėlis. Pavyzdžiui, įdėkime tai:

Norėdami tai padaryti, fone pridėkite keletą taisyklių:

fonas: #D8E3AB url(logo.png) be pasikartojimo 5% 50%;

fonas: #D8E3AB url(logo.png) nesikartojimas 5% 50%;

Tai yra, be vientisos spalvos, mes taip pat pateikiame fono paveikslėlį (mūsų atveju - logo.png) ir pirmiausia įdedu jį į tą patį aplanką, kuriame yra stilių failas. Draudžiame kartoti logotipą ir nustatome jo vietą bloke – šiek tiek pasukite į kairę ir vertikaliai centre.

Pridėkime šiek tiek turinio prie antraštės. Pavyzdžiui, antraštė ir meniu.

Svetainės pavadinimas

< div class = "title" >Svetainės pavadinimas< / div >

< ul class = "menu" >

< li > < a href = "#" >Kontaktai< / a > < / li >

< li > < a href = "#" >Apie mus< / a > < / li >

< li > < a href = "#" >Paslaugos< / a > < / li >

< / ul >

Dabar įforminkime visa tai.

Pavadinimas (šrifto dydis: 36 piks.; užpildymas viršuje: 10 pikselių; teksto lygiavimas: centre; ) .menu (sąrašo stilius: nėra; pozicija: absoliutus; viršuje: 10 pikselių; dešinėje: 100 pikselių; )

Pavadinimas (

šrifto dydis: 36 pikseliai;

paminkštinimas – viršuje: 10px;

tekstas - lygiuoti: centre;

Nesvarbu, kokia svetainė ar žiniatinklio programa kuriama, visada reikia sukurti stilius tokioms antraštėms kaip h1 arba h2. Šioje pamokoje apžvelgsime keletą efektų, taikomų antraštėms naudojant pseudo elementus.

Kodėl naudojami pseudo elementai? Atsakymas paprastas: nereikia papildomo žymėjimo.

HTML

Priimk pamoką nuolankiai

Jokių specialių ženklų. Įprastas pavadinimas, nurodantis klasę.

CSS

Turinys (plotis: 60 %; paraštė: 50 piks. automatinė; užpildymas: 15 piks.; padėtis: santykinė; /*reikia 4 antraštei*/ z-indeksas: 0; /*reikia 4 antraštei*/ kraštinė: 7 piks. vientisa #cecece; kraštinė : 7px solid rgba(0,0,0,.05 background: #fff: padding-box -moz-box-shadow: 0 0 2px rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5); dydis: 22px;

Atkreipkite dėmesį į fono klipo deklaraciją: padding-box . Tai padeda išgauti įdomų efektą: permatomas rėmas mūsų konteineriui. CSS fono klipo ypatybė nustato, ar elemento fonas (spalva ar vaizdas) sąveikaus su apatiniais sluoksniais.

Šis paprastas ir gražus efektas pasiekiamas naudojant ribą:

1 antraštė (kraštinė apačioje: 1 piks. brūkšninis #aaa; kraštinė kairėje: 7 tšk. vientisas #aaa; kraštinė kairėje: 7 piks. vientisas rgba(0,0,0,.2); paraštė: 0–15 piks. 15 piks. -22 piks.; užpildymas: 5 piks. 15 piks.)

2 antraštė

Šį stilių galima pasiekti naudojant trikampio metodą:

2 antraštė ( kraštinė apačioje: 1 tšk. vientisas #aaa; paraštė: 15 tšk. 0; užpildymas: 5 tšk. 0; padėtis: santykinis; ) .headline2:prieš, .headline2:after( turinys: ""; kraštinė dešinėje: 20 tšk. vientisa #fff; kraštinė viršuje: 15 pikselių vientisa #aaa padėtis: absoliuti kairioji: 25 piks.

3 antraštė

Tačiau šis juostelės efektas taip pat gali būti naudojamas kuriant pavadinimą:

3 antraštė (pozicija: santykinė; paraštės kairėje: -22 tšk.; /* 15 tšk. užpildymas + 7 tšk. kraštinės juostelės šešėlis*/ paraštės dešinėje: -22 tšk.; užpildymas: 15 tšk.; fonas: #e5e5e5; fonas: -moz-linear-gradient(# f5f5f5, #e5e5e5 fonas: -webkit-gradient(linijinis, kairėn viršuje, kairėje apačioje, nuo(#f5f5f5), to(#e5e5e5)); fonas: -o-linear-gradient(#f5f5f5, #e5e5e5): -ms-linear-gradient(#f5f5f5, #e5e5e5): linear-gradient(#f5f5f5, #e5e5e5); 0 rgba(255,255,255,.8) inset; : 0 1px 0 #fff; ) .headline3:fore, .headline3:after( padėtis: absoliuti; kairėje: 0; apačioje: -6 piks. vientisas skaidrus; .headline3:befor( border-top: 6px solid #555; border-dešinė: 6px solid skaidrus; border-left: none; left: auto; right: 0; apačia: -6px; )

Taip pat galite sukurti puikų pavadinimą naudodami langelio šešėlio ypatybę:

4 antraštė (pozicija: santykinė; kraštinės spalva: #eee; kraštinės stilius: vientisas; kraštinės plotis: 5 tšk. 5 piks. 0; fonas: #fff; paraštė: 0 0 15 piks. -15 piks.; užpildymas: 5 piks. 15 piks.; -moz-box -šešėlis: 1px 1px rgba(0,0,0,3); ) ,0,0,.3); .headline4:after ( turinys: ""; padėtis: absoliutus; z indeksas: -1; apačioje: 15 pikselių; dešinėje: 15 pikselių; plotis: 70 %; aukštis: 10 pikselių; fonas : rgba(0, 0, 0, .7); , 0, .7 box-shadow: 0 15px 10px rgba(0, 0, 0, .7) - pasukti(2deg); -ms-transform: pasukti(2deg);

Visada norite atkreipti dėmesį į svetainės ar tinklaraščio antraštes, norite jas padaryti gražias ir, pageidautina, su efektais (pavyzdžiui, šešėliais, švytėjimu ar 3D). „Adobe Photoshop“ galima padaryti gana gražias antraštes, tačiau pabaigoje tai yra vaizdai, vadinasi, jų teksto negali perskaityti paieškos robotai... Ką daryti? Yra išėjimas!

Iš tiesų, nustatant jūsų tinklalapio atitikimą tam tikroms paieškos užklausoms ir priskiriant jam vietą paieškos rezultatuose, antraštės yra TOLIAI nuo paskutinės vietos. Netgi sakyčiau, kad vienas reikšmingiausių. Palikti juos paveikslėlio pavidalu būtų gana neapgalvota (nors kažkada perdariau vieną svetainę, kurios visas tekstas keliuose puslapiuose buvo paveikslėlis... taip, taip, pasitaiko ir taip...).

Žinoma, galite pamiršti grožį ir padaryti antraštes įprastas, kaip ir visur kitur. Bet kodėl, jei yra gana paprastas būdas, kuris paliks antraštes teksto formatu ir gali suteikti joms labai gražių ir įdomių efektų? Ir šiandien aš jums parodysiu šiuos metodus. Manau, kad kai įvaldysite šias technikas, jas naudosite nuolat. Žodžiu, vienu šūviu nužudysite du paukščius: paverskite savo interneto dizainą įspūdingesnį ir puslapio aktualumas nepadarys jokios žalos.

Pradėkime!

3D antraštės kūrimas

Taigi, kursime efektus tiesiogiai kurdami tinklalapį.

1. Pirmiausia turite sukurti naują html failą, taip pat stiliaus lapo (css) failą.

Norėdamas parodyti, kaip visa tai daroma, sukūriau html failą ir pavadinau jį „title.html“ (jei reikia, galite atsisiųsti visus šios pamokos šaltinio failus ir peržiūrėti juos „šaltinio failuose“). Štai mūsų html failo šaltinio kodas:

Nepavadintas dokumentas

3D tekstas čia

Šešėlio pavadinimas čia

Švyti tekstas čia

Anaglifinis tekstas



Tai yra HTML5 dokumentas, prie jo prijungtas stiliaus lapas (failas css.css), o body tag viduje yra tik keturios skirtingo kalibro antraštės.

Dirbsime su šiomis antraštėmis. Mums html faile nieko daugiau nereikia.

2. Kaip jau sakiau, mums reikia stiliaus lapo failo. Mes jį jau prijungėme, bet jei nesukūrėte, sukurkite.

Sukūriau failą css.css ir įdėjau į tą patį katalogą kaip ir html failą.

Prieš pradėdami kurti 3D antraštę, pridėkime pagrindinio puslapio stiliaus, kad jis atrodytų šiek tiek patrauklesnis.

Nurodykime puslapio aukštį, plotį, spalvą, sucentruosime ir nustatykime punktyrinį korpuso žymos rėmelį.

Taip pat iš karto sulygiuokime visas savo antraštes centre.

Štai kodas, kurį reikia įrašyti į stiliaus lapo failą:

Turinys (aukštis: 700 tšk.; plotis: 90 %; fono spalva: # 069; paraštė: 0 automatinis; kraštinė: 1 piks. brūkšninis # 000066; ) h1, h2, h3, h4 (teksto lygiavimas: centre;)

Naršyklėje paleiskite html failą. Puslapis atrodys taip:

3. Dabar pradėkime transformaciją. H1 antraštę paversime 3D tekstu.

Visa tai įvyks tame pačiame stiliaus lapo faile.

Įdėkite šį kodą po viskuo, ką iki šiol parašėte css.css faile:

H1 (šriftas 0;)

Dabar pažvelkime į šią kodo dalį. Pirmose dviejose eilutėse nustatome šrifto dydį ir pagrindinę spalvą. Bet tada prasideda linksmybės. Naudodami teksto šešėlio savybę, mes tarsi sukuriame šrifto šešėlį, bet ne visai.

Faktas yra tas, kad po dvitaškio šioje savybėje pateikiami šie parametrai: spalva, horizontalus poslinkis, vertikalus poslinkis ir suliejimas.

Ką mes darome?

Pirma: pasirenkame spalvą, artimą pagrindinei, bet tamsesnę. Mūsų pavyzdyje priekinio plano spalva yra balta, o teksto šešėlio spalva yra pilka (bet ne labai tamsi). Čia reikia eksperimentuoti, kol pasieksite norimą rezultatą.

Antra: palaipsniui perkeliame (kiekvieną kartą po 1 pikselį) šį šešėlį į dešinę ir aukštyn. Tai rodo šie 2 parametrai (1px -1px, 2px -2px ir tt).

Trečia: suliejimą visur paliekame iki nulio, nes mums to tiesiog nereikia kuriant 3D tekstą.

Kaip rezultatas, mes gauname šį paveikslėlį:

Šiame pavyzdyje aš pasirinkau 5 pikselių poslinkį, bet jūs galite padaryti daugiau ar mažiau. Viskas priklauso nuo to, kokį rezultatą norite pasiekti.

Taip pat būtinai eksperimentuokite su spalvomis, stengdamiesi sukurti natūralesnį vaizdą.

Sukurkite antraštę su šešėliu

Sukurti antraštę su šešėliu labai paprasta. Ir mes tai pasieksime tik keliomis kodo eilutėmis.

Dabar dirbsime su h2 antrašte.

Pirmiausia turite nustatyti jo dydį ir pagrindinę spalvą (aš nustatiau lygiai tokį patį dydį kaip ir h1 antraštės, bet jūs, žinoma, kuriate kiekvieną antraštę taip, kaip jums reikia).

Kai nustatysime spalvą ir dydį, vėl naudosime teksto šešėlio savybę. Pirmasis parametras yra nurodyti spalvą, kuri turi būti tamsesnė (juk tai šešėlis); Antrasis ir trečiasis parametrai yra horizontalūs ir vertikalūs poslinkiai. Mano tekstas yra didelis, todėl padarysiu juos 5 pikseliais. Ir paskutinis parametras yra suliejimo spindulys. Šešėliui to reikia, todėl jam priskiriame 4 pikselių reikšmę. Dėl to kodas atrodys taip:

H2 (šrifto dydis: 72 piks.; spalva: # F90; teksto šešėlis: # 191919 5 piks. 5 piks. 4 piks.; )

Ir tai atrodys taip:

Galite eksperimentuoti su parametrais ir vis tiek gauti skirtingus rezultatus. Apsvarstykite savo teksto šrifto dydį, spalvą ir tai, ką norite pasiekti.

Sukurkite antraštę su švytėjimu

Tai taip pat paprasta. Čia dirbsime su h3 antrašte.

Principas tas pats: pirmiausia nustatome šrifto dydį ir pagrindinę spalvą, o tada naudojame teksto šešėlį.

Pasirinkite švytėjimo spalvą. Kaip suprantate, ji bus šviesesnė nei pagrindinė pavadinimo spalva. Antrasis ir trečiasis parametrai bus lygūs nuliui (čia mes nieko niekur neperkelsime). Tačiau suliejimo spindulys turi būti didesnis (jo dydis taip pat priklauso nuo to, kokį švytėjimą norite gauti).

Dėl to kodas bus toks:

H3 (šrifto dydis: 72 piks.; spalva: # 333; teksto šešėlis: #fff 0 0 20 piks.; )

O mūsų pavadinimas su švytėjimu atrodys taip:

Antraštė su stereo efektu

Jis taip pat gali būti vadinamas anaglifiniu tekstu. Jį galima palyginti su akiniais, skirtais žiūrėti 3D filmą.

Aš tavęs nekankinsiu... Kaip sakoma: geriau vieną kartą pamatyti, nei klausytis ilgo aprašymo.

Efektas labai įdomus ir iš principo jį sukurti nesunku.

Pradėkime. Čia dirbsime su h4 antrašte.

1. Pirmiausia nustatykime antraštės dydį. Padarysiu ją tokią pat, kaip ir likusias mūsų pavyzdžio antraštes.

Dabar turime nustatyti antraštės elementą. Padėties ypatybę nustatykime į santykinę. Tai reiškia, kad elemento padėtis bus nustatyta, palyginti su pradine vieta.

Dabar suteiksime jam spalvą. Mes tai padarysime rgba formatu. Jei dar nesusidūrėte su šiuo spalvos apibrėžimu, nesijaudinkite. Tai paprasta: pirmieji trys parametrai skliausteliuose nustatys spalvą (rgb formatą), o paskutinis parametras – jo neskaidrumo laipsnį. Mūsų pavyzdyje ši vertė bus 0,5 (ty 50%).

Čia yra visų aukščiau išvardytų dalykų kodas:

H4 (šrifto dydis: 72 pikseliai; padėtis: santykinė; spalva: rgba (0,0,102,0,5); )

2. Dabar ateina linksmoji dalis. Sukursime pseudo elementą savo h4 elementui. Norėdami tai padaryti, turėsite jį užregistruoti stiliaus lape kaip h4: po.

Šis pseudo elementas turės keletą įdomių savybių. Pavyzdžiui, nuosavybė turinys, kuriame reikia parašyti lygiai tokį patį tekstą kaip ir h4 antraštėje.

Pseudo elementas turi būti išdėstytas absoliučiai (pozicija:absoliutus).

Turi būti nustatyta priešinga h4 elemento spalva. Tai yra, jei h4 yra mėlynos spalvos, tada pseudo elementas bus raudonos spalvos. Ir neskaidrumas vis dar yra 50%.

Be to, mes pakoreguosime pseudo elemento padėtį naudodami kairiąsias ir viršutines savybes. Turime įsitikinti, kad pseudo elementas, savo turinyje dubliuojantis elementą h4, yra šiek tiek dešinėje ir apačioje (dabar viską pamatysite patys). Čia nustatymai bus individualūs ir priklausys nuo šrifto dydžio, šrifto tipo ir norimo efekto.

Štai visų aukščiau išvardytų dalykų kodas:

H4:after( turinys:"anaglifinis tekstas"; padėtis: absoliutus; kairėje: 361 piks.; viršuje: 2 piks.; spalva: rgba(255,0,0,0,5); )

Ir štai efektas, ką gauname:

Tai viskas, ko norėjau jus išmokyti šioje pamokoje.

Būtinai naudokite šią techniką! Pirma: Graži, Antra: visas antraštes puikiai skaito paieškos robotai, Trečia: Kai parašysite kodą, galite naudoti pavadinimą bet kuriame savo svetainės ar tinklaraščio tinklalapyje, tiesiog nurodydami jį HTML kode.

Jei jums patiko ši pamoka, Parašyk savo komentarą(jei nepatiko irgi :)). Tai bus vertinama kaip dėkingumas.

Taip pat galite pasidalinti pamoka su draugais naudodami socialinių tinklų mygtukus.

Ir, žinoma, užsiprenumeruokite tinklaraščio atnaujinimus (jei dar to nepadarėte). Pažadu daug naudingų ir įdomių dalykų!

Geros nuotaikos ir iki pasimatymo!

Šio straipsnio tikslas – apsvarstyti įvairias h1, h2 antraščių stiliaus parinktis. Žyma H1 yra svarbi žyma puslapio turinyje. Paprastai jame yra teminis puslapio pavadinimas. Žyma H1 turėtų išsiskirti, kad vartotojas galėtų lengvai suprasti, apie ką yra jūsų svetainės puslapis. Todėl ši žyma turėtų būti jūsų puslapio akcentas. H1 žymos CSS stilius gali būti paprastas, tačiau svarbiausia yra įsitikinti, kad šrifto dydis yra didžiausias tarp kitų puslapyje. Ir ne tik todėl, kad jis patraukia vartotoją, bet ir turi įtakos puslapio aktualumui, taigi ir optimizavimui.

Žyma H2 yra papildoma žyma ir gali būti semantinis H1 poskyris. Taip pat apsvarstysime jo stiliaus variantus.

Žemiau pateikiami h1, h2 antraščių CSS stiliaus pavyzdžiai ir metodai.

Stiliaus metodaih1,h2 antraštės

PavyzdžiaiCSSH1,H2

Stiliaus metodaih1,h2 antraštės

Kurdami sklaidos kanalą apsvarstysime būdus, kaip formuoti h1, h2 žymas. Pažvelkime į dvi antraštės juostelės formos įgyvendinimo variantus: Vakarų ir mano versija. Iš anksto pasakysiu, kad mano metodas turi pirmenybę, bet jei turite savo variantų (metodų) antraštėms formuoti, būčiau dėkingas, jei pasidalintumėte jais komentaruose.

Vakarų būdas

Tai geras pasirinkimas, bet man nelabai patinka CSS būdas įdiegti tiekimą. Radau šį metodą, kaip sukurti css h1 juostelę vienoje iš Vakarų svetainių. Šis kanalas įdiegtas naudojant gryną CSS kodą, nors nukentėjo kelių naršyklių suderinamumas (IE atrodo kaip paprastas blokas). Žemiau yra stiliaus css šaltinio kodas.

H1.juostos ( šrifto dydis: 16 pikselių !svarbu; padėtis: santykinė; fonas: #ba89b6; spalva: #fff; teksto lygiavimas: centre; užpildymas: 1 em 2 em; paraštė: 0 0 3 em; ) h1.ribbon:before, h1.ribbon:after ( turinys: ""; padėtis: absoliutus; ekranas: blokas; apačia: -1 em; kraštinė: 1,5 em vientisas #986794; z indeksas: -1; ) h1.ribbon:before ( kairėje: -2 em ; kraštinė-dešinė-plotis: 1,5 em. kraštinė-kairė-spalva: permatoma; juostelė .juostos turinys:prieš, h1.juosta .juostos turinys:po ( turinys: ""; padėtis: absoliutus; ekranas: blokas; kraštinės stilius: vientisas; kraštinės spalva: #804f7c skaidrus skaidrus skaidrus; apačia: - 1em; ) h1.juostelė .juostos turinys:prieš (kairėje: 0; kraštinės plotis: 1em 0 0 1em; ) h1.juostelė .juostos turinys:after (dešinėje: 0; kraštinės plotis: 1em 1em 0 0; )

HTML kode h1 juostelė atrodo taip:

Svetainės h1, h2 antraščių CSS stilius

Mano būdas

Kaip matote, CSS kodu sudėtinga formuoti tik h1 žymą. Todėl siūlau savo būdą sukurti tokią juostą. Suderinamumas tarp naršyklių buvo išbandytas naudojant IE, FireFox, Opera, Chrome. Žemiau yra css kodas ir visi šaltinio failai.

H1 (aukštis: 67 piks.; fonas: url (ribbon_left.png) kairėje viršuje, nesikartoja; spalva: #FFF;) h1 stiprus (aukštis: 67 piks.; ekranas: blokas; didžiausias plotis: 450 piks.; paraštė kairėje: 56 piks.; užpildymas -dešinė:56px; fonas: url(ribbon_right.png) dešinėje viršuje nekartojimas;)

Kaip jį naudoti HTML:

Svetainės CSS H1 antraštė

Vaizdai:

Bendras vaizdų svoris yra 750 baitų. CSS kodas užima ne daugiau kaip dvi eilutes ir sveria 236 baitus. Esu patenkintas rezultatu, viskas paprasta ir aišku, skirtingai nei Vakarų metodas, kai CSS kodo svoris yra 980 baitų. Nors mano ir vakarietiška versija yra vienodo svorio, suprasti kodą yra daug blogiau nei apdoroti vaizdą Photoshop. Galima daryti prielaidą, kad vieno css failo įkėlimo greitis yra greitesnis nei trijų failų (visiškai identiškas vieno css failo svoriui), tačiau foną galite įdiegti sprite pavidalu, o tai padidins svetainės įkėlimo greitį. . Sužinokite, kaip padidinti greitį naudojant CSS sprites.

CSS H1, H2 pavyzdžiai

Visi pavyzdžiai bus įgyvendinti remiantis antraštės stilizavimo principu, naudojant mano metodą (pavyzdys, svetainė).

H1 antraštės CSS stilius

Šioje pastraipoje mes sutelksime dėmesį į tikrus h1 antraštės stiliaus kūrimo pavyzdžius. Pavyzdžiai, garsiai pasakyta, nes kiekviena svetainė turi unikalų dizainą. Leiskite pateikti jums vieną universalų H1 stiliaus pavyzdį. Jūs jau suprantate mano idėją stilizuoti antraštes, noriu ją papildyti fono vaizde naudodamas skaidrumą, o tai lengvai galima padaryti naudojant „Photoshop“. Žiūrėkite pavyzdį žemiau.

Antraštė ( plotis: 500 tšk.; fonas: # 888;) h1 (aukštis: 70 tšk.; fonas: url (left.png) kairėje viršuje nesikartoja; spalva: #FFF; linijos aukštis: 50 pikselių;) h1 stiprus (aukštis: 70 piks. ;

Šaltinio nuotraukos:

Antraštės h1 tekstas

Kaip matote, originalūs vaizdai yra peršviečiami, o antraštės klasėje, pakeisdami fono reikšmę, galite pasiekti šiuos rezultatus:

CSS h1 + h2 (bendradarbiaujantis stilius)

H1 ir h2 stilių derinti kartu tinka, jei turite epilogą arba nedidelę įvadą į savo svetainėje esantį straipsnį, kurį galima įdėti į h2 žymą. Pavyzdžiui:

H1– H1, h2 antraščių stilius;

H2– Mokymasis kurti h1, h2 antraštes naudojant css.

Tai yra mano pavyzdys, greičiausiai jūs turite savo idėją, kaip sukurti svetainės puslapius. CSS h1 + h2 pavyzdys yra panašus į ankstesnį, pažvelkime į css kodą.

Kairėn (aukštis: 100 tšk.; fonas: url (left.png) kairėje viršuje nesikartoja;) .right (plotis: 500 piks.; aukštis: 100 piks.; ekranas: blokas; paraštė kairėje: 45 piks.; užpildymas: 0 piks. 45 piks. 0 piks. 0 piks.; fonas : url(right.png) dešinėn viršuje be kartojimo;) h1 (spalva: #FFF; šrifto dydis: 18 pikselių; užpildymas: 15 pikselių;) h2 (spalva: # CCC; šrifto dydis: 16 pikselių; užpildymas: 5 pikseliai;)

Šaltinio nuotraukos:

Antraštės H1 tekstas

Nedidelė įžanga arba straipsnio aprašymas, įtrauktas į H2 žymą.

Ekranas:

Antraštių jungtinio (h1 + h2) stiliaus esmė panaši į ankstesnį pavyzdį, tik šiuo atveju naudojami div blokai.

H2 antraštės CSS stilius

H2 antraštės stiliaus nustatymas nėra sudėtingas. Tačiau kadangi mūsų straipsnis susijęs su h1 ir h2 antraščių stiliumi, viską apsvarstysime iki galo.

Paprastai žyma h2 naudojama norint paryškinti straipsnio ar kitos medžiagos pastraipas svetainėje. Patarčiau sukurti kuklias, diskretiškas, bet patogias h2 antraštes. Man labai patinka idėja, kaip sutvarkyta Vikipedija. Patariu sukurti kažką panašaus. Tai paprasta ir patogu. Pavyzdžiui:

H2 antraštės stiliaus pavyzdys

Lorem ipsum dolor sit amet, consectetuer adipiscing elitas. Ut pretium Mauris, niekur kitur arcu. Sveikasis skaičius ir leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat, niekur kitur nepriskirtas, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Kitas jūsų straipsnio poskyris

Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilis cursus mi ligula vitae nunc. Curabitur libero. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

Ekranas:


Paprasta, patogi ir įvairi naršyklė.

Tikiuosi, kad mano straipsnis jums padėjo. Jei turite klausimų ar pasiūlymų dėl h1, h2 antraščių CSS stiliaus, rašykite komentaruose.

Tekstinės informacijos internete dizainas turi savo specifinių ypatybių. Jei svetainėje skelbiate tam tikrą turinį, tada, kaip taisyklė, jis turėtų būti gerai struktūrizuotas - tam naudojamos antraštės. Jų pagalba tekstai daromi kuo lengviau skaitomi ir suprantami.

Keletas punktų prieš pradedant:

  • Visi šriftų pavyzdžiai yra nemokami ir pasiekiami „Google WebFonts“.
  • Pavyzdžiuose yra tik antraštės H1-H4, nes jos yra dažniausiai naudojamos.
  • CSS stilių autorius naudojo modelį, kuriame [width] = [faktas elemento plotis] + [padding] + [borders]. Norėdami tai padaryti, kode yra fragmentas:
*, *: po , *: prieš ( dėžutės dydis : rėmelis-dėžutė ; )

*, *:po, *:prieš (dėžutės dydis: bortelis; )

Galiausiai įžangoje minima „vertikalaus ritmo“ sąvoka. Jis iš tikrųjų nustato visą užpildymą tarp puslapio blokų – ar tai būtų antraštės, teksto pastraipos, vaizdai ar net tik svetainės šablono elementai. Tai ypač aktualu naudojant neįprastus. Taigi, visi CSS stilių pavyzdžiai naudoja tą patį „ritmą“:

h1 (šrifto dydis: 36 pikseliai; eilutės aukštis: 40 pikselių;) h2 (šrifto dydis: 30 pikselių; eilutės aukštis: 40 pikselių;) h3 (šrifto dydis: 24 pikseliai; eilutės aukštis: 40 pikselių;) h4 (šrifto dydis : 18 pikselių ; linijos aukštis : 20 pikselių )

h1 ( šrifto dydis: 36 piks.; eilutės aukštis: 40 piks.; ) h2 ( šrifto dydis: 30 piks.; eilutės aukštis: 40 piks.; ) h3 ( šrifto dydis: 24 piks.; eilutės aukštis: 40 piks.; ) h4 ( šrifto dydis : 18px; linijos aukštis: 20px;

Dabar galite pereiti tiesiai į praktiką.

1 pavyzdys

Pradėkime nuo daugiau ar mažiau paprasto varianto. Tipografija puikiai tinka žiniasklaidos svetainei, galbūt net laikraščiui. Šis sprendimas nesiūlo jokių ypatingų funkcijų, išskyrus tai, kad jame naudojami 2 šriftai – Ultra (sans-serif), Orienta (sans-serif). Galutinis CSS kodas:

.demo-1 .main h1 ( paraštė : 1em 0 0.5em 0; spalva : #343434 ; šrifto svoris : normalus ; šriftų šeima : "Ultra" , sans-serif ; šrifto dydis : 36 pikseliai ; linijos aukštis : 42 pikseliai teksto transformavimas: didžiosios raidės ; teksto šešėlis : 0 2px #777 .demo-1 .main h2 ( margin : 1em 0 0.5em 0 ; color : #343434 ; font-weight : normal ; dydis: 30px; eilutės aukštis: 40px; šriftų šeima: "Orienta", sans-serif. - aukštis: 40 pikselių šrifto svoris: "Orienta", šrifto stilius: kursyvas ( paraštė: 1 em 0 0,5 em ; spalva : # 343434 ; ;

Demo-1 .main h1 ( paraštė: 1em 0 0.5em 0; spalva: #343434; šrifto svoris: normalus; šriftų šeima: "Ultra", sans-serif; šrifto dydis: 36 pikseliai; eilutės aukštis: 42 pikseliai; teksto transformavimas: didžiosios raidės : 30 tšk. eilutės aukštis: 40 pikselių šriftų šeima: "Orienta", sans-serif . aukštis: 40px; šriftų šeima: „Orienta“: 1px; -šeima: "Orienta", sans-serif)

2 pavyzdys

Čia yra šiek tiek įdomesnis įgyvendinimas - pavadinimo fonas pridedamas vientiso užpildo ir paveikslėlio pavidalu. CSS kodas parašytas gana teisingai, įtraukos nurodytos procentais, kad sumažinus paveikslėlį pavadinimo tekstas nesusilietų su fono paveikslėliu. Naudojami šriftai: Titillium Web (sans-serif), Muli (sans-serif).

.demo-2 .main h1 ( paraštė : 1em 0 0.5em 0 ; šrifto svoris : 600 ; šriftų šeima : "Titillium Web" , sans-serif ; padėtis : santykinė ; šrifto dydis : 36 pikseliai ; eilutės aukštis : 40 pikselių ; padding : 15px 15px 15% : #355681 box-shadow : inset 0 0 0 1px rgba (53 , 86 , 129 , 0.4 ) , inset 0 0, 5 , 5 ; 285 pikseliai 0 35px baltas ; kraštinis spindulys : 0 10px 0 10px ; šrifto svoris: normalus ; border-radius: 0 10px 0 10px) : "Muli" , be serif ) .demo-2 .main h3 ( paraštė : 1em 0 0.5em 0 ; šrifto svoris : 600 ; šriftų šeima : "Titillium Web" , sans-serif ; padėtis : santykinė ; teksto šešėlis : 0 -1px 1px rgba ( 0, 0, 0, 0,4 šrifto dydis: 22 pikselių spalva: 1px solid rgba (53, 86, 129, 0,3) .demo-2 .main h4 ( paraštė : 1em 0 0.5em); ; be serifo)

Demo-2 .main h1 ( paraštė: 1em 0 0.5em 0; šrifto svoris: 600; šriftų šeima: "Titillium Web", sans-serif; padėtis: santykinė; šrifto dydis: 36 pikseliai; eilutės aukštis: 40 pikselių; padding: 15px 15px 15% spalva: #355681 box-shadow: inset 0 0 0 1px rgba(53,86,129, 0.4), inset 0 5px rgba(53,86,129,px, white) ; kraštinės spindulys: 0 10 piks. ; -spindulys: 0 10px 0 10px; įdėklas 600 šriftų šeima: "Titillium Web", sans-seifas: 0 -1px 1px rgba (0,0,0,0,4); linijos aukštis: 40 pikselių; spalva: #355681; teksto transformavimas: didžiosios raidės; kraštinė-apačia: 1px solid rgba(53,86,129, 0,3); ) .demo-2 .main h4 ( paraštė: 1em 0 0.5em 0; šrifto svoris: 600; šriftų šeima: „Titillium Web“, be serifo; padėtis: santykinė; šrifto dydis: 18 pikselių; eilutės aukštis: 20px spalva: #788699: "Muli", be serif)

3 pavyzdys

Dabar tamsaus dizaino svetainės antraščių diegimo pavyzdys. Tam buvo parinkta gana ryški, kontrastinga mėlyna spalva, kontrastinga tamsiai pilkam fonui. Naudojami Hammersmith One (sans-serif), Questrial (sans-serif) šriftai.

.demo-3 .main h2: after , .demo-3 .main h3: after , .demo-3 .main h4: after ( padėtis : absoliutus ; turinys : "" ; kairėje : 0 ; viršuje : 0 ; apačioje : 0 plotis : 5px : 2px 1px rgba ( 0 , 0 , 0 , 0.5 ) , 0 1px 1px rgba ( 255 , 255 , 0.3 h ) ; demonstracinė versija paraštė : 1 em 0 , 0 šriftų šeima : "Hammersmith One" , teksto šešėlis : 0 - 1px , 0,4 ; ; padėtis: santykinė; spalva: #6Cf .demo-3.main " , sans-serif ; teksto šešėlis: 0 -1px 0 rgba (0, 0, 0, 0,4); padėtis: santykinė; šrifto dydis: 30 pikselių; linijos aukštis: 40 pikselių; ) .demo-3 .main h3 ( paraštė : 1em 0 .6em 0 ; užpildymas : 0 0 0 20 pikselių ; šrifto svoris : normalus ; spalva : balta ; šriftų šeima : "Hammersmith One" , sans-serif ; teksto šešėlis : 0 -1px 0 rgba (0, 0, 0.4) : santykinis šrifto dydis: "Questrial", be serif) (paraštė: 0,6em; 0 0 0 20px : normalus : "Hammersmith One" , sans-shadow : 0 -1px 0 rgba (0 , 0 , 0.4 ); šrifto dydis: 18 pikselių; eilutės aukštis: 20 pikselių;

Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( pozicija: absoliuti; turinys: ""; kairėje: 0; viršuje: 0; apačioje: 0; plotis: 5px; box-shadow: inset 0 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3) .demo-; pagrindinis h3:after ( fonas: #3BF; ) .demo-3 .main h4:after ( fonas: #6Cf; ) .demo-3 .main h1 ( šrifto dydis: 36px; eilutės aukštis: 40px; paraštė: 1em 0 .6em 0 spalva: "Hammersmith One", sans-serif: 0 -1px 0 rgba(0 ,0,0,0.4) .demo-; 3 .pagrindinis h2 (paraštė: 1 em 0 .6 em 0; užpildas: 0 0 0 20 pikselių; šrifto svoris: normalus; spalva: balta ; šriftų šeima: "Hammersmith One", be serifo: 0 -1 piks. 0 rgba(0 ,0,0,0,4 šrifto dydis: 30 pikselių .demo-3 .main h3 ( paraštė: 1 em 0 .6 em 0; užpildas: 0 0 0 20 pikselių; šrifto svoris: įprastas; spalva: baltas; šriftų šeima : "Hammersmith One", be serifo; teksto šešėlis: 0 -1px 0 rgba(0,0,0,0,4); padėtis: santykinė; šrifto dydis: 24 pikseliai; linijos aukštis: 40 pikselių; šriftų šeima: „Questrial“, be serifo; ) .demo-3 .main h4 ( paraštė: 1em 0 .6em 0; užpildymas: 0 0 0 20 tšk.; šrifto svoris: normalus; spalva: balta; šriftų šeima: „Hammersmith One“, be serifo; teksto šešėlis : 0 -1px 0 rgba(0,0,0,0.4: santykinis šrifto dydis: 18px);

4 pavyzdys

Eksperimentuokime su fonu – kaipgi pridėti medinės tekstūros. Šriftai Scada (sans-serif), Carrois Gothic (sans-serif) ir H2 lankstinukas taip pat įgyvendinami naudojant šriftą, o ne vaizdą.

.demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i (padding-right: 10px; spalva: #A8D13B; šrifto dydis : 0.8em ; ) .demo-4 .main h2: after , .demo-4 .main h3: after , .demo-4 .main h4: after ( padėtis : absoliutus ; turinys : "" ; aukštis : 1px ; border- spindulys : 2px ; kairysis : 0 -1px 0 rgba ( 0 , 0 , 0 , 0,1 ) , 0 1px 0 rgba ( 255 , 255 , 255 , 0,6 h : 0 ; % ; ) .demo-4 .pagrindinis h3 : po to { plotis: 75% ; } .demo-4 .pagrindinis h4 : po to { plotis: 50% ; } .demo-4 .pagrindinis h1 { marža: 1 em 0 0,75 em; kamšalas: 0 0 5 piks 0 ; spalva: #6B5344; šrifto svoris: normalus; padėtis: giminaitis; tekstas-šešėlis: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; šrifto dydis: 36 pikseliai; linijos aukštis: 40 piks; šrifto šeima: „Carrois Gothic“, be serifo; } .demo-4 .pagrindinis h2 { marža: 1 em 0 0,75 em; kamšalas: 0 0 5 piks 0 ; spalva: #6B5344; šrifto svoris: normalus; šrifto šeima: "Scada", be serifo; padėtis: giminaitis; tekstas-šešėlis: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; šrifto dydis: 30 piks; linijos aukštis: 40 piks; } .demo-4 .pagrindinis h3 { marža: 1 em 0 0,75 em; kamšalas: 0 0 5 piks 0 ; spalva: #6B5344; šrifto svoris: normalus; šrifto šeima: "Scada", be serifo; padėtis: giminaitis; tekstas-šešėlis: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; šrifto dydis: 24px; linijos aukštis: 40 piks; } .demo-4 .pagrindinis h4 { marža: 1 em 0 0,75 em; kamšalas: 0 0 5 piks 0 ; spalva: #6B5344; šrifto svoris: normalus; šrifto šeima: "Scada", be serifo; padėtis: giminaitis; tekstas-šešėlis: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; šrifto dydis: 18 pikselių; linijos aukštis: 20 piks; }

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( užpildymas dešinėje: 10 pikselių; spalva: #A8D13B; šrifto dydis: 0.8em; ) .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( padėtis: absoliutus; turinys: ""; aukštis: 1px; kraštinės spindulys : 2px kairėje: 0 4 .pagrindinis h3:after ( plotis: 75%; ) .demo-4 .pagrindinis h4:after ( plotis: 50%; ) .demo-4 .pagrindinis h1 ( paraštė: 1em 0 0.75em; padding: 0 5px 0; spalva: #6B5344 0 5px 0; šrifto svoris: normalus: „Scada“, sans ; eilutės aukštis: 40 pikselių: 1 em 0 0,75 em; pamušalas: 0 0 5 tšk. 0; spalva: #6B5344; šrifto svoris: normalus; šriftų šeima: "Scada", sans-serif; padėtis: santykinė; teksto šešėlis: 0 2px 0 rgba(255,255,255,0,5); šrifto dydis: 24 pikseliai; eilutės aukštis: 40 pikselių; ) .demo-4 .main h4 ( paraštė: 1em 0 0,75 em; užpildymas: 0 0 5px 0; spalva: #6B5344; šrifto svoris: normalus; šriftų šeima: "Scada", sans-serif; padėtis: santykinė; teksto šešėlis: 0 2px 0 rgba(255,255,255,0,5) šrifto dydis: 18px;

5 pavyzdys

Dar viena įdomi ir neįprasta spalvų schema – galbūt ji pastūmės jus į kai kurias jūsų pačių idėjas ir įgyvendinimus. Antraštės iš esmės ne visada gali turėti paryškintą, didelį šriftą – tokių variantų yra.

.demo-6 .pagrindinis h1 { marža: 1 em 0 0,5 em 0 ; šrifto svoris: 100 ; teksto transformacija: didžiosiomis raidėmis; spalva: #00caa6; Šrifto stilius: kursyvu; šrifto šeima: Josephine Sans, be serifo; šrifto dydis: 58 pikseliai; linijos aukštis: 54 pikseliai; tekstas-šešėlis: 2px 5 piks 0 rgba(0 , 0 , 0 , 0.2 ) ; } .demo-6 .pagrindinis h2 { marža: 1 em 0 0,5 em 0 ; spalva: #148773 ; šrifto dydis: 26 pikseliai; linijos aukštis: 40 piks; šrifto svoris: drąsus; šrifto šeima: Josephine Sans, be serifo; } .demo-6 .pagrindinis h3 { marža: 1 em 0 0,5 em 0 ; spalva: #343434 ; šrifto dydis: 22px; linijos aukštis: 40 piks; šrifto svoris: 100 ; teksto transformacija: didžiosiomis raidėmis; šrifto šeima: Josephine Sans, be serifo; tarpai tarp raidžių: 1px; Šrifto stilius: kursyvu; } .demo-6 .pagrindinis h4 { marža: 1 em 0 0,5 em 0 ; spalva: #343434 ; šrifto dydis: 18 pikselių; linijos aukštis: 20 piks; šrifto svoris: drąsus; šrifto šeima: Josephine Sans, be serifo; }

demonstracinė versija šrifto dydis: 58px; teksto šešėlis: 2px 5px 0 rgba(0,0,0,0,2) (margina: 1em 0,5em 0; #148773); šrifto dydis: 26 pikselių; eilutės aukštis: 40 pikselių. 40 pikselių teksto transformacija: "Josefin Sans", be serif: 1px - stilius: kursyvas ) .demo-6 .main h4 ( paraštė: 1em 0 0.5em 0; spalva: #343434; šrifto dydis: 18px; eilutės aukštis: 20 pikselių šrifto storis: „Josefin Sans“;

Jei beveik gerai išmanote CSS, tada pradiniame straipsnyje aprašoma, kaip stiliuose naudoti tam tikrus išankstinius procesorius, siekiant sumažinti kodo kiekį ir padaryti jį paprastesnį. Tiesą sakant, tai yra pirmas kartas, kai matau funkcijų naudojimą ir parametrų pakeitimą CSS stiliaus faile, tačiau kodas pasirodė labai vaizdingas. Taip pat, žinoma, originaliame straipsnyje rasite nuorodas į šaltinius ir visų parinkčių demonstracines versijas.

P.S. T Tiems, kurie dirba internete ar tik pradeda, straipsnis apie tai, kas yra TIC, padės naršyti po vieną aktualiausių ir labiausiai aptarinėjamų sąvokų internete.



 

Gali būti naudinga perskaityti: