Поточний час:
Сьогодні 22 вересня, пятниця 2017 рік
Стрічка RSS

Введіть ваш Е-mail:

Zura-Blog 2 роки 9 місяців 3 дня

Ваш ip адрес:54.159.64.172

Доброго дня!
Ви обновили сторінку в 14 : 38
Статистика

Кількість публікацій на блозі: 364
Кількість коментарів на блозі: 98
Кількість категорій на блозі: 17
Кількість міток на блозі: 28

Zura – Blog
Яндекс.Метрика UA TOP Bloggers

battonПривіт всім відвідувачам Zura — Blog, в сьогоднішній публікації запропоную до вашої уваги такі корисні, а також потрібні елементи для сторінки сайту, як кнопки.

Отож, яким чином можна до сторінки сайту додати кнопку, можна в коді HTML — сторінки, вказати потрібне значення, після чого на сторінці має появитись кнопка.

Наприклад: візьмем “input”, тег “input” використовують для створення текстових полів, різних кнопок, перемикачів і, т.п.

Для того щоб на сторінці появилась кнопка, потрібно, в “input” вказати тип елементу, для кнопки це “batton”, для кнопки яка очистить форму це “reset”, а для відправки форми це “submit” якщо вказати ще атрибут value=”Надіслати”, тоді на сторінці буде відображатись кнопка, з текстом “Надіслати”. 

Можна інший спосіб застосувати, це додати в папку сайту файл (кнопку), і вказати посилання на цей файл, щоб на сторінці появилась кнопка від графічного файлу, потрібно вибрати в кодах сторінки місце, і вказати в кодах посилання на цей  графічний файл (кнопка).

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

Ну і ще один варіант, це кнопки які відображаються на сторінці сайту, за рахунок стилей CCS, приклад таких кнопок нижче — “Демонстрація елементу”


user_97

Демонстрація елементу

Скачати готовий елемент з кнопками які створені за рахунок стилей css можна тут


До речі, на мою думку цей варіант самий оптимальний, оскільки колір кнопок, розміри і тому подібне, завжди можна буде підігнати під прийнятний колір вашого проекту, потрібно буде всього то навсього, поміняти в файлі стилей CSS коди кольорів.

Звичайно що, і відтінки і колір кнопок також можна поміняти і в графічному файлі, але для цього прийдеться “витягувати” файл з папки вашого сайту, потім запускати програму, і вже в графічному редакторі міняти відтінки, і колір кнопок

Але і це ще не все, оскілльки після всіх цих процедур, цей вже відредактований файл, потрібно буде доставляти назад, в свою папку на сайті.

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

 

Чи складно буде додати  кнопки, які відображаються на сторінці сайту за рахунок стилей CCS?

В загалі то, за скаладністю так само, як додавати кнопки які відображаються на сторінці сайту, за рахунок графічного файлу.

Оскільки так само, додається файл, це файл стилей CSS, додається в папку, бажано в ту папку в якій знаходяться файли з таким розширенням,  ці файли мають відношення до каскадних таблиць стилей css.

А потім, в кодах сторінки вказується шлях (посилання) на цей файл, прописується лінк на цей файл, і в тому місці, де повинна відображатись кнопка, вказується індентифікатор.

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

Що ж, далі мова про те як зробити таку на вигляд красиву кнопку, для свого проекту.

На Zura — Blod, на сторінці “buttonize-min-css”, знаходиться потрібний код стилей CCS, в цьому коді прописані спеціальні правила, які створять таку кнопку.

Це правила які будуть вказувати браузеру, що на сторінці, на якій прописаний лінк на цей файл, і в тому місці де вказаний індентифікатор, повинна відображалась на вигляд саме ця кнопка, яка створена за рахунок стилей css, а не звичайна.

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

batton1

на вигляд красиві кнопки

batton2

а не звичайні

Вище на сторінці знаходиться місце, там присутня можливість перегляду елементу, а заодно і рядом, трошки нижче де текст “Скачати готовий елемент з кнопками які створені за рахунок стилей css можна” далі йде слово “тут”, і клацнувши на “тут”, там знаходиться посилання, перейшовши за яким, ви зможите скачати папку з файлами, ну в кого не буде бажання “попаритись” з цим всім самому, там зможите скачати готові файли з папкою.

Хоча “попаритись” все ж таки прийдеться, не зважаючи на те чи скачаєте ви архів з файлом, чи самі створити потрібний файл з кодів стилей ccs.  

 

Ну що ж, як говориться “Більше діла менше слів”, далі опис про те як створити красиву кнопку в себе на проекті.

Звісно що, для того щоб все зробити “вручну”, спочатку потрібно створити файл з кодами, і з розширенням CSS.

Файл можна розмістити навіть в кореневій папці вашого сайту, але правильніше буде, якщо файл який відноситься до стилей CSS, вставляти в папку в якій знаходяться файли, саме з розширенням CSS.

Отож, переходимо на сторінку на Zura — Blog,  за посиланням:  

http://ruszura.in.ua/css/buttonize-min-css.html

далі копіюємо код на цій сторінці, потім запускаємо редактор по програмуванню, створюємо новий файл, і вставляємо в цьому файлі скопійований код, далі зберігаємо файл з назвою і розширенням “buttonize-min-css”.

Чи буде працювати код, якщо вказати якусь іншу назву файлу, я не провіряв, взагалі то повинен би, в принципі, а який сенс міняти назву файлу “buttonize-min-css” на іншу.

Файл може знаходитись як і в кореневій паці вашого сайту, так і в окремій, яка призначена для стилей CCS.

Я розмістив файл, на тестовому сайті в окремій папці яка призначена для стилей CCS, в любому випадку для того щоб все спрацювало, потрібно тільки правильно вказати посилання на цей файл.

На сторінці, на якій планується ця кнопка, яка буде відображатись за рахунок кодів стилей  CCS, потрібно прописати лінк.

Приклад як прописати, нижче:

<link href="css/buttonnize.min.css" rel="stylesheet"  type="text/css" >

І в тому місці на сторінці сайту, де планується ця кнопка, вказати індентифікатор “#” і класс “button”.

Приклад нижче:  

<br /><input type="submit" "#" class="button red Share">Відправити</a> 
<input type="reset" "#" class="button black arrow">Очистити</a>

Розберемо коди файлу “buttonize-min-css”:

Отож, для того щоб появилась кнопка, яка буде відображатись за рахунок цього коду, взятого з сторінки “buttonize-min-css”, потрібно спочатку створити файл, на сторінці вказати лінк на цей файл, потім вибрати місце на сторінці сайту, і вказати індентифікатор:

 "#" class="button"

після чого, в тому місці, на сторінці сайту де ви вказали індентифікатор, появиться кнопка сірого кольору. 

Для того щоб кнопка відображалась іншого кольору, код кольору також потрібно вказати в атрибуті class, наприклад візьмем червоний, тоді вказуємо “button red”.

 "#" class="button red"

для того щоб, появилась іконка в кнопці, потрібно також вказати  назву іконки, наприклад “Share”.

 "#" class="button red Share"

відобразиться кнопка червоного кольору, і з іконкою.

Для іконки потрібно створити в папку з назвою “images”, можна і іншу назву папки застосувати, але тоді прийдеться “паритись” з посиланнями, міняти в посиланнях назву вашої папки.

Щоб потім не робити зміни в кодах файлу  “buttonize-min-css”, і вказувати в кодах іншу папку, вважаю що краще створити папку з назвою “images”, і бажано в тому каталозі, де саме знаходиться цей файл, з назвою “buttonize-min-css”.

batton3

папка з назвою “images” знаходиться в тій папці де є файл з назвою “buttonize-min-css”.

А в папці з назвою “images”, повинні знаходитись іконки (графічні файли), які відображають іконки на кнопці.

Можна додати також і свою іконку, і щоб ваша ікока відображалась на кнопці, потрібно спочатку файл (іконку) додати в папку “images”, ну і звичайно що, в рядках коду додати назву вашої іконки.

Вставляємо в папку “images” свій графічний файл (іконку), розміри 16х16 або 24х24, можна і ще більший розмір, головне щоб розмір іконки, відповідав розміру кнопки.

Коли ви додали ікнонку в папку з назвою  “images”, потрібно скопіювати назву доданої іконки, саме цю назву прописати в рядках коду, в файлі “buttonize-min-css”.

Отож на сторінці, на блозі з назвою “buttonize.min.css”, (орієнтуємось на номер рядка в коді, який знаходиться на цій сторінці), шукаємо:

89 — рядок коду 

.arrow,.heart,.star

додаємо назву файлу доданої вами іконки, іконки яку ви самі додали в папку, наприклад візьмем назва “YouTube”, тоді в вісімдесять девятому рядку коду, дописуємо перед “star”, назву іконки “YouTube”, виставляємо спочатку кому “,” а потім крапку “.”, і далі назву іконки “YouTube” 

batton4

Рядок коду, після внесення цих змін буде таким:

.arrow,.heart,.star,.YouTube

далі шукаємо ще один рядок коду це 

batton5

93 — рядок коду, в якому прописуються наступні значення:

    .arrow:before,.heart:before,.star:before

там також додаємо назву файлу вашої доданої іконки, я вказав назву іконки “YouTube”, і в девяносто третьому рядку, перед (star:before) дописуємо наступні символи, спочатку кому “,” потім крапку “.”, а далі назву іконки “YouTube” потім ще  двокрапка “:” і  “before”.

.arrow:before,.heart:before,.star:before,.YouTube:before

Далі шукаємо 97 – 108 рядок кодів

baton6

 }
    .arrow:before
    {
    content:url(images/arrow.png)
    }
    .heart:before
    {content:url(images/heart.png)
    }
    .star:before
    {
    content:url(images/star.png)
    }

там вказані посилання, це посилання на назви файлів іконок, які знаходяться в папці “images”, і для вашої іконки, буде потрібно ще дописати в коді деякі значення, це вказати посилання на папку, і  файл вами доданої іконки.  

}
.YouTube:before
{
content: url(images/YouTube.png)
}

І  все, далі зберігаємо зробдені зміни, як я вже зазначав в цій публікації, залишається тільки вибрати сторінку, в якій потрібно прописати лінк на фай стилей css, місце на сторінці де планується кнопка, і вказати ідентифікатор.

Приклад нижче:

< input type="submit" "#" class="button red YouTube">Відправити</a>

До зустрічі!

Leave a Reply

Your email address will not be published. Required fields are marked *