HTML5 və CSS3 Zərf Əlaqə Forması. Html5-də təmiz CSS Əlaqə formasında şəkillərsiz gözəl rəy forması
Bu yazıda, pəncərənin ölçüsü dəyişdirildikdə görünməyə uyğunlaşacaq dinamik əks əlaqə formasından danışacağıq. Yəni, əks əlaqə forması bütün növ cihazlarda, fərdi kompüterlərdə, noutbuklarda, smartfon və planşetlərdə baxmaq üçün əlçatan olacaq.
Əlaqə forması 3 məlumat daxiletmə sahəsindən ibarət olacaq - ad, e-poçt ünvanı və məktub mətni. Bütün sahələrin doldurulması tələb olunacaq, boş məktub göndərmək mümkün olmayacaq. E-poçt ünvanı daxiletmə sahəsi düzgün daxiletmə üçün əlavə olaraq təsdiqlənəcək. Məlumatlar html kodunda təqdim olunacaq, rəy formasının üslubları ayrıca CSS faylında yazılacaq. Bu skriptin prinsipinə əsasən, analogiya ilə daha çox və ya daha az giriş sahələri yaratmaq mümkündür.
Bu formadan istifadənin üstünlükləri saytın fasiləsiz işləməsi və səhifəni yenidən yükləmədən məlumatların formadan dinamik şəkildə təqdim edilməsidir. Həm də mobil cihazlarda baxmağın rahatlığını qeyd etmək lazımdır.
send.php faylında aşağıdakı sətirləri redaktə edin: $to = " [email protected]"; $subject= "site.ru-dan mesaj"; $header="Kimdən: site.ru";;
Məktub yaz
* Bütün sahələr tələb olunur
Göndər
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); html, bədən ( hündürlük: 100%; doldurma: 0; kənar: 0; ) bədən ( fon: #d3dce1; şrift ailəsi: "Roboto", sans-serif; şrift ölçüsü: 14px; ) .outer ( ekran: cədvəl ;en: 100%; hündürlük: 100%; mətni hizalama: mərkəzə; ) .orta ( ekran: cədvəl xanası; şaquli hizalama: orta; ) .daxili ( mətni düzləşdirmək: mərkəzə; en: avtomatik; doldurma: 0 15px; ) .login-wr (mövqe: nisbi; kənar: 0 avtomatik; fon: #fff; maksimum eni: 550px; qutu-kölgə: 3px 3px 24px #999; doldurma: 15px 15px 15px 15px; ) h2 ( mətn- align: sola; şrift çəkisi: 200; şrift ölçüsü: 1,6em; kənar: 0 0 10px 0; doldurma: 0 0 10px 0; haşiyə-alt: 1px bərk #eeeeee; rəng: #474747; ) .forma ( padding -yuxarı: 20px; mətni align: sola; ) daxiletmə, daxiletmə ( kənar-aşağı: 25px; hündürlük: 40px; kontur: 0; -moz-outline-style: heç biri; ) düyməsi ( hündürlük: 40px; kontur: 0; -moz-outline-style: none; ) daxiletmə ( fon: url("img/user.png") təkrarsız sol 10px mərkəz; ) daxiletmə (fon: url("img/email.png") təkrarsız sol 10px mərkəz; ) textarea (fon: url("img/pencil.png") təkrarsız sol 10px yuxarı 10px; ) textarea (en: calc(100% - 55px); hündürlük: 120px; haşiyə: 1px bərk #bbb; doldurma: 10px 10px 10px 45px; şrift ölçüsü: 14px; ) giriş, giriş (en: calc(100% - 45px); maksimum en: 250px; haşiyə: 1px bərk #bbb; doldurma: 0 0 0 45px; şrift ölçüsü: 14px ; ) giriş:fokus, giriş:fokus ( haşiyə: 1px bərk #2196f3; ) p ( doldurma-alt: 10px; ) düyməsi ( en: 100%; maksimum en: 150px; fon: #e6ebee; sərhəd: heç biri; sərhəd -alt: 5px bərk #d3dce1; rəng: #333; şrift ölçüsü: 14px; şriftin çəkisi: 200; kursor: göstərici; keçid: qutu-kölgə .4s asanlığı; )$(function() ( $("#loader").gizlət(); $("forma").submit(funksiya(e)) ( var adı = $("#name").val(); var email = $("#email").val(); var message = $("#message").val(); var data = "name=" + name + "&email=" + email + "&message=" + mesaj ; if(data) ( $.ajax(( növü: "POST", url: "./send.php", data: data, beforeSend: function(html) ( $("#loader").show(); $("#submit").hide(); ), müvəffəqiyyət: funksiya(html)( $("#loader").hide(); $("#nəticə").html(html); ) )); ) yalnış qaytarın; )))));
Bu yazıda biz nümunə olaraq rəydən istifadə edərək formaları necə tərtib edəcəyimizi və onlar üçün semantik işarələmədən necə istifadə edəcəyimizi öyrənəcəyik, bir neçə incəlik və nüansları nəzərdən keçirəcəyik və IE6-a qədər müxtəlif brauzerlərdə formamızı mümkün qədər oxşar şəkildə göstərməyə çalışacağıq.
Məqalə sonuncu dəfə 08/27/2013 tarixində yenilənib.
Sürətli başlanğıcForma yaratmaq üçün, formanı emal edən skriptin ünvanını ehtiva edən tələb olunan fəaliyyət atributuna malik teqdən istifadə edin. Siz həmçinin GET (defolt) və ya POST metodundan və sonra JS/PHP vasitəsilə forma daxil olmaq üçün istifadə olunacaq ad atributundan istifadə edərək formanı emal etmək üçün burada metod atributunu təyin edə bilərsiniz. Beləliklə, minimal işarələməmiz belə görünəcək:
...
İstifadəçi adını, e-poçt ünvanını və formanı təqdim düyməsini doldurmaq üçün sahələr əlavə etməyə çalışaq:
Adınız E-poçt
Sətirlər yaratmaq üçün teqlər ən çox istifadə olunur, daha mürəkkəb formalarda üslub üçün onlara bir sinif əlavə olunur:
Adınız E-poçt
Seçimdən təriflər siyahısı, sıralanmamış siyahı və ya cədvəllə istifadə edə bilərsiniz, bu da semantik cəhətdən düzgün olacaq:
- sənin adın
| sənin adın |
Qeyd edək ki, biz bütün sahələrə ad atributunu da təyin etdik ki, sonradan skriptlərlə onlara daxil ola bilək. ad unikal olmalıdır və tercihen id ilə eyni dəyərə ayarlanmalıdır. Brauzerlərdəki xətalardan sığortalanmaq üçün biz də açıq şəkildə boş bir dəyər təyin etdik.
Beləliklə, CSS üslubu olmadan hazırda əlimizdə olanlar:
Əlaqə formasıİndi formamız olduqca sadə və darıxdırıcı görünür, gəlin onu mürəkkəbləşdirək, əlavə sahələr əlavə edək və belə görünsün:
Forma dizaynı Gördüyünüz kimi, biz buraya etiketlərdən istifadə edərək siyahıdan seçim seçmək imkanı və istifadəçinin mesajını daxil etmək imkanı əlavə etdik. İki sütun yaratmaq üçün əlavə sarma teqlərindən istifadə edirik və indi işarələmə belə olacaq:
Əlaqə Adınız* E-poçt* Seçim 1 Seçim 2 Seçim 3 Mesaj seçin
Kod göstərir ki, e-poçt sahəsinin növü, yer tutucu və tələb olunan atributlar kimi HTML5 xüsusiyyətlərindən istifadə olunur (onlar JS-də forma təsdiqləmədən bunu etməyə imkan verir) - biz onlara bir az sonra baxacağıq. Köhnə brauzerlər üçün, sahələrdə mətn göstərişlərinin buraxılması kimi qismən zərif deqradasiyaya icazə verəcəyik (baxmayaraq ki, onlar jQuery və plaginlərdən istifadə etməklə həyata keçirilə bilər) və biz JS və PHP istifadə edərək daxil edilmiş məlumatların yoxlanışını edəcəyik. CSS3 xüsusiyyətlərinin 9-cu versiyasından aşağı IE-ni dəstəkləmək üçün biz PIE skriptini daxil edəcəyik.
HTML5 Form ValidasiyasıGəlin formamıza bəzi doğrulama əlavə edək. HTML5 ilə bunu həyata keçirmək olduqca asandır, ona görə də bu seçimi nəzərdən keçirək.
Məsələn, bir sahəni məcburi edək.
Gördüyünüz kimi, yalnız bir tələb olunan atribut əlavə edilmişdir. İndi boş sahə ilə bir forma təqdim etməyə çalışdığınız zaman bildiriş görünəcək:
Mesajın görünüşü brauzerlər arasında dəyişir və təəssüf ki, dəyişmir.
Həmçinin e-poçt giriş sahəsi üçün e-poçt növünü təyin edə bilərik:
Bu o deməkdir ki, e-poçt ünvanı bu sahədə nəzərdə tutulur və element müvafiq təsdiqi alacaq. Ekran görüntüsündə aydın şəkildə göstərilir:
Vəziyyət url, tarix və nömrə sahələri ilə oxşardır:
JS/PHP skriptləri olmadan hər şey çox asandır.
HTML5-də doğrulama defolt olaraq işləyir, lakin elementə novalidate atributunu əlavə etməklə onu deaktiv etmək olar:
...
Mətn sahəsinin forma elementlərinin tərtibinin xüsusiyyətləriWebkit mühərrikinə əsaslanan brauzerlərdə ölçüsünü dəyişə bilərsiniz, bu olduqca rahat ola bilər. Lakin çox vaxt bu xüsusiyyət dizaynı pozur, ona görə də siz ölçüsünü dəyişmədən istifadə etməlisiniz: ölçüsün dəyişməsinin qarşısını almaq üçün heç bir xüsusiyyət. Sahənin yalnız üfüqi və ya şaquli olaraq uzanmasına icazə vermək də mümkündür.
(Safari və Chrome üçün)
IE daşqın təyin edərək onu silmək üçün sürüşdürmə çubuğu əlavə edir: auto .
Chrome, Safari brauzerlərində sahənin işıqlandırılmasıChrome, Safari brauzerlərindəki sahələrə diqqət yetirərkən, onlar vurğulanmağa başlayır. Bu vurğunu silmək üçün aşağıdakı CSS kodunu yazmalısınız:
Daxiletmə, mətn sahəsi (kontur: heç biri; )
Firefox-da nöqtəli haşiyəFF, bəzi sahələrə diqqət yetirərkən, onları nöqtəli çərçivə ilə vurğulayır, bu da həmişə gözəl görünmür. Onları silmək üçün aşağıdakı üslubları yazın:
Düymə::-moz-fokus-daxili, giriş::-moz-fokus-daxili, giriş::-moz-fokus-daxili, giriş::-moz-fokus-daxili ( haşiyə: heç biri; )
Əlbəttə ki, nöqtəli çərçivənin olmamasını başqa bir ekvivalentlə əvəz etmək məqsədəuyğundur - istifadəçinin rahatlığı üçün.
IE10-da aydın mətn və ekran parol düyməsinin silinməsiIE10 standart olaraq mətn sahələri üçün aydın mətn düyməsini və parol giriş sahələri üçün parolu göstər düyməsini əlavə edir. Bu funksiyaların hər ikisi çox faydalıdır, lakin bəzən dizaynerin fikrini korlaya bilər. Xoşbəxtlikdən, onları silmək çox asandır, bu kiçik fraqment sizi bu brauzer funksiyasından xilas edəcək:
::-ms-clear (ekran: heç biri; )
Fərdi forma elementləriForma elementlərinin üslubu ayrı-ayrı məqalələrdə müzakirə olunur.
Son forma belə görünəcək
Gəlin dərhal bu formada sizin üçün mövcud olacaq bütün sahələrə baxaq.
Əlaqə forması sahələrinin strukturu- Göndərən adı
- Poçt ünvanı
- telefon
- göndərən şirkət
- göndərənin veb saytı
- məhsul (istiqamət)
- tələb olunan xidmətlərin siyahısı
- əlavə informasiya
- anti-spam / robot qorunması
- zəruri şərtlər yerinə yetirilənə qədər "göndər" düyməsini bloklamaq
- yoxlamaq və robotlardan qorunmaq üçün sadə seçici
- əlavə düymə "bütün sahələri sil"
- HTML işarələməsi (layout yaradılması)
- CSS/SCSS ilə forma sahələrinin dizaynı
- jQuery+js
- PHP işləyicisi
Beləliklə, formanın işarələnməsinə baxaq:
Zəhmət olmasa özünüzü təqdim edin: * E-poçt ünvanınızı daxil edin: * Telefon nömrənizi daxil edin: * Hansı şirkətdən olduğunuzu yazın: Veb saytınızı daxil edin: Məhsul: Xidmət seçin: Xidmət seçilməyib Service_ Service_ Service_ Service_ Service_ Service_ Add. Məlumat: Mən Robotam Mən İnsanam Ulduz işarəsi * ilə işarələnmiş aydın sahələr məcburidir.
Bütün forma sahələri CSS flexbox (Flexible Box Layout Module) ilə tərtib edilir və əlavə siniflərlə qruplara bölünür. Əlbəttə ki, öz üslublarınızı yarada bilərsiniz. Əgər siz CSS-ə sahibsinizsə, onda heç bir problem olmadan bütün forma elementləri üçün dizayn qura bilərsiniz, burada mənim köməyimə ehtiyacınız belə yoxdur.
Forma ( giriş, giriş, daxiletmə, mətn sahəsi, seçin ( ekran: blok; doldurma: 12px 15px; sətir hündürlüyü: 1.5; en: 100%; şrift ölçüsü: 16px; haşiyə: 1px bərk #ced4da; sərhəd radiusu: . 25rem; fon klipi: doldurma qutusu; fon rəngi: #fff; qutu-kölgə: 0 1px 0 0 rgba(255, 255, 255, .05), daxil 0 1px 2px 0 rgba(0, 0, 0, .05); &:fokus ( kontur: heç biri; ) ) .forma-sətir ( ekran: əyilmə; bükülmə: sarma; əsaslandırma-məzmun: aralıq boşluq; .forma-qrup:nth-child(1) ( giriş ( en: 95%; ) ) ) .col-6 (mövqe: nisbi; çevik: 0 0 50%; maksimum en: 50%; ) .pt-3 ( padding-top: 1rem; ) .forma qrupu ( alt haşiyə: 1rem; etiket ( sətir hündürlüyü: 1.7; hərf aralığı: .3px; mətni çevirmək: böyük hərf; şrift ölçüsü: 14px; şrift çəkisi: 900; ) mətn sahəsi ( min hündürlük: 110px; ölçüsünü dəyişdirmək: şaquli;)))
PHP kodunun qurulmasıİndi bütün hərəkətlər seçilmiş seçicidən - Bot / İnsandan asılılıqla başlayan forma işləyicisinə keçirik.
Orada nə var?
- başlıq("Yenilə: 5; URL=https://www.site.ru"); - bot tərəfindən formanı doldurduqdan sonra onu bildirişlə səhifəyə göndərir və 5 saniyədən sonra sahədə göstərilənə qayıdır.
- poçt, ad, telefon, ... - html sahələrinin yazışmalarının qurulması. Burada siz rəy formasında bütün müvafiq adı "" təqdim etməlisiniz. Beləliklə, xidmətlər sahəsində, html işarələməsində olduğu kimi eyni seçim sırasını göstərməlisiniz.
- $mess e-poçtda göndəriləcək mesajın əsas hissəsidir. Siz onları dəyişdirə, adlarını dəyişə və ya sadəcə ehtiyacınız olmayanları silə/şərh yaza bilərsiniz.
- $headers mesaj kodlamasını təyin edən tələb olunan sətirdir. Əgər charset=utf-8-i təsadüfən silsəniz və ya dəyişdirsəniz, bütün sözləriniz heroqliflərə çevriləcək.
- başlıq - düyməni müvəffəqiyyətlə kliklədikdən sonra ziyarətçi bildiriş səhifəsinə göndəriləcək və 5 saniyədən sonra göstərilən səhifəyə yönləndiriləcək. Yoxsa ( , xəta bildirişi alacaq.
Əvvəllər biz html forma şablonuna baxdıq, burada üç tələb olunan sahə üçün əlavə edilmiş id və funksiyaları gördük. Onların niyə əlavə edildiyini anlamaq vaxtıdır.
js koduna baxın. Bu, söndürüldükdə ziyarətçinin tələb olunan sahələr doldurulmamışdan əvvəl onu tıklamasına mane olan bir düymə blokeridir.
funksiya checkParams() ( var name = $("#name").val(); var email = $("#email").val(); var telefon = $("#telefon").val(); if (name.length != 0 && email.length >= 6 && phone.length >= 10) ( $("#submit").removeAttr("disabled"); ) else ( $("#submit"). attr("əlil", "əlil"); ) )
Tələb olunan sahələrə id daxil edirik və onları bu skriptə bağlamaq üçün düyməni deaktiv edirik. Lazımi var-sətirləri əlavə etmək/çıxarmaqla onların adlarını və nömrəsini dəyişə bilərsiniz. Lakin onları əlavə etsəniz və ya silsəniz, if (name.length != 0 && email.length >= 6 && phone.length >= 10) sətirindəki şərtləri dəyişməyi unutmayın ( .
Bu xətt necə işləyir?Hər şey göstərilən sahədə simvolların sayına bağlıdır, yəni. onun uzunluğu.
- if (name.length != 0 - sahənin boş olmaması lazım olduğunu göstərir. Oxuyur - "sahədəki simvolların sayı sıfır deyilsə, onda ..."
- && - şərtləri birləşdirir
- email.length >= 6 - simvolların sayı 6-dan çox və ya ona bərabər olmalıdır. Niyə altı? Minimum poçt ünvanı 6 simvol uzunluğunda olduğu üçün bu nömrəni daxil etdim. yoxlayaq? @bk.ru - 6 simvol.
- phone.length >= 10 - on simvoldan çox və ya ona bərabərdir. Niyə 11 yox, 10? Bu sahəni doldurarkən ziyarətçi öz telefon nömrəsini həm +7, həm də 8 ilə göstərə bilər. Ona görə də 10-u göstərmək daha yaxşıdır.
Hamısı budur. Formanı birləşdirin, sınaqdan keçirin və istifadə edin.
Hər hansı bir sualınız varsa, şərhlərdə yazın və məqalənin qiymətləndirilməsinə xəsislik etməyin. Əvvəlcədən təşəkkürlər 🙂
Beləliklə, biz düz bir dizaynla sıfırdan veb saytındakı dərslər dövrünü tamamlayırıq. Nəzərinizə çatdırım ki, saytın başlığını biz hazırlamışdıq. On - tam ekranda şəkil olan bölmə. On - portfolio əsərləri ilə qalereya. On - üç sütunlu düzən. Və son mərhələ olaraq, bu gün biz rəy formasının və altbilginin tərtibatını hazırlayırıq.
Budur, nə almalıyıq.
Bütün kodu bura daxil etməyəcəyəm, çox böyükdür. Bütün kodu və bitmiş nəticəni jsfiddle-də görə bilərsiniz.
Mənim vəzifəm layout dizaynerinin düşündüyü kimi plana baxaraq, sizə layout prinsiplərini, belə desək, məntiqi göstərməkdir. Əvvəlcə bütün planı zehni olaraq böyük hissələrə bölür. Sonra içəridəki hər bölmə kiçik bloklara bölünür. Aşağıdakı ekran görüntüsünə baxın.
Geribildirim formasının özü part_2_of_3 sinfi ilə div teqinə yerləşdirilir və valideyn eninin üçdə ikisini tutur.
Sonra div teqində part_1_of_3 sinfi ilə ikinci blok gəlir. Onun tutduğu genişlik müvafiq olaraq ana blokun üçdə birini təşkil edir.
CSS üslublarında:
con(
ekran: blok;
float:sol;
marja: 3% 0 3% 1,5%;
}
.con:birinci uşaq(
kənar-sol:0; /* bloku forma ilə sola itələyin */
}
.3-dən_2_hissə(
eni: 66%; /* forma blokunun eni */
}
.3-dən_1_hissə(
eni: 32% /* məlumatla blokun eni */
}
.cont-form(
alt doldurma: 25px /* blok formasının altından doldurma */
}
.cont-form div(
doldurma: 5px 0 15px;
}
.cont-form input, .cont-form input, .cont-form textarea(
eni: 42% /* mətn və e-poçt daxil etmək üçün sahələrin eni */
doldurma: 15px
ekran: blok;
kontur: heç biri;
fon rəngi: #fff; /* forma hüceyrələrinin rəngi */
rəng: #888282; /* formanın giriş mətninin rəngi */
şrift ölçüsü: 0.8em /* giriş forması mətninin şrift ölçüsü */
float:sol;
sağ kənar: 2em; /* sağa girinti */
şrift üslubu: kursiv; /* mətni kursivlə daxil edin */
haşiyə: 2px bərk #cacaca; /* forma hüceyrələrinin sərhəddi */
}
.cont-form girişi(
kənar-sağ: 0em; /* sağa girinti */
}
.cont-form textarea( /* forma mətn sahəsi üçün dəyərlər */
doldurma: 18px /* mətn sahəsində bütün sahələr */
ekran: blok;
eni: 93% /* mətn sahəsinin formasının eni */
hündürlük: 180px; /* mətn sahəsinin formasının hündürlüyü */
fon rəngi: #fff; /* wdtn mətn sahəsinin fonu */
kontur: heç biri;
rəng: #888282; /* mətn sahəsində daxil edilən mətnin rəngi */
şrift ölçüsü: 0.8em /* mətn sahəsinin şrift ölçüsü */
şrift üslubu: kursiv; /* forma mətn sahəsi üçün kursiv */
haşiyə:2px bərk #cacaca;
kənar-alt: 2em
}
.cont-form girişi(
font-family: Verdana, sans-serif;
şrift ölçüsü: 1em
rəng:#fff;
doldurma: 0.7em 1.4em;
sağ kənar: 2%
fon rəngi: #a97b7b;
sərhəd: heç biri;
ekran: blok;
kursor: göstərici;
kontur: heç biri;
mətni çevirmək: böyük hərf; /* böyük hərflərə çevirmək */
üzmək: sağa;
}
.comp_addp(
şrift ölçüsü: 0.8em;
rəng:#525252;
xəttin hündürlüyü: 1.8em;
marja-alt: 2%
}
.comp_add a(
şrift ölçüsü: 1.1em;
rəng:#525252;
xəttin hündürlüyü: 1.8em;
marja-alt: 2%
}
.list2 li img(
yuxarı kənar: 4px;
float:sol;
}
.list2 li .icon(
float:sol;
padding-sol: 1em
}
Zirzəminin düzülüşü ilə vəziyyət daha sadədir. Altbilgi etiketinin içərisində müəllif hüququ və keçidi olan bir div bloku var.
Bu qısa yazıda sizə şəkillərdən istifadə etmədən addım-addım gözəl təmiz CSS əlaqə forması yaratmağı göstərəcəyəm. Formada aşağıdakı məlumatlar olan sahələr olacaq: ad, e-poçt ünvanı, URL, mövzu və mesaj mətni. Brauzerlər arası uyğunluq üçün biz satıcı prefikslərindən istifadə edəcəyik, lakin kodu qısaltmaq üçün burada onlarsız tərtibatı nəzərdən keçirəcəyik. .
HTML formasının yaradılması Bizim rəy formamız belə görünəcəkBirincisi, forma haqqında bəzi izahat.
- Giriş növü = e-poçt istifadəçinin e-poçt ünvanını daxil edə biləcəyi sahəni göstərmək üçün istifadə olunur. Bu tip sahəni dəstəkləyən brauzerlər istifadəçinin etibarlı e-poçt ünvanını daxil edib-etmədiyini müəyyən edə biləcək.
- Daxiletmə növü = url, girişin etibarlı və ya etibarlı url olub olmadığını yoxlamaq üçün istifadə olunur.
- Require = tələb tələb olunan forma elementinin vəziyyətini müəyyən edir. Bu atributu dəstəkləyən brauzerlər bütün tələb olunan sahələr doldurulana qədər forma təqdimini bloklayacaqlar.
- Yer tutucu bu atribut bir işarədir ki, istifadəçi məlumatı nə və hansı formatda daxil edəcəyini bilsin. Sahəyə kliklədiyiniz zaman yer tutucu yox olur.
ad *
E-poçt ünvanı *
Veb sayt
mövzu
Mesaj*
* işarəsi olan bütün sahələr tələb olunur
Zolaqlı fon yaradınPoçt zərfinin effektini yaratmaq üçün fonu zolaqlı gradientlə doldurmaqla başlayın.
#content(mövqe:nisbi; kənar:50px avtomatik; en:400px; min hündürlük:200px; z-indeks:100; doldurma:30px; haşiyə:1px bərk #383838; fon: #D1D1D1; /* Soyulmuş fonum * / arxa plan: təkrarlanan-xətti-qradiyent(-45deg, #EFC1CB , #EFC1CB 30px, #F2F2F2 30px, #F2F2F2 40px, #C2E8F5 40px, #C2E8F5 70px,#F2F2F2F2Fpx2;-F2F2F2Fpx2, #radio 70px, #F2F2F2Fpx2;-us); qutu-kölgə:0px 1px 6px #3F3F3F; )
Təkrarlanan-xətti-qradiyent xüsusiyyəti sonsuz təkrarlanan xətti qradiyent yaratmağa imkan verir. Əvvəlcə zolaqları 45 dərəcə bucaq altında əydik, sonra zolaqları ardıcıl olaraq rənglədik və onlara piksel eni verdik. İndi gradient fonumuz var. Açıq boz fon əlavə etmək qalır. Sonra psevdo-sinifdən istifadə edək:
/** zolaqlar üzərində dayanacaq "saxta" fonum **/ #content:after( background:#F9F9F9; margin:10px; mövqe: mütləq; məzmun: " "; alt: 0; sol: 0; sağ: 0 ; yuxarı: 0; z-indeks: -1; haşiyə:1px #E5E5E5 bərk; sərhəd radiusu:8px; )
H1 başlığının yaradılmasıH1 başlığı üçün Questrial-ı, əlaqə formasının gövdəsi üçün Droid Sans-ı, ampersand üçün isə Alice-i seçdim. Bu şriftlərin hamısı Google şriftlər kataloqundadır, ona görə də mənim etməli olduğum tək şey Google API kodundan istifadə etməkdir:
İndi başlığı yaradaq.
H1 ( şrift ailəsi: "Questrial", Verdana, sans-serif; mətn düzülüşü: mərkəz; şrift ölçüsü: 40px; doldurma: 0; kənar: 0 0 20px 0; mövqe: nisbi; rəng: #8C8C8C; ) / ** gözəl ampersand var **/ h1:after ( font-size:25px; color:#D6CFCB; content: "&"; text-align:center; display:block; width:100%; font-family: " Alice", Verdana, serif; mətn kölgəsi: 0px 1px 0px #fff; ) /** alt gradient yaradın **/ h1:befor ( mövqe: mütləq; alt: 15px; məzmun: " "; mətni align: mərkəz ; displey:blok; hündürlük:2px; en:100%; fon: xətti-qradiyent(sol, rgba(255,255,255,0) 0%,rgba(182,180,180,0,7) 42%,rgba(180,178,178,0) 43%rgba /* W3C */ )
Şəkillərdən istifadə etmədən nişanlar əlavə edinBunu şrift nişanları ilə edəcəyik. Siz qoşmada olan ikon şriftindən istifadə edə bilərsiniz və ya başqalarından istifadə edə bilərsiniz, mən flaticon.com saytından ikonları paketləməyi xoşlayıram. Kontekstimizdə şriftlərdən istifadə etməyin faydaları göz qabağındadır. Biz nişanların ölçüsünü, rəngini və hətta animasiyasını idarə edə bilərik. Adi görüntülər haqqında nə demək olmaz. Bundan əlavə, biz həmişə retina displeylərində ekran keyfiyyətində qalib gəlirik.
/** ikon şriftimizi əlavə edirik !! */ @font-face ( font-family: "IconicStroke"; src: url("font/iconic_stroke-webfont.eot"); src: url("font/iconic_stroke-webfont.eot?#iefix") format(" embedded-opentype"), url("font/iconic_stroke-webfont.woff") format("woff"), url("font/iconic_stroke-webfont.ttf") format("truetype"), url("font/iconic_stroke" -webfont.svg#IconicStrokeRegular") format("svg"); font-weight: normal; font-style: normal; ) .iconic:before( font-size:25px; font-family: "IconicStroke"; ) .iconic .link:əvvəl ( məzmun: "/"; ) .iconic.quote-alt:əvvəl ( məzmun: """; ) .iconic.comment:əvvəl ( məzmun: "q"; ) .iconic.user:əvvəl ( məzmun : "u"; ) .iconic.mail-alt:əvvəl ( məzmun: "M"; )
İndi biz məlumat giriş sahələrimizi qeyri-aktiv və aktiv vəziyyətdə tərtib edə bilərik.
/** biz artıq qırmızı ulduzdan istifadə etdiyimiz üçün tələb olunan sahələr ətrafında qırmızı parıltını aradan qaldırırıq */ input:required, textarea:required ( -moz-box-shadow:none; -webkit-box-shadow:none; -o- qutu-kölgə: heç biri; qutu-kölgə: heç biri; ) /** girişlər və mətn sahəsi**/ giriş: not(), mətn sahəsi (kontur: heç biri; ekran: blok; en: 380 piksel; doldurma: 4 piksel 8 piksel; sərhəd: 1 piksel tire #DBDBDB; rəng:#3F3F3F; şrift ailəsi:"Droid Sans",Tahoma,Arial,Verdana sans-serif; şrift ölçüsü:14px; sərhəd radiusu:2px; keçid:fon 0.2s xətti, qutu-kölgə 0.6 s xətti; ) giriş:not():aktiv, mətn sahəsi:aktiv, giriş:not():fokus, mətn sahəsi:fokus(fon:#F7F7F7; sərhəd: kəsik 1px #969696; qutu-kölgə:2px 2px 7px #E8E8E8 daxil ; ) input:not()( hündürlük: 20px; ) textarea( min-height:150px; resize:vertical ) /* placeholder */ ::-webkit-input-placeholder ( color:#BABABA; font-style:italic; ) daxiletmə:-moz-yertutan, mətn sahəsi:-moz-yertutan (rəng:#BABABA; şrift üslubu: kursiv; )
"Göndər" düyməsinin və imzaların dizaynıGöndər düyməsi üçün type=submit sahəsindən istifadə edirik. Təəssüf ki, biz bu tip sahəyə stil vermək üçün :before və :after psevdo-siniflərindən istifadə edə bilmirik. Buna görə də xüsusi simvolu birbaşa HTML koduna daxil etdim. Əlbəttə ki, bu ən yaxşı həll yolu deyil, ona görə də onu sadəcə silə bilərsiniz.
/** Göndərmə düyməsinin üslubu **/ input( sol kənar: 235px; kursor: göstərici; fon: heç biri; sərhəd: heç biri; şrift ailəsi: "Alice", serif; rəng: #767676; şrift ölçüsü: 18px ; padding:10px 4px; haşiyə:1px bərk #E0E0E0; mətn kölgəsi: 0px 1px 1px #E8E8E8; fon: rgb(247.247.247); fon: xətti gradient (yuxarı, rgba(247.247.247,1) 12%2,rgba(12%2,rgba) ,1) 100%); haşiyə-radius:5px; qutu-kölgə:0px 1px 1px #FFF daxili, 0 0 0px 5px #EAEAEA; keçid:hamısı 0.2s xətti; ) giriş: hover( rəng:#686868; sərhəd- rəng: #CECECE; fon: xətti-qradiyent (üst, rgba(244,244,244,1) 0%, rgba(242,242,242,1) 100%); qutu-kölgə:0px 1px 1px #FFF daxil, 0 0 0px 5px #E0E0E0; ) giriş:aktiv, giriş:fokus(mövqe:nisbi; üst:1px; rəng:#515151; fon: xətti-qradiyent(üst, rgba(234,234,234,1) 0%, rgba(242,242,242,1) 100%); qutu -kölgə:0px -1px 1px #FFF daxil, 0 0 0px 5px #E0E0E0; )
Formanı tamamlamaq üçün fare ilə onların üzərindən keçərkən başlıqlara gözəl rənglər və keçidlər əlavə edək.
Etiket(rəng:#7F7E7E; -webkit-keçid: rəng 1s asan; -moz-keçid: rəng 1s asan; keçid: rəng 1s asan; ) etiket: hover( rəng:#191919; ) etiket: əvvəl( rəng:#C1BFBD ; keçid: rəng 1s asanlıq; ) etiket:hover:əvvəl (rəng:#969696; keçid: rəng 1s asanlıq; ) p( margin-alt:20px; ) .indication( color:#878787; font-size:12px; font -stil: kursiv; mətni hizala: sağa; padding-sağ: 10px; ) .tələb olunur (rəng:#E5224C; )
Nəticə əvəzinəÜmid edirəm ki, bu qısa yazı sizə HTML5 və CSS3-ün gücünü daha yaxşı anlamağa kömək etdi. Bir daha vurğulayıram ki, bu, sadəcə olaraq, inkişaflarınız üçün əsas kimi istifadə edə biləcəyiniz bir boşluqdur. Yazıya əlavədə rəy forması uyğunlaşdırılmışdır.
