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:
<!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?
Kanał ATOM
). Mianowicie FF nie odczytuje plików .eot ani .ttf. Na szczęście problem ten możemy rozwiązać w bardzo prosty sposób – dodając inne formaty czcionki do @font-face:
