Як створити красиву іконку на css3

Сьогодні я хочу розповісти про цікавий спосіб створити іконку на CSS3. При цьому нам знадобитися тільки один HTML елемент.

Приклад іконки можна побачити тут:

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

HTML частина

Для створення іконки будемо використовувати блок div з класом stage, а всередині знаходиться посилання, для того щоб зробити цей блок посиланням:

123	lt;div class="Stage"gt;lt;a href="#" class="DocIcon"gt; lt;/agt;lt;/divgt;

Відео: Як зробити соціальну панель (фіксований блок) з HTML і CSS3

CSS частина

Основний стиль для іконки зробимо наступний:

+12345678910111213141516171819

.docIcon{background:#eee-background: -moz-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%)-background: -webkit-linear-gradient(top, #ddd 0, #eee 15%, #fff 40%, #fff 70%, #eee 100%)-border:1px solid #ccc--moz-border-radius:3px 15px 3px 3px--webkit-border-radius:3px 15px 3px 3px-border-radius:3px 15px 3px 3px--moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px--webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px-display:block-width:40px-height:56px-position:relative-text-indent:-9999em-margin:42px auto-}

Зараз необхідно загнути один кут. Для цього будемо використовувати псевдоелемент : before:

+12345678910111213141516171819

.docIcon: before{content:""-display:block-position:absolute-top:0-right:0-width:15px-height:15px-background:#ccc-background: -moz-linear-gradient(45deg, #fff 0,#eee 50%, #ccc 100%)-background: -webkit-linear-gradient(45deg, #fff 0,#eee 50%, #ccc 100%)-box-shadow:rgba(0,0,0,0.05) -1px 1px 1px, inset white 0 0 1px-border-bottom:1px solid #ccc-border-left:1px solid #ccc--moz-border-radius:0 14px 0 0--webkit-border-radius:0 14px 0 0-border-radius:0 14px 0 0-}

Додамо три лінії нашої іконці:

Відео: Форми CSS / Як створити форму в CSS3

1234567891011121314

.docIcon: after{content:""-display:block-position:absolute-left:0-top:0-width:60%-margin:22px 20% 0-background:#ccc-background: -moz-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%)-background: -webkit-linear-gradient(top, #ccc 0, #ccc 20%, #fff 20%, #fff 40%, #ccc 40%, #ccc 60%, #fff 60%, #fff 80%, #ccc 80%, #ccc 100%)-height:15px-}

Зараз наша ікона готова!

висновок

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

Успіхів!

джерело: net.tutsplus.com

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