Буває ось нічим зайняти себе у вільні 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; } |
Кому потрібно можете забирати і використовувати.
Автор TechDude
Категория: Для веб-майстра