Дизайн на заглавката. Как да добавя фонов цвят към текста на заглавието? Заглавен текст h1

От автора:Добре дошли в нашия блог за изграждане на уебсайтове. Всеки сайт има нещо, което обикновено го прави запомнящ се и се отличава от останалите. Обикновено това е заглавката на сайта. CSS ви позволява да го направите така, както искате.

Хедър на уебсайта - какво представлява

Удивително е колко много може да зависи днес само от дизайна на един уеб ресурс. Но какво особено отличава един уеб ресурс от другите? По правило това е заглавката на сайта с корпоративно лого и уникален дизайн. Обикновено така хората запомнят някакъв интернет проект. Това е много добре запомнено в паметта на хората.

Например, ако видите бяла буква „B“ на син фон, вероятно веднага ще заключите, че това е икона за социалната мрежа VKontakte. И всички веднага свързват образа на пощенски гълъб с Twitter. Всичко това стана възможно, защото тези сайтове имаха точно такива изображения в заглавките и хората ги запомниха много добре.

Добре, това беше малко мисъл, сега да преминем направо към техническата част.

Как можете да проектирате заглавка на уебсайт в CSS?

Като цяло шапките са различни. Въз основа на тяхната ширина те могат да бъдат разделени на две групи: подравнени към центъра и такива, които обхващат цялата ширина на уеб страницата.

Преди това заглавката беше направена по същия начин като всеки друг блок - на обичайния таг div беше даден необходимия идентификатор, след което цялото необходимо съдържание влезе в него и след това всичко това беше форматирано. Днес вече е обичайно да се пише по различен начин. Специално за създаване на заглавка на сайта в HTML5 се появи сдвоен етикет - заглавка. Използването му се насърчава, позволява на браузърите да разберат какво представлява тази част от шаблона и какво прави. Между другото, ако искате да научите основите на 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) и първо го слагам в същата папка, в която е стиловият файл. Забраняваме повторението на логото и определяме позицията му в блока - леко го изместваме наляво и вертикално в центъра.

Нека добавим малко съдържание към заглавката. Например заглавка и меню.

Име на сайта

• Контакти
• За нас
• Услуги

< div class = "title" >Име на сайта< / div > < ul class = "menu" > < li > < a href = "#" >Контакти< / a > < / li > < li > < a href = "#" >За нас< / a > < / li > < li > < a href = "#" >Услуги< / a > < / li > < / ul >

Сега нека формализираме всичко това.

Заглавие (размер на шрифта: 36px; padding-top: 10px; text-align: center; ) .menu( list-style: none; position: absolute; top: 10px; right: 100px; )

Заглавие ( размер на шрифта: 36px; подложка - отгоре : 10px ; текст - подравняване : център ;

Без значение какъв вид уебсайт или уеб приложение се разработва, винаги има нужда от създаване на стилове за заглавия като h1 или h2. В този урок ще разгледаме няколко ефекта, които се прилагат към заглавия с помощта на псевдо елементи.

Защо се използват псевдо елементи? Отговорът е прост: не е необходимо допълнително маркиране.

HTML

Приемете урока със смирение

Без специални маркировки. Обичайно заглавие, указващо класа.

CSS

Body( ширина: 60%; марж: 50px автоматично; padding: 15px; позиция: относителна; /*необходим за заглавка 4*/ z-индекс: 0; /*необходим за заглавка 4*/ граница: 7px плътна #cecece; граница : 7px solid rgba(0,0,0,.05); background-clip: 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); Sans-serif; font- размер: 22px;

Обърнете внимание на декларацията на background-clip: padding-box. Помага да се получи интересен ефект: прозрачна рамка за нашия контейнер. CSS свойството background-clip определя дали фонът на даден елемент (цвят или изображение) ще взаимодейства с подлежащите слоеве.

Този прост и приятен ефект се постига с помощта на свойството border:

Заглавие1 ( border-bottom: 1px прекъсната #aaa; border-left: 7px solid #aaa; border-left: 7px solid rgba(0,0,0,.2); margin: 0 -15px 15px -22px; padding: 5px 15px)

Заглавие 2

Този стил може да бъде постигнат с помощта на метода на триъгълника:

Headline2 ( border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position: relative; ) .headline2:before, .headline2:after( content: ""; border-right: 20px solid #fff; border-top: 15px solid #aaa; position: absolute left: 25px; .headline2:after(border-top-color: #fff; border-right-color: transparent; bottom: -13px; left: 26px )

Заглавие 3

Но този ефект на лента може да се използва и за проектиране на заглавие:

Заглавие3( позиция: относителна; поле отляво: -22px; /* 15px подложка + 7px граница сянка на лента*/ margin-right: -22px; подложка: 15px; фон: #e5e5e5; фон: -moz-linear-gradient(# f5f5f5, #e5e5e5); фон: -webkit-градиент(линеен, ляво отгоре, ляво отдолу, от(#f5f5f5), до(#e5e5e5)); фон: -o-linear-gradient(#e5e5e5); background: -ms-linear-gradient(#f5f5f5, #e5e5e5); background: linear-gradient(#f5f5f5, #e5e5e5);shadow: 0 -1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset-shadow: 0 -1px 0 rgba(255,255,.8) text-shadow; : 0 1px 0 #fff; ) .headline3:before, .headline3:after( position: absolute; left: 0; bottom: -6px; content:""; border-top: 6px solid #555; border-left: 6px плътен прозрачен; .headline3:before( border-top: 6px solid #555; border-right: 6px solid transparent; border-left: none; left: auto; right: 0; bottom: -6px; )

Можете също така да създадете страхотно заглавие, като използвате свойството box-shadow:

Заглавие4( позиция: относителна; цвят на границата: #eee; стил на границата: плътна; ширина на границата: 5px 5px 5px 0; фон: #fff; марж: 0 0 15px -15px; padding: 5px 15px; -moz-box -shadow: 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3);box-shadow: 1px 1px 1px rgba(0 ,0,0,.3); .headline4:after ( съдържание: ""; позиция: абсолютна; z-индекс: -1; долу: 15px; дясно: 15px; ширина: 70%; височина: 10px; фон: rgba (0, 0, 0, .7); webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow(0, 0, 0); , .7); box-shadow: 0 10px rgba(0, 0, 0, .7); ms-трансформация: завъртане (2 градуса); трансформиране: завъртане (2 градуса)

Винаги искате да привлечете вниманието към заглавията на уебсайт или блог, искате да ги направите красиви и за предпочитане с ефекти (например сянка, блясък или 3D). В Adobe Photoshop могат да се направят доста красиви заглавия, но накрая те са изображения, което означава, че текстът им не може да бъде прочетен от роботи за търсене... Какво да правя? Има изход!

Наистина, когато определяте уместността на вашата уеб страница за определени заявки за търсене и й присвоявате място в резултатите от търсенето, заглавията играят ДАЛЕЧ от последното място. Дори бих казал един от най-значимите. Би било доста безразсъдно да ги оставя под формата на снимка (въпреки че веднъж преработих един сайт, чийто текст на няколко страници беше картина... да, да, и това се случва...).

Можете, разбира се, да забравите за красотата и да направите заглавията обикновени, както навсякъде другаде. Но защо, ако има доста прост начин, който ще остави вашите заглавия в текстов формат и може да им даде много красиви и интересни ефекти? И днес ще ви покажа тези техники. Мисля, че след като усвоите тези техники, ще ги използвате постоянно. С една дума, ще убиете два заека с един камък: направете уеб дизайна си по-впечатляващ и уместността на страницата няма да навреди.

Да започваме!

Създаване на 3D заглавка

Така че ще създаваме ефекти директно при оформлението на уеб страницата.

1. Първо трябва да създадете нов html файл, както и файл със стилова таблица (css).

За да ви покажа как се прави всичко това, създадох html файл и го нарекох „title.html“ (ако е необходимо, можете да изтеглите всички изходни файлове за този урок и да ги видите в „източници“). Ето изходния код на нашия html файл:

3D текст тук

Shadow Title Тук

Светещ текст тук

Анаглифен текст

Това е HTML5 документ, към него е свързан стилов лист (файл css.css), а вътре в етикета body има само четири заглавия от различен калибър.

Ще работим с тези заглавия. Не се нуждаем от нищо друго в html файла.

2. Както вече казах, имаме нужда от файл със стилова таблица. Ние вече го свързахме, но ако не сте го създали, създайте го.

Създадох файл, наречен css.css, и го поставих в същата директория като html файла.

Преди да започнем да създаваме 3D заглавката, нека добавим основен стил към страницата, за да изглежда малко по-привлекателна.

Нека да определим височината, ширината, цвета на страницата, да я центрираме и да зададем пунктирана рамка за етикета body.

Нека също незабавно да подравним всички наши заглавия в центъра.

Ето кода, който трябва да бъде написан във файла със стиловия лист:

Тяло (височина:700px; ширина:90%; цвят на фона:#069; margin:0 auto; border:1px пунктирана #000066; ) h1, h2, h3, h4(text-align:center;)

Стартирайте html файла във вашия браузър. Страницата ще изглежда така:

3. Сега нека започнем трансформацията. Ще превърнем заглавието h1 в 3D текст.

Всичко това ще се случи в един и същ файл със стилова таблица.

Поставете следния код под всичко, което сте написали досега във файла css.css:

H1(размер на шрифта:72px; цвят:#fff; text-shadow:#B6B6B6 1px -1px 0, #B6B6B6 2px -2px 0, #B6B6B6 3px -3px 0, #B6B6B6 4px -4px 0, #B6B6B6 5px -5px 0;)

Сега нека да разгледаме тази част от кода. В първите два реда задаваме размера на шрифта и основния цвят. Но тогава започва забавлението. Използвайки свойството text-shadow, създаваме сянка за шрифта, но не съвсем.

Факт е, че след двоеточието това свойство изброява следните параметри: цвят, хоризонтално изместване, вертикално изместване и размазване.

Какво правим?

Първо: избираме цвят, близък до основния, но по-тъмен. В нашия пример цветът на предния план е бял, а цветът на сянката на текста е сив (но не много тъмен). Тук трябва да експериментирате, докато постигнете желания резултат.

Второ: постепенно преместваме (всеки път с 1 пиксел) тази сянка надясно и нагоре. Това се указва от следните 2 параметъра (1px -1px, 2px -2px и т.н.).

Трето: оставяме размазването на нула навсякъде, защото просто нямаме нужда от него, за да създадем 3D текст.

В резултат на това получаваме тази картина:

В този пример се спрях на отместване от 5px, но можете да направите повече или по-малко. Всичко зависи от това какъв резултат искате да постигнете.

Също така не забравяйте да експериментирате с цветовете, опитвайки се да създадете по-естествен вид.

Създайте заглавка със сянка

Създаването на заглавка със сянка е много просто. И ние ще постигнем това само с няколко реда код.

Сега ще работим върху заглавието h2.

Първо, трябва да зададете неговия размер и основен цвят (аз задавам размера точно същия като заглавката h1, но вие, разбира се, проектирате всяка заглавка според нуждите си).

След като зададем цвета и размера, отново ще използваме свойството text-shadow. Първият параметър е да посочите цвета, той трябва да е по-тъмен (все пак това е сянка). Вторият и третият параметър са хоризонтални и вертикални измествания. Текстът ми е голям, така че ще ги направя 5 пиксела. И последният параметър е радиусът на размазване. Сянката се нуждае от нея, затова й присвояваме стойност от 4 пиксела. В резултат на това кодът ще изглежда така:

H2(размер на шрифта:72px; цвят:#F90; text-shadow:#191919 5px 5px 4px; )

И ще изглежда така:

Можете да експериментирате с параметрите и пак да получите различни резултати. Помислете за размера на шрифта на вашия текст, неговия цвят и това, което искате да постигнете.

Създайте заглавка със сияние

Това също е просто. Тук ще работим със заглавието h3.

Принципът е същият: първо задаваме размера на шрифта и основния му цвят, след което използваме текстова сянка.

Изберете цвета на сиянието. Както разбирате, той ще бъде по-светъл от основния цвят на заглавието. Вторият и третият параметър ще бъдат равни на нула (тук няма да преместваме нищо никъде). Но радиусът на размазване трябва да е по-голям (размерът му също зависи от това какъв вид блясък искате да получите).

В резултат на това кодът ще бъде както следва:

H3(размер на шрифта:72px; цвят:#333; text-shadow:#fff 0 0 20px; )

И нашето заглавие със сияние ще изглежда така:

Заглавие със стерео ефект

Може да се нарече и анаглифен текст. Може да се сравни с очила за гледане на 3D филм.

Няма да ви мъча... Както се казва: по-добре е да видите веднъж, отколкото да слушате дълго описание.

Ефектът е много интересен и принципно не е труден за създаване.

Да започваме. Тук ще работим с h4 хедър.

1. Първо, нека зададем размера на заглавката. Ще го направя същото като останалите заглавки в нашия пример.

Сега трябва да позиционираме заглавния елемент. Нека зададем свойството position на относително. Това означава, че позицията на елемента ще бъде зададена спрямо първоначалното му местоположение.

Сега нека да му дадем цвят. Ще направим това във формат rgba. Ако все още не сте срещали това определение за цвят, тогава не се тревожете. Всичко е просто: първите три параметъра в скоби ще определят цвета (формат rgb), а последният параметър ще определи степента на неговата непрозрачност. В нашия пример тази стойност ще бъде 0,5 (т.е. 50%).

Ето кода за всичко по-горе:

H4(размер на шрифта:72px; позиция:относителна; цвят:rgba(0,0,102,0.5); )

2. Сега идва забавната част. Ще създадем псевдо елемент за нашия h4 елемент. За да направите това, ще трябва да го регистрирате в листа със стилове като h4: след.

Този псевдо елемент ще има няколко интересни свойства. Например собственост съдържание, в който трябва да напишете абсолютно същия текст като заглавието h4.

Псевдоелементът трябва да бъде позициониран абсолютно (position:absolute).

Цветът му трябва да бъде настроен на противоположния цвят на елемента h4. Тоест, ако h4 има син цвят, тогава псевдоелементът ще има червен цвят. И непрозрачността все още е 50%.

И също така ще коригираме позицията на псевдо елемента, като използваме свойствата ляво и горно. Трябва да се уверим, че псевдоелементът, който дублира елемента h4 в съдържанието си, е разположен малко вдясно и по-долу (сега ще видите всичко сами). Тук настройките ще бъдат индивидуални и ще зависят от размера на шрифта, вида на шрифта и желания ефект.

Ето кода за всичко по-горе:

H4:after( content:"Anaglyphic Text"; position:absolute; left:361px; top:2px; color:rgba(255,0,0,0.5); )

И ето ефекта от това, което получаваме:

Това е всичко, на което исках да ви науча в този урок.

Не пропускайте да използвате тази техника! Първо:Красив, Второ:всички заглавия са перфектно четими от роботите за търсене, Трето:След като напишете кода, можете да използвате заглавието на всяка уеб страница от вашия сайт или блог, просто като го декларирате в html кода.

Ако ви е харесал този урок, Напишете своя коментар(ако и на вас не ви е харесало :)). Ще се счита за благодарност.

Можете също да споделите урока с приятелите си, като използвате бутоните на социалните мрежи.

И разбира се, абонирайте се за актуализации на блога (ако още не сте го направили). Обещавам много полезни и интересни неща!

Добро настроение и до нови срещи!

Целта на тази статия е да разгледа различни варианти за стилизиране на заглавия h1, h2. Тагът H1 е важен таг в тялото на страницата. По правило съдържа тематичното заглавие на страницата. Тагът H1 трябва да се откроява, така че потребителят да може лесно да разбере за какво е страницата на вашия сайт. Следователно този таг трябва да бъде акцентът на вашата страница. CSS стилизирането на тага H1 може да бъде просто, но основното е да се уверите, че размерът на шрифта е най-големият сред другите на страницата. И не само защото хваща окото на потребителя, но и играе роля в уместността на страницата и следователно в оптимизацията.

Тагът H2 е допълнителен таг и може да бъде семантично подразделение на H1. Ще разгледаме и варианти за оформянето му.

По-долу са дадени примери и методи за CSS стилизиране на h1, h2 заглавия.

Методи за оформянеh1,h2 заглавки

ПримериCSSH1,H2

Методи за оформянеh1,h2 заглавки

Ще разгледаме начини за стилизиране на тагове h1, h2 при създаване на фийд. Нека да разгледаме две опции за внедряване на заглавка под формата на лента: западна и моята версия. Предварително ще кажа, че моят метод е с предимство, но ако имате свои собствени опции (методи) за стилизиране на заглавия, ще съм благодарен, ако ги споделите в коментарите.

Западен начин

Това е добър вариант, но не ми харесва много CSS начинът за внедряване на емисията. Намерих този метод за създаване на css h1 лента на един от западните сайтове. Тази емисия е реализирана с помощта на чист CSS код, въпреки че съвместимостта между различни браузъри е пострадала (в IE изглежда като обикновен блок). По-долу е изходният код на стил css.

H1.ribbon (размер на шрифта: 16px !важно; позиция: относителна; фон: #ba89b6; цвят: #fff; подравняване на текст: център; подложка: 1em 2em; поле: 0 0 3em; ) h1.ribbon:before, h1.ribbon:after (съдържание: ""; позиция: абсолютна; дисплей: блок; дъно: -1em; рамка: 1.5em solid #986794; z-index: -1; ) h1.ribbon:before ( ляво: -2em ; border-right-width: 1.5em; border-left-color: transparent; h1.ribbon:after (right: -2em; border-left-width: 1.5em; border-right-color: transparent; ) h1. лента .ribbon-content:before, h1.ribbon .ribbon-content:after ( съдържание: ""; позиция: абсолютна; дисплей: блок; стил на границата: плътен; цвят на границата: #804f7c прозрачен прозрачен прозрачен; дъно: - 1em;) h1.ribbon .ribbon-content:before (left: 0; border-width: 1em 0 0 1em; ) h1.ribbon .ribbon-content:after (right: 0; border-width: 1em 1em 0 0; )

В HTML код лентата h1 изглежда така:

CSS стилизиране на h1, h2 хедъри за сайта

Моят начин

Както можете да видите, CSS кодът е тромав за стилизиране само на тага h1. Затова предлагам свой собствен начин за създаване на такава лента. Съвместимостта между различни браузъри е тествана на IE, FireFox, Opera, Chrome. По-долу е CSS кодът и всички изходни файлове.

H1 (височина:67px; фон: url(ribbon_left.png) ляво горе без повторение; цвят:#FFF;) h1 силно (височина:67px; дисплей:блок; максимална ширина:450px; margin-left:56px; подложка -right:56px; фон: url(ribbon_right.png) дясно горе без повторение;)

Как да го използвате в HTML:

CSS H1 хедър за сайта

изображения:

Общото тегло на изображенията е 750 байта. CSS кодът отнема не повече от два реда и тежи 236 байта. Доволен съм от резултата и всичко е просто и ясно, за разлика от западния метод, където теглото на CSS кода е 980 байта. Въпреки че моята и западната версия са идентични по тегло, много по-лошо е да разберете кода, отколкото да обработите изображението във Photoshop. Можем да предположим, че скоростта на зареждане на един css файл е по-бърза от три файла (напълно идентични с теглото на един css файл), но можете да внедрите фона под формата на спрайтове, което ще увеличи скоростта на зареждане на сайта. Научете за увеличаване на скоростта с помощта на CSS спрайтове.

Примери за CSS H1, H2

Всички примери ще бъдат изпълнени въз основа на принципа на стилизиране на заглавия с помощта на моя метод (пример, сайт).

CSS стил на H1 заглавка

В този параграф ще се съсредоточим върху реални примери за стилизиране на h1 заглавката. Примери, силно казано, тъй като всеки сайт има уникален дизайн. Нека ви дам един универсален пример за H1 стил. Вече разбирате моята идея за стилизиране на заглавията, искам да я допълня с помощта на прозрачност във фоновото изображение, което лесно може да се направи във Photoshop. Вижте пример по-долу.

Заглавие ( width:500px; background: #888;) h1 (height:70px; background: url(left.png) ляво горе без повторение; color:#FFF; line-height: 50px;) h1 силна (height:70px) ; display:block; margin-left: 60px; padding: 60px 0px; background: url(right.png) right top no-repeat;)

Изходни снимки:

Както можете да видите, оригиналните изображения имат полупрозрачност и в класа на заглавието, като промените фоновата стойност, можете да постигнете следните резултати:

CSS h1 + h2 (съвместен стил)

Стилизирането на h1 и h2 заедно е подходящо, ако имате епилог или малко въведение към статия на вашия сайт, което може да бъде поставено в тага h2. Например:

H1– Оформяне на заглавия h1, h2;

H2– Научете се да проектирате h1, h2 заглавия с помощта на css.

Това е моят пример, най-вероятно имате собствена идея как да проектирате страниците на уебсайта. Примерът css h1 + h2 е подобен на предишния, нека да разгледаме кода на css.

Left(height:100px; background: url(left.png) left top no-repeat;) .right( width:500px; height:100px; display:block; margin-left:45px; padding: 0px 45px 0px 0px; background : url(right.png) горе вдясно без повторение;) h1 (цвят:#FFF; размер на шрифта:18px; подложка:15px;) h2 (цвят:#CCC; размер на шрифта:16px; подложка:5px;)

Изходни снимки:

Дисплей:

Същността на съвместното (h1 + h2) стилизиране на заглавията е подобна на предишния пример, само в този случай се използват блокове div.

CSS стил на H2 заглавка

Оформянето на h2 заглавката не е трудно. Но тъй като нашата статия се отнася до стила на заглавията h1 и h2, ще разгледаме всичко до края.

По правило тагът h2 се използва за подчертаване на подпараграфи на статия или друг материал на сайта. Бих посъветвал да създадете скромни, дискретни, но удобни заглавия h2. Много ми харесва идеята как е организирана Уикипедия. Съветвам ви да създадете нещо подобно. Това е просто и удобно. Например:

Пример за стил на H2 заглавка

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Цяло число при лео 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. Curabitur libero. фусце фелис. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

Дисплей:

Прост, удобен и кросбраузър.

Надявам се статията ми да ви е помогнала. Ако имате някакви въпроси или предложения относно CSS стила на h1, h2 заглавки, пишете в коментарите.

Дизайнът на текстовата информация в мрежата има свои специфични характеристики. Ако публикувате някакво съдържание на сайта, тогава, като правило, то трябва да бъде добре структурирано - за това се използват заглавия. С тяхна помощ текстовете се правят максимално лесни за четене и разбиране.

Няколко точки преди да започнем:

• Всички примерни шрифтове са безплатни и достъпни в Google WebFonts.
• В примерите има само заглавки H1-H4, тъй като те са най-често използваните.
• Авторът на CSS стиловете използва модел, в който [ширина] = [действителна ширина на елемента] + [подложка] + [граници]. За да направите това, в кода има фрагмент:

*, *: след, *: преди (box-sizing: border-box;)

*, *:след, *:преди (оразмеряване на кутия: граница-кутия;)

И накрая, въведението споменава понятието „вертикален ритъм“. Той всъщност задава цялата подложка между блоковете на страницата - било то заглавия, текстови параграфи, изображения или дори само елементи на шаблон на уебсайт. Това е особено вярно, когато използвате необичайни. И така, всички примери за CSS стилове използват един и същ „ритъм“:

h1 (размер на шрифта: 36px; височина на реда: 40px;) h2 (размер на шрифта: 30px; височина на реда: 40px;) h3 (размер на шрифта: 24px; височина на реда: 40px;) h4 (размер на шрифта : 18px височина на линията : 20px ;

h1 (размер на шрифта: 36px; височина на реда: 40px;) h2 (размер на шрифта: 30px; височина на реда: 40px;) h3 (размер на шрифта: 24px; височина на реда: 40px;) h4 (размер на шрифта : 18px височина на линията: 20px;

Сега можете да преминете директно към практиката.

Пример 1

Нека започнем с повече или по-малко проста опция. Типографията е чудесна за медиен уебсайт, може би дори за вестник. Това решение не предлага никакви специални функции, освен че използва 2 шрифта - Ultra (без сериф), Orienta (без сериф). Краен CSS код:

.demo-1 .main h1 ( margin : 1em 0 0.5em 0 ; цвят : #343434 ; тегло на шрифта : нормално ; семейство шрифтове : "Ultra", sans-serif ; размер на шрифта : 36px ; line-height : 42px text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777) .demo-1 .main h2 ( margin: 1em 0.5em 0; color: #343434; font-weight: normal; размер: 30px; размер на шрифта: "Orienta", .demo-1.main h3 (поле: 1em 0.5em 0; цвят: #343434; размер на шрифта: 22px; линия -височина: 40 пиксела; семейство шрифтове: "Orienta", стил на шрифта: курсив; цвят: #343434; размер на шрифта: 18 пиксела; ; височина на шрифта : нормален ;

Демо-1 .main h1 ( марж: 1em 0 0.5em 0; цвят: #343434; тегло на шрифта: нормално; семейство шрифтове: "Ultra", sans-serif; размер на шрифта: 36px; височина на реда: 42px; text-transform: uppercase; text-shadow: 0 2px white, 0 3px #777 ) .demo-1 .main h2 ( margin: 1em 0.5em 0; color: #343434; font-weight: normal; font-size : 30px; размер на шрифта: "Orienta", .demo-1 .main h3 (поле: 1em 0.5em 0; цвят: #343434; размер на шрифта: 22px; линия - размер на шрифта: 40 пиксела; размер на шрифта: 1 пиксел; височина на шрифта: 20 пиксела; -семейство: "Orienta", sans-serif)

Пример 2

Ето една малко по-интересна реализация - добавен е фон за заглавието под формата на плътно запълване и картина. CSS кодът е написан доста правилно, отстъпите са посочени в проценти, така че когато изображението се намали, текстът на заглавието не се слива с фоновото изображение. Използвани шрифтове: 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 ; позиция: относителна ; font-size : 36px ; line-height : 40px ; padding : 15px 15px 15% ; box-shadow : вмъкване 0 0 0 1px rgba (53 , 86 , 129 , 0.4 ) , вмъкване 0 0 px rgba (53 , 86 , 129 , 0.5 ) -285px 0 35px бяло ; border-radius : 0 10px 0 10px ; font-weight: normal; text-shadow: 0 -1px rgba (0, 0, 0.6) ; border-radius: 0 10px 0 10px;

Demo-2 .main h1 ( margin: 1em 0 0.5em 0; font-weight: 600; font-family: "Titillium Web", sans-serif; позиция: относителна; font-size: 36px; line-height: 40px; подложка: 15px 15px 15%; цвят: #355681: вмъкване 0 0 0 1px rgba(53,86,129, 0.4), вмъкване 0 0 5px rgba(53,86,129, 0.5), вмъкване -285px 0 35px бяло ; border-radius: 0 10px 0 10px; фон: #fff url(../images/bartoszkosowski.jpg) no-repeat center left ) .demo-2 .main h2 ( марж: 1em 0 0.5em 0; тегло: нормален ; позиция: 0 -1px rgba; размер на шрифта: #355681; рамка: 1px; бяла -радиус: 0 10px 0 10px; вмъкване 0 0 5px rgba(53,86,129, 0.5); "Muli", sans-serif; 600; семейство шрифтове: sans-serif;

височина на реда: 40px;

цвят: #355681;

.demo-3 .main h2: след , .demo-3 .main h3: след , .demo-3 .main h4: след ( позиция : абсолютна ; съдържание : "" ; ляво : 0 ; горе : 0 ; долу : 0 ширина: 5px; вмъкване 0 1px rgba (0, 0, 0, 0.5), 0 1px 1px rgba (255, 255, 0.3); main h2: след (фон: #0AF;). demo-3 .main h3: след (фон: #3BF;) .demo-3 .main h4: след (фон: #6Cf;) .demo-3 .main h1 (размер на шрифта: 36px; височина на реда: 40px ; поле : 0 .6 ; цвят : бяло ; сенки ; ; позиция : относителна ; цвят : .demo-3 .main h2 (поле : 0 0 0 20 пиксела ; тегло на шрифта : бяло ; семейство шрифтове : "Hammersmith One" ", sans-serif; текстова сянка: 0 -1px 0 rgba (0, 0, 0, 0.4);

Demo-3 .main h2:after, .demo-3 .main h3:after, .demo-3 .main h4:after ( позиция: абсолютна; съдържание: ""; ляво: 0; горе: 0; долу: 0; width: 5px; box-shadow: inset 0 1px rgba(0,0,0,0.5), 0 1px rgba(255,255,255,0.3); background: #0AF; main h3:after (фон: #3BF;) .demo-3 .main h4:after (фон: #6Cf;) .demo-3 .main h1 (размер на шрифта: 36px; височина на реда: 40px; поле: 1em 0.6em 0; семейство шрифтове: "Hammersmith One", sans-serif: 0,0,0,0,4; позиция: #6Cf; 3 .main 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 .main h3 ( margin: 1em 0 .6em 0; padding: 0 0 0 px; font-weight: normal; color: white; font-family : "Hammersmith One", sans-serif;

текстова сянка: 0 -1px 0 rgba(0,0,0,0.4);

позиция: роднина;

размер на шрифта: 24px; височина на реда: 40px;семейство шрифтове: "Questrial", sans-serif; ) .demo-3 .main h4 ( margin: 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); позиция: font-size: 18px: "Questrial", sans-serif; : Пример 4 { Нека експериментираме с фона - какво ще кажете за добавяне на дървена текстура. Шрифтове Scada (sans-serif), Carrois Gothic (sans-serif) и листовката за H2 също е внедрена чрез шрифт, а не чрез изображение.: 75% ; } .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 ;) .demo-4 .main h2: след , .demo-4 .main h3: след , .demo-4 .main h4: след ( позиция : абсолютна ; съдържание : "" ; височина : 1px ; граница- радиус: 2px; ляво: 0 -1px 0 rgba (0, 0, 0, 0,1), 0 1px 0 rgba (255, 255, 0,6) ; .main h2: след (ширина: 100 % ; ) .demo-4 височина на реда: 40px;.основен : Пример 4 { Нека експериментираме с фона - какво ще кажете за добавяне на дървена текстура. Шрифтове Scada (sans-serif), Carrois Gothic (sans-serif) и листовката за H2 също е внедрена чрез шрифт, а не чрез изображение.: 50% ; } .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 ;) .demo-4 .main h2: след , .demo-4 .main h3: след , .demo-4 .main h4: след ( позиция : абсолютна ; съдържание : "" ; височина : 1px ; граница- радиус: 2px; ляво: 0 -1px 0 rgba (0, 0, 0, 0,1), 0 1px 0 rgba (255, 255, 0,6) ; .main h2: след (ширина: 100 % ; ) .demo-4 височина на реда: 40px; h3 { след: ширина 0 .demo-4; h4: 0 0 h1 0 ; марж: 1ем; 0,75 ем: подплата; 5px: цвят; #6B5344: 0 тегло на шрифта 0 нормално(255 , 255 , 255 , 0.5 ) ; позиция: роднина; текст-сянка: 2px; rgba: размер на шрифта, 36px; } .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 ;) .demo-4 .main h2: след , .demo-4 .main h3: след , .demo-4 .main h4: след ( позиция : абсолютна ; съдържание : "" ; височина : 1px ; граница- радиус: 2px; ляво: 0 -1px 0 rgba (0, 0, 0, 0,1), 0 1px 0 rgba (255, 255, 0,6) ; .main h2: след (ширина: 100 % ; ) .demo-4 височина на реда: 40px;височина на линията { след: ширина 0 .demo-4; h4: 0 0 h1 0 ; марж: 1ем; 0,75 ем: подплата; rgba: 40px, 36px; 5px: цвят; #6B5344: 0 тегло на шрифта 0 нормално(255 , 255 , 255 , 0.5 ) ; позиция: шрифтово семейство; текст-сянка: 2px; } .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 ;) .demo-4 .main h2: след , .demo-4 .main h3: след , .demo-4 .main h4: след ( позиция : абсолютна ; съдържание : "" ; височина : 1px ; граница- радиус: 2px; ляво: 0 -1px 0 rgba (0, 0, 0, 0,1), 0 1px 0 rgba (255, 255, 0,6) ; .main h2: след (ширина: 100 % ; ) .demo-4 височина на реда: 40px;"Carrois Gothic" { след: ширина 0 .demo-4; h4: 0 0 h1 0 ; марж: 1ем; 0,75 ем: подплата; rgba: 40px, 36px; 5px: цвят; #6B5344: 0 тегло на шрифта 0 нормално(255 , 255 , 255 , 0.5 ) ; позиция: без сериф; текст-сянка: 2px; } .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 ;) .demo-4 .main h2: след , .demo-4 .main h3: след , .demo-4 .main h4: след ( позиция : абсолютна ; съдържание : "" ; височина : 1px ; граница- радиус: 2px; ляво: 0 -1px 0 rgba (0, 0, 0, 0,1), 0 1px 0 rgba (255, 255, 0,6) ; .main h2: след (ширина: 100 % ; ) .demo-4 височина на реда: 40px; h2 { след: ширина 0 .demo-4; h4: 0 0 h1 0 ; марж: 1ем; 0,75 ем: подплата; rgba: 40px, 36px; 5px: цвят; #6B5344: 0 тегло на шрифта 0 нормално(255 , 255 , 255 , 0.5 ) ; позиция: "Скада"; текст-сянка: 30px; }

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;) .demo-4 .main h2:after, .demo-4 .main h3:after, .demo-4 .main h4:after ( позиция: абсолютна; съдържание: ""; височина: 1px; border-radius : 2px; отдолу: 0; 0 -1px 0 rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0,6); (ширина: 100%; ) 4 .main h3:after (ширина: 75%;) .demo-4 .main h4:after (ширина: 50%;) .demo-4 .main h1 (марж: 1em 0 0,75em; подложка: 0 5px 0; цвят: #6B5344; позиция: относителна текстова сянка: 0 2px 0,5; семейство шрифтове: "Carrois Gothic", sans-serif 0 5px 0; шрифт-семейство: "Sans-serif"; 0 2px 0 rgba(255,255,0.5); ;височина на линията: 40px;

подложка: 0 0 5px 0;

цвят: #6B5344;

тегло на шрифта: нормално; височина на реда: 40px; h3 { след: ширина 0 семейство шрифтове: "Scada", sans-serif; 0 ; 0,75 ем: 100 ; позиция: роднина;: текстова сянка: 0 2px 0 rgba(255,255,255,0.5);; марж: размер на шрифта: 24px;; височина на реда: 40px; ) .demo-4 .main h4 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; позиция: относителна; сянка на текста: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 18px височина на реда: 20px;: Пример 5; rgba: Друга интересна и необичайна цветова схема - може би ще ви тласне към някои ваши собствени идеи и реализации. Заглавията по принцип не винаги могат да имат удебелен, голям шрифт - има такива опции., 36px; позиция: .demo-6; текст-сянка: 0,5 ем; #6B5344: тегло на шрифта h1 0 нормално(0 , 0 , 0 , 0.2 ) ; } тегло на шрифта: нормално; височина на реда: 40px;височина на линията { след: ширина 0 семейство шрифтове: "Scada", sans-serif; 0 ; марж: #148773 ; позиция: преобразуване на текст; текст-сянка: 2px; 0,75 ем: Главна буква; rgba: Друга интересна и необичайна цветова схема - може би ще ви тласне към някои ваши собствени идеи и реализации. Заглавията по принцип не винаги могат да имат удебелен, голям шрифт - има такива опции., 36px; } тегло на шрифта: нормално; височина на реда: 40px;"Carrois Gothic" { след: ширина 0 семейство шрифтове: "Scada", sans-serif; 0 ; марж: #343434 ; позиция: #00caa6; текст-сянка: 2px; 0,75 ем: 100 ; позиция: роднина;: текстова сянка: 0 2px 0 rgba(255,255,255,0.5);; rgba: Друга интересна и необичайна цветова схема - може би ще ви тласне към някои ваши собствени идеи и реализации. Заглавията по принцип не винаги могат да имат удебелен, голям шрифт - има такива опции., 36px; стил на шрифта: курсив; височина на реда: 40px; ) .demo-4 .main h4 ( margin: 1em 0 0.75em; padding: 0 0 5px 0; color: #6B5344; font-weight: normal; font-family: "Scada", sans-serif; позиция: относителна; сянка на текста: 0 2px 0 rgba(255,255,255,0.5); размер на шрифта: 18px височина на реда: 20px;: Пример 5; } тегло на шрифта: нормално; височина на реда: 40px; h2 { след: ширина 0 семейство шрифтове: "Scada", sans-serif; 0 ; марж: #343434 ; позиция: "Скада"; текст-сянка: 30px; 0,75 ем: Главна буква; rgba: Друга интересна и необичайна цветова схема - може би ще ви тласне към някои ваши собствени идеи и реализации. Заглавията по принцип не винаги могат да имат удебелен, голям шрифт - има такива опции., 36px; }

Demo-6 .main h1 ( margin: 1em 0 0.5em 0; font-weight: 100; text-transform: uppercase; color: #00caa6; font-style: italic; font-family: "Josefin Sans", sans-serif font-size: 58px; text-shadow: 2px 0 rgba(0,0,0,0.2); размер на шрифта: 26px; височина на реда: 40px; семейство шрифтове: "Josefin Sans", sans-serif) .demo-6 .main h3 (поле: 1em 0,5em 0; цвят: #343434; размер на шрифта: 40px; преобразуване на текста: "Josefin Sans", sans-serif: 1px; -style: italic; line-height: 20px; font-weight: bold; font-family: "Josefin Sans", sans-serif;

Ако познавате CSS почти напълно, тогава оригиналната статия ви казва как да използвате определени предварителни процесори в стилове, за да намалите количеството код и да го направите по-опростен. За да бъда честен, това е първият път, когато виждам използването на функции и заместване на параметри във файл със стил CSS, но кодът се оказва много визуален. Освен това, разбира се, в оригиналната статия ще намерите връзки към източници и демо версии на всички опции.

P.S. T За тези, които работят в Интернет или тепърва започват, статия за това какво е TIC ще ви помогне да се ориентирате в една от най-подходящите и обсъждани концепции в Интернет.

 

Може да е полезно да прочетете:

• Павел Багрянцев – блогър;
• Как да промените тапета на работния плот в Windows;
• Сервизно ръководство на Bowers & Wilkins Zeppelin Air Lightning Как да отворите b w zeppelin;
• Алтернативи за замяна на LogMeIn Hamachi Програми като Hamachi;
• Точков металдетектор - пинпоинтер minimax-pp Пинпоинтер с дискриминационна схема;
• Проектна работа „Тайните на клавиатурата;
• Как да изтриете файлове на macOS след кошчето;
• Как да използвате Viber и настройки на услугата - лайфхакове за IP телефония;