Обкладинка диску за допомогою CSS3

Автор TechDude

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

Демонстрація Завантажити ісходні коди

HTML код має наступний вигляд:

<div class="cover">
<div class="cover-center"></div>
<div class="cover-bord"></div>
<h1>TechDude.Blog</h1>
<span>Обкладинка диску за допомогою CSS3</span>
</div>

А CSS3 стилі виглядають наступним чином:

.cover {
width: 360px; height: 360px;
background: url('cover.jpg') center no-repeat;
border-radius: 180px;
position: relative;
 
-webkit-box-shadow: 0px 0px 10px #aaa;
-moz-box-shadow: 0px 0px 10px #aaa;
-o-box-shadow: 0px 0px 10px #aaa;
box-shadow: 0px 0px 10px #aaa;
 
-webkit-text-shadow: 0px 1px 0px #000;
-moz-text-shadow: 0px 1px 0px #000;
-o-text-shadow: 0px 1px 0px #000;
text-shadow: 0px 1px 0px #000;
 
-webkit-transition: all 500ms linear;
-moz-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
}
.cover:hover {
transform: rotate(-25deg);
-webkit-transform: rotate(-25deg);
-moz-transform: rotate(-25deg);
-o-transform: rotate(-25deg);
}
.cover-center {
width: 30px; height: 30px;
position: absolute; top: 50%; left: 50%;
margin: -15px 0 0 -15px;
background-color: #fff;
 
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
 
-webkit-box-shadow: inset 0px 0px 10px #aaa;
-moz-box-shadow: inset 0px 0px 10px #aaa;
-o-box-shadow: inset 0px 0px 10px #aaa;
box-shadow: inset 0px 0px 10px #aaa;
}
.cover-bord {
width: 50px; height: 50px;
position: absolute; top: 50%; left: 50%;
margin: -28px 0 0 -28px;
background-color: transparent;
border: 3px solid #fff;
 
-webkit-border-radius: 28px;
-moz-border-radius: 28px;
-o-border-radius: 28px;
border-radius: 28px;
}
.cover h1 {
font-size: 31px; color: #fff; font-family: Ubuntu, Tahoma, Arial;
text-align: center;
padding: 250px 0 0 0; margin: 0;
}
.cover span {
display: block;
font-size: 13px; color: #fff; font-family: Ubuntu, Tahoma, Arial;
text-align: center;
}

Кому потрібно можете забирати і використовувати.

6 Сентябрь 2012

Понравилась статья? Оставь свой комментарий и подпишись на RSS:

Схожі статті:

Оставь свой комментарий!

Про блог

TechDude.Blog – персональний блог, который не имеет одной конкретной тематики. Тут вы найдете интересные и полезные статьи про: интернет, гаджети, музику, видео, спорт, искусство, web и социальные сервисы.

Надеемся, что Вам понравиться!