CSS трикове с текст, изображения и форми, МногоБлог
как да създадете сайт на wordpress, конфигурирате и оптимизирате wordpress
Здравейте, днес ви предлагам някои CSS трикове: създайте красив текст и добавете фон към него (текстова маска в CSS), начертайте триъгълник с помощта на CSS и също така направете красиви форми за картини и изображения с помощта на онлайн услуга.
1. Нека добавим фон към текста (текстова маска на CSS):
Например използвахме стандартната тема на WordPress - Twenty Seventeen.
HTML текстов код:
Тук думата е обвита в таг „h20“, за да зададете нейния размер и дебелина след това.
Тук „background: url“ е пътят до фоновото изображение на текста, „background-size:“ е размерът на фоновото изображение в проценти.
За да вмъкнете този css трик в сайт на wordpress, можете да използвате текстова джаджа - за да направите това, отидете в административния панел на wordpress, изберете елемента „Външен вид“ в лявото меню, поделемент „Виджети“, плъзнете джаджата „Текст“ в страничната лента (странична колона) и вмъкнете HTML текст в нея.
2. Създайте красиво стилизиран текст с CSS:
Например използвахме стандартната тема на WordPress - Twenty Seventeen.
HTML текстов код:
Получаваме следния текст:
Нека добавим още CSS стилове към него, за да прикрепим красива сянка към текста:
Сега нашият текст ще изглежда по-впечатляващо:
3. Нека създадем триъгълник с CSS:
Понякога искате да вмъкнете различни стрелки нагоре, надолу, наляво, надясно в сайта. Но за това се нуждаем само от форма като триъгълник, така че нека я създадем с CSS!
Първо, нека създадем обикновен CSS квадрат:
И получаваме следната фигура:
Обърнете внимание на границите на страните на квадрата, които се срещат отдолуъгъл.
Сега задайте ширината и височината на квадрата на нула:
Сега имате четири различни триъгълника и всичко, което трябва да направите, е да изберете необходимия триъгълник и да зададете прозрачен цвят на другите триъгълници, така:
А ето и пълния CSS код за обърнатия нагоре триъгълник:
4. Нека създадем красиви форми за картини, изображения:
Повечето снимки са с квадратна или правоъгълна форма, така че нека го променим малко, така че сайтът да не изглежда скучен.
Нека придадем на картината формата на шестоъгълник.
За да бъде шестоъгълникът правилен, ще трябва да вземете квадратно изображение, например, така:
В резултат на това получаваме следната форма на изображението:
В CSS свойството clip-path ви позволява да създавате различни форми на шестоъгълници, осмоъгълници, звезди...