HTML5 / CSS3 ilə başlayın: göstərişlər, vitrinlər və kodlaşdırma nümunələri

HTML5 daha çox populyarlıq qazanır və bütün veb interfeysi təkamül etməyə başlayır. Hətta bəzi veb tərtibatçılar HTM5 elementləri və vizual effektlərin Flash ilə müqayisə olunacağını söylədilər. Yeni ssenari tərzini başa düşmək asandır və veb interfeysini inkişaf etdirmək imkanları hədsizdir. Beləliklə, bu HTML5 nə qədər maraqlıdır?


Bu məqalə oxuculara HTML5 və ən başlıcası bəzi tövsiyələr haqqında nə bilməli olduğunuz barədə məlumat vermək məqsədi daşıyır & yüngül, cəlbedici və interaktiv HTML5 səhifələrini yaratmaq üçün tövsiyələr.

1. HTML5 əsas

HTML5

HTML5-də bu mövzunun hər hansı bir başlamasına başlamazdan əvvəl əvvəlcə cari brauzerinizi yoxlamaq yaxşı olar. Bir çox brauzer hələ də inkişaf rejimindədir (HTML5-in yerləşməsi üçün inkişaf), burada qeyd olunan bəzi xüsusiyyətlər dəstəklənə bilməz.

Budur sizi yoxlamaq üçün qısa məsləhətlər brauzer uyğunluğu.

Müəyyən bir brauzerin məhdudiyyətini daha da başa düşmək üçün müraciət edə bilərsiniz burada.

2. Mətn effektləri – HTML5-də kölgə və əvvəlcədən mətn effekti əlavə olunur

HTML5-də mətn effektləri

Mətnə əsas kölgə effekti

Bu adi başlıqlarını sərin görünüşlü mətnə ​​çevirən ən sadə bir simli koddur. Kölgə effektini əsla qiymətləndirməyin. Bu oxşar görünüş effekti yaratmaq üçün veb dizaynerdən Photoshop-da görüntü düzəltmənin bir neçə addımından keçməsini tələb edir. İndi lazım olanların hamısı yalnız bir kod xəttidir. Kölgə məsafəsi, rəng ürəyin məzmununa dəyişdirilə bilər.

Kodlaşdırma nümunəsi

# kölgə h1 {
mətn kölgəsi: 0px 1px 1px rgba (0,0,0, .2);
}

Əvvəlcədən atəşə bənzər effektə dair mətn

Növbəti göstəriş, HTML5 kodlaşdırmasının daha da sərin görünən bir mətnə ​​necə çap oluna biləcəyini göstərməkdir. Kifayət qədər təcrübə etsəniz və ya başqa nümunələr taparsanız, effektləri fərdiləşdirmək imkanları sonsuzdur. Qeyd: bu nümunə heç bir şəkil düzəltmə proqramı tərəfindən yaradılmamışdır. HTML5-də düz kodlar.

Kodlaşdırma nümunəsi

#fire h1 {
mətn align: center;
marjası: 200px avtomatik;
şrift ailəsi: "Liqa-Qotik", Kuryer;
şrift ölçüsü: 200px; mətn çevirmək: böyük;
rəng: #fff;
mətn kölgəsi: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716x, 10x 80px # 451b0e;
}

Digər böyük nümunə: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. HTML5-də yuvarlaq künc

HTML5-də yuvarlaq künc

Veb səhifənin düzenlendirilməsini HTML5-də tərtib etmək, CSS-in tətbiqindən bəri bu qədər asan olmamışdır. İndi hətta nizam elementlərinizin yuvarlaq künclərinə sahib ola bilərsiniz! Təsəvvür edin; artıq dilim kəsici fon şəkli, daha qarışıq şəkil parçaları yoxdur. Bu, orada olan veb dizaynerlərə bir çox sevinc gətirəcəkdir.

Kodlaşdırma nümunəsi

div {
haşiyə: 2px bərk # 434343;
padding: 10px;
fon: # e3e3e3;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
eni: 500px;
}

Qeyd: Moz Mozilla deməkdir, vebkit Safari və Chrome üçündür.

Digər böyük nümunə: http://fjd1.com/roundcorner.html

4. HTML5-də ölçülən Vektor Qrafiki (SVG)

HTML 5 dərs vəsaiti, bələdçi və nümunələr

Ölçülən Vektor Qrafik və ya ümumiyyətlə (SVG) kimi tanınan, XML mətn sənədlərində təyin olunan 2 Ölçü vektor qrafikasıdır. Başqa sözlə, DNT-ləri XML mətn faylı əsasında qurulduğundan, veb platformada yaradıla və ya düzəldilə bilər. Həm də o deməkdir ki, asanlıqla miqyas ola bilər və axtarış motorları görüntünü oxuya və başa düşə bilər.

Nümunə kodu

Digər böyük nümunələr:

5. Film faylını HTML5-də yerləşdirmək

HTML5-də video

Budur, HTML5-in imkanlarını nümayiş etdirmək üçün başqa bir maraqlı hissə. İnternetdəki bir çox video, ümumiyyətlə, Flash şəklində webuser-ə təqdim olunur. Son vaxtlara qədər videonu HTML5-də yerləşdirmək yavaş-yavaş sürət qazanır (YouTube yaxşı nümunədir) və Flash yavaş-yavaş cəlbediciliyini itirir. Niyə belədir? Mobil istifadəçilər. Videonunuzun həm iPhone, həm də Android telefonlarında oynamağını istəyirsinizsə, HTML5 irəliləməyin bir yoldur.

Videonu yerləşdirmək üçün hazırda fərqli brauzerlər tərəfindən dəstəklənən 3 formatın olduğunu bilməlisiniz; .mp4 (H.264 + AAC), .ogg (Teora + Vorbis), .web (VP8 + Vorbis)

Nümunə kodu

Digər böyük nümunə: https://www.html5rocks.com/az/tutorials/video/basics/

6. HTML5-də slayd təqdimatı

HTML 5 dərs vəsaiti, bələdçi və nümunələr

Powerpoint, slayd təqdimatı ilə sinonim bir ad əlaqələndiricisi olmuşdur. Bəs veb auditoriyası üçün nəzərdə tutulmuş slaydlar yarada biləcəyiniz bir oflayn təqdimatla niyə özünüzü məhdudlaşdırırsınız? HTML5 keçid və naviqasiya menyusu ilə tamamlanan çox güclü təqdimat slaydları yaratmaqda xilasetmə işinə başladı. Ən yaxşı tərəfi, təqdimatınıza hətta 3D çevirmə tətbiq edə bilərsiniz.

Nümunə kodu

pre {
keçid: hamısı 1s rahatlıq;
}

pre: hover {
background-color: # F2F5FE;
haşiyə rəng: qara;
}

div {
çevirmək: dönmə3d (1,1,0, 45deg);
}

Digər böyük nümunələr:

7. HTML5-də redaktə edilə bilən məzmun

HTML 5 dərs vəsaiti, bələdçi və nümunələr

Statik mətn elastikliyin və dinamikanın idarə olunduğu əsrdə köhnə məktəbdir. HTML5-də, mətn redaktoru olmadan veb istifadəçisi tərəfindən düzəliş edilə bilən bir mətn sahəsini təyin edə bilərsiniz.

Nümunə kodu

Bu məzmun düzəliş edilə bilər!

Digər böyük nümunə: http://html5demos.com/contentable

8. HTML5 interaktiv veb kətan

HTML 5 dərs vəsaiti, bələdçi və nümunələr

HTML5-də SVG-dən başqa, kətan internetdə baş verən ən yaxşı şeydir. Kətan, Flash köməyi olmadan interaktivliyi bütöv bir səviyyəyə gətirən 2 ölçülü forma göstərməyə imkan verir.

Buna baxmayaraq, HTML5-də heyrətamiz animasiya qarşılıqlı təsirini yaradan sadə kodlaşdırma burada qeyd edilməyə dəyər.

Digər böyük nümunə: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. HTML5-də sürün və atın

HTML 5 dərs vəsaiti, bələdçi və nümunələr

Çək və buraxın (bəzən DnD kimi tanınır) HTML5-də mövcud olan başqa bir gözəl xüsusiyyətdir. Böyük bir nümunə, Google tərəfindən Gmail-də tətbiq oluna bilər. HTML5 dəstəklənən brauzerlərdən birini istifadə edirsinizsə, sadəcə bir kompüterinizdən bir fayl sürükleyebilirsiniz mesaj pəncərəsinə. Avtomatik olaraq əlavə olaraq əlavə olunacaq. Nə qədər sərin?

Nümunə kodu (doğma DnD)

sənəd.addEventListener (‘dragstart’, funksiya (hadisə) {
event.dataTransfer.setData (‘mətn’, ‘Xüsusi mətn’);
event.dataTransfer.effectAllowed = ‘kopiya’;
}, yalan);

Digər böyük nümunə: http://www.html5rocks.com/az/tutorials/dnd/basics/

10. HTML5-də Saf CSS Məlumat Cədvəli

HTML 5 dərs vəsaiti, bələdçi və nümunələr

HTML5-dən əvvəl, yalnız HTML-də kodlaşdırmadan istifadə etməklə təqdim olunan bir qrafik yaratmaq da mümkün deyil. Bundan əlavə, məlumatların dəyərini dəyişdirmək və cədvəldə əks etdirmək heç də sadə bir iş deyil. Yenə qurtarmağa HTML5. CSS ilə birlikdə Microsoft Excel-i utandıracaq tamamilə gözəl bir şəkil yarada bilərsiniz. Kodlar sadədir və nə etmək lazımdırsa, qrafikiniz üçün mükəmməl rəng və effekt hazırlamaq üçün vaxt sərf etməkdir.

Digər böyük nümunə: http://cssglobe.com/pure-css-data-chart/

HTML 5 kifayət etmir?

Elə də edirik! Bu mövzuda daha çox, onları yoxlayın gedin.

* HTML 5 veb saytının 30 çox sərin nümunəsi
* HTML 5 ilə başlayın
* 2012-ci ildə HTML 5 təlimini oxumalıdır
* HTML 5: 10 dərslərini oxumalısınız

Həm də yoxlayın  bu HTML 5 qəza kursu Robin Nixon. Robin Nikson, öyrənmək PHP, MySQL və JavaScript müəllifidir; kurs HTML5-də bilmək lazım olan hər şeyi əhatə edir – əsas HTML kodlaşdırma, rəsm üçün HTML5 kətan, geolokasiya, yerli saxlama, habelə HTML5 səs və video..

Orijinal məqalə ilk dəfə yayımlanır WHSR Blog; indi BuildThis.io heyəti tərəfindən idarə olunur və yenilənir.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map