Кнопки css. Переваги. Стилі. Естетичність
Напевно, жоден сайт не обійдеться без відсилань на інші свої сторінки кнопок. Всім хочеться привернути саме на свій сайт увагу, і при цьому використовуються найрізноманітніші засоби. У веб-дизайні до їх числа відносять оформлення кнопок, які відрізняються за різними параметрами - і за розмірами, і за формою, і по ефектах і так далі.
Кнопки CSS найбільш зручні. За миті їх стиль можна повністю змінити. І, звичайно, це дає додаткові можливості для оформлення сайту в цілому.
Для початку, щоб не було плутанини і нерозуміння, варто розібратися в деяких поняттях.
CSS, що це
CSS, що означає в перекладі "каскадні таблиці стилів", На сьогоднішній день є однією з основних технологій в інтернеті. Без цієї мови навряд чи обійдеться хоч один сайт.
CSS-код - це інструкції для браузерів, що містять інформацію, як відображати елементи на сторінці і де це робити.
Зручно зберігати такі інструкції в окремому файлі, що має розширення .css. З іншого боку, можна їх помістити і на початку html-документа.
Кнопка на сайт. Яка вона буває
Кнопка, або графічний елемент для навігації сайту, повинна привертати до себе увагу, щоб відвідувач побачив, що за нею ховається цікава йому інформація, і крім цього, на неї захотілося б натиснути. Коли вона досить яскрава і помітна, то її обов`язково помітять. Така кнопка може спонукати відвідувачів, наприклад, залишити свій відгук на сайті, або відправити заявку, підписатися на цікаву розсилку, ну і, звичайно, просто перевести на запитуваний користувачем розділ сайту.
Кнопки бувають статичні, анімовані, динамічні, зі звуком і без нього.
Їх можна спеціально створювати, наприклад, в фотошопі, і завантажувати на сайт зображення, а можна легко і швидко придумати їх в CSS.
кнопки CSS
Зробити такі кнопки дуже просто. Великою перевагою їх застосування є те, що їх в будь-який момент, буквально за пару секунд, можна змінити до невпізнання.
Відео: 3. [Уроки по CSS3] селектори в CSS. Частина 1
Як відомо, у кнопок є три положення:
- спокою, коли з нею нічого не роблять, а просто переглядають сторінку;
- положення, з наведеним на неї курсором;
- і активації при натисканні.
Відео: Flexbox CSS3 # 1 - Знайомство з FlexBox
Повною мірою кнопки точно з`являться в таких браузерах, як Firefox, Safari, Opera, Chrome. У той же час в Internet Explorer 9 кнопки не зможуть відобразитися в повній мірі. Наприклад, заокруглення кутів, тінь тексту і обведення навколо кнопки не будуть видні тут через те, що такі властивості не підтримуються цим браузером. Проте, в цілому CSS-кнопки для сайту виглядають гідно в цій версії браузера. В Internet Explorer 8 і інших версіях нижче восьмий у кнопки не буде видна об`ємність, але, в той же час, збережеться видимість градієнтів.
Якщо порівняти кнопку у вигляді зображення і кнопку CSS, то різниця місця на сервері буде абсолютно несуттєвою. Але кнопки CSS зменшать кількість запитів до сервера, а ось це вже буде явною перевагою в порівнянні з кнопкою у вигляді зображення.
Відео: CSS-фреймворки: добро чи зло?
Виходить, що навіть якщо підтримка деяких властивостей CSS в браузерах Internet Explorer і відсутня, то такі кнопки все одно будуть виглядати більш виграшними в порівнянні з простими зображеннями, тому що єдине, чого втратять користувачі в Internet Exporer, так це бачити естетичність сучасних технологій по веб -дизайну. Але це зовсім несуттєвий недолік.
Для кожного положення задається свій стиль. Ці стилі прописуються в спеціальному файлі .css або між тегами head в самій сторінці сайту.
Місце кнопки на сайті
Між тегами body записується код:
де
id =&rdquo-button2&rdquo- тут означає ім`я, що привласнюється кнопці,
href =&rdquo-гіперпосилання&rdquo- тут дається безпосередня посилання на необхідний документ,
ТЕКСТ - друкується текст, який буде відображатися на кнопці.
Стилі для кнопок
1. Стиль кнопки CSS записується окремо в документі або в самій сторінці:
2. Спочатку записуються кнопки CSS, коли вони знаходяться в спокої:
3. Далі записуються параметри, відповідні кнопці, коли на неї наводять курсор. Якщо в даному випадку змінюється лише колір і заливка, то і в стилі все залишається колишнім, крім кольору і заливки:
4. І останній параметр стосується положення кнопки, коли натискається на неї курсор. Часто в таких випадках змінюється лише мінімум, наприклад, колір, як і в цьому випадку:
CSS - красиві кнопки
Для створення кнопок можна використовувати градієнт. Найкраще спочатку кнопку намалювати в будь-якому графічному редакторі, наприклад, фотошопі, щоб точно знати, яка вона вийде в результаті. Якщо використовувати фотошоп, то в ньому спочатку вже є якісь градієнти, але додатково можна завантажити ще й інші, такі, які хотіли б, щоб вийшли на сайті.
Експериментуючи з CSS-кодом і змінюючи різні параметри, є можливість змінювати CSS красиві кнопки, і шляхом підбору, домагатися бажаного результату.
Цими параметрами є:
- колір тексту на кнопці;
- розмір тексту і кнопки;
- колір градієнта кнопки;
- радіус кутів кнопки;
Відео: Іменування класів css
- і колір її обведення.
Власне кажучи, можна спокійно, без страху, експериментувати і вибирати найкращий варіант. Незважаючи на невелику кількість параметрів, можна створити дуже різноманітні за своїм стилем кнопки.
