Неоновий ефект для форм з допомогою CSS3 і JQuery

43

Форми бувають різні, красиві і потворні. Вийшло в риму, але це так, трохи лірики на початку. А якщо серйозно, то форм різної спрямованості та оформлення, існує незліченна кількість. Відрізняються вони функціональністю, технікою розміщення і появи на сторінках сайтів, ну і звичайно ж кількістю полів вводу інформації. Все важче стає знайти щось нове в оформленні форм, привернути увагу користувачів. Тут вже хто на що здатний, це і спливаючі, і миготливі, розмальовані у всі кольори веселки форми для реєстрації, пошукові форми, і звичайно ж контактні форми стилізовані під будь-який дизайн сайтів. Обмеженням може служити, лише розмір невгамовної фантазії авторів.

Ось і ми, давайте сьогодні розглянемо, як створити стильний ефект неонового свічення для простої форми. Думаю не погано буде виглядати неоновий ефект позаду поля вводу в формі, і все це без використання Flash. Працювати ми будемо виключно з CSS3 і для більшої акуратності підключимо трохи JQuery.

Неоновый эффект форм

Відразу невелика примітка: У цьому методі є один косяк, коректно ефект світіння (неон), відображають лише браузери використовують движок Webkit, такі як Chrome і Safari. Не підкачав і Firefox останніх версій, а ось Opera видає затемнені поля вводу, що саме по собі вже не є добре. Ну, а з IE (до 8 версії) як завжди повний завал. Будемо сподіватися, що IE 9 зніметься з гальм і перестане вставляти палиці в колеса всього нового і перспективного у веб-дизайні.

Дивитися Демо

Для початку переконайтеся, що ви завантажили останню версію JQuery (версія 1.4.2 на момент написання цього тексту), якщо ви відчуваєте необхідність в локальній копії, в іншому випадку завжди є можливість використовувати Google API (у випадку роботи в мережі). Щоб підключити останню версію до роботи, слід додати наступний рядок коду на початку сторінки html вище всіх інших сценаріїв, які використовують Jquery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1,4/jquery.min.js">

В прикладі і в исходниках використана локальна копія JQuery 1.4.2 (jquery-1.4.2.min.js)

Файли, які використовуються при створенні форми:

  • xHTML file: index.html
  • CSS file: style.css
  • Javascript file: highlight.js

Покладіть всі файли в одну папку разом з копією JQuery (якщо є) і без зайвої суєти, давайте почнемо мабуть.

Створення макету форми в HTML

Наступним нашим кроком, як ви здогадалися, буде створення макету форми в HTML. Нижче наводиться весь фарш демо сторінки з формою index.html.

DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Неоновий ефект для форм</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="page-wrap">
<form id="myform" method="post" action="#">
<div>
<div class="field">
<label for="personname" >Ім'я</label>
<input class="inputfield textfield" name="personname" type="text" />
</div>
<div class="field">
<label for="email" >E-mail</label>
<input class="inputfield textfield" name="email" type="text" />
</div>
<div class="field">
<label for="website" >Сайт</label>
<input class="inputfield textfield" name="website" type="text" />
</div>
<div class="field area">
<label for="details" >Повідомлення</label>
<textarea class="inputfield textarea1" name="details" ></textarea>
</div>
</div>

<input class="submitbutton" type="submit" value="Вперед" />
</form>
</div>
<script type="text/javascript" src="jquery-1.4.2.min.js">
<script type="text/javascript" src="highlight.js">
</body>
</html>

Неоновий ефект для форм

Ім’я
E-mail
Вебсайт
Повідомлення

Як видно з коду вище, наша форма складається з текстового поля та полів введення, яким присвоєно клас field field і area. Вони не є обов’язковими і можуть бути змінені в міру необхідності, експериментуючи з параметрами в стилях CSS, ми можемо відформатувати його, як хочемо. Мітки label, input і textarea об’єднані класом field, текстового поля дається клас inputfield має додатковий клас textarea1, так що ми можемо відрегулювати висоту текстового поля в CSS. Трохи плутано, але труднощів з форматуванням під себе, виникнути не повинно.

CSS

Тихим розміреним кроком підійшли до стилізації нашої форми за допомогою CSS. Анітрохи не сумніваючись, покладіть наступний шматок коду в style.css, звичайно якщо він у вас є :))

*{
margin:0;
padding:0;
}
textarea, input{
outline:none;
}
body{
background:#3D3D3D;
}
#page-wrap{
width:350px;
min-height:500px;
height:auto;
margin:0 auto;
position:relative;
padding-top:50px;
font:15px Arial;
}
#myform{
width:375px;
-moz-border-radius: 8px; /* FF1+ */
-webkit-border-radius: 8px; /* Saf3+, Chrome */
border-radius: 8px; /* Opera 10.5, IE 9 */
margin:0 auto;
position:relative;
}
#myform label{
top:10px;
position:relative;
color:white;
}
.field{
background:gray;
padding:15px 15px 0 10px;
height:50px;
width:350px;
}
#myform div:first-child{
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#myform div:last-child{
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.area{
padding:15px 15px 0 10px;
min-height:195px;
}
.inputfield{
padding:0 10px 0 10px;
float:right;
width:200px;
font:15px Arial;
border:2px aqua inset;
-moz-border-radius: 8px; /* FF1+ */
-webkit-border-radius: 8px; /* Saf3+, Chrome */
border-radius: 8px; /* Opera 10.5, IE 9 */
}
.textfield{
висота:25px;
padding-top:5px;
}
.textarea1{
padding-top:10px;
padding-bottom:10px;
height:150px;
max-height:200px;
max-width:250px;
}

*{
margin:0;
padding:0;
}
textarea, input{
outline:none;
}
body{
background:#3D3D3D;
}
#page-wrap{
width:350px;
min-height:500px;
height:auto;
margin:0 auto;
position:relative;
padding-top:50px;
font:15px Arial;
}#myform{
width:375px;
-moz-border-radius: 8px; /* FF1+ */
-webkit-border-radius: 8px; /* Saf3+, Chrome */
border-radius: 8px; /* Opera 10.5, IE 9 */
margin:0 auto;
position:relative;
}
#myform label{
top:10px;
position:relative;
color:white;
}
.field{
background:gray;
padding:15px 15px 0 10px;
height:50px;
width:350px;
}
#myform div:first-child{
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-top-right-radius: 8px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
#myform div:last-child{
-moz-border-radius-bottomleft: 8px;
-moz-border-radius-bottomright: 8px;
-webkit-border-bottom-left-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
.area{
padding:15px 15px 0 10px;
min-height:195px;
}
.inputfield{
padding:0 10px 0 10px;
float:right;
width:200px;
font:15px Arial;
border:2px aqua inset;-moz-border-radius: 8px; /* FF1+ */
-webkit-border-radius: 8px; /* Saf3+, Chrome */
border-radius: 8px; /* Opera 10.5, IE 9 */
}.textfield{
висота:25px;
padding-top:5px;
}
.textarea1{
padding-top:10px;
padding-bottom:10px;
height:150px;
max-height:200px;
max-width:250px;
}

Потрібні деякі пояснення, в класі inputfield дуже важливим є параметр border-radius , оскільки стилізація проходить в зв’язці з box-shadow (задає тінь елемента). Та й у цілому, закруглення кордонів блоку, покращує зовнішній вигляд форми, і, як ми бачимо, для різних браузерів прописана своя лінійка.

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

.submitbutton{
border-style: none;
border-color: inherit;
border-width: 0px;
float: right;
padding: 10px 15px;
font: 18px Arial;
position: absolute;
top: 105%;
right: 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 20px 0 rgba(0,0,0,.19);
background-image: -webkit-gradient(linear,left, top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf));
}
.submitbutton:hover{
background: #3cdfdf;
color:#333;
-moz-box-shadow: 0px 0px 30px #3cdfdf;
-webkit-box-shadow: 0px 0px 30px #3cdfdf;
box-shadow: 0px 0px 30px #3cdfdf;
}

.submitbutton{
border-style: none;
border-color: inherit;
border-width: 0px;
float: right;
padding: 10px 15px;
font: 18px Arial;
position: absolute;
top: 105%;
right: 10px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
box-shadow: 0 8px 17px 0 rgba(0,0,0,.2), 0 6px 0 20px rgba(0,0,0,.19);
background-image: -webkit-gradient(linear,left, top,left bottom,color-stop(0, white),color-stop(1, #3cdfdf));
}
.submitbutton:hover{
background: #3cdfdf;
color:#333;
-moz-box-shadow: 0px 0px 30px #3cdfdf;
-webkit-box-shadow: 0px 0px 30px #3cdfdf;
box-shadow: 0px 0px 30px #3cdfdf;
}

З коду видно, що ми трохи додали градієнта gradient для фону, з використанням білого і #3cdfdf (aqua-blue), для яких ми використовуємо -moz-linear-gradient для Firefox 3.6 + і -webkit-gradient для Chrome 4 + і Safari 4 +. Закруглили кути border-radius і надали тіньовий ефект краях кнопки. Для Internet Explorer, ми використовували фільтр (IE 6,7) і -ms-filter (IE 8 +). Для Opera доступних альтернатив на жаль не виявилося (поки).

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

CSS3 -webkit-animation

Тепер прийшов час, щоб поринути у нові властивості CSS3, а точніше розібрати функцію -webkit-animation. Для продовження слід додати наступні рядки коду у файлі CSS.

@-webkit-keyframes pulsate {
0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
 25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset }
 50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset }
75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset }
100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
}
.inputfield:focus{
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-box-shadow: 0px 0px 30px #3cdfdf;
 box-shadow: 0px 0px 30px #3cdfdf;
}

@-webkit-keyframes pulsate {
0% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
25% { -webkit-box-shadow: 0px 0px 35px #3cdfdf; border:2px aqua inset }
50% { -webkit-box-shadow: 0px 0px 0px white; border:2px white inset }
75% { -webkit-box-shadow: 0px 0px 35px white; border:2px white inset }
100% { -webkit-box-shadow: 0px 0px 0px #3cdfdf; border:2px aqua inset }
}
.inputfield:focus{
-webkit-animation-name: pulsate;
-webkit-animation-duration: 1.5 s;
-webkit-animation-iteration-count: infinite;-moz-box-shadow: 0px 0px 30px #3cdfdf;
box-shadow: 0px 0px 30px #3cdfdf;
}

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

Ключові кадри визначаються з допомогою CSS «@», і мають наступний синтаксис:

@-webkit-keyframes animation-name
{
from{ before-state }
to{ after-state }
}

@-webkit-keyframes animation-name
{
from{ before-state }
to{ after-state }
}

Щоб вставити кілька кадрів, просто використовуйте відсоток (%), як показано в наведеному вище коді. «Х%» означає, х% від загального часу пройшло. Загальний час, який ми будемо вказувати у webkit-animation-duration (тривалість) при використанні анімації.

У наведеному вище коді ми використовуємо два кольори, # 3cdfdf і білого, щоб створити пульсуючий анімацію . Тут певна закономірність була визначена за допомогою box-shadow, а для змінного імпульсного ефекту і межі об’єднали разом з ним, але ви можете експериментувати зі значеннями, і використовувати будь-який параметр CSS, щоб створити свою власну анімацію.
Щоб використовувати анімацію, все що вам потрібно зробити, це додати наступні три рядки (див. код вище приклад використання):
— webkit-animation-name: ім’я анімації;
— webkit-animation-duration: тривалість анімації;
— webkit-animation-iteration-count: кількість разів;

Ми використовували -moz-box-shadow для Firefox 3.5 + і box-shadow для браузерів які все це справа підтримують, на рахунок Opera 10,5+ у мене сумніви.
Тепер, коли ви зосереджені на текстове поле або поле введення, вони повинні горіти, як показано нижче:

Эффект неонового свечения для форм

Підключення JQuery

Невеликий штрих до нашої виконану роботу, просто додайте наступні рядки коду в highlight.js.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
$(document).ready(function(){
var globalParent=null;
var mouse_is_inside=false;
/*Фрагмент нижче активується при фокусі на inputfield */
$('.inputfield').focus(function(){
globalParent=$(this).parent('div');
globalParent.click();
});
/*В наступній частині буде активована при догляді з inputfield */
$('.inputfield').blur(function(){
globalParent.click();
});
/*Ця частина буде активована, коли користувач клацає десь всередині контейнера
Div у inputfield*/
$('.field').click(function(){
if(!($(this).is('.dummy'))){
$('.dummy').css('background-color','gray');
$('.dummy label').css('color','white');
$('.dummy').removeClass('dummy');
$(this).css('background-color','black');
$(this).children('label').css('color','#3cdfdf');
$(this).addClass('dummy');
}
});
/*Наступний код перевіряє миша у формі чи ні*/
$('form').hover(function(){
mouse_is_inside=true;
},
function(){
mouse_is_inside=false;
}
);
/*Якщо користувач клацає де-небудь поза форми, всі, підсвічування видалена*/
$('body').click(function(){
if(!mouse_is_inside)
{
$('.field').css('background-color','gray');
$('.field label').css('color','white');
$('.dummy').removeClass('dummy');
}
});
});

$(document).ready(function(){
var globalParent=null;
var mouse_is_inside=false;/*Фрагмент нижче активується при фокусі на inputfield */
$(‘.inputfield’).focus(function(){
globalParent=$(this).parent(‘div’);
globalParent.click();
});/*В наступній частині буде активована при догляді з inputfield */
$(‘.inputfield’).blur(function(){
globalParent.click();
});/*Ця частина буде активована, коли користувач клацає десь всередині контейнера
Div у inputfield*/
$(‘.field’).click(function(){
if(!($(this).is(‘.dummy’))){
$(‘.dummy’).css(‘background-color’,’gray’);
$(‘.dummy label’).css(‘color’,’white’);
$(‘.dummy’).removeClass(‘dummy’);
$(this).css(‘background-color’,’black’);
$(this).children(‘label’).css(‘color’,’#3cdfdf’);
$(this).addClass(‘dummy’);
}
});/*Наступний код перевіряє миша у формі чи ні*/
$(‘form’).hover(function(){
mouse_is_inside=true;
},
function(){
mouse_is_inside=false;
}
);/*Якщо користувач клацає де-небудь поза форми, всі, підсвічування видалена*/
$(‘body’).click(function(){
if(!mouse_is_inside)
{
$(‘.field’).css(‘background-color’,’gray’);
$(‘.field label’).css(‘color’,’white’);
$(‘.dummy’).removeClass(‘dummy’);
}
});
});

Не став пижіться і докладно розписувати кожен пункт, а тупо додав деякі коментарі прямо в код, а то від надлишку писанини очі в купу зійдуться і у Вас і у мене, а так коротко і ясно.
Це простий код JQuery, який вибирає контейнер Div inputfield і змінює колір фону чорний, а також змінює кольору оболонки на # 3cdfdf (aqua-blue). І т. д і т. п …….

У загальному і цілому, після включення JQuery поля будуть виділятися приблизно так, як показано нижче:

Неоновое свечение для форм

Завантажити

Висновок

Так, стаття вийшла об’ємна, головне не заплутаться в термінах, а результат, думається мені, порадує око користувачів, які побачать форму з ефектом неонового підсвічування. Для використання такого ефекту веб-сайті, необхідно пам’ятати про цільових користувачів використовують сучасні браузери Chrome і Safari, вони навряд чи становлять 20% від загального числа користувачів Інтернет і більш поширені серед молодого покоління. Я вже згадав, перш ніж ми почали, що для браузерів, які не підтримують CSS3, ефект буде трохи гірше, залежно від можливостей відповідних веб-браузерів.

CSS3 — це майбутнє, і це факт!

Джерело: 1stwebdesigner

Ще недавно розробка динамічних, ієрархічних меню була доступна тільки професіоналам, але вихід пакету Xara Menu Maker змінив ситуацію і тепер це може зробити будь-який бажаючий.