Վերնագրի ձևավորում. Ինչպե՞ս ավելացնել ֆոնի գույնը վերնագրի տեքստին: Վերնագրի h1 տեքստ

Հեղինակից.Բարի գալուստ մեր բլոգ վեբ կայքի կառուցման մասին: Ցանկացած կայք ունի մի բան, որը սովորաբար դարձնում է հիշվող և առանձնանում մնացածից: Սովորաբար սա կայքի վերնագիրն է: CSS-ը թույլ է տալիս այն դարձնել այնպես, ինչպես ցանկանում եք:

Կայքի վերնագիր - ինչպիսին է այն

Զարմանալի է, թե որքան բան կարող է այսօր կախված լինել միայն վեբ ռեսուրսի նախագծումից: Բայց հատկապես ի՞նչն է առանձնացնում վեբ ռեսուրսը մյուսներից: Որպես կանոն, սա կայքի վերնագիրն է՝ կորպորատիվ տարբերանշանով և յուրահատուկ դիզայնով։ Սովորաբար մարդիկ այսպես են հիշում ինչ-որ ինտերնետային նախագիծ: Սա շատ լավ է հիշվում մարդկանց հիշողության մեջ։

Օրինակ, եթե կապույտ ֆոնի վրա տեսնում եք սպիտակ «B» տառը, հավանաբար անմիջապես եզրակացնում եք, որ սա VKontakte սոցիալական ցանցի պատկերակ է: Եվ բոլորն անմիջապես կապում են կրող աղավնու կերպարը Twitter-ի հետ։ Այս ամենը հնարավոր դարձավ, քանի որ այս կայքերը վերնագրերում ունեին հենց այդպիսի պատկերներ, և մարդիկ դրանք շատ լավ հիշում էին։

Լավ, դա մի քիչ մտածված էր, հիմա եկեք անմիջապես անցնենք տեխնիկական մասին:

Ինչպե՞ս կարող եք նախագծել կայքի վերնագիր CSS-ում:

Ընդհանուր առմամբ, գլխարկները տարբեր են: Ելնելով դրանց լայնությունից՝ դրանք կարելի է բաժանել երկու խմբի.

Նախկինում վերնագիրը պատրաստվում էր այնպես, ինչպես ցանկացած այլ բլոկ. սովորական div թեգին տրվեց անհրաժեշտ նույնացուցիչը, որից հետո ամբողջ անհրաժեշտ բովանդակությունը մտավ դրա մեջ, այնուհետև այս ամենը ձևաչափվեց: Այսօր արդեն ընդունված է տառատեսակով այլ կերպ գրել։ Հատկապես HTML5-ում կայքի վերնագիր ստեղծելու համար հայտնվել է զուգավորված թեգ՝ header։ Դրա օգտագործումը խրախուսվում է, այն թույլ է տալիս բրաուզերներին հասկանալ, թե ինչ է կաղապարի այս մասը և ինչ է այն անում։ Ի դեպ, եթե ցանկանում եք սովորել HTML5-ի հիմունքները, ապա դուք ուղիղ ճանապարհ ունեք դեպի մերը, որտեղ կարող եք դիտել դասեր այս տեխնոլոգիայի վերաբերյալ։

Հետևաբար, պարզ վերնագիր ստեղծելու համար պարզապես գրեք հետևյալ կոդը html-ում.

< header > < / header >

Իհարկե, էջում դեռ ոչինչ չի հայտնվի. մենք դեռ պետք է դրան բովանդակություն ավելացնենք և նախագծենք: Բայց եկեք, օրինակ, մի բլոկ պատրաստենք, որն ընդգրկում է էկրանի ամբողջ լայնությունը, ինչպես նաև մի փոքր զարդարենք այն:

վերնագիր (լայնություն՝ 100%, ֆոն՝ #D8E3AB; բարձրություն՝ 70px; )

վերնագիր (

լայնությունը՝ 100%;

ֆոն՝ #D8E3AB;

բարձրությունը՝ 70px;

Ընդհանրապես, եթե ամեն ինչ ճիշտ է արված, ապա բլոկին պետք է տրվի ինչ-որ դաս կամ նույնիսկ նույնացուցիչ (քանի որ սա վեբ էջի կարևոր տարր է), բայց առայժմ մենք պարզապես կանդրադառնանք տարրին պիտակով։

Լայնությունը՝ 100% հատկություն, այնպես է դարձնում, որ մեր բլոկը ձգվի մինչև ամբողջ լայնությունը՝ անկախ էկրանի չափսից: Եթե, այնուամենայնիվ, չափերը պետք է ինչ-որ կերպ սահմանափակվեն, օգտագործեք լրացուցիչ max-width հատկությունը, որտեղ բացարձակ չափը գրված է պիքսելներով, որոնց հասնելուց հետո բեռնարկղն այլևս չի ընդլայնվի:

Այժմ մենք մեր առջեւ ընդամենը մի շերտ ունենք՝ ներկված ընտրված գույնով։ Սովորաբար բարձրությունը չի նշվում, այն ինքնաբերաբար որոշվում է այն տարրերի հիման վրա, որոնք կլինեն վերնագրում:

< div id = "wrap" >

< header > < / header >

< / div >

Այս կերպ կայքի մեր վերևը կգտնվի հենց կենտրոնում: Մնում է միայն լրացնել այն։

Բրինձ. 1. Առայժմ սա միայն կոնտեյներ է, որը կպարունակի ողջ պարունակությունը։

Ի՞նչ է սովորաբար պարունակում գլխարկի մեջ:

Սովորաբար այնտեղ տեղադրվում են կայքի լոգոն, անվանումը և նկարագրությունը: Կարող են լինել նաև որոշ կոնտակտային տվյալներ, էջի նավարկություն կամ նույնիսկ գովազդ:

Լոգոն սովորաբար տեղադրվում է որպես ֆոնային պատկեր: Եկեք, օրինակ, դնենք սա.

Դա անելու համար պարզապես ֆոնին ավելացրեք որոշ կանոններ.

ֆոն՝ #D8E3AB url(logo.png) առանց կրկնության 5% 50%;

նախապատմություն: #D8E3AB url(logo.png) առանց կրկնության 5% 50%;

Այսինքն՝ բացի պինդ գույնից, տալիս ենք նաև ֆոնային պատկեր (մեր դեպքում՝ logo.png) և նախ դնում եմ այն ​​նույն թղթապանակում, որտեղ կա styles ֆայլը։ Մենք արգելում ենք լոգոյի կրկնությունը և որոշում ենք դրա դիրքը բլոկում՝ մի փոքր տեղափոխել այն դեպի ձախ և ուղղահայաց՝ կենտրոնում:

Եկեք որոշ բովանդակություն ավելացնենք վերնագրում: Օրինակ, վերնագիր և մենյու:

Կայքի անվանումը

< div class = "title" >Կայքի անվանումը< / div >

< ul class = "menu" >

< li > < a href = "#" >Կոնտակտներ< / a > < / li >

< li > < a href = "#" >Մեր մասին< / a > < / li >

< li > < a href = "#" >Ծառայություններ< / a > < / li >

< / ul >

Հիմա այս ամենը ձեւակերպենք։

Վերնագիր ( տառաչափ՝ 36 պիքսել; ներդիր՝ վերևում՝ 10 պիքսել; տեքստի հավասարեցում՝ կենտրոնում; )

Կոչում (

տառաչափը՝ 36px;

padding-top: 10px;

տեքստը հավասարեցնել՝ կենտրոն;

Անկախ նրանից, թե ինչպիսի կայք կամ վեբ հավելված է մշակվում, միշտ կարիք կա ստեղծելու ոճեր վերնագրերի համար, ինչպիսիք են h1 կամ h2: Այս ձեռնարկում մենք կանդրադառնանք մի քանի էֆեկտների, որոնք կիրառվում են վերնագրերի վրա՝ օգտագործելով կեղծ տարրեր:

Ինչու են օգտագործվում կեղծ տարրերը: Պատասխանը պարզ է. լրացուցիչ նշագրում չի պահանջվում:

HTML

Ընդունեք դասը խոնարհությամբ

Առանց հատուկ նշումների: Սովորական վերնագիր, որը ցույց է տալիս դասը:

CSS

Body (լայնությունը՝ 60%, լուսանցքը՝ 50px ավտոմատ, լիցքավորումը՝ 15px, դիրքը՝ հարաբերական; /* անհրաժեշտ է վերնագրի համար 4*/ z-ինդեքսը՝ 0; /*անհրաժեշտ է վերնագրի համար 4*/ եզրագիծը՝ 7px կոշտ #cecece; եզրագիծ 7px պինդ rgba(0,0,0,.05); #fff; -webkit-box-shadow: 0 0 2px rgba(0, 0, 0, .5) box-shadow: 0 0 2px rgba(0, 0, 0, .5), sans-serif; չափը՝ 22px;

Ուշադրություն դարձրեք ֆոնային հոլովակի հայտարարագրին՝ padding-box : Այն օգնում է ստանալ հետաքրքիր էֆեկտ՝ թափանցիկ շրջանակ մեր տարայի համար։ CSS background-clip հատկությունը որոշում է, թե արդյոք տարրի ֆոնը (գույնը կամ պատկերը) կփոխազդի հիմքում ընկած շերտերի հետ:

Այս պարզ և գեղեցիկ էֆեկտը ձեռք է բերվում սահմանային հատկության միջոցով.

Վերնագիր 1 ( եզրագիծ-ներքև. 1px գծիկ #aaa; եզրագիծ-ձախ՝ 7px կոշտ #aaa; եզրագիծ-ձախ՝ 7px ամուր rgba(0,0,0,.2); լուսանցք՝ 0 -15px 15px -22px; լիցք՝ 5px 15 px)

Վերնագիր 2

Այս ոճին կարելի է հասնել եռանկյունու մեթոդով.

Վերնագիր2 ( եզրագիծ-ներքև. 1px կոշտ #aaa; լուսանցք՝ 15px 0; լիցք՝ 5px 0; դիրքը՝ հարաբերական; ) .headline2:նախօրոք, .headline2:after(բովանդակությունը՝ ""; եզրագիծ-աջ՝ 20px կոշտ #fff; եզրագծեր՝ 15px կոշտ #aaa;

Վերնագիր 3

Բայց այս ժապավենի էֆեկտը կարող է օգտագործվել նաև վերնագիր ձևավորելու համար.

Վերնագիր3( դիրքը՝ հարաբերական; լուսանցք-ձախ՝ -22px; /* 15px լիցք + 7px եզրագծային ժապավենի ստվեր*/ լուսանցք-աջ՝ -22px; լիցք՝ 15px; ֆոն՝ #e5e5e5; ֆոն՝ -moz-linear-gradient(# f5f5f5, #e5e5e5 ֆոն. ֆոն: -o-linear-gradient (#f5f5f5, #e5e5e5) ֆոն: -ms-linear-gradient (#f5f5f5, #e5e5e5): 0 rgba(255,255,.8) ներդիր -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset: 0 -1px 0 rgba (255,255,255, տեքստ.) 0 1px 0 #fff ) .headline3:before, .headline3:after(դիրք՝ բացարձակ; ձախ՝ 0; ներքևում՝ -6px; բովանդակություն՝""; եզրագծով վերև՝ 6px կոշտ #555; եզրագիծ՝ ձախ՝ 6px պինդ թափանցիկ; .headline3:մինչև (սահման-վերև՝ 6px կոշտ #555; եզրագիծ-աջ՝ 6px ամուր թափանցիկ; եզրագիծ-ձախ՝ ոչ մեկը; ձախ՝ ավտոմատ; աջ՝ 0; ներքևում՝ -6px; )

Կարող եք նաև ստեղծել հիանալի վերնագիր՝ օգտագործելով box-shadow հատկությունը.

Վերնագիր 4( դիրքը` հարաբերական; եզրագծի գույնը` #eee; եզրագծի ոճը` ամուր; եզրագծի լայնությունը` 5px 5px 5px 0; ֆոն` #fff; լուսանցք` 0 0 15px -15px; ներդիր` 5px 15px; -moz-box -ստվեր: 1px 1px rgba(0,0,0,.3) -webkit-box-shadow: 1px 1px rgba(0,0,0,.3) box-shadow: 1px 1px rgba(0); ,0,0,.3); (0, 0, 0, .7); -webkit-box-shadow. , .7 արկղ-ստվեր: 0 10px rgba (0, 0, 0, .7); ms-փոխակերպում. պտտել (2 աստիճան);

Դուք միշտ ցանկանում եք ուշադրություն գրավել կայքի կամ բլոգի վերնագրերի վրա, ցանկանում եք դրանք դարձնել գեղեցիկ և գերադասելի էֆեկտներով (օրինակ՝ ստվեր, փայլ կամ 3D): Adobe Photoshop-ում կարելի է բավականին գեղեցիկ վերնագրեր պատրաստել, սակայն վերջում դրանք պատկերներ են, ինչը նշանակում է, որ դրանց տեքստը որոնող ռոբոտները չեն կարող կարդալ... Ի՞նչ անել: Ելք կա!

Իրոք, որոշ որոնման հարցումների հետ ձեր վեբ էջի համապատասխանությունը որոշելիս և որոնման արդյունքներում տեղ հատկացնելիս վերնագրերը խաղում են ՀԵՌՈՒ վերջին տեղից: Ես նույնիսկ կասեի ամենանշանակալից մեկը։ Բավական անխոհեմ կլիներ դրանք թողնել նկարի տեսքով (չնայած ես մի անգամ վերափոխել եմ մի կայք, որի մի քանի էջերի ամբողջ տեքստը նկար էր... այո, այո, դա էլ է լինում...):

Դուք, իհարկե, կարող եք մոռանալ գեղեցկության մասին և վերնագրերը դարձնել սովորական, ինչպես ամենուր։ Բայց ինչու, եթե կա բավականին պարզ միջոց, որը կթողնի ձեր վերնագրերը տեքստային ձևաչափով և կարող է նրանց տալ շատ գեղեցիկ և հետաքրքիր էֆեկտներ: Եվ այսօր ես ձեզ ցույց կտամ այս տեխնիկան: Կարծում եմ, որ այս տեխնիկաներին տիրապետելուց հետո դրանք անընդհատ կօգտագործեք։ Մի խոսքով, մեկ քարով երկու թռչուն կսպանեք՝ ձեր վեբ դիզայնն ավելի տպավորիչ դարձրեք, և էջի համապատասխանությունը ոչ մի վնաս չի պատճառի:

Եկ սկսենք!

3D վերնագրի ստեղծում

Այսպիսով, մենք կստեղծենք էֆեկտներ անմիջապես վեբ էջը տեղադրելիս:

1. Նախ անհրաժեշտ է ստեղծել նոր html ֆայլ, ինչպես նաև ոճաթերթ (css) ֆայլ:

Ցույց տալու համար, թե ինչպես է արվում այս ամենը, ես ստեղծեցի html ֆայլ և այն անվանեցի «title.html» (անհրաժեշտության դեպքում կարող եք ներբեռնել այս դասի բոլոր սկզբնաղբյուր ֆայլերը և դիտել դրանք «աղբյուրային ֆայլերում»): Ահա մեր html ֆայլի սկզբնական կոդը.

Անվերնագիր փաստաթուղթ

3D տեքստ այստեղ

Shadow Title Այստեղ

Glow Text այստեղ

Անագլիֆիկ տեքստ



Սա HTML5 փաստաթուղթ է, դրան միացված է ոճաթերթ (css.css ֆայլ), իսկ body tag-ի ներսում կան միայն չորս տարբեր չափերի վերնագրեր։

Մենք կաշխատենք այս վերնագրերով: html ֆայլում մեզ այլ բան պետք չէ։

2. Ինչպես արդեն ասացի, մեզ անհրաժեշտ է ոճաթերթի ֆայլ: Մենք արդեն միացրել ենք այն, բայց եթե դուք չեք ստեղծել, ապա ստեղծեք այն։

Ես ստեղծեցի css.css անունով ֆայլ և տեղադրեցի այն նույն գրացուցակում, ինչ html ֆայլը:

Նախքան 3D վերնագրի ստեղծումը սկսելը, եկեք էջին մի քանի հիմնական ոճավորենք, որպեսզի այն մի փոքր ավելի գրավիչ տեսք ունենա:

Եկեք նշենք էջի բարձրությունը, լայնությունը, գույնը, կենտրոնացնենք այն և սահմանենք կետավոր շրջանակ մարմնի պիտակի համար:

Եկեք նաև անմիջապես հավասարեցնենք մեր բոլոր վերնագրերը կենտրոնում:

Ահա այն կոդը, որը պետք է գրվի ոճաթերթի ֆայլում.

Տեքստ (բարձրություն՝ 700 պիքսել; լայնություն՝ 90%, ֆոնի գույն՝ # 069, լուսանցք՝ 0 ավտոմատ, եզրագիծ՝ 1 պիքսել գծիկ #000066; ) h1, h2, h3, h4 (տեքստի հավասարեցում՝ կենտրոնում;)

Գործարկեք html ֆայլը ձեր բրաուզերում: Էջը կունենա հետևյալ տեսքը.

3. Հիմա եկեք սկսենք վերափոխումը: Մենք h1 վերնագիրը կվերածենք 3D տեքստի։

Այս ամենը տեղի կունենա նույն ոճի թերթիկի ֆայլում:

Տեղադրեք հետևյալ կոդը css.css ֆայլում այն ​​ամենի տակ, ինչ մինչ այժմ գրել եք.

H1(տառաչափը՝ 72px; գույնը՝#fff; տեքստի ստվերը՝#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px #5BxBx5, 0;

Հիմա եկեք նայենք կոդի այս հատվածին: Առաջին երկու տողերում մենք սահմանում ենք տառաչափը և հիմնական գույնը: Բայց հետո զվարճանքը սկսվում է: Օգտագործելով text-shadow հատկությունը, մենք մի տեսակ ստվեր ենք ստեղծում տառատեսակի համար, բայց ոչ այնքան:

Փաստն այն է, որ երկու կետից հետո այս հատկությունը թվարկում է հետևյալ պարամետրերը՝ գույն, հորիզոնական տեղաշարժ, ուղղահայաց տեղաշարժ և պղտորում:

Ինչ ենք մենք անում?

Նախ՝ ընտրում ենք հիմնականին մոտ գույն, բայց ավելի մուգ: Մեր օրինակում առաջին պլանի գույնը սպիտակ է, իսկ տեքստի ստվերային գույնը մոխրագույն է (բայց ոչ շատ մուգ): Այստեղ դուք պետք է փորձեր կատարեք, մինչև հասնեք ցանկալի արդյունքի:

Երկրորդ. մենք աստիճանաբար (ամեն անգամ 1 պիքսելով) այս ստվերը տեղափոխում ենք աջ և վեր։ Սա նշվում է հետևյալ 2 պարամետրերով (1px -1px, 2px -2px և այլն):

Երրորդ. մենք ամենուրեք թողնում ենք մշուշումը զրոյի, քանի որ այն մեզ պարզապես պետք չէ 3D տեքստ ստեղծելու համար:

Արդյունքում մենք ստանում ենք այս պատկերը.

Այս օրինակում ես կանգ առա 5px օֆսեթի վրա, բայց դուք կարող եք քիչ թե շատ անել: Ամեն ինչ կախված է նրանից, թե ինչ արդյունքի եք ուզում հասնել։

Նաև համոզվեք, որ փորձեր արեք գույների հետ՝ փորձելով ավելի բնական տեսք ստեղծել:

Ստեղծեք վերնագիր ստվերով

Ստվերով վերնագիր ստեղծելը շատ պարզ է: Եվ մենք դրան կհասնենք ընդամենը մի քանի տող կոդով:

Այժմ մենք կաշխատենք h2 վերնագրի վրա։

Սկզբում դուք պետք է սահմանեք դրա չափը և հիմնական գույնը (ես չափը սահմանեցի ճիշտ նույնը, ինչ h1 վերնագիրը, բայց դուք, իհարկե, յուրաքանչյուր վերնագիր նախագծում եք ըստ անհրաժեշտության):

Գույնը և չափը սահմանելուց հետո մենք կրկին կօգտագործենք text-shadow հատկությունը: Առաջին պարամետրը պետք է նշվի, որ գույնը պետք է լինի ավելի մուգ (ի վերջո, դա ստվեր է): Երկրորդ և երրորդ պարամետրերը հորիզոնական և ուղղահայաց տեղաշարժերն են: Իմ տեքստը մեծ է, այնպես որ ես դրանք կդարձնեմ 5 պիքսել: Իսկ վերջին պարամետրը պղտորման շառավիղն է։ Ստվերին դա անհրաժեշտ է, ուստի մենք նրան տալիս ենք 4 պիքսել արժեք: Արդյունքում ծածկագիրը կունենա հետևյալ տեսքը.

H2 (տառաչափը՝ 72px; գույնը՝ #F90; տեքստի ստվերը՝ #191919 5px 5px 4px; )

Եվ այն կունենա հետևյալ տեսքը.

Դուք կարող եք փորձարկել պարամետրերը և, այնուամենայնիվ, ստանալ տարբեր արդյունքներ: Հաշվի առեք ձեր տեքստի տառաչափը, դրա գույնը և այն, ինչ ցանկանում եք հասնել:

Ստեղծեք վերնագիր փայլով

Սա նույնպես պարզ է. Այստեղ մենք կաշխատենք h3 վերնագրի հետ։

Սկզբունքը նույնն է՝ նախ սահմանում ենք տառատեսակի չափը և դրա հիմնական գույնը, իսկ հետո օգտագործում ենք տեքստ-ստվեր։

Ընտրեք փայլի գույնը: Ինչպես հասկանում եք, այն ավելի բաց կլինի, քան վերնագրի հիմնական գույնը։ Երկրորդ և երրորդ պարամետրերը հավասար կլինեն զրոյի (այստեղ մենք ոչ մի տեղ ոչինչ չենք տեղափոխի): Բայց պղտորման շառավիղը պետք է ավելի մեծ լինի (դրա չափը նույնպես կախված է նրանից, թե ինչպիսի փայլ եք ուզում ստանալ):

Արդյունքում ծածկագիրը կլինի հետևյալը.

H3 (տառաչափ՝ 72px; գույն՝#333; տեքստ-ստվեր՝#fff 0 0 20px; )

Եվ մեր փայլով վերնագիրը կունենա հետևյալ տեսքը.

Վերնագիր ստերեո էֆեկտով

Այն կարելի է անվանել նաև անագլիֆային տեքստ։ Այն կարելի է համեմատել 3D ֆիլմ դիտելու ակնոցի հետ։

Ես քեզ չեմ տանջի... Ինչպես ասում են՝ ավելի լավ է մեկ անգամ տեսնել, քան երկար նկարագրություն լսել։

Էֆեկտը շատ հետաքրքիր է և սկզբունքորեն դժվար չէ ստեղծել։

Եկ սկսենք։ Այստեղ մենք աշխատելու ենք h4 վերնագրի հետ:

1. Նախ, եկեք սահմանենք վերնագրի չափը: Ես այն կդարձնեմ նույնը, ինչ մեր օրինակի մնացած վերնագրերը:

Այժմ մենք պետք է տեղադրենք վերնագրի տարրը: Դիրքի հատկությունը դնենք հարաբերականի: Սա նշանակում է, որ տարրի դիրքը կսահմանվի իր սկզբնական դիրքի համեմատ:

Հիմա եկեք դրան գույն տանք։ Մենք դա կանենք rgba ձևաչափով: Եթե ​​դեռ չեք հանդիպել գույնի այս սահմանմանը, ապա մի անհանգստացեք։ Դա պարզ է՝ փակագծերում առաջին երեք պարամետրերը կորոշեն գույնը (rgb ձևաչափ), իսկ վերջին պարամետրը՝ դրա անթափանցության աստիճանը: Մեր օրինակում այս արժեքը կլինի 0,5 (այսինքն՝ 50%)։

Ահա վերը նշված բոլորի կոդը.

H4 (տառաչափը՝ 72px; դիրքը՝ հարաբերական; գույնը՝ rgba (0,0,102,0.5); )

2. Այժմ գալիս է զվարճալի մասը: Մենք կստեղծենք կեղծ տարր մեր h4 տարրի համար: Դա անելու համար դուք պետք է գրանցեք այն ոճաթերթում որպես h4: հետո.

Այս կեղծ տարրը կունենա մի քանի հետաքրքիր հատկություններ: Օրինակ՝ սեփականություն բովանդակությունը, որում պետք է գրել ճիշտ նույն տեքստը, ինչ h4 վերնագիրը։

Կեղծ տարրը պետք է տեղադրվի բացարձակապես (դիրք:բացարձակ):

Դրա գույնը պետք է սահմանվի h4 տարրի հակառակ գույնի վրա: Այսինքն, եթե h4-ն ունի կապույտ գույն, ապա կեղծ տարրը կունենա կարմիր գույն։ Իսկ անթափանցիկությունը դեռ 50% է:

Եվ նաև, մենք կկարգավորենք կեղծ տարրի դիրքը՝ օգտագործելով ձախ և վերին հատկությունները: Մենք պետք է համոզվենք, որ կեղծ տարրը, որն իր բովանդակության մեջ կրկնօրինակում է h4 տարրը, տեղադրված է մի փոքր դեպի աջ և ներքև (այժմ ամեն ինչ ինքներդ կտեսնեք): Այստեղ կարգավորումները կլինեն անհատական ​​և կախված կլինեն տառատեսակի չափից, տառատեսակի տեսակից և ցանկալի էֆեկտից:

Ահա վերը նշված բոլորի կոդը.

H4:after(բովանդակություն՝ «Անագլիֆիկ տեքստ», դիրք՝ բացարձակ; ձախ՝ 361px; վերև՝ 2px; գույն՝ rgba (255,0,0,0,5); )

Եվ ահա մեր ստացածի ազդեցությունը.

Դա այն ամենն է, ինչ ես ուզում էի սովորեցնել ձեզ այս դասում:

Համոզվեք, որ օգտագործեք այս տեխնիկան: Նախ.Գեղեցիկ, Երկրորդ.բոլոր վերնագրերը հիանալի ընթեռնելի են որոնման ռոբոտների կողմից, Երրորդ.Կոդը գրելուց հետո կարող եք օգտագործել վերնագիրը ձեր կայքի կամ բլոգի ցանկացած վեբ էջի վրա՝ պարզապես այն հայտարարելով html կոդում:

Եթե ​​ձեզ դուր եկավ այս դասը, Գրեք ձեր մեկնաբանությունը(եթե դա ձեզ նույնպես դուր չեկավ :)): Դա կդիտվի որպես երախտագիտություն։

Դուք կարող եք նաև կիսվել դասը ձեր ընկերների հետ՝ օգտագործելով սոցիալական ցանցի կոճակները։

Եվ, իհարկե, բաժանորդագրվեք բլոգի թարմացումներին (եթե արդեն չեք արել): Ես խոստանում եմ շատ օգտակար և հետաքրքիր բաներ:

Լավ տրամադրություն ունեցեք և նորից կհանդիպենք:

Այս հոդվածի նպատակն է դիտարկել h1, h2 վերնագրերի ոճավորման տարբեր տարբերակներ: H1 թեգը էջի հիմնական պիտակ է: Որպես կանոն, այն պարունակում է էջի թեմատիկ անվանումը։ H1 թեգը պետք է առանձնանա, որպեսզի օգտվողը հեշտությամբ հասկանա, թե ինչի մասին է ձեր կայքի էջը: Հետևաբար, այս պիտակը պետք է լինի ձեր էջի կարևորությունը: H1 թեգի CSS ոճավորումը կարող է պարզ լինել, բայց գլխավորն այն է, որ համոզվեք, որ տառատեսակի չափը ամենամեծն է էջի մյուսների շարքում: Եվ ոչ միայն այն պատճառով, որ այն գրավում է օգտատիրոջ աչքը, այն նաև դեր է խաղում էջի համապատասխանության և, հետևաբար, օպտիմալացման գործում:

H2 թեգը լրացնող թեգ է և կարող է լինել H1-ի իմաստային ստորաբաժանում: Մենք կքննարկենք նաև այն ոճավորելու տարբերակները։

Ստորև բերված են h1, h2 վերնագրերի CSS ոճավորման օրինակներ և մեթոդներ:

Styling մեթոդներh1,h2 վերնագրեր

ՕրինակներCSSՀ1,Հ2

Styling մեթոդներh1,h2 վերնագրեր

Մենք կքննարկենք h1, h2 թեգերի ոճավորման ուղիները լրահոս ստեղծելիս: Դիտարկենք ժապավենի տեսքով վերնագրի իրականացման երկու տարբերակ՝ արևմտյան և իմ տարբերակը։ Ես նախապես կասեմ, որ իմ մեթոդը գերակայություն ունի, բայց եթե դուք ունեք ձեր սեփական տարբերակները (մեթոդները) վերնագրերի ոճավորման համար, շնորհակալ կլինեմ, եթե դրանք կիսեք մեկնաբանություններում:

Արևմտյան ճանապարհ

Դա լավ տարբերակ է, բայց ինձ այնքան էլ դուր չի գալիս հոսքի ներդրման CSS եղանակը: Ես գտա արևմտյան կայքերից մեկում css h1 ժապավեն ստեղծելու այս մեթոդը: Այս հոսքն իրականացվում է մաքուր CSS կոդով, թեև բրաուզերների համատեղելիությունը տուժել է (IE-ում այն ​​պարզ բլոկ է թվում): Ստորև բերված է ոճի css աղբյուրի կոդը:

H1.ժապավեն ( տառաչափը՝ 16px !կարևոր; դիրքը՝ հարաբերական; ֆոն՝ #ba89b6; գույնը՝ #fff; տեքստի հավասարեցում՝ կենտրոն; լիցք՝ 1em 2em; լուսանցք՝ 0 0 3em; ) h1.ժապավեն:նախկինում, h1.ribbon:after (բովանդակությունը՝ ""; դիրքը՝ բացարձակ; ցուցադրում՝ արգելափակում; ներքևում՝ -1em; եզրագիծ՝ 1.5em կոշտ #986794; z-index՝ -1; ) h1.ribbon:pre ( ձախում՝ -2em եզրագիծ-աջ-լայնություն: 1.5em եզրագիծ-ձախ-գույն: h1.ժապավեն:հետո: ժապավեն .ribbon-content:before, h1.ribbon .ribbon-content:after ( բովանդակությունը՝ ""; դիրքը՝ բացարձակ; ցուցադրում՝ բլոկ; եզրագծի ոճ՝ ամուր; եզրագույնը՝ #804f7c թափանցիկ թափանցիկ; ներքևում՝ - 1em. )

HTML կոդում h1 ժապավենն այսպիսի տեսք ունի.

Կայքի համար h1, h2 վերնագրերի CSS ոճավորում

Իմ ուղին

Ինչպես տեսնում եք, CSS կոդը դժվար է ոճավորել միայն h1 թեգը: Ուստի ես առաջարկում եմ նման ժապավեն ստեղծելու իմ սեփական տարբերակը։ Բրաուզերների համատեղելիությունը փորձարկվել է IE, FireFox, Opera, Chrome-ում: Ստորև բերված է css կոդը և բոլոր սկզբնաղբյուր ֆայլերը:

H1 (բարձրություն՝ 67 պիքսել; ֆոն՝ url (ribbon_left.png) ձախ վերևում՝ առանց կրկնության; գույն՝ #FFF;) h1 ուժեղ (բարձրություն՝ 67 պիքսել; էկրան՝ արգելափակում; առավելագույն լայնություն՝ 450 պքս; լուսանցք՝ ձախ՝ 56 պքս, լցոնում -աջ: 56px ֆոն. url(ribbon_right.png) աջ վերև, առանց կրկնելու;)

Ինչպես օգտագործել այն HTML-ում.

CSS H1 վերնագիր կայքի համար

Պատկերներ:

Պատկերների ընդհանուր քաշը 750 բայթ է: CSS կոդը տեւում է ոչ ավելի, քան երկու տող եւ կշռում է 236 բայթ: Ես գոհ եմ արդյունքից, և ամեն ինչ պարզ և պարզ է, ի տարբերություն արևմտյան մեթոդի, որտեղ CSS կոդի քաշը 980 բայթ է։ Թեև իմ և արևմտյան տարբերակի քաշը նույնական է, կոդը հասկանալը շատ ավելի վատ է, քան պատկերը Photoshop-ում մշակելը։ Կարելի է ենթադրել, որ մեկ css ֆայլի բեռնման արագությունն ավելի արագ է, քան երեք ֆայլը (ամբողջովին նույնական է մեկ css ֆայլի քաշին), բայց դուք կարող եք ֆոնն իրականացնել sprites-ի տեսքով, ինչը կբարձրացնի կայքի բեռնման արագությունը։ . Իմացեք արագության բարձրացման մասին՝ օգտագործելով CSS sprites:

CSS H1, H2 օրինակներ

Բոլոր օրինակները կիրականացվեն իմ մեթոդով վերնագրերի ոճավորման սկզբունքի հիման վրա (օրինակ, կայք):

H1 վերնագրի CSS ոճավորում

Այս պարբերությունում մենք կկենտրոնանանք h1 վերնագրի ոճավորման իրական օրինակների վրա: Օրինակներ, բարձրաձայն ասված, քանի որ յուրաքանչյուր կայք ունի յուրահատուկ դիզայն: Թույլ տվեք ձեզ ներկայացնել H1-ի ոճավորման մեկ ունիվերսալ օրինակ: Դուք արդեն հասկանում եք վերնագրերը ոճավորելու իմ գաղափարը, ես ուզում եմ այն ​​լրացնել՝ օգտագործելով թափանցիկությունը ֆոնային պատկերում, որը հեշտությամբ կարելի է անել Photoshop-ում: Տես մի օրինակ ստորև:

Վերնագիր (լայնություն՝ 500px; ֆոն՝ #888;) h1 (բարձրություն՝ 70px; ֆոն՝ url (left.png) ձախ վերևի առանց կրկնության; գույն՝ #FFF; տողի բարձրություն՝ 50px;) h1 ուժեղ (բարձրություն՝ 70px Ցուցադրել:block-left:60px 60px 0px ֆոն. url(right.png)

Աղբյուրի նկարներ.

Վերնագրի h1 տեքստ

Ինչպես տեսնում եք, բնօրինակ պատկերներն ունեն կիսաթափանցիկություն, և վերնագրի դասում, փոխելով ֆոնային արժեքը, կարող եք հասնել հետևյալ արդյունքների.

CSS h1 + h2 (համատեղ ոճավորում)

h1-ը և h2-ը միասին ձևավորելը տեղին է, եթե դուք ունեք վերջաբան կամ փոքրիկ ներածություն ձեր կայքի հոդվածում, որը կարող է տեղադրվել h2 թեգում: Օրինակ:

Հ1– h1, h2 վերնագրերի ոճավորում;

Հ2– Սովորում ենք նախագծել h1, h2 վերնագրեր՝ օգտագործելով css:

Սա իմ օրինակն է, ամենայն հավանականությամբ, դուք ունեք ձեր սեփական պատկերացումն այն մասին, թե ինչպես պետք է ձևավորել կայքի էջերը: Css h1 + h2 օրինակը նման է նախորդին, եկեք նայենք css կոդը:

Ձախ (բարձրություն՝ 100px; ֆոն՝ url (left.png) ձախ վերևի առանց կրկնության;) .աջ (լայնություն՝ 500px; բարձրություն՝ 100px; ցուցադրում:block; լուսանցք՝ ձախ՝ 45px; լիցք՝ 0px 45px 0px 0px; ֆոն url(right.png) վերևի աջ, առանց կրկնության;) h1 (գույն՝#FFF; տառաչափ՝ 18px; լիցք՝ 15px;) h2 (գույն՝#CCC; տառաչափ՝16px; լիցք՝5px;)

Աղբյուրի նկարներ.

Վերնագրի H1 տեքստ

Հոդվածի փոքրիկ ներածություն կամ նկարագրություն՝ կցված H2 պիտակի մեջ:

Ցուցադրել:

Վերնագրերի համատեղ (h1 + h2) ոճավորման էությունը նման է նախորդ օրինակին, միայն այս դեպքում օգտագործվում են div բլոկներ:

H2 վերնագրի CSS ոճավորում

H2 վերնագրի ոճավորումը բարդ չէ: Բայց քանի որ մեր հոդվածը վերաբերում է h1 և h2 վերնագրերի ոճավորմանը, մենք ամեն ինչ կքննարկենք մինչև վերջ։

Որպես կանոն, h2 թեգը օգտագործվում է կայքի հոդվածի կամ այլ նյութի ենթակետերը ընդգծելու համար: Ես խորհուրդ կտայի ստեղծել համեստ, զուսպ, բայց հարմար h2 վերնագրեր: Ինձ շատ է դուր գալիս այն գաղափարը, թե ինչպես է կազմակերպված Վիքիպեդիան։ Խորհուրդ եմ տալիս ստեղծել նմանատիպ մի բան։ Դա պարզ է և հարմար: Օրինակ:

H2 վերնագրի ոճավորման օրինակ

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Ամբողջ թիվ և leo vel ipsum elementum sodales: Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Ձեր հոդվածի մեկ այլ ենթաբաժին

Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilis cursus mi ligula vitae nunc: Կուրաբիտուր ազատ. Fusce felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

Ցուցադրել:


Պարզ, հարմար և խաչաձեւ զննարկիչ:

Հուսով եմ, որ իմ հոդվածը օգնեց ձեզ: Եթե ​​ունեք հարցեր կամ առաջարկներ h1, h2 վերնագրերի CSS ոճավորման հետ կապված, գրեք մեկնաբանություններում։

Համացանցում տեքստային տեղեկատվության ձևավորումն ունի իր առանձնահատկությունները: Եթե ​​դուք կայքում տեղադրում եք որոշակի բովանդակություն, ապա, որպես կանոն, այն պետք է լավ կառուցված լինի. դրա համար օգտագործվում են վերնագրեր: Նրանց օգնությամբ տեքստերը դառնում են հնարավորինս հեշտ ընթերցվող և հասկանալի:

Սկսելուց առաջ մի քանի կետ.

  • Բոլոր օրինակ տառատեսակները անվճար են և հասանելի են Google WebFonts-ում:
  • Օրինակներում կան միայն H1-H4 վերնագրեր, քանի որ դրանք ամենատարածվածն են:
  • CSS ոճերի հեղինակն օգտագործել է մոդել, որտեղ [լայնություն] = [տարրի իրական լայնությունը] + [պլացք] + [սահմաններ]: Կոդում դրա համար մի հատված կա.
*, *: հետո, *: առաջ (տուփի չափս. եզրագծով ;)

*, *:հետո, *:նախքան ( տուփի չափս. եզրագծեր; )

Վերջապես, ներածությունում նշվում է «ուղղահայաց ռիթմ» հասկացությունը: Այն իրականում սահմանում է էջի բլոկների միջև եղած բոլոր լրացումները՝ լինի դա վերնագրեր, տեքստային պարբերություններ, պատկերներ կամ նույնիսկ պարզապես կայքի ձևանմուշի տարրեր: Սա հատկապես ճիշտ է, երբ օգտագործվում են անսովորները: Այսպիսով, CSS ոճերի բոլոր օրինակներն օգտագործում են նույն «ռիթմը».

h1 (տառաչափը՝ 36px; տողի բարձրությունը՝ 40px;) h2 (տառաչափը՝ 30px; տողի բարձրությունը՝ 40px;) h3 (տառաչափը՝ 24px; տողի բարձրությունը՝ 40px;) h4 (տառաչափի չափը 18px ;

h1 ( տառաչափը՝ 36px; տողի բարձրությունը՝ 40px; ) h2 ( տառաչափը՝ 30px; տողի բարձրությունը՝ 40px; ) h3 ( տառաչափը՝ 24px; տողի բարձրությունը՝ 40px; ) h4 ( տառատեսակ 18px;

Այժմ դուք կարող եք անմիջապես անցնել պրակտիկայի:

Օրինակ 1

Սկսենք քիչ թե շատ պարզ տարբերակից. Տպագրությունը հիանալի է մեդիա կայքի, գուցե նույնիսկ թերթի համար: Այս լուծումը չի առաջարկում որևէ հատուկ հնարավորություն, բացառությամբ, որ այն օգտագործում է 2 տառատեսակ՝ Ultra (sans-serif), Orienta (sans-serif): Վերջնական CSS կոդը.

.demo-1 .հիմնական h1 (լուսանցք՝ 1em 0 0.5em 0; գույնը՝ #343434; տառատեսակի քաշը՝ նորմալ; տառատեսակ՝ ընտանիք՝ «Ultra», sans-serif; տառաչափ՝ 36px: 4 տող: text-transform : text-shadow : 0 2px white , 0 3px #777 .demo-1 .main h2 ( լուսանցք : չափսը՝ 30px; տառատեսակի բարձրությունը՝ "Orienta", sans-serif .demo-1.main h3; -բարձրությունը՝ 40px, տառատեսակը՝ նորմալ, տառատեսակը՝ «Orienta», sans-style: italic; տող-բարձրություն : font-weight : "Orienta" ;

Demo-1 .main h1 ( լուսանցք՝ 1em 0 0.5em 0; գույնը՝ #343434; տառատեսակի քաշը՝ նորմալ; տառատեսակի ընտանիք՝ «Ultra», sans-serif; տառաչափը՝ 36px; տողի բարձրությունը՝ 42px; Տեքստ-տրանսֆորմ. մեծատառ; 30px տողերի բարձրությունը՝ 40px; տառատեսակը՝ «Orienta», sans-serif; Բարձրությունը՝ 40px, տառատեսակը՝ «Orienta»; -ընտանիք՝ «Orienta», sans-serif)

Օրինակ 2

Ահա մի փոքր ավելի հետաքրքիր իրականացում. վերնագրի ֆոնն ավելացվում է պինդ լրացման և նկարի տեսքով: CSS կոդը գրված է բավականին ճիշտ, նահանջները նշվում են տոկոսներով, որպեսզի երբ պատկերը փոքրացվի, վերնագրի տեքստը չմիավորվի ֆոնային պատկերի հետ։ Օգտագործված տառատեսակներ՝ Titillium Web (sans-serif), Muli (sans-serif):

.demo-2 .main h1 ( լուսանցք : 1em 0 0,5em 0 ; font-weight : 600 ; font-family : "Titillium Web" , sans-serif ; դիրքը : հարաբերական ; տառատեսակի չափը : 36px ; line-height ներդիր : 15px 15px 15% ; 285px 0 35px white ; border-radius : 0 10px 0 10px : #fff url (../images/bartoszkosowski.jpg ) no-repeat center left ; font-weight : text-shadow : 0 -1px rgba (0, 0, 0.6) ; սահմանային շառավիղ: 0 10px 0 10px , font-family ; ) .demo-2 .main h3 ( լուսանցք : 1em 0 0,5em 0 ; font-weight : 600 ; font-family : "Titillium Web" , sans-serif ; դիրքը : հարաբերական ; text-shadow : 0 -1px 1px . 0, 0, 0, 0.4; տառաչափ՝ 22px; #355681; 0 font-weight : font-family : "Titillium Web" ; sans-serif)

Demo-2 .main h1 ( լուսանցք՝ 1em 0 0.5em 0; տառատեսակի քաշը՝ 600; տառատեսակի ընտանիք՝ «Titillium Web», sans-serif; դիրքը՝ հարաբերական; տառաչափի չափը՝ 36px; տողի բարձրությունը՝ 40px; ներդիր՝ 15px 15px 15% գույն՝ #355681 տուփ-ստվեր՝ ներդիր 0 0 0 1px rgba(53,86,129, 0,4), ներդիր 0 0 5px rgba(53,86,150, -սպիտակ); եզրագիծ՝ 0 10px 0 10px ֆոն՝ #fff url(../images/bartoszkosowski.jpg) առանց կրկնության կենտրոնում ) .demo-2 .հիմնական h2 ( լուսանցք՝ 1em 0 0.5em 0; քաշը՝ նորմալ։ տեքստային ստվեր: 0,0,0,6 ֆոնտ: 0,8; -շառավիղը` 0 10px 0 10px; 600 տառատեսակ. «Titillium Web», sans-serif: գծի բարձրությունը՝ 40px; գույնը՝ #355681; տեքստ-տրանսֆորմ՝ մեծատառ; եզրագիծ-ներքև. 1px պինդ rgba(53,86,129, 0.3); ) .demo-2 .main h4 ( լուսանցք՝ 1em 0 0.5em 0; տառատեսակի քաշը՝ 600; տառատեսակ՝ ընտանիք՝ «Titillium Web», sans-serif; դիրքը՝ հարաբերական; տառատեսակի չափը՝ 18px; տողի բարձրությունը. 20px գույնը՝ #788699 տառատեսակ՝ «Muli», sans-serif)

Օրինակ 3

Այժմ մուգ դիզայնով կայքի համար վերնագրերի ներդրման օրինակ: Այդ նպատակով ընտրվել է բավականին վառ, հակապատկեր կապույտ գույն՝ ի տարբերություն մուգ մոխրագույն ֆոնի: Օգտագործված տառատեսակներն են՝ Hammersmith One (sans-serif), Questrial (sans-serif):

.demo-3 .հիմնական h2: հետո, .demo-3 .հիմնական h3: հետո, .demo-3 .հիմնական h4: հետո (դիրք: բացարձակ; բովանդակություն: ""; ձախ: 0; վերև: 0; ներքև: 0 Լայնությունը՝ 5px, 2px , 0,0, 0, 0,5 , 255 , 0,3 h ; demo-3 .main h3: after ( ֆոն : #3BF ; ) .demo-3 .main h4: after ( background : #6Cf ; ) .demo-3 .main h1 ( font-size : 36px ; line-height : 40px ; Լուսանցք 0 .6մ 0 ; տառատեսակ : Դիրքը՝ հարաբերական՝ #6Cf .դեմո-3 .հիմնական h2 ( լուսանցք : 1em 0 .6em 0 , padding : 0 0 0 20px ; font-weight : white ; font-family : " ", sans-serif; text-shadow: 0 -1px 0 rgba (0, 0, 0, 0.4); պաշտոնը` հարաբերական; տառաչափը՝ 30px; գծի բարձրությունը՝ 40px; ) .demo-3 .main h3 ( լուսանցք : 1em 0 .6em 0 ; padding : 0 0 0 20px ; font-weight : normal ; color : white ; font-family : "Hammersmith One", sans-serif ; 0 -1px 0 rgba (0, 0, 0.4 ) : font-size ; 0 0 20px font-weight : normal ; font-size : 18px ;

Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after (դիրք՝ բացարձակ; բովանդակություն՝ ""; ձախ՝ 0; վերև՝ 0; ներքևում՝ 0; լայնությունը՝ 5px, արկղ-ստվեր՝ ներդիր 0,0,0,5), 0 1px rgba (255,255,0,3 ֆոն.) ; հիմնական h3:after (ֆոն՝ #3BF; ) .demo-3 .main h4:after (ֆոն՝ #6Cf;) .demo-3 .main h1 ( տառաչափը՝ 36px; տողի բարձրությունը՝ 40px; լուսանցք՝ 1em 0 .6em 0 գույնը` տառատեսակը` «Hammersmith One», sans-shadow: 0 ,0,0,0.4 .գույն; 3 .հիմնական h2 (լուսանցք՝ 1em 0 .6em 0; լիցք՝ 0 0 0 20px; տառատեսակի քաշը՝ նորմալ; գույնը՝ սպիտակ; տառատեսակ՝ ընտանիք՝ "Hammersmith One", sans-serif: 0 -1px 0 rgba(0 ,0,0,0.4 տառաչափ՝ 30px .demo-3 .հիմնական h3 (լուսանցք՝ 1em 0.6em 0; padding՝ 0 0 0 20px; font-weight՝ normal; գույնը՝ սպիտակ; font-family; «Hammersmith One», sans-serif; text-shadow: 0 -1px 0 rgba(0,0,0,0.4); պաշտոնը` հարաբերական; տառաչափը՝ 24px; գծի բարձրությունը՝ 40px; տառատեսակ-ընտանիք՝ «Questrial», sans-serif; ) .demo-3 .main h4 ( լուսանցք՝ 1em 0 .6em 0; լիցք՝ 0 0 0 20px; տառատեսակի քաշը՝ նորմալ; գույնը՝ սպիտակ; տառատեսակ՝ ընտանիք՝ «Hammersmith One», sans-serif; text-shadow 0 -1px 0 rgba(0,0,0,0.4) font-size: 18px;

Օրինակ 4

Եկեք փորձարկենք ֆոնի վրա. ինչպես ավելացնել փայտե հյուսվածք: Տառատեսակներ Scada (sans-serif), Carrois Gothic (sans-serif) և H2-ի թերթիկը նույնպես իրականացվում է տառատեսակի միջոցով, այլ ոչ թե պատկերի:

.demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i (padding-right: 10px; գույնը` #A8D13B; տառատեսակի չափը 0.8em ) .demo-4 .main h2: after , .demo-4 .main h3: after , .demo-4 .main h4: after ( position : բացարձակ ; բովանդակություն : "" ; բարձրություն : 1px ; border- շառավիղը` 2px: 0 -1px 0 rgba (0, 0, 0, 0.1), 0 1px 0 rgba (255, 255, 255, 0.6); ;) .դեմո-4 .հիմնական h3 : հետո { լայնությունը: 75% ; } .դեմո-4 .հիմնական h4 : հետո { լայնությունը: 50% ; } .դեմո-4 .հիմնականհ1 { մարժա: 1մ 0 0,75 մ; լիցքավորում: 0 0 5px 0 ; գույն: #6B5344; տառատեսակի քաշը: նորմալ; դիրք: ազգական; տեքստ-ստվեր: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; տառաչափ: 36px; գիծ-բարձրություն: 40px; տառատեսակ-ընտանիք: «Կարուա գոթիկա», sans-serif; } .դեմո-4 .հիմնական h2 { մարժա: 1մ 0 0,75 մ; լիցքավորում: 0 0 5px 0 ; գույն: #6B5344; տառատեսակի քաշը: նորմալ; տառատեսակ-ընտանիք: «Սկադա», sans-serif; դիրք: ազգական; տեքստ-ստվեր: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; տառաչափ: 30px; գիծ-բարձրություն: 40px; } .դեմո-4 .հիմնական h3 { մարժա: 1մ 0 0,75 մ; լիցքավորում: 0 0 5px 0 ; գույն: #6B5344; տառատեսակի քաշը: նորմալ; տառատեսակ-ընտանիք: «Սկադա», sans-serif; դիրք: ազգական; տեքստ-ստվեր: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; տառաչափ: 24px; գիծ-բարձրություն: 40px; } .դեմո-4 .հիմնական h4 { մարժա: 1մ 0 0,75 մ; լիցքավորում: 0 0 5px 0 ; գույն: #6B5344; տառատեսակի քաշը: նորմալ; տառատեսակ-ընտանիք: «Սկադա», sans-serif; դիրք: ազգական; տեքստ-ստվեր: 0 2px 0 rgba(255 , 255 , 255 , 0.5 ) ; տառաչափ: 18px; գիծ-բարձրություն: 20px; }

Demo-4 .main h1 i, .demo-4 .main h2 i, .demo-4 .main h3 i, .demo-4 .main h4 i ( padding-right: 10px; գույնը՝ #A8D13B; font-size: 0.8em; 2px ձախ՝ 0, արկղ-ստվեր: 4 .հիմնական h3:հետո ( լայնությունը՝ 75%; ) .դեմո-4 .հիմնական h4:հետո ( լայնությունը՝ 50%; ) .դեմո-4 .հիմնական h1 ( լուսանցք՝ 1em 0 0.75em; լիցք՝ 0 5px 0; գույնը՝ #6B5344, հարաբերական տեքստային ստվեր՝ 0 2px 0.5 font-family: "Carrois Gothic", sans-serif .main h2 ( margin: 0.75em; 0 5px 0, font-weight: normal-family: "Scada"; գծի բարձրությունը՝ 40px՝ 1em 0,75em; լիցք՝ 0 0 5px 0; գույնը՝ #6B5344; տառատեսակի քաշը՝ նորմալ; տառատեսակ-ընտանիք՝ «Scada», sans-serif; պաշտոնը` հարաբերական; text-shadow՝ 0 2px 0 rgba(255,255,255,0.5); տառաչափը՝ 24px; գծի բարձրությունը՝ 40px; ) .demo-4 .main h4 ( լուսանցք՝ 1em 0 0.75em; լիցք՝ 0 0 5px 0; գույնը՝ #6B5344; տառատեսակի քաշը՝ նորմալ; տառատեսակ՝ ընտանիք՝ «Scada», sans-serif; դիրքը՝ հարաբերական; text-shadow: 0 2px 0 rgba(255,255,255,0.5 font-size: 18px);

Օրինակ 5

Մեկ այլ հետաքրքիր և անսովոր գունային սխեման. գուցե այն ձեզ մղի դեպի ձեր սեփական գաղափարներն ու իրականացումները: Վերնագրերը, սկզբունքորեն, միշտ չեն կարող ունենալ համարձակ, մեծ տառատեսակ. կան նման տարբերակներ:

.դեմո-6 .հիմնականհ1 { մարժա: 1մ 0 0,5 մ 0 ; տառատեսակի քաշը: 100 ; տեքստի փոխակերպում: մեծատառ; գույն: #00caa6; տառատեսակի ոճ: շեղ; տառատեսակ-ընտանիք: Ժոզեֆին Սանս, sans-serif; տառաչափ: 58px; գիծ-բարձրություն: 54px; տեքստ-ստվեր: 2px 5px 0 rgba(0 , 0 , 0 , 0.2 ) ; } .դեմո-6 .հիմնական h2 { մարժա: 1մ 0 0,5 մ 0 ; գույն: #148773 ; տառաչափ: 26px; գիծ-բարձրություն: 40px; տառատեսակի քաշը: համարձակ; տառատեսակ-ընտանիք: Ժոզեֆին Սանս, sans-serif; } .դեմո-6 .հիմնական h3 { մարժա: 1մ 0 0,5 մ 0 ; գույն: #343434 ; տառաչափ: 22px; գիծ-բարձրություն: 40px; տառատեսակի քաշը: 100 ; տեքստի փոխակերպում: մեծատառ; տառատեսակ-ընտանիք: Ժոզեֆին Սանս, sans-serif; տառերի տարածություն: 1px; տառատեսակի ոճ: շեղ; } .դեմո-6 .հիմնական h4 { մարժա: 1մ 0 0,5 մ 0 ; գույն: #343434 ; տառաչափ: 18px; գիծ-բարձրություն: 20px; տառատեսակի քաշը: համարձակ; տառատեսակ-ընտանիք: Ժոզեֆին Սանս, sans-serif; }

Demo-6 .main h1 ( լուսանցք՝ 1em 0 0.5em 0; տառատեսակի քաշը՝ 100; տեքստի փոխակերպում՝ մեծատառ; գույնը՝ #00caa6; տառատեսակի ոճը՝ շեղ; տառատեսակ՝ ընտանիք՝ "Josefin Sans", sans-serif font-size: 58px; տառատեսակի չափը՝ 26px; տառատեսակի բարձրությունը՝ 40px; տառատեսակը՝ sans-serif) 40px տեքստ-տրանսֆորմացիա՝ "Josefin Sans", sans-serif: 1px .demo-6 .main h4 ( լուսանցք՝ #343434; տողերի բարձրությունը՝ 20px, տառատեսակը՝ համարձակ.

Եթե ​​դուք գրեթե ամբողջությամբ գիտեք CSS-ը, ապա բնօրինակ հոդվածը պատմում է ձեզ, թե ինչպես օգտագործել որոշակի նախապրոցեսորներ ոճերում՝ նվազեցնելու կոդի քանակը և այն ավելի պարզեցնելու համար: Անկեղծ ասած, սա առաջին անգամն է, որ ես տեսնում եմ գործառույթների օգտագործումը և պարամետրերի փոխարինումը CSS ոճի ֆայլում, բայց կոդը շատ տեսողական է ստացվում: Նաև, իհարկե, բնօրինակ հոդվածում դուք կգտնեք հղումներ դեպի աղբյուրներ և բոլոր տարբերակների ցուցադրական տարբերակները:

P.S. Տ Նրանց համար, ովքեր աշխատում են ինտերնետում կամ նոր են սկսում, հոդվածը այն մասին, թե ինչ է TIC-ը, կօգնի ձեզ կողմնորոշվել համացանցում ամենաարդիական և քննարկված հասկացություններից մեկում:



 

Կարող է օգտակար լինել կարդալ.