Чиста укладання форм CSS3 стає все більш популярною. Він має свої недоліки, але збільшення часу завантаження від традиційного накладання JS даремно десятих секунд, коли мова йде про оптимізацію, щоб максимізувати для всієї вашої аудиторії. Більшість форм досить прямо вперед і використовують тільки входи і текстові області, а не радіо і прапорці, які створюють свій власний виклик.
Наведений нижче приклад коду – це лише невелика вибірка того, що ви могли б зробити. Не бійтеся додавати фонові градієнти або колір до форми. Я зосереджуюся на стандартному сірому погляді на більшість елементів, тому що він задовольняє ширшу аудиторію, ніж бути специфічним для кольору. Ви можете пограти з тінню і кольором фону, щоб додати зовсім інший вигляд на ваш сайт. Якщо у вас є темний веб-сайт, я пропоную поміняти код форми CSS, щоб змішувати і поп на темному тлі. Просто додайте цю CSS до вашого таблиці стилів, щоб миттєво стилізовано до будь-якої форми.
вхідні дані {
оббивка: 10px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
радіус кордону: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-тінь: 0 0 5px #444;
тінь коробки: 0 0 3px #444;
межа: тверда речовина 1px #fff;
}
текстоваарея {
оббивка: 15px;
межа: тверда речовина 1px #fff;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
-moz-border-radius: 4px;
радіус кордону: 4px;
-webkit-box-shadow: 0 0 5px #444;
-moz-box-тінь: 0 0 5px #444;
тінь коробки: 0 0 10px #444;
}
in[type="text"]put:hover, textarea:hover {
межа: 1px твердої #233567;
}
Форма за замовчуванням без CSS. Це виглядає як досить нудна форма для мене!
Тепер, якщо ми додали CSS, ми можемо дійсно підвищити загальний вигляд форми. Ця форма набагато більш захоплююче! Це дає більш оновлене і сучасне відчуття з закругленими кутами, ніжним затіненням і оббивкою, яка створює більше враження. Цей стиль форми підходить для багатьох веб-сайтів, але це, безумовно, не підходить для кожного веб-сайту. Я сподіваюся, вам сподобається налаштування цієї форми на свій смак.
CSS у формі робить великий вплив на ваш веб-зовнішній вигляд. Якщо ви зацікавлені в розширенні форми далі, ви можете налаштувати з іншими властивостями, які ви знайдете в підручниках тут: колір фону, градієнт, заповнення або навіть зображення, але я думаю, що ви будете задоволені, просто додавши трохи CSS до таблиці стилів.