Як зробити вигнуту тінь на чистому css3.

Всім привіт! Сьогодні ми розглянемо, як зробити вигнуту тінь для кнопки на чистому CSS3.

HTML розмітка:

 
lang="En"gt; 
 
charset="Utf-8"gt; 
Вигнута тінь на CSS3 
rel="Stylesheet"href="Style.css"gt; 
 
 
href="#"class="Button"gt;Увійти 
href="#"class="Button"gt;Увійти

CSS код:

Відео: Як стилізувати чекбокс на чистому css

body { 
 font-family:"Helvetica", sans-serif- 
 font-size:1rem- 
} 
 
button,.button { 
 display:inline-block- 
 position: relative- 
 border-width:0- 
 cursor: pointer- 
 line-height: normal- 
 margin:0010px- 
 text-decoration: none- 
 text-align: center- 
 padding:15px25px- 
 font-size:1rem- 
 background-color:# 009eff- 
 vertical-align: middle- 
 color:# fff- 
 border-radius:5px- 
} 
 
button:after,.button:after { 
 position: absolute- 
 content:``- 
 top:0- 
 right:0- 
 left:0- 
 bottom:0- 
 border-radius:5px- 
} 
 
button:hover:after { 
 box-shadow: inset 0-3px rgba(0,0,0,.25) - 
}

Ось так просто можна зробити досить гарний ефект. Оскільки тут використовується абсолютно все, що ви вже повинні знати, то пояснювати нічого. Якщо ж ви відчуваєте, що чогось не розумієте, то раджу придбати курс "HTML5 та CSS3 з Нулі до Гуру".

Відео: Як зробити текст з тінню на CSS

Дякую за увагу!

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

Схожі