Заховані кути на css3

Відео: Уроки по CSS / CSS3. Частина 8. Закруглені кути (border-radius)

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

Відео: CSS3 Tutorial

Реальний приклад можна побачити тут:

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

Трохи інший ефект "Загінаем кут на CSS3", про який я писав раніше:

Загінаем кут на CSS3

HTML частина

Структура досить проста:

Відео: CSS Basics (Part 7) - CSS3

lt;div class="Tucked-corners-top"gt;lt;div class="Tucked-corners-bottom"gt;lt;h1gt; Ефект захованих кутів на CSS3lt;/h1gt;lt;/divgt;lt;/divgt;

CSS частина

А ось CSS частина займе більше місця:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697

.tucked-corners-top {position: relative-width: 500px-min-height: 200px-margin: 100px auto-padding: 20px-background-color: #fff-background:-webkit-linear-gradient(45deg,transparent 10px, #fff 10px),-webkit-linear-gradient(135deg, transparent 10px, #fff 10px),-webkit-linear-gradient(225deg, transparent 10px, #fff 10px),-webkit-linear-gradient(315deg, transparent 10px, #fff 10px)-background:-moz-linear-gradient(45deg,transparent 10px, #fff 10px),-moz-linear-gradient(135deg, transparent 10px, #fff 10px),-moz-linear-gradient(225deg, transparent 10px, #fff 10px),-moz-linear-gradient(315deg, transparent 10px, #fff 10px)-background:-o-linear-gradient(45deg,transparent 10px, #fff 10px),-o-linear-gradient(135deg, transparent 10px, #fff 10px),-o-linear-gradient(225deg, transparent 10px, #fff 10px),-o-linear-gradient(315deg, transparent 10px, #fff 10px)-background-position: bottom left, bottom right, top right, top left-background-size: 50% 50%-background-repeat: no-repeat--moz-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5)--webkit-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5)-box-shadow: 0 20px 10px -20px rgba(0, 0, 0, .5)-}.tucked-corners-top h1 {color:# DD9941-text-align:center-}[class* =`Tucked-corners-`]:: before,[class* =`Tucked-corners-`]:: after {content: ``-position: absolute-height: 20px- width: 80px--webkit-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5)--moz-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5)-box-shadow: 0 8px 15px -7px rgba(0, 0, 0, .5)-box-shadow: none9- / * Хак для IE9 * /}.tucked-corners-top:: before,.tucked-corners-top:: after {top: -10px-}.tucked-corners-bottom:: before,.tucked-corners-bottom:: after {bottom: -10px-}.tucked-corners-top:: before,.tucked-corners-bottom:: before {left: -42px-}.tucked-corners-top:: after,.tucked-corners-bottom:: after {right: -42px-}.tucked-corners-top:: before {-webkit-transform: rotate(-45deg)--moz-transform: rotate(-45deg)--ms-transform: rotate(-45deg)--o-transform: rotate(-45deg)-transform: rotate(-45deg)-}.tucked-corners-top:: after {-webkit-transform: rotate(45deg)--moz-transform: rotate(45deg)--ms-transform: rotate(45deg)--o-transform: rotate(45deg)-transform: rotate(45deg)-}.tucked-corners-bottom:: before {-webkit-transform: rotate(-135deg)--moz-transform: rotate(-135deg)--ms-transform: rotate(-135deg)--o-transform: rotate(-135deg)-transform: rotate(-135deg)-}.tucked-corners-bottom:: after {-webkit-transform: rotate(135deg)--moz-transform: rotate(135deg)--ms-transform: rotate(135deg)--o-transform: rotate(135deg)-transform: rotate(135deg)-}