batman

Направата на стила на ранковете

1 мнение в тази тема

Здравейте,

Реших да споделя с вас направата на стилът на ранковете. Според мен изглеждат наистина добре и не са чак толкова трудни за направа. Нуждаете се от много малко знание по HTML/CSS.

Като за начало започваме с малките иконки. Можете да намерите всички иконки на следния линк ---> http://fontawesome.io/icons/ 
Иконките се вкарват с тага <i> В тага пишем:

<i class="fa fa-user">

Това ще прикачи самата иконка. За да я стилираме съм използвал следния код:

style="color: #c20000; font-weight: 100; text-shadow: 0 0 0.7em #c20000;

Разбира се можете да промените цветът, големината на текста, сянката и т.н.
Накрая получаваме такъв код.

<i class="fa fa-user" style="color: #c20000; font-weight: 100; text-shadow: 0 0 0.7em #c20000;"></i>

Не забравяйте да добавите </i> иначе няма да ви се получи кода.

Ако искате текста да остане със същото форматиране на иконката само го добавете между >< т.е.

<i class="fa fa-user" style="color: #c20000; font-weight: 100; text-shadow: 0 0 0.7em #c20000;">Примерен текст</i>

Но ако искате текстът да е друг цвят, размер и т.н. можете да използвате <span></span>. Например ако искате иконката да ви е червена с червена "подсветка" (text-shadow), а текстът да е черен с червена "подсветка" (text-shadow) кодът ви ще изглежда така. 

<span style='color:black; font-weight: 100; text-shadow: 0 0 0.7em black;'>Администратор</span>

Можете да промените размера на сянката 0.7em=11px т.е можете да промените сянката да е: text-shadow: 11px 11px 11px

Тук можете да конвертирате px към em и обратното тук ---> http://pxtoem.com/

Крайният код ни изглежда ето така:

<i class="fa fa-user" style="color: #c20000; font-weight: 100; text-shadow: 0 0 0.7em #c20000;"><span style='color:black; font-weight: 100; text-shadow: 0 0 0.7em black;'>Администратор</i></span>

А резултатът е следния: ---> https://gyazo.com/5387cd61ed1e5a66f59368be538f1238

Ако имате въпроси може да коментирате, ще се опитам да отговоря на всеки един от вас.

1

Сподели публикацията


Адрес на коментара
Сподели в други сайтове

Създайте нов акаунт или се впишете, за да коментирате

За да коментирате, трябва да имате регистрация

Създайте акаунт

Присъединете се към нашата общност. Регистрацията става бързо!


Регистрация на нов акаунт

Вход

Имате акаунт? Впишете се оттук.


Вписване