Сьогодні продовжуємо з вами знайомиться з елементами сайтобудування і давайте навчимося створювати рамки css. У минулій своїй статті я вам розповів і показав, як створюються рамки html. але рамки css виглядають більш красивішим та привабливішим. Тому хто навчився робити рамки html, той і подужає створення рамки css. А я вам в цьому допоможу!
Як я вам вже вище сказав, що рамки css набагато красивіше і практичніше, ніж рамки html і вам ніяких труднощів не складе створити такі рамки css самостійно, якщо Ви вже навчилися робити рамки html.
Як і в минулому своєму уроці. де ми з вами створювали рамки html. також і зараз при створенні рамки css ми з вами будемо використовувати, вже нам знайоме властивість «border», для якого будемо ставити певні, також знайомі нам, значення:
solid - суцільна рамка;
dashed - пунктирна рамка;
dotted - точкова рамка;
double - рамка подвійною лінією;
groove - рамка з тінню;
ridge - з рельєфом;
І ще два нових для нас з вами сьогодні значення - це:
widht - товщина рамки;
color - колір рамки;
Всі ці значення пишемо в один рядок через пропуск:
Потім нам потрібно зробити відступи для рамки css. Це робиться ось цими змінними:
padding - внутрішній (відступ рамки від змісту);
margin - зовнішній (відступ рамки від зовнішніх об'єктів);
Тепер давайте задамо напрямок для відступів, тобто скільки і звідки потрібно відступити. Це ми з вами зможемо зробити ось за допомогою ось цих значень:
top - відступ зверху;
righnt - відступ зправа;
bottom - відступ знизу;
left - відступ зліва;
І давайте все це запишемо, ось так:
Якщо вам потрібно розмістити свій текст в середині рамки css, то потрібно додати ось таку ось конструкцію:
Не бійтеся, може вам і відразу все це здасться дуже складним і заплутаним, але далі Ви обов'язково все зрозумієте і я вам також приведу практичні приклади, де все відразу стане ясно і зрозуміло!
Тепер давайте задамо нашій рамці висоту і ширину. Це робиться за допомогою властивості "width". Ось приклад:
І щоб ми змогли розмістити нашу рамку на своїй сторінці сайту, нам з вами потрібно значення «margin». Також можна розташувати нашу рамку по центру сторінки на сайті додавши до значення "margin" ще одне значення «auto». Ось приклад:
Тепер прийшов час практичних дій, які нам з вами допоможуть побачити все на власні очі, що напевно буде більш наочно і відразу стане ясніше.
Ось приклад однієї з рамок, яку ми з вами будемо далі змінювати, але не всю, а лише CSS, що міститься у вмісті тега «style». І через цих змін CSS будуть змінюватися і наші рамки css.
перший приклад рамки css
Ось другий приклад рамки css:
другий приклад рамки css
Ось третій приклад рамки з точок:
третій приклад рамки
Це четвертий приклад рамки з подвійним обводом:
четвертий приклад рамки
А якщо застосувати значення «ridge», то ось яка рамка вийде:
п'ятий приклад рамки
Тепер давайте з вами зробимо закруглені краї нашої рамки css за допомогою ось цих ось значень «border-radius» і «box-shadow»:
рамка з круглими краями
Ось рамка з круглими краями і її код:
Тепер давайте зробимо рамку з розмитими краями, це теж виглядає досить привабливо, а зробити це легко, просто в значенні «box-shadow» змініть цифру на більше значення. І ось, що вийде:
рамка з розмитими краями
Тепер робимо рамку з різнокольоровими контурами, просто додамо в значення "box-shadow" кілька кольорових гам:
А тепер апогей наших рамок на css - це кругла рамка. Робиться також просто змінивши значення «border-radius». Ось дивіться:
Ось і її код тут:
Ну ось і все на сьогодні. До нових зустрічей!
Якщо вам сподобався матеріал ласка, виконайте такі дії ...
Дякую за увагу!