Створення рамок засобами CSS. Ефект загнутих куточків з використанням лише CSS Ширина рамки-зображення border-image-width

Влад Мержевич

На сайтах трикутники застосовуються часто-густо як частина дизайну елементів, наприклад, вони служать покажчиком на якийсь об'єкт, звертаючи увагу читача в потрібне місце. Також трикутники виконують декоративні функції, роблячи блоки, де вони застосовуються, більш витонченими та сучасними. На рис. 1 показаний приклад використання трикутника у дизайні.

Мал. 1. Трикутники у веб-дизайні

Безпосередньо зробити трикутник засобами CSS не можна, тому доступні два методи, що дозволяють його додати через border і transform .

Використання border

Хоча межі, створювані через властивість border, безпосередньо не мають відношення до трикутників, саме border використовується для цього найчастіше. Якщо задати нульову ширину та висоту елемента, а також встановити досить товсту межу, то побачимо набір із чотирьох трикутників (рис. 2). Для наочності кордону по всіх сторонах встановлено різного кольору.

Мал. 2. Додавання border до елемента

Залишаючи лише потрібну межу, а решта роблячи прозорими, ми отримаємо трикутник потрібного кольору (рис. 3).

Мал. 3. Елемент із прозорими кордонами

У прикладі 1 показано додавання трикутника до блоку через псевдоелемент :: after.

Приклад 1. Блок із трикутником

Для абсолютно позиціонованих елементів нульову ширину та висоту вказувати необов'язково.

За рахунок комбінування кордонів можна отримати ще чотири види трикутників, що у поєднанні з вже згаданими дає нам вісім варіантів. Їхній вигляд і необхідний код наведено в табл. 1.

Табл. 1. Можливі видитрикутників

Вид	Стиль
	border: 20px solid transparent; border-top: 20px solid green;
	border: 20px solid transparent; border-right: 20px solid green;
	border: 20px solid transparent; border-bottom: 20px solid green;
	border: 20px solid transparent; border-left: 20px solid green;
	border: 20px solid transparent; border-top: 20px solid green; border-right: 20px solid green;
	border: 20px solid transparent; border-right: 20px solid green; border-bottom: 20px solid green;
	border: 20px solid transparent; border-bottom: 20px solid green; border-left: 20px solid green;
	border: 20px solid transparent; border-left: 20px solid green; border-top: 20px solid green;

З таблиці видно, що невидимі кордони займають місце, враховуйте це за позиціонуванні елементів. Стиль також необхідно доповнити нульовою шириною і висотою або скористатися властивістю position, як це робилося в прикладі 1.

Трикутник можна робити й іншої форми, якщо встановити різну товщину кордонів. Так, код створення блоку, показаного на рис. 4, наведений у прикладі 2.

Мал. 4. Гострий трикутник

Приклад 2. Гострий трикутник

За допомогою border ми отримуємо суцільні кольорові трикутники для створення рамки показаної на рис. 5 доводиться йти на хитрість і накладати один елемент поверх іншого з невеликим зміщенням. Знову ж таки тут нам допоможуть псевдоелементи :before і :after (приклад 3).

Мал. 5. Рамка з куточком

Приклад 3. Накладення трикутників

Через те, що ми накладаємо один однотонний елемент поверх іншого, цей спосіб підходить лише для однотонної заливки і не підходить для градієнтів або фонових картинок.

Використання трансформації

За допомогою трансформації ми можемо повернути квадратний елемент на 45º та отримати з нього ромб. Це ще не трикутник як такий, тому потрібну нам виступаючу частину залишаємо на увазі, а решту ховаємо за іншим елементом (приклад 4).

Приклад 3. Трансформація

Результат цього прикладу показано на рис. 6.

Мал. 6. Трикутник з тінню

До вашої уваги гарна добірка куточків та рамок, які призначені для інформаційних блоків, що використовується при допомоги HTMLта CSS. Також у цій нотатці можете підібрати той стиль дизайну, який виконаний на куточки, що йде з ефектом при наведенні кліка та установкою за замовчуванням без жодних ефектів, просто стильний дизайн.

За приклад можна взяти одну варіацію, де на блоці загнуті куточки, і він зовсім інакше від стандартного виглядає. На деяких є варіант для розміщення різних стрічок або встановлення зображення, яке в блоці встановлюється всередині.

Всі представлені матеріал йдуть в адаптивному вигляді під різну роздільну здатність, що для великого монітора або маленького екрану. Після встановлення на сайті відбудеться зміна, де здебільшого ставлять на увагу, адже спочатку тільки йде структура, що може доповнювати основний стиль.

Перший варіант:

CSS

Ugoinsa_utomatio_npones (
display: inline-block;
width: 295px;
position: relative;
border: 1.5px solid #1b629e;
transition: all .3s ease;
margin: 5px;
cursor: pointer;
}
.ugoinsa_utomatio_npones:before, .ugoinsa_utomatio_npones:after (
content: "";
z-index: -1;
display: block;
position: absolute;
background: #FFF;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-iteration-count: 1;
transform-origin: 50%; 50%;
}
.ugoinsa_utomatio_npones:before (
width: calc(100% + 4px);
height: 75%;
z-index: 1;
transition: height 0.6s;
}
.ugoinsa_utomatio_npones:after (
height: calc(100% + 4px);
width: 85%;
z-index: 1;
transition: width 0.7s;
}
.ugoinsa_utomatio_npones:hover:before, .ugoinsa_utomatio_npones:focus:before (
height: 50%;
}
.ugoinsa_utomatio_npones:hover:after, .ugoinsa_utomatio_npones:focus:after (
width: 74%;
}
.sequpok_egulaned_demob (
padding: 29px;
z-index: 2;
position: relative;
text-align: center;
}

Тут вже самостійно під свій ресурс створюємо установку і робимо помітнішим, дивлячись під які дії.

Другий варіант:

CSS

Pvobamoco-mpagensive (
position: relative;
display: inline-block;
width: 283px;
margin: 7px 0 37px 0;
padding: 28px;
color: #f3eaea;
text-align: center;
background: #2b22a0;
background: linear-gradient(to left bottom, transparent 50%, rgba(16, 16, 16, 0.4) 0) no-repeat 100% 0 / 30px 30px, linear-gradient(-135deg, rgba(0, 0, 0) , 0) 20px, # 334ab9 0);
filter: drop-shadow(18px 28px rgba(14, 14, 14, 0.1));
}
.pvobamoco-mpagensive::before (
content: " ";
position: absolute;
top: 30px;
right: 0;
background: linear-gradient(to left bottom, rgba(0, 0, 0, 0) 50%, rgba(14, 14, 14, 0.1) 0) 100% 0 no-repeat;
width: 28px;
height: 28px;
transform: rotate(180deg);
}

Тут спочатку ефект не прописаний, але зроблена красива тінь, що можна самостійно збільшити та змінити гаму кольору.

Третій варіант:

CSS

Keculosubes_aspectsiveb (
position: relative;
display: inline-block;
width: 295px;
padding: 30px;
margin: 9px;
min-height: 91px;
border: 2px solid #BFE2FF;
text-align: center;
}
.malugeke_deculos (
width: 148px;
height: 148px;
overflow: hidden;
position: absolute;
}
.malugeke_deculos::before, .malugeke_deculos::after (
position: absolute;
z-index: -1;
content: "";
display: block;
border: 5px solid #2980b9;
}
.malugeke_deculos span (
position: absolute;
display: block;
width: 223px;
padding: 15px 0;
background-color: #337AB7;
box-shadow: 0 5px 10px rgba(12, 12, 12, 0.1);
color: #f3f0f0;
font: 700 18px/1 "Lato", sans-serif;
text-shadow: 0 1px 1px rgba(8, 8, 8, 0.1);
text-transform: uppercase;
text-align: center;
}
.malugeke_deculos-top-left (
top: -10px;
left: -10px;
}
.malugeke_deculos-top-left::before, .malugeke_deculos-top-left::after (
border-left-color: transparent;
}
.malugeke_deculos-top-left::before (
top: 0;
right: 0;
}
.malugeke_deculos-top-left::after (
left: 0;
bottom: 0;
}
.malugeke_deculos-top-left span (
right: -25px;
top: 30px;
transform: rotate(-45deg);
}
.malugeke_deculos-top-right (
top: -10px;
right: -10px;
}
.malugeke_deculos-top-right::before, .malugeke_deculos-top-right::after (
border-top-color: transparent;
border-right-color: transparent;
}
.malugeke_deculos-top-right::before (
top: 0;
left: 0;
}
.malugeke_deculos-top-right::after (
right: 0;
bottom: 0;
}
.malugeke_deculos-top-right span (
left: -25px;
top: 30px;
transform: rotate(45deg);
}

Залишається вибрати праву чи ліву стрічку, щоб встановити на блок, де сама стрічка послужить для написання на ній заголовка. Також можна змінити колір або спочатку виставити за замовчуванням блок, який встановлений під стрічки.

Тут веб-розробник може красиво оформити, адже для цього вже повністю каркас йде, що деякі ставлять тіні, все залежить від палітри кольору інтернет ресурсу і взагалі де ви будете і для якої мети розміщувати таку оригінальну рамку.

До створення різних красивостей навколо нього і першою такою красивістю буде рамка.

Для початку розглянемо найпростіші рамки. Для їх створення CSS використовується властивість border , якому можна задати наступні значення:

solid – суцільна рамка;

dashed – пунктирна рамка;

dotted – точкова рамка;

double - рамка подвійною лінією;

groove - рамка з тінню;

ridge – з рельєфом;

Ще дві властивості необхідні створення простих рамок — це

widht – товщина рамки;

color – колір рамки;

Відповідно до техніки скорочення, записуються значення, одним рядком, через пропуск.

p (
border: 2px solid #ffff00;
}

padding - Внутрішній (відступ рамки від змісту);

margin - Зовнішній (відступ рамки від зовнішніх об'єктів);

Ще для відступів задаються напрямки (з якого боку скільки відступити). Ці властивості застосовуються, коли виникає необхідність розмістити вміст не по центру рамки, або саму рамку з будь-яким зміщенням.

top - відступ зверху;

righnt - відступ справа;

bottom - відступ знизу;

left – відступ зліва

Записуються значення цих властивостей у скороченому варіанті один за одним (padding: 10px 30px 15px 20px ), і першим ставиться значення top , а далі за годинниковою стрілкою інші.

Якщо поставити тільки одне значення, це означатиме, що відступ з усіх боків буде однаковий.

p (
border: 2px solid #ffff00;

margin: 20px;
}

Якщо потрібно розмістити текст, або зображення по центру рамки, то селектор «p» можна додати властивість text-align: center ;

Далі розглянемо, як задаються висота та ширина рамки. Висота рамки задається браузером автоматично, і вибирається таким чином, щоб у ньому вмістився зміст, з урахуванням заданих відступів. А ось ширину ми з вами задаватимемо самостійно.

Задається вона властивістю width, й у значенні його вказується бажаний розмір у пікселях, чи інших заходах довжини, які у веб.

p (
border: 2px solid #ffff00;
padding : 10px 20px 10px 20px ;
margin: 20px;
width: 400px;
}

До речі, запам'ятайте, що за завдання ширини, браузер це значення розуміє, як ширину лише вмісту. Потім до цього значення він додає задані відступи та товщину рамки, і остаточний розмір відображає сторінку.

І останнє, що потрібно зробити - це розмістити рамку на сторінці. Робиться це за допомогою вже наявного властивості margin.

А якщо потрібно просто розмістити блок рамки по центру сторінки, то як margin додається значення auto.

p (
border: 2px solid #ffff00;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width: 400px;
}

Для першого прикладу створимо html документі створимо рамки solid для блоку body (тіло документа), і одного абзацу.

У наступних прикладах буде змінюватися лише CSS (те, що укладено у тег style).

Здравствуйте уважаемые будущие веб-мастера!
Мне 55 лет и я рад приветствовать Вас на своём сайте.

Результат:

Следующая рамка dashed (пунктир).

p{
text-indent : 30px ;
border : 2px dashed #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Результат:

Рамка dotted :

p {
text-indent : 30px ;
border : 3px dotted #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка double :

p {
text-indent : 30px ;
border : 5px double #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка groove :

p {
text-indent : 30px ;
border : 7px groove #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Рамка ridge :

p {
text-indent : 30px ;
border : 10px ridge #ff4f00 ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Для этого уберём border , и добавим border-radius и box-shadow .

p {
border-radius : 10px ;
box-shadow : 0 0 0 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Размоем внешний край рамки. Для этого в свойстве box-shadow , увеличим третью цифру.

p {
border-radius : 10px ;
box-shadow : 0 0 7px 3px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Сделаем разноцветную рамку. Для этого в свойство box-shadow , через запятую, добавим ещё несколько комплектов значений с разными цветами.

p {
border-radius : 10px ;

0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

Можно сделать круг в рамке. Для этого зададим абзацу одинаковую высоту и ширину, то есть сделаем квадрат, изменим значение border-radius

p {
border-radius : 50%/50% ;
box-shadow : 0 0 0 3px #ff4f00 ,
0 0 0 7px #ffdb00 ,
0 0 0 10px #00ffa2 ;
padding : 40px ;
margin : 20px auto ;
width : 130px ;
height : 130px ;
text-align : center;
}

Если поиграть с дробным значением border-radius , можно сделать эллипс любого вида.

Первое число в дроби — это изгиб вертикальной составляющей угла, второе — горизонтальной.

И последнее, что мы сегодня сделаем — рамка с изменяющимся цветом. Изменяться он будет при наведении курсора.

Реализуется эта опция при помощи псевдокласса :hover .

p {
border-radius : 10px ;
box-shadow : 0 0 0 4px #ff4f00 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}
p:hover {
border-radius : 10px ;
box-shadow : 0 0 0 4px #00ff62 ;
text-indent : 30px ;
padding : 10px 20px 10px 20px ;
margin : 20px auto ;
width : 400px ;
}

В спокойном состоянии:

При наведении курсора:

Этот же метод можно применить к разноцветной рамке, и менять при наведении курсора, какой нибудь один цвет.

Желаю творческих успехов.

Перемена

На улице Дублина двое ирландцев дерутся. К ним подходит еще один, снимает шляпу и спрашивает:
— Простите, это частная драка или любой может вмешаться?..

Влад Мержевич

С помощью CSS можно добавить рамку к элементу несколькими способами. В основном, конечно же, применяется свойство border , как наиболее универсальное, а также outline и, как ни удивительно, box-shadow , основная задача которого - создание тени. Далее рассмотрим эти методы и их различия между собой.

Свойство outline

Самое простое свойство для создания рамок. Имеет те же параметры, что и border , но существенно отличается от него некоторыми деталями:

• outline выводится вокруг элемента (border внутри);
• outline не влияет на размеры элемента (border добавляется к ширине и высоте элемента);
• outline можно установить только вокруг элемента целиком, но никак не на отдельных сторонах (border можно использовать для любой стороны или всех сразу);
• на outline не действует радиус скругления, заданный свойством border-radius (на border действует).

Возникает вопрос - в каких случаях нужен outline , когда его роль, несмотря на перечисленные отличия, вполне берёт на себя border ? Ситуаций не так и много, но они встречаются:

• создание сложных разноцветных рамок;
• добавление рамки к элементу при наведении на него курсора мыши;
• сокрытие рамки, добавляемой браузером автоматически для некоторых элементов при получении фокуса;
• для outline можно задать расстояние от края элемента до рамки с помощью свойства outline-offset , для создания .

Разноцветные рамки

Надо понимать, что outline ни в коей мере не заменяет border и вполне может существовать вместе с ним, как показано в примере 1.

Пример 1. Создание рамки

У даному прикладінавколо елемента додається чорна рамка, яка відокремлена від фону білою облямівкою (рис. 1).

Мал. 1. Рамка навколо елемента

Рамка під час використання:hover

При додаванні рамки через border відбувається збільшення ширини елемента, що помітно при поєднанні border і псевдокласса :hover . Є два способи, як це перемогти. Найпростіше - замінити border на outline, яке, як знаємо, не впливає на розміри елемента (приклад 2).

Приклад 2. Рамка під час наведення

outline не завжди годиться, хоч би тому, що на нього заокруглення куточків не діє. Тут підійде другий метод - додаємо невидиму рамку або рамку, що збігається з кольором фону, а потім змінюємо параметри при наведенні (приклад 3). Тоді ніякого зміщення елемента не відбуватиметься, оскільки рамка спочатку вже є. Але завжди пам'ятаємо, що ширина елемента при цьому складається зі значень width, border ліворуч і border праворуч. Аналогічно і з висотою.

Приклад 3. Рамка під час наведення

Рамка навколо полів форми

У деяких браузерах (Chrome, Safari, останні версії Opera) навколо полів форми при отриманні фокусу відображається невелика кольорова рамка (рис. 2). Щоб її прибрати, достатньо додати до властивості outline значення none , як показано в прикладі 4.

Мал. 2. Рамка навколо полів

Приклад 4. Забираємо рамку

Рамки через box-shadow

Хоча властивість box-shadow призначена для додавання тіні навколо елемента, за його допомогою можна створювати рамки, причому такі, які неможливо зробити через border або outline . Все завдяки тому, що число тіней може бути необмеженим, параметри яких перераховуються через кому.

Щоб отримати рамку, перші три параметри слід задати нульовими, вони відповідають за положення тіні та її розмиття. Четвертий параметр у разі відповідає за товщину кордону, а п'ятий встановлює колір рамки. Для другої рамки четвертий параметр дорівнює сумі товщини двох рамок.

У прикладі 4 показано додавання двох рамок та однієї межі праворуч за допомогою однієї властивості box-shadow.

Приклад 4. Використання box-shadow

Результат цього прикладу показано на рис. 3.

Мал. 3. Рамки, створені властивістю box-shadow

У цьому уроці ми створимо ефект загнутих куточків без використання зображень та додаткової розмітки. Він чудово працює у всіх сучасних браузерах і добре підходить для дизайну сайту із простими кольоровими рішеннями.

Цей ефект використовувався в демонстрації до уроку "Множинні фони та обведення за допомогою CSS2" . Крім того, застосування загнутих куточків у дизайні реального сайту можна переглянути на прикладі Yiibu. Але сайт Yiibu використовує зображення, а ми використовуємо псевдо-елементи та CSS.

початок

Нічого складного. Підійде будь-який елемент і не буде потрібно жодної додаткової розмітки. Все починається із простого забарвленого прямокутника. Браузери, які не підтримують псевдо-елементи (IE6 та IE7), теж виводитимуть його.

Додавання властивості position:relative уможливлює абсолютне позиціонування псевдо-елементів.

Note ( position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; )

Загнутий куточок створюється за допомогою псевдоелемента, який позиціонується у верхньому куті прямокутника. Псевдо-елемент не має ширини та висоти, але в нього задано товсте обведення. Змінюючи товщину обведення, ми змінюватимемо розмір загнутого куточка.

У цьому прикладі верхня та права частини обведення мають кольори, які відповідають кольору фону батьківського прямокутника. Ліва та нижня частини обведення мають більш темний колір або світліший у порівнянні з кольором тла прямокутника.

Note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; border-color:#658E15 #fff; )

Це все, що потрібно для створення простого ефекту загнутого куточка, схожого на Yiibu, що використовується на сайті.

Firefox 3.0 не дозволяє позиціонувати псевдоелементи. Ви можете використовувати пару властивостей для виправлення положення у цьому браузері.

Note:before ( ... display:block; width:0; )

Додаємо легку тінь

Вигляд куточка може бути трохи покращений за допомогою додавання властивості box-shadow (для браузерів, які його підтримують) до псевдо-елемента. Встановлення якості overflow:hidden для класу елемента приховує частину тіні, яка порушує ефект загнутого куточка.

Note:before ( ... -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2), box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2);

Закруглені кути

Також відносно просто використовувати цю техніку разом із заокругленими кутами. На жаль, кожен сучасний браузермає якусь помилку, пов'язану з властивістю border-radius (включно з тими, хто використовує властивість без префікса). Таке становище означає необхідність проведення додаткових робіт.

Тільки браузери Webkit можуть робити кути, що округляють, для псевдо-елементів, якщо ті мають тільки 2 частини обведення. Opera 11 і Firefox 3.6 створюють неприємну для очей купу. Причому Opera 11 має максимальну помилку у цьому процесі.

Використання всіх чотирьох сторін виключає проблеми в Opera 11 та Firefox 3.6. Але даний методрішення призводить до помилки в Safari 5, що виявляється у виведенні діагональної лінії із зубцями. Обійти цю проблему можна встановивши колір для хоча б однієї частини обведення як transparent.

Колір фону буде видно крізь прозоре обведення. В ідеальному випадку такий підхід формуватиме ефект і містить мінімум коду. Але Opera 11 показує фоновий колір крізь прозоре обведення лише за умови, що встановлена ​​властивість border-radius .

Note-rounded:before ( content:""; position:absolute; top:0; right:0; border-width:8px; border-color:#fff #fff transparent transparent; background:#658E15; -webkit-border- bottom-left-radius:5px;-moz-border-radius:0 0 0 5px; border-radius:0 0 0 5px;display:block;width:0;

CSS-файл для демонстраційної сторінки містить коментарі, корисні для роботи. Кожен браузер має свої особливості при використанні властивості border-radius або обведення елементів без ширини та висоти.

Остаточний вид коду

Нижче наведено весь код CSS, необхідний створення ефекту загнутих куточків з легкими тінями і лише одним елемента HTML.

Position:relative; width:30%; padding:1em 1.5em; margin:2em auto; color:#fff; background:#97C02F; overflow:hidden; ) .note:before ( content:""; position:absolute; top:0; right:0; border-width:0 16px 16px 0; border-style:solid; background:#658E15 -webkit-box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2), box-shadow:0 1px 1px rgba(0,0,0,0.3), -1px 1px 1px rgba(0,0,0,0.2); display:block; width:0; /* Подолання обмежень Firefox 3.0 */ ) .note.rounded ( -webkit-border-radius:5px; -moz-border-radius:5px border-radius:5px; ) .note.rounded:before ( border-width:8px; border-color:#fff #fff transparent transparent; -webkit-border-bottom-left-radius:5px; -moz-border- radius:0 0 0 5px; border-radius:0 0 0 5px;

Висновок

На демонстраційній сторінці є приклади з використанням різних кольорів, щоб переконатися в достатній легкості використання ефекту.

Треба враховувати, що ця техніка гірше працює при використанні зображення як фон для елемента, ніж при використанні простого кольору. Але такі обмеження є й інші методи організації загнутих куточків.