Ефект загнутого кута на css3

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

Приклад даного ефекту можна побачити тут:

Подивитися прімерСкачать

Браузери, які повноцінно підтримують даний ефект: Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.

HTML частина

Код HTML дуже простий, ми поміщаємо частину тексту всередині блоку з класом note:

Відео: Responsive Navigation Menu Bar Tutorial with HTML5 and CSS3

12345678910

lt;div class="Note"gt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maurispulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel semmagna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nuncposuere dolor eu mauris feugiat dignissim.lt;/pgt;lt;pgt; Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maurispulvinar rhoncus risus, vel ornare lacus sagittis sit amet. Duis vel semmagna. Proin pulvinar velit eleifend ligula ultrices vestibulum. Nuncposuere dolor eu mauris feugiat dignissim.lt;/pgt;lt;/divgt;

CSS частина

Спершу нам для блоку необхідно зробити позиціонування relative, щоб ми могли всередині позиціонувати інші елементи:

123456789

.note {position:relative-width:480px-padding:1em 1.5em-margin:2em auto-color:#fff-background:# 97C02F-overflow:hidden-}

А зараз, власне, «загнемо» кут нашого блоку:

1234567891011

.note: before {content:""-position:absolute-top:0-right:0-border-width:0 16px 16px 0-border-style:solid-border-color:#fff #fff # 658E15 # 658E15-background:# 658E15-display:block- width:0-}

Відео: V deo background responsivo • HTML5 / CSS3

І додамо тінь:

12345678910111213141516

.note: before {content:""-position:absolute-top:0-right:0-border-width:0 16px 16px 0-border-style:solid-border-color:#fff #fff # 658E15 # 658E15-background:# 658E15-display:block- / * Це властивість для Щоб Firefox 3.0 правильно відображав позиціонування * /width:0- / * Це властивість для того щоб Firefox 3.0 правильно відображав позиціонування * /-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)-}

Ось ми і створили простий ефект загнутого кута. У прикладах є блок із закругленими кутами. Робиться це в такий спосіб:

.note.rounded {-webkit-border-radius:5px 0 5px 5px--moz-border-radius:5px 0 5px 5px-border-radius:5px 0 5px 5px-}

Відео: CSS3 Tutorial - Learn the Five Most Popular Attributes in CSS3

висновок

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

Успіхів!

джерело: nicolasgallagher.com

Поділися в соц мережах: