Galvenes dizains. Kā nosaukuma tekstam pievienot fona krāsu? Galvenes h1 teksts

No autora: Laipni lūdzam mūsu emuārā par vietņu veidošanu. Jebkurā vietnē ir kaut kas, kas parasti padara to neaizmirstamu un izceļas uz pārējo fona. Parasti šī ir vietnes galvene. CSS ļauj jums izveidot to, kā vēlaties.

Vietnes galvene – kāda tā ir

Tas ir pārsteidzoši, cik daudz mūsdienās var būt atkarīgs tikai no tīmekļa resursa dizaina. Bet kas īpaši atšķir tīmekļa resursu no citiem? Parasti šī ir vietnes galvene ar korporatīvo logotipu un unikālu dizainu. Parasti šādi cilvēki atceras kādu interneta projektu. Tas ļoti labi palicis cilvēku atmiņā.

Piemēram, ja uz zila fona redzat baltu burtu “B”, jūs, iespējams, uzreiz secināt, ka šī ir sociālā tīkla VKontakte ikona. Un pasta baloža tēls visiem uzreiz asociējas ar Twitter. Tas viss kļuva iespējams, jo šo vietņu galvenēs bija tieši šādi attēli un cilvēki tos ļoti labi atcerējās.

Labi, tas bija mazliet pārdomāts, tagad ķersimies pie tehniskās daļas.

Kā izveidot vietnes galveni CSS?

Kopumā cepures ir dažādas. Pamatojoties uz to platumu, tos var iedalīt divās grupās: tajās, kas ir līdzinātas centrā, un tajās, kas aptver visu tīmekļa lapas platumu.

Iepriekš galvene tika veidota tāpat kā jebkurš cits bloks - parastajam div tagam tika piešķirts nepieciešamais identifikators, pēc kura viss nepieciešamais saturs tika tajā ievietots, un pēc tam tas viss tika formatēts. Mūsdienās jau ir pieņemts rakstīt citādā veidā. Īpaši vietnes galvenes izveidei HTML5 ir parādījies pāra tags - galvene. Tā lietošana ir ieteicama, tā ļauj pārlūkprogrammām saprast, kas ir šī veidnes daļa un ko tā dara. Starp citu, ja vēlaties apgūt HTML5 pamatus, tad jums ir tiešs ceļš uz mūsējo, kur varat skatīties šīs tehnoloģijas nodarbības.

Tāpēc, lai izveidotu vienkāršu galveni, vienkārši ierakstiet šādu kodu html:

< header > < / header >

Lapā, protams, vēl nekas neparādīsies – mums vēl ir jāpievieno saturs un jāizveido. Bet, piemēram, izveidosim bloku, kas aptver visu ekrāna platumu, un arī nedaudz izrotāsim to.

galvene (platums: 100%; fons: #D8E3AB; augstums: 70 pikseļi; )

galvene (

platums: 100%;

fons : #D8E3AB;

augstums: 70 pikseļi;

Kopumā, ja viss ir izdarīts pareizi, tad blokam ir jāpiešķir kāda veida klase vai pat identifikators (jo tas ir svarīgs tīmekļa lapas elements), bet pagaidām mēs vienkārši atsauksimies uz elementu pēc taga.

Platums: 100% nodrošina to, ka mūsu bloks izstiepsies visā platumā neatkarīgi no ekrāna izmēra. Ja tomēr izmēri ir kaut kā jāierobežo, izmantojiet papildu rekvizītu max-width, kur pikseļos tiek ierakstīts absolūtais izmērs, kuru sasniedzot konteiners vairs neizplešas.

Tagad mums priekšā ir tikai sloksne, kas nokrāsota izvēlētajā krāsā. Parasti augstums netiek norādīts - tas tiek noteikts automātiski, pamatojoties uz elementiem, kas būs galvenē.

< div id = "wrap" >

< header > < / header >

< / div >

Tādā veidā mūsu vietnes augšdaļa atradīsies tieši centrā. Atliek tikai to aizpildīt.

Rīsi. 1. Pagaidām šis ir tikai konteiners, kurā būs viss saturs.

Kas parasti ir ietverts cepurē?

Parasti tur tiek ievietots vietnes logotips, nosaukums un apraksts. Var būt arī kāda kontaktinformācija, lapas navigācija vai pat reklāma.

Logotips parasti tiek ievietots kā fona attēls. Piemēram, ievietosim šo:

Lai to izdarītu, fonā pievienojiet dažus noteikumus:

fons: #D8E3AB url(logo.png) bez atkārtošanas 5% 50%;

Tas ir, papildus vienkrāsainajai krāsai mēs piešķiram arī fona attēlu (mūsu gadījumā logo.png), un vispirms es to ievietoju tajā pašā mapē, kurā atrodas stila fails. Mēs aizliedzam logotipa atkārtošanos un nosakām tā pozīciju blokā - nedaudz pabīdiet to pa kreisi un vertikāli centrā.

Pievienosim galvenei saturu. Piemēram, galvene un izvēlne.

Vietnes nosaukums

< div class = "title" >Vietnes nosaukums< / div >

< ul class = "menu" >

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

< li > < a href = "#" >Par mums< / a > < / li >

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

< / ul >

Tagad to visu formalizēsim.

Virsraksts (fonta lielums: 36 pikseļi; polsterējums augšpusē: 10 pikseļi; teksta līdzinājums: centrā; ) .menu (saraksta stils: nav; pozīcija: absolūtais; augšpusē: 10 pikseļi; pa labi: 100 pikseļi; )

Nosaukums (

fonta izmērs: 36 pikseļi;

polsterējums augšpusē: 10 pikseļi;

teksts - līdzinājums: centrā;

Neatkarīgi no tā, kāda veida vietne vai tīmekļa lietojumprogramma tiek izstrādāta, vienmēr ir jāizveido stili tādiem virsrakstiem kā h1 vai h2. Šajā apmācībā mēs apskatīsim vairākus efektus, kas tiek piemēroti virsrakstiem, izmantojot pseidoelementus.

Kāpēc tiek izmantoti pseido elementi? Atbilde ir vienkārša: papildu uzcenojums nav nepieciešams.

HTML

Pieņemiet mācību ar pazemību

Nav īpašu marķējumu. Parasts nosaukums, kas norāda klasi.

CSS

Pamatteksts (platums: 60%; piemale: 50 pikseļi automātiski; polsterējums: 15 pikseļi; pozīcija: relatīvs; /*nepieciešams 4. galvenei*/ z-indekss: 0; /*nepieciešams 4. galvenei*/ apmale: 7 pikseļi cieta #cecece; apmale : 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); box-shadow: 0 0 2px rgba(0, 0, 0, .5); izmērs: 22 pikseļi;

Ņemiet vērā fona klipa deklarāciju: padding-box . Tas palīdz iegūt interesantu efektu: caurspīdīgs rāmis mūsu konteineram. CSS fona klipa rekvizīts nosaka, vai elementa fons (krāsa vai attēls) mijiedarbosies ar pamatā esošajiem slāņiem.

Šis vienkāršais un jauks efekts tiek panākts, izmantojot robežu:

virsraksts 15 pikseļi)

2. virsraksts

Šo stilu var sasniegt, izmantojot trīsstūra metodi:

Virsraksts2 ( apmale-apakšējā: 1 pikseļi ciets #aaa; piemale: 15 pikseļi 0; polsterējums: 5 pikseļi 0; pozīcija: relatīvs; ) .headline2:before, .headline2:after( saturs: ""; apmale pa labi: 20 pikseļi ciets #fff; apmales augšdaļa: 15 pikseļi cieta #aaa pozīcija: absolūts kreisais: 25 pikseļi; .headline2:after( border-top-color: #fff; border-right-color: caurspīdīgs; apakšā: -13px; kreisā: 26px)

3. virsraksts

Taču šo lentes efektu var izmantot arī nosaukuma noformēšanai:

3. virsraksts (pozīcija: relatīvā; piemale-kreisā: -22 pikseļi; /* 15 pikseļu polsterējums + 7 pikseļu apmales lentes ēna*/ malas labā puse: -22 pikseļi; polsterējums: 15 pikseļi; fons: #e5e5e5; fons: -moz-linear-gradient(#) f5f5f5, #e5e5e5 fons: -webkit-gradient(lineārs, pa kreisi augšā, pa kreisi, no(#f5f5f5), uz(#e5e5e5)); fons: -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( pozīcija: absolūts; pa kreisi: 0; apakšā: -6 pikseļi; saturs:""; apmale augšā: 6 pikseļi viengabalains #555; mala pa kreisi: 6 pikseļi vienkrāsains caurspīdīgs; .headline3:befor( border-top: 6px solid #555; border-right: 6px solid caurspīdīgs; border-left: none; left: auto; right: 0; bottom: -6px; )

Varat arī izveidot lielisku nosaukumu, izmantojot rekvizītu box-shadow:

Virsraksts4 (pozīcija: relatīvs; apmales krāsa: #eee; apmales stils: vienkrāsains; apmales platums: 5 pikseļi 5 pikseļi 0 pikseļi; fons: #fff; piemale: 0 0 15 pikseļi -15 pikseļi; polsterējums: 5 pikseļi 15 pikseļi; -moz-box -ēna: 1px 1px rgba(0,0,0,3); ,0,0,.3); .headline4:after ( saturs: ""; pozīcija: absolūts; z-indekss: -1; apakšā: 15 pikseļi; pa labi: 15 pikseļi; platums: 70%; augstums: 10 pikseļi; fons: rgba(0, 0, 0, .7); 0, .7 box-shadow: 0 15px 10px rgba(0, 0, 0, .7): rotate(2deg); -ms-transform: pagriezt(2deg) pārveidot: pagriezt(2deg)

Jūs vienmēr vēlaties piesaistīt uzmanību virsrakstiem vietnē vai emuārā, vēlaties tos padarīt skaistus un, vēlams, ar efektiem (piemēram, ēnu, spīdumu vai 3D). Diezgan skaistus virsrakstus var izveidot Adobe Photoshop, tomēr beigās tie ir attēli, kas nozīmē, ka to tekstu nevar nolasīt meklēšanas roboti... Ko darīt? Ir izeja!

Patiešām, nosakot jūsu tīmekļa lapas atbilstību noteiktiem meklēšanas vaicājumiem un piešķirot tai vietu meklēšanas rezultātos, virsraksti tiek rādīti TĀLU no pēdējās vietas. Es pat teiktu, ka viens no nozīmīgākajiem. Diezgan neapdomīgi būtu tos atstāt bildes formā (kaut gan savulaik pārveidoju vienu mājaslapu, kuras teksts vairākās lappusēs bija bilde... jā, jā, arī tā gadās...).

Jūs, protams, varat aizmirst par skaistumu un padarīt virsrakstus parastus, tāpat kā visur citur. Bet kāpēc, ja ir diezgan vienkāršs veids, kas atstāj jūsu virsrakstus teksta formātā un var dot tiem ļoti skaistus un interesantus efektus? Un šodien es jums parādīšu šīs metodes. Es domāju, ka, apgūstot šīs metodes, jūs tās pastāvīgi izmantosit. Vārdu sakot, jūs nogalināsit divus putnus ar vienu akmeni: padariet savu tīmekļa dizainu iespaidīgāku, un lapas atbilstība nenodarīs nekādu ļaunumu.

Sāksim!

3D galvenes izveide

Tātad, mēs veidosim efektus tieši, izkārtojot tīmekļa lapu.

1. Vispirms jāizveido jauns html fails, kā arī stila lapas (css) fails.

Lai parādītu, kā tas viss tiek darīts, es izveidoju html failu un nosaucu to par “title.html” (ja nepieciešams, varat lejupielādēt visus šīs nodarbības avota failus un apskatīt tos “avota failos”). Šeit ir mūsu html faila pirmkods:

Dokuments bez nosaukuma

3D teksts šeit

Ēnu virsraksts šeit

Mirdzošs teksts šeit

Anaglifiskais teksts

Šis ir HTML5 dokuments, tam ir pievienota stila lapa (fails css.css), un body tagā ir tikai četri dažāda izmēra virsraksti.

Mēs strādāsim ar šiem virsrakstiem. Mums html failā nekas cits nav vajadzīgs.

2. Kā jau teicu, mums ir nepieciešams stila lapas fails. Mēs to jau esam savienojuši, bet, ja neesat to izveidojis, izveidojiet to.

Es izveidoju failu ar nosaukumu css.css un ievietoju to tajā pašā direktorijā, kurā atrodas html fails.

Pirms sākam veidot 3D galveni, pievienosim lapai dažus pamata stilus, lai tā izskatītos nedaudz pievilcīgāka.

Iestatīsim lapas augstumu, platumu, krāsu, centrēsim to un iestatīsim punktētu rāmi body tagam.

Tāpat nekavējoties izlīdzināsim visus mūsu virsrakstus centrā.

Šis ir kods, kas jāieraksta stila lapas failā:

Pamatteksts (augstums: 700 pikseļi; platums: 90%; fona krāsa: # 069; mala: 0 automātiska; apmale: 1 pikseļi punktēta # 000066; ) h1, h2, h3, h4 (teksta līdzināšana: centrā;)

Palaidiet html failu savā pārlūkprogrammā. Lapa izskatīsies šādi:

3. Tagad sāksim transformāciju. Mēs pārvērtīsim h1 virsrakstu 3D tekstā.

Tas viss notiks vienā stila lapas failā.

Ievietojiet šo kodu zem visa, ko līdz šim esat ierakstījis failā css.css:

H1(fonta izmērs: 72 pikseļi; krāsa: #fff; teksta ēna: #B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px6pxB0 -5p 0;)

Tagad apskatīsim šo koda daļu. Pirmajās divās rindās mēs iestatām fonta lielumu un galveno krāsu. Bet tad sākas jautrība. Izmantojot teksta ēnas rekvizītu, mēs izveidojam fonta ēnu, bet ne gluži.

Fakts ir tāds, ka pēc resnās zarnas šajā īpašumā ir norādīti šādi parametri: krāsa, horizontālā nobīde, vertikālā nobīde un izplūšana.

Ko mēs darām?

Pirmkārt: mēs izvēlamies krāsu, kas ir tuvu galvenajai, bet tumšāka. Mūsu piemērā priekšplāna krāsa ir balta un teksta ēnas krāsa ir pelēka (bet ne ļoti tumša). Šeit jums ir jāeksperimentē, līdz sasniegsiet vēlamo rezultātu.

Otrkārt: mēs pakāpeniski pārvietojam (katru reizi par 1 pikseli) šo ēnu pa labi un uz augšu. To norāda šādi 2 parametri (1 pikseļi -1 pikseļi, 2 pikseļi –2 pikseļi utt.).

Treškārt: mēs visur atstājam izplūšanu līdz nullei, jo mums tas vienkārši nav vajadzīgs, lai izveidotu 3D tekstu.

Rezultātā mēs iegūstam šādu attēlu:

Šajā piemērā es izmantoju 5 pikseļu nobīdi, bet jūs varat darīt vairāk vai mazāk. Tas viss ir atkarīgs no tā, kādu rezultātu vēlaties sasniegt.

Noteikti eksperimentējiet arī ar krāsām, cenšoties radīt dabiskāku izskatu.

Izveidojiet galveni ar ēnu

Galvenes ar ēnu izveide ir ļoti vienkārša. Un mēs to sasniegsim tikai ar dažām koda rindām.

Tagad mēs strādāsim pie h2 virsraksta.

Pirmkārt, jums ir jāiestata tā izmērs un galvenā krāsa (es iestatīju izmēru tieši tādu pašu kā h1 galvenei, bet jūs, protams, veidojat katru galveni pēc vajadzības).

Kad būsim iestatījuši krāsu un izmēru, mēs atkal izmantosim teksta ēnu rekvizītu. Pirmais parametrs ir norādīt krāsu, tai jābūt tumšākai (galu galā tā ir ēna). Otrais un trešais parametrs ir horizontālās un vertikālās nobīdes. Mans teksts ir liels, tāpēc es tos padarīšu 5 pikseļus. Un pēdējais parametrs ir izplūduma rādiuss. Ēnai tas ir vajadzīgs, tāpēc mēs piešķiram tai 4 pikseļu vērtību. Rezultātā kods izskatīsies šādi:

H2 (fonta izmērs: 72 pikseļi; krāsa: # F90; teksta ēna: # 191919 5 pikseļi 5 pikseļi 4 pikseļi; )

Un tas izskatīsies šādi:

Varat eksperimentēt ar parametriem un iegūt dažādus rezultātus. Apsveriet teksta fonta lielumu, tā krāsu un to, ko vēlaties sasniegt.

Izveidojiet galveni ar mirdzumu

Tas arī ir vienkārši. Šeit mēs strādāsim ar h3 virsrakstu.

Princips ir tāds pats: vispirms mēs iestatām fonta lielumu un tā galveno krāsu, un pēc tam izmantojam teksta ēnu.

Izvēlieties spīduma krāsu. Kā jūs saprotat, tas būs gaišāks par virsraksta galveno krāsu. Otrais un trešais parametrs būs vienāds ar nulli (šeit mēs neko nekur nepārvietosim). Bet izplūduma rādiusam ir jābūt lielākam (tā lielums ir atkarīgs arī no tā, kādu mirdzumu vēlaties iegūt).

Rezultātā kods būs šāds:

H3 (fonta izmērs: 72 pikseļi; krāsa: # 333; teksta ēna: #fff 0 0 20 pikseļi; )

Un mūsu virsraksts ar mirdzumu izskatīsies šādi:

Galvene ar stereo efektu

To var saukt arī par anaglifa tekstu. To var salīdzināt ar brillēm 3D filmas skatīšanai.

Es tevi nemocīšu... Kā saka: labāk vienreiz redzēt, nekā klausīties garu aprakstu.

Efekts ir ļoti interesants un principā to nav grūti izveidot.

Sāksim. Šeit mēs strādāsim ar h4 galveni.

1. Vispirms iestatīsim galvenes izmēru. Es padarīšu to tādu pašu kā pārējās mūsu piemēra galvenes.

Tagad mums ir jānovieto galvenes elements. Iestatīsim pozīcijas rekvizītu uz relatīvu. Tas nozīmē, ka elementa pozīcija tiks iestatīta attiecībā pret tā sākotnējo atrašanās vietu.

Tagad piešķirsim tam krāsu. Mēs to darīsim rgba formātā. Ja jūs vēl neesat saskāries ar šo krāsas definīciju, tad neuztraucieties. Tas ir vienkārši: pirmie trīs parametri iekavās noteiks krāsu (rgb formātu), bet pēdējais parametrs noteiks tā necaurredzamības pakāpi. Mūsu piemērā šī vērtība būs 0,5 (tas ir, 50%).

Šeit ir kods visam iepriekšminētajam:

H4 (fonta izmērs: 72 pikseļi; pozīcija: relatīvs; krāsa: rgba(0,0,102,0,5); )

2. Tagad nāk jautrākā daļa. Mēs izveidosim pseidoelementu savam h4 elementam. Lai to izdarītu, jums tas būs jāreģistrē stila lapā kā h4:pēc.

Šim pseido elementam būs vairākas interesantas īpašības. Piemēram, īpašums saturu, kurā jāieraksta tieši tāds pats teksts kā h4 virsrakstā.

Pseidoelementam jābūt novietotam absolūti (pozīcija:absolūts).

Tās krāsa ir jāiestata uz pretējo krāsu elementam h4. Tas ir, ja h4 ir zila krāsa, tad pseido elementam būs sarkana krāsa. Un necaurredzamība joprojām ir 50%.

Un arī mēs pielāgosim pseido elementa pozīciju, izmantojot kreiso un augšējo rekvizītu. Mums ir jāpārliecinās, ka pseido elements, kas savā saturā dublē elementu h4, atrodas nedaudz pa labi un zemāk (tagad jūs visu redzēsit pats). Šeit iestatījumi būs individuāli un būs atkarīgi no fonta lieluma, fonta veida un vēlamā efekta.

Šeit ir kods visam iepriekšminētajam:

H4: pēc( saturs: "Anaglifiskais teksts"; pozīcija: absolūts; pa kreisi: 361 pikseļi; augšā: 2 pikseļi; krāsa: rgba(255,0,0,0,5); )

Un šeit ir iegūtā ietekme:

Tas ir viss, ko es gribēju jums iemācīt šajā nodarbībā.

Noteikti izmantojiet šo tehniku! Pirmkārt: Skaists, Otrkārt: visus virsrakstus var lieliski salasīt meklēšanas roboti, Treškārt: Kad esat uzrakstījis kodu, varat izmantot galveni jebkurā savas vietnes vai emuāra tīmekļa lapā, vienkārši norādot to html kodā.

Ja jums patika šī nodarbība, Uzrakstiet savu komentāru(ja arī nepatika :)). Tā tiks uzskatīta par pateicību.

Varat arī kopīgot nodarbību ar draugiem, izmantojot sociālo tīklu pogas.

Un, protams, abonējiet emuāra atjauninājumus (ja vēl neesat to izdarījis). Apsolu daudz noderīga un interesanta!

Lai labs garastāvoklis un tiekamies atkal!

Šī raksta mērķis ir apsvērt dažādas h1, h2 virsrakstu veidošanas iespējas. H1 tags ir svarīgs tags lapas pamattekstā. Parasti tajā ir ietverts lapas tematiskais nosaukums. H1 tagam ir jāizceļas, lai lietotājs varētu viegli saprast, par ko ir jūsu vietnes lapa. Tāpēc šim tagam ir jābūt jūsu lapas galvenajam punktam. H1 taga CSS stils var būt vienkāršs, taču galvenais ir pārliecināties, ka fonta izmērs ir lielākais starp citiem lapā. Un ne tikai tāpēc, ka tas piesaista lietotāja uzmanību, tam ir arī nozīme lapas atbilstībā un līdz ar to arī optimizācijā.

H2 tags ir papildinošs tags, un tas var būt H1 semantisks apakšnodalījums. Mēs arī apsvērsim iespējas to veidot.

Tālāk ir sniegti h1, h2 virsrakstu CSS stila piemēri un metodes.

Stila veidošanas metodesh1,h2 galvenes

PiemēriCSSH1,H2

Stila veidošanas metodesh1,h2 galvenes

Veidojot plūsmu, mēs apsvērsim h1, h2 tagu stilus. Apskatīsim divas iespējas galvenes ieviešanai lentes veidā: Rietumu un mana versija. Es teikšu jau iepriekš, ka manai metodei ir prioritāte, taču, ja jums ir savas iespējas (metodes) virsrakstu veidošanai, būšu pateicīgs, ja padalīsities ar tām komentāros.

Rietumu veids

Tā ir laba iespēja, taču man ļoti nepatīk CSS plūsmas ieviešanas veids. Es atradu šo metodi css h1 lentes izveidei vienā no Rietumu vietnēm. Šī plūsma ir ieviesta, izmantojot tīru CSS kodu, lai gan ir cietusi vairāku pārlūkprogrammu savietojamība (IE tas izskatās kā vienkāršs bloks). Zemāk ir stila css avota kods.

H1.lente ( fonta izmērs: 16 pikseļi !svarīgi; pozīcija: relatīvs; fons: #ba89b6; krāsa: #fff; teksta līdzinājums: centrā; polsterējums: 1 em 2 em; mala: 0 0 3 em; ) h1. lente: pirms, h1.ribbon:after ( saturs: ""; pozīcija: absolūts; displejs: bloks; apakšdaļa: -1 em; apmale: 1,5 em cieta #986794; z-indekss: -1; ) h1.ribbon:before ( pa kreisi: -2 em apmales-labais-platums: 1,5 em. apmale-kreisais-krāsa: caurspīdīgs; lente .ribbon-content:before, h1.ribbon .ribbon-content:after ( saturs: ""; pozīcija: absolūts; displejs: bloks; apmales stils: vienkrāsains; apmales krāsa: #804f7c caurspīdīgs caurspīdīgs caurspīdīgs; apakšdaļa: - 1em; ) h1.lente .lente-content:fore ( pa kreisi: 0; border-width: 1em 0 0 1em; ) h1.bon .lent-content:after ( pa labi: 0; border-width: 1em 1em 0 0; )

HTML kodā h1 lente izskatās šādi:

Vietnes h1, h2 galveņu CSS stils

Mans ceļš

Kā redzat, CSS kods ir apgrūtinošs, lai veidotu tikai h1 tagu. Tāpēc es piedāvāju savu veidu, kā izveidot šādu lenti. Saderība starp pārlūkprogrammām tika pārbaudīta uz IE, FireFox, Opera, Chrome. Zemāk ir css kods un visi avota faili.

H1 (augstums: 67 pikseļi; fons: url (ribbon_left.png) augšā pa kreisi, neatkārtojas; krāsa: #FFF;) h1 spēcīgs (augstums: 67 pikseļi; displejs: bloks; maksimālais platums: 450 pikseļi; piemale-kreisais: 56 pikseļi; polsterējums -labais:56px; fons: url(ribbon_right.png) labajā augšā bez atkārtošanas;)

Kā to izmantot HTML:

CSS H1 galvene vietnei

Attēli:

Kopējais attēlu svars ir 750 baiti. CSS kods aizņem ne vairāk kā divas rindiņas un sver 236 baitus. Esmu apmierināts ar rezultātu, un viss ir vienkāršs un skaidrs, atšķirībā no Western metodes, kur CSS koda svars ir 980 baiti. Lai gan mana un Rietumu versija ir identiska pēc svara, daudz sliktāk ir saprast kodu, nekā apstrādāt attēlu Photoshop. Var pieņemt, ka viena css faila ielādes ātrums ir ātrāks par trim failiem (pilnīgi identisks viena css faila svaram), taču fonu var ieviest spraitu veidā, kas palielinās vietnes ielādes ātrumu. Uzziniet par ātruma palielināšanu, izmantojot CSS spraitus.

CSS H1, H2 piemēri

Visi piemēri tiks ieviesti, pamatojoties uz virsrakstu stilizēšanas principu, izmantojot manu metodi (piemērs, vietne).

H1 galvenes CSS stils

Šajā rindkopā mēs koncentrēsimies uz reāliem h1 galvenes stila piemēriem. Piemēri, skaļi teikts, jo katrai vietnei ir unikāls dizains. Ļaujiet man sniegt jums vienu universālu H1 stila piemēru. Jūs jau saprotat manu ideju par virsrakstu stilizēšanu, es vēlos to papildināt, fona attēlā izmantojot caurspīdīgumu, ko var viegli izdarīt programmā Photoshop. Skatiet piemēru zemāk.

Virsraksts (platums: 500 pikseļi; fons: # 888;) h1 (augstums: 70 pikseļi; fons: url (left.png) pa kreisi augšā bez atkārtošanās; krāsa: #FFF; līnijas augstums: 50 pikseļi;) h1 spēcīgs (augstums: 70 pikseļi) displejs: bloķēt

Avota attēli:

Galvenes h1 teksts

Kā redzat, oriģinālajiem attēliem ir caurspīdīgums, un virsraksta klasē, mainot fona vērtību, varat sasniegt šādus rezultātus:

CSS h1 + h2 (sadarbības stils)

H1 un h2 stila veidošana kopā ir piemērota, ja jums ir epilogs vai neliels ievads rakstam jūsu vietnē, ko var ievietot tagā h2. Piemēram:

H1– h1, h2 virsrakstu veidošana;

H2– Mācīšanās veidot h1, h2 virsrakstus, izmantojot css.

Šis ir mans piemērs, visticamāk, jums ir savs priekšstats par vietnes lapu noformēšanu. Css h1 + h2 piemērs ir līdzīgs iepriekšējam, apskatīsim css kodu.

Pa kreisi (augstums: 100 pikseļi; fons: url (left.png) pa kreisi augšā no-repeat;) .right ( platums: 500 pikseļi; augstums: 100 pikseļi; displejs: bloks; mala-kreisais: 45 pikseļi; polsterējums: 0 pikseļi 45 pikseļi 0 pikseļi 0 pikseļi; fons : url(right.png) labajā augšā no-repeat;) h1 (krāsa: #FFF; fonta izmērs: 18 pikseļi; polsterējums: 15 pikseļi;) h2 (krāsa: # CCC; fonta izmērs: 16 pikseļi; polsterējums: 5 pikseļi;)

Avota attēli:

Galvenes H1 teksts

Neliels ievads vai raksta apraksts, kas pievienots H2 tagā.

Displejs:

Virsrakstu apvienotā (h1 + h2) stila būtība ir līdzīga iepriekšējam piemēram, tikai šajā gadījumā tiek izmantoti div bloki.

H2 galvenes CSS stils

H2 galvenes stila veidošana nav sarežģīta. Bet, tā kā mūsu raksts attiecas uz h1 un h2 virsrakstu stilu, mēs visu apsvērsim līdz beigām.

Parasti h2 tagu izmanto, lai izceltu raksta vai cita materiāla apakšpunktus vietnē. Es ieteiktu izveidot pieticīgus, diskrētus, bet ērtus h2 virsrakstus. Man ļoti patīk ideja par to, kā ir organizēta Vikipēdija. Iesaku izveidot ko līdzīgu. Tas ir vienkārši un ērti. Piemēram:

H2 galvenes stila piemērs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium Mauris citur nec arcu. Vesels skaitlis un leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat, citur neklasificēts, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Vēl viena jūsu raksta apakšsadaļa

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.

Displejs:

Vienkāršs, ērts un daudzpusīgs pārlūks.

Es ceru, ka mans raksts jums palīdzēja. Ja jums ir kādi jautājumi vai ieteikumi par h1, h2 galvenes CSS stilu, rakstiet komentāros.

Teksta informācijas noformējumam tīmeklī ir savas specifiskās iezīmes. Ja vietnē ievietojat kādu saturu, tam, kā likums, jābūt labi strukturētam - šim nolūkam tiek izmantoti virsraksti. Ar viņu palīdzību teksti tiek padarīti pēc iespējas vieglāk lasāmi un saprotami.

Pāris punkti pirms sākam:

Visi fontu piemēri ir bezmaksas un pieejami pakalpojumā Google WebFonts.
Piemēros ir tikai galvenes H1-H4, jo tās tiek izmantotas visbiežāk.
CSS stilu autors izmantoja modeli, kurā [platums] = [faktiskais elementa platums] + [polsterējums] + [apmales]. Lai to izdarītu, kodā ir fragments:

*, *: pēc , *: pirms ( box-sizing : border-box ; )

*, *:after, *:before ( box-sizing: border-box; )

Visbeidzot, ievadā minēts jēdziens “vertikālais ritms”. Tas faktiski nosaka visu polsterējumu starp blokiem lapā — vai tie būtu virsraksti, teksta rindkopas, attēli vai pat tikai vietnes veidnes elementi. Tas jo īpaši attiecas uz neparastu ierīču izmantošanu. Tātad visi CSS stilu piemēri izmanto vienu un to pašu “ritmu”:

h1 (fonta izmērs: 36 pikseļi; līnijas augstums: 40 pikseļi;) h2 (fonta izmērs: 30 pikseļi; līnijas augstums: 40 pikseļi;) h3 (fonta izmērs: 24 pikseļi; līnijas augstums: 40 pikseļi;) h4 (fonta lielums : 18 pikseļi ; līnijas augstums : 20 pikseļi )

h1 ( fonta izmērs: 36 pikseļi; līnijas augstums: 40 pikseļi; ) h2 ( fonta izmērs: 30 pikseļi; līnijas augstums: 40 pikseļi; ) h3 ( fonta izmērs: 24 pikseļi; līnijas augstums: 40 pikseļi; ) h4 ( fonta lielums : 18 pikseļi; līnijas augstums: 20 pikseļi;

Tagad jūs varat doties tieši uz praksi.

1. piemērs

Sāksim ar vairāk vai mazāk vienkāršu iespēju. Tipogrāfija ir lieliska mediju vietnei, varbūt pat laikrakstam. Šis risinājums nepiedāvā nekādas īpašas iespējas, izņemot to, ka tiek izmantoti 2 fonti - Ultra (sans-serif), Orienta (sans-serif). Galīgais CSS kods:

.demo-1 .main h1 ( margin : 1em 0 0.5em 0 ; color : #343434 ; font-weight : normal teksta pārveidošana : lielie burti ; teksta ēna : 0 2px #777 .demo-1 .main h2 ( margin : 1em 0 0.5em 0 ; color : #343434 ; font-weight : normal ; izmērs: 30 pikseļi; rindas augstums: 40 pikseļi; fontu ģimene: "Orienta", bez serifa. - augstums: 40 pikseļi: fontu ģimene: "Orienta", burtu stils: slīpraksts ( piemale : 1 em 0 0,5 em ; krāsa : # 343434 ; ;

Demo-1 .main h1 ( margin: 1em 0 0.5em 0; color: #343434; font-weight: normal; font-family: "Ultra", sans-serif; font-size: 36px; line-height: 42px; teksta pārveidošana: lielie burti : 30 pikseļu līnijas augstums: 40 pikseļi; fontu saime: "Orienta", bez serif. augstums: 40px; font-family: font-style: 1em 0,5em color: 20px; -ģimene: "Orienta", sans-serif)

2. piemērs

Šeit ir nedaudz interesantāks izpildījums - virsrakstam ir pievienots fons cieta aizpildījuma un attēla veidā. CSS kods ir uzrakstīts diezgan pareizi, atkāpes norādītas procentos, lai, attēlu samazinot, virsraksta teksts nesaplūst ar fona attēlu. Izmantotie fonti: Titillium Web (sans-serif), Muli (sans-serif).

.demo-2 .main h1 ( margin : 1em 0 0.5em 0 ; font-weight : 600 ; font-family : "Titillium Web" , sans-serif ; pozīcija : relatīvs ; fonta izmērs: 36 pikseļi; līnijas augstums: 40 pikseļi ; polsterējums : 15px 15px 15% ; 285 pikseļi 0 35px balta ; fonta svars: 0 - 1px rgba ( 0, 0, 0,6 ) : 40 pikseļi (53, 86, 129, 0,8) ; apmales rādiuss: 0 10 pikseļi 0 10 pikseļi ; fontu ģimene: "Muli" ; ) .demo-2 .main h3 ( margin : 1em 0 0.5em 0 ; font-weight : 600 ; font-family : "Titillium Web" , sans-serif ; pozīcija : relatīvs ; teksta ēna : 0 -1px 1px rgba ( 0, 0, 0, 0,4; fonta izmērs: 22px. 0 font-family : "Titillium Web" , sans-size : 20px , "M; sans serif )

Demo-2 .main h1 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; pozīcija: relatīvs; fonta izmērs: 36 pikseļi; līnijas augstums: 40 pikseļi; polsterējums: 15px 15px 15% krāsa: #355681 box-shadow: inset 0 0 0 1px rgba(53,86,129, 0.4), inset 0 5px rgba(53,86,129,px, white) apmales rādiuss: 0 10px 0 10px fons: #fff url(../images/bartoszkosowski.jpg) bez atkārtošanas pa kreisi ) .demo-2 .main h2 ( margin: 1em 0 0.5em 0; svars: normal; ; -rādiuss: 0 10px 0 10px; ielaidums 0 5px rgba(53,86,129, 0,5) .demo-2 .main h3 (marža: 1em 0 0,5em 0); 600 font-family: "Titillium Web", sans-serif: relatīvs: 0 -1px 1px rgba (0,0,0,0,4); līnijas augstums: 40 pikseļi; krāsa: #355681; teksta pārveidošana: lielie burti; apmale-apakšā: 1 pikselis, ciets rgba (53,86,129, 0,3); ) .demo-2 .main h4 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; pozīcija: relatīvs; fonta izmērs: 18px; līnijas augstums: 20px krāsa: #788699: "Muli", sans-serif;

3. piemērs

Tagad piemērs galveņu ieviešanai vietnei ar tumšu dizainu. Šim nolūkam tika izvēlēta diezgan spilgta, kontrastējoša zila krāsa pretstatā tumši pelēkajam fonam. Izmantotie fonti ir Hammersmith One (sans-serif), Questrial (sans-serif).

.demo-3 .main h2: after , .demo-3 .main h3: after , .demo-3 .main h4: after ( pozīcija : absolūtais ; saturs : "" ; pa kreisi : 0 ; augšā : 0 ; apakšā : 0 platums : 5px : 2px 1px rgba ( 0 , 0 , 0 , 0.5 ) , 0 1px 1px rgba ( 255 , 255 , 0,3 h : 0 ); demo-3 .main h3: after ( fons : #3BF ; ) .demo-3 .main h4: after ( fons : #6Cf ; ) .demo-3 .main h1 ( font-size : 36px ; line-height : 40px piemale : 1 em 0 .6 em 0 ; pozīcija: relatīvā krāsa: #6Cf .demo-3 .galvenā ", sans-serif; teksta ēna: 0 -1px 0 rgba (0, 0, 0, 0,4); pozīcija: relatīvs; fonta izmērs: 30 pikseļi; līnijas augstums: 40 pikseļi; ) .demo-3 .main h3 ( margin : 1em 0 .6em 0 ; polsterējums : 0 0 0 20px ; fonta svars : normāls ; krāsa : balta ; fontu saime : "Hammersmith One" , sans-serif ; teksta ēna : 0 -1px 0 rgba ( 0 , 0 , 0.4 ) pozīcija : fonta izmērs : 24px , galvenais h4 ( piemaiņa : 0,6 em ; 0 0 0 20px ; fonta izmērs: 18 pikseļi; līnijas augstums: 20 pikseļi;

Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( pozīcija: absolūtā; saturs: ""; pa kreisi: 0; augšā: 0; apakšā: 0; platums: 5px; box-shadow: inset 0 1px rgba(0,0,0,0.5), 0 1px 1px rgba(255,255,255,0.3) .demo-; galvenais h3:after ( fons: #3BF; ) .demo-3 .main h4:after ( fons: #6Cf; ) .demo-3 .main h1 ( fonta izmērs: 36 pikseļi; līnijas augstums: 40 pikseļi; piemale: 1 em 0 .6em 0; 3 .main h2 (margin: 1em 0,6em 0; polsterējums: 0 0 0 20px; fonta svars: normāls; krāsa: balta ; fontu saime: "Hammersmith One", bez serifa: 0 -1px 0 rgba(0 ,0,0,0,4; fonta izmērs: 30 pikseļi .demo-3 .main h3 ( margin: 1em 0,6em 0; polsterējums: 0 0 0 20px; font-weight: normal; color: white; font-family); : "Hammersmith One", bez serifa; teksta ēna: 0 -1px 0 rgba(0,0,0,0,4); pozīcija: relatīvs; fonta izmērs: 24 pikseļi; līnijas augstums: 40 pikseļi; fontu saime: "Questrial", sans-serif; ) .demo-3 .main h4 ( margin: 1em 0 .6em 0; polsterējums: 0 0 0 20 pikseļi; fonta svars: normāls; krāsa: balta; fontu saime: "Hammersmith One", sans-serif; teksta ēna : 0 -1px 0 rgba(0,0,0,0.4 font-size: 18px): "Questrial", bez serifa;

4. piemērs

Eksperimentēsim ar fonu – kā būtu ar koka faktūras pievienošanu. Fonti Scada (sans-serif), Carrois Gothic (sans-serif) un H2 brošūra arī tiek ieviesti, izmantojot fontu, nevis attēlu.

.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īcija : absolūtais ; saturs : "" ; augstums : 1px ; border- rādiuss : 2px ; pa kreisi : 0 - 1px 0 rgba ( 0 , 0 , 0 , 0.1 ), 0 1px 0 rgba ( 255 , 255 , 255 , 0.6 : 0 , 0,6 ) ; % ; ) .demo-4 .galvenais h3 : pēc { platums: 75% ; } .demo-4 .galvenais h4 : pēc { platums: 50% ; } .demo-4 .galvenais h1 { starpība: 1em 0 0,75 em; polsterējums: 0 0 5 pikseļi 0 ; krāsa: #6B5344; fonta svars: normāli; pozīciju: radinieks; teksts-ēna: 0 2 pikseļi 0 rgba(255 , 255 , 255 , 0.5 ) ; fonta izmērs: 36 pikseļi; līnijas augstums: 40 pikseļi; fontu ģimene: "Carrois Gothic", sans serif; } .demo-4 .galvenais h2 { starpība: 1em 0 0,75 em; polsterējums: 0 0 5 pikseļi 0 ; krāsa: #6B5344; fonta svars: normāli; fontu ģimene: "Scada", sans serif; pozīciju: radinieks; teksts-ēna: 0 2 pikseļi 0 rgba(255 , 255 , 255 , 0.5 ) ; fonta izmērs: 30 pikseļi; līnijas augstums: 40 pikseļi; } .demo-4 .galvenais h3 { starpība: 1em 0 0,75 em; polsterējums: 0 0 5 pikseļi 0 ; krāsa: #6B5344; fonta svars: normāli; fontu ģimene: "Scada", sans serif; pozīciju: radinieks; teksts-ēna: 0 2 pikseļi 0 rgba(255 , 255 , 255 , 0.5 ) ; fonta izmērs: 24 pikseļi; līnijas augstums: 40 pikseļi; } .demo-4 .galvenais h4 { starpība: 1em 0 0,75 em; polsterējums: 0 0 5 pikseļi 0 ; krāsa: #6B5344; fonta svars: normāli; fontu ģimene: "Scada", sans serif; pozīciju: radinieks; teksts-ēna: 0 2 pikseļi 0 rgba(255 , 255 , 255 , 0.5 ) ; fonta izmērs: 18 pikseļi; līnijas augstums: 20 pikseļi; }

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i (padding-right: 10px; krāsa: #A8D13B; fonta izmērs: 0,8 em : 2px: 0 4 .main h3:after (platums: 75%; ) .demo-4 .main h4:after (platums: 50%; ) .demo-4 .main h1 ( margin: 1em 0 0.75em; polsterējums: 0 5px 0; krāsa: #6B5344; pozīcija: relatīvā teksta ēna: 0 2px 0,5; 0 5 pikseļi 0; līnijas augstums: 40 pikseļi: 1 em 0 0,75 em; polsterējums: 0 0 5 pikseļi 0; krāsa: #6B5344; fonta svars: normāls; fontu saime: "Scada", sans-serif; pozīcija: relatīvs; teksta ēna: 0 2 pikseļi 0 rgba(255,255,255,0,5); fonta izmērs: 24 pikseļi; līnijas augstums: 40 pikseļi; ) .demo-4 .main h4 ( margin: 1em 0 0.75em; polsterējums: 0 0 5px 0; krāsa: #6B5344; fonta svars: normāls; fontu saime: "Scada", sans-serif; pozīcija: relatīvs; teksta ēna: 0 2 pikseļi 0 rgba (255,255,255,0,5 fonta lielums: 18 pikseļi);

5. piemērs

Vēl viena interesanta un neparasta krāsu shēma - iespējams, tā jūs pamudinās uz kādu no jūsu idejām un realizācijām. Virsrakstos principā ne vienmēr var būt treknraksts, liels fonts - šādas iespējas ir.

.demo-6 .galvenais h1 { starpība: 1em 0 0,5 em 0 ; fonta svars: 100 ; teksta pārveidošana: lielie burti; krāsa: #00caa6; fonta stils: slīpraksts; fontu ģimene: Žozefīne Sansa, sans serif; fonta izmērs: 58 pikseļi; līnijas augstums: 54 pikseļi; teksts-ēna: 2 pikseļi 5 pikseļi 0 rgba(0 , 0 , 0 , 0.2 ) ; } .demo-6 .galvenais h2 { starpība: 1em 0 0,5 em 0 ; krāsa: #148773 ; fonta izmērs: 26 pikseļi; līnijas augstums: 40 pikseļi; fonta svars: treknrakstā; fontu ģimene: Žozefīne Sansa, sans serif; } .demo-6 .galvenais h3 { starpība: 1em 0 0,5 em 0 ; krāsa: #343434 ; fonta izmērs: 22 pikseļi; līnijas augstums: 40 pikseļi; fonta svars: 100 ; teksta pārveidošana: lielie burti; fontu ģimene: Žozefīne Sansa, sans serif; burtu atstarpes: 1 pikselis; fonta stils: slīpraksts; } .demo-6 .galvenais h4 { starpība: 1em 0 0,5 em 0 ; krāsa: #343434 ; fonta izmērs: 18 pikseļi; līnijas augstums: 20 pikseļi; fonta svars: treknrakstā; fontu ģimene: Žozefīne Sansa, sans serif; }

Demo-6 .main h1 ( piemale: 1em 0 0,5 em 0; fonta svars: 100; teksta pārveidošana: lielie burti; krāsa: #00caa6; fonta stils: slīpraksts; fontu saime: "Josefin Sans", sans-serif fonta lielums: 54px 5px 0 rgba(0,0,0,2): 40px; "Josefin Sans", sans-serif) .demo-6 .main h3 (margin: 1em 0 0.5em 0 ; krāsa: #343434; fonta izmērs: 40 pikseļi; teksta transformācija: "Josefin Sans", sans-serif: 1px ; -stils: slīpraksts "Josefins Sans", sans-serif)

Ja jūs gandrīz pilnībā zināt CSS, tad sākotnējā rakstā ir aprakstīts, kā izmantot noteiktus priekšprocesorus stilos, lai samazinātu koda daudzumu un padarītu to vienkāršāku. Godīgi sakot, šī ir pirmā reize, kad CSS stila failā redzu funkciju izmantošanu un parametru aizstāšanu, taču kods izrādās ļoti vizuāls. Tāpat, protams, sākotnējā rakstā jūs atradīsit saites uz avotiem un visu opciju demonstrācijas versijām.

P.S. T Tiem, kas strādā internetā vai tikai sāk darbu, raksts par to, kas ir TIC, palīdzēs orientēties vienā no aktuālākajiem un apspriestākajiem jēdzieniem internetā.

Varētu būt noderīgi izlasīt: