Как да направите красива панделка CSS (панделки) за титли

Всички читатели на блога. Добър ден. Днес нека да научите как да използвате CSS да се направи красива панделка на дяловете (ленти). Сега нека видим какви са тези ленти? И за какво. -) На първо място - много удобен за потребителя, заглавията на данни ще бъдат разпределени, и от тях ще бъде трудно да се мине и на второ място, естествена красота.

Е, сега, директно, нека да преминем към ленти.

Първо трябва да се създаде себе си или за ленти, който е заглавието черупка - това е обикновен правоъгълник с тире по ръбовете на запълване: 20px

Сега този правоъгълник нека да вмъкнете някакъв елемент, като например h1:

Е, днес Н1 елемент добавите някои стилове:

Това е, което трябва да бъде в състояние да ни:

Както можете да видите, заглавната лента вече е започнала да се появи, но това не е всичко. Сега трябва да я дам красива гледка, както и да направите това, ние ще използват CSS.

Сега нека да видим какво се случва:

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

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