[CSS3] overlay, часть 2
Итак, хоть мне было немного сложно себя заставить писать этот пост я его написал :)
В прошлом посте мы познакомились со свойствами CSS3, которые будем использовать. Только сразу оговорюсь: во-первых, никаких картинок мы использовать не будем, может это и не так красиво, но давайте просто пойдём по пути только css и html; во-вторых, код нашего окошка будет в исходнике страницы, я думаю несложно будет создавать его жабаскриптом :)
html заготовка:
<div id="overlay" class="ovlBody">
<div class="ovlHeader">
<h3>Заголовок</h3>
<a href="javascript://" class="ovlClose">×</a>
</div>
<div class="ovlContent">
Лорем ипсум... вообщем вы поняли.
</div>
</div>Как вы видите html кода тут совсем немного. Впринципе можно убрать h3 и оставить просто текст, но давайте хотябы в такой маленькой заготовке уважать маму-семантику :)
Начнём работать с css.
.ovlBody {
width:400px;
position:fixed;
top:25%;
left:35%;
border:1px solid rgba(0,0,0,.5);
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
box-shadow:0 4px 20px rgba(0,0,0,.4);-moz-box-shadow:0 4px 20px rgba(0,0,0,.4);-webkit-box-shadow:0 4px 20px rgba(0,0,0,.4);
}
.ovlHeader {
position:relative;
background-color:rgba(255,128,17,.7);
border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 0;
}
.ovlHeader h3 {
margin:0;
padding:3px 5px;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:90%;
font-weight:100;
color:#FFF;
border:1px solid rgba(255,255,255,.6);
border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-webkit-border-radius:5px 0;
}
.ovlClose {
display:block;
height:20px;
width:20px;
padding:2px;
overflow:hidden;
position:absolute;
top:-15px;
right:-15px;
background-color:#FFF;
text-align:center;
color:#000;
font-family:Arial, Helvetica, sans-serif;
font-size:170%;
line-height:.7;
text-decoration:none;
border:3px solid #f70;
border-radius:50%;-moz-border-radius:50%;-webkit-border-radius:15px;
box-shadow:0 0 10px rgba(0,0,0,.4);-moz-box-shadow:0 0 10px rgba(0,0,0,.4);-webkit-box-shadow:0 0 10px rgba(0,0,0,.4);
}
.ovlClose:hover {
color:#f30;
background-color:#f1f1f1;
}
.ovlContent {
height:100px;
padding:3px 5px;
font-size:95%;
background-color:rgba(222,222,222,.4);
border-top:1px solid rgba(0,0,0,.5);
border-bottom:1px solid rgba(255,128,17,.35);
border-radius:0 0 5px 5px;-moz-border-radius:0 0 5px 5px;-webkit-border-radius:0 5px;
}Уверен, вам интересно узнать почему же такие различия в border-radius для Gecko(firefox) и Webkit(safari, chrome). А дело всё в том что пока нет чётких правил по обработке свойств. Поэтому строчка border-radius:5px 0; в Gecko закруглит верхний левый и правый нижний, а в Webkit верхний левый и верхний правый углы. А также Webkit не умеет работать с округлением на проценты, поэтому пришлось кнопку закрытия закруглять «на глаз».
Именно по этим причинам сделанный нами оверлэй правильнее всего выглядит в Gecko, хотя и в Webkit проблем кроме не сглаживания углов и наскакиванием закруглённых границ друг на друга нет.
Надеюсь что проблем с восприятием кода у вас небыло, а если были то спрашивайте в комментариях, я вам объясню.
Красивого кода вам! :)
