pobierz w .pdf(przeznaczone do wydruku)
CSS 3 dostarcza wiele nowości, które z pewnością ułatwią i przyspieszą pracę nad atrakcyjnymi wizualnie projektami. Mimo, że CSS 3 jest jeszcze w fazie implementacji przez wszystkich najważniejszych producentów przeglądarek, warto powoli zaznajamiać się z możliwościami tej technologii 
Osobiście najbardziej nie lubię tworzyć wszelkiej maści formularzy. Nie dość, że trzeba napisać wiele linii kodu, to jeszcze istnieją ograniczenia technologiczne. Co nowego przynosi CSS 3 na tym polu?
Nowa wersja CSS „potrafi” rozróżniać różne typy pół formularza – zamiast pisać osobne klasy dla checkbox czy radio będziemy mogli napisać input[type=checkbox]. Prawda, że dużo lepiej tak wygląda? Poza tym, w końcu, będziemy mogli dowolnie edytować wygląd pól typu radio i checkbox bez utycia JavaScriptu – tak na marginesie, nie rozumiem czemu dopiero teraz deweloperzy umożliwią to. Inną przydatną nowością jest pseudoklasa :focus.
Żeby nie było tylko teoretycznie zamieszczam kod przykładowego formularza kontaktowego z wykorzystaniem CSS 3:
Kanał ATOM
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>...</title>
<style type="text/css">
body{
font-family: Arial, sans-serif;
font-size:14px;
padding: 30px;
}
label{
width:100px;
display: inline-block;
}
input, textarea{
margin: 5px 0;
border:1px solid #BAE1FF;
border-radius: 5px;
-webkit-appearance: none;
-moz-appearance: none;
background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(226,242,252))
);
}
textarea{
width:400px;
height: 200px;
}
input[type=text] {
width:150px;
height: 26px;
margin-left: 5px;
}
input:focus, textarea:focus, select:focus {
outline-color: #0090FF;
ackground-image: linear-gradient(bottom, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -o-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 0%, rgb(226,242,252) 100%, rgb(57,101,133) 84%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(255,255,255)),
color-stop(1, rgb(226,242,252))
);
}
input[type=checkbox] {
width:20px;
height: 20px;
border-radius: 2px;
vertical-align: middle;
margin-right: 5px;
}
input[type=checkbox]:checked {
background: url('images/checkbox.png') center no-repeat;;
}
input[type=submit] {
background: #0199FA;
color: #ffffff;
font-weight: bold;
padding: 5px 15px;
}
input[type=reset] {
background: #DEF3FF;
color: #0784CE;
font-weight: bold;
padding: 5px 15px;
margin-left: 10px;
}
</style>
</head>
<body>
<form>
<label for="name">Imię i nazwisko:</label>
<input type="text" name="name" /><br />
<label for="email">Adres e-mail:</label>
<input type="text" name="email" /><br />
<label for="message">Treść: </label><br />
<textarea placeholder="Wpisz treść" name="message"></textarea><br/>
<input type="checkbox" name="send"/> Wyślij kopię na mojego e-maila.<br />
<input type="submit" value="Wyślij" /><input type="reset" value="Wyczyść" />
</form>
</body>
</html>
Jak to wygląda w praktyce możecie zobaczyć tutaj.
W połączeniu nowości CSS 3 z możliwościami Web forms 2, o którym pisałem opisujac HTML5, będziemy mieli naprawdę zaawansowane narzędzia do tworzenia formularzy. Pytanie tylko kiedy?