Սկսել HTML5 / CSS3- ի հետ կապված խորհուրդներ, ցուցափեղկեր և կոդավորման նմուշներ

HTML5- ն ավելի մեծ ժողովրդականություն է վայելում և սկսում էվոլյուցիոնացնել ամբողջ վեբ ինտերֆեյսը: Նույնիսկ որոշ վեբ մշակողներ ասում էին, որ HTM5 տարրերն ու տեսողական էֆեկտները համեմատելի են Flash- ի հետ: Սկրիպտինգի նոր ոճը շատ հեշտ է հասկանալ, և վեբ ինտերֆեյսի բարելավման հնարավորությունները անսահման են: Այսպիսով, որքանո՞վ է հետաքրքիր այս HTML5- ը?


Այս հոդվածը նպատակ ունի ընթերցողներին պատկերացում կազմել այն մասին, թե ինչ պետք է իմանաք HTML5- ի և ամենակարևորը որոշ խորհուրդների մասին & թեթև, գրավիչ և ինտերակտիվ HTML5 էջեր ստեղծելու հնարքներ.

1. Հիմնական HTML5- ում

HTML5

Նախքան HTML5- ում այս թեմայի հետագա մեկնարկը սկսելը, լավ կլինի նախ ստուգել ձեր ընթացիկ զննարկիչը: Քանի որ զննարկիչներից շատերը դեռ գտնվում են զարգացման ռեժիմում (HTML5- ը տեղավորելու համար բարելավում), այստեղ նշված որոշ առանձնահատկություններ կարող են աջակցություն չթողնել.

Ահա ձեր խորհուրդները ստուգելու արագ խորհուրդներ զննարկչի համատեղելիություն.

Որոշ զննարկչի սահմանափակումները հետագա հասկանալու համար կարող եք դիմել այստեղ.

2. Տեքստի էֆեկտներ. HTML5- ում ստվերի ավելացում և տեքստի էֆեկտ

Տեքստի էֆեկտները HTML5- ում

Հիմնական ստվերային ազդեցությունը տեքստի վրա

Սա ամենապարզ մեկ լարային ծածկագիրն է, որը վերափոխում է ձեր սովորական վերնագիրը զով տեքստի: Երբեք մի թերագնահատեք ստվերի ազդեցությունը: Նմանատիպ նման էֆեկտ ստեղծելու համար վեբ դիզայներից պահանջվում է անցնել Photoshop- ում պատկերի խմբագրման բազմաթիվ քայլեր: Եվ հիմա այն, ինչ անհրաժեշտ է, ընդամենը մեկ տող կոդ է: Ստվերի հեռավորությունը, գույնը կարող են փոխվել ձեր սրտի պարունակության մեջ.

Կոդավորման նմուշ

#shadow h1
տեքստային ստվեր ՝ 0px 1px 1px rgba (0,0,0, .2);
}

Տեքստը նախապես կրակի նման ազդեցության մասին

Հաջորդ խորհուրդը ցույց է տալիս ձեզ այն մասին, թե ինչպես HTML5 կոդավորումը կարելի է ավելի սառը տեսք ունեցող տեքստի մեջ դնել: Եթե ​​բավականաչափ փորձեր եք կատարում կամ այլ օրինակներ եք գտնում, էֆեկտները հարմարեցնելու հնարավորություններն անվերջ են: Նշում. Այս օրինակը չի ստեղծվում պատկերի խմբագրման որևէ ծրագրի կողմից: Պարզապես պարզ կոդեր HTML5- ում.

Կոդավորման նմուշ

# կրակ h1 {
տեքստային դասավորված. կենտրոն;
մարժա `200px ավտոմատ;
տառատեսակ-ընտանիք. "Լիգա-գոթիկական", Սուրհանդակ;
տառաչափը `200px; տեքստի վերափոխում. մեծատառ;
գույնը ՝ #fff;
տեքստային ստվեր ՝ 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10p 80px # 451b0e;
}

Այլ հիանալի օրինակ. http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Կլորացված անկյուն HTML5- ում

Կլորացված անկյուն HTML5- ում

Վեբ կայքի դասավորությունը HTML5- ում ոճավորելը երբեք այդքան էլ հեշտ չի եղել CSS- ի ներդրումից ի վեր: Եվ հիմա կարող եք նույնիսկ ձեր դասավորության տարրերի կլորացված անկյուններ ունենալ: Պատկերացրեք սա; այլևս կտրտել ֆոնի պատկերը, այլևս ոչ մի խառնաշփոթ նկարի հատվածներ: Սա շատ ուրախություն կբերի վեբ դիզայներներին այնտեղ.

Կոդավորման նմուշ

div {
սահման ՝ 2px պինդ # 434343;
լիցք `10px;
ֆոն ՝ # e3e3e3;
-մոզ-սահման-շառավղ `10 հատ
-վեբկիթ-սահման-շառավղ ՝ 10 հատ
լայնությունը `500px;
}

Նշում. Moz- ը նշանակում է Mozilla, իսկ վեբկայքը նախատեսված է Safari- ի և Chrome- ի համար.

Այլ հիանալի օրինակ. http://fjd1.com/roundcorner.html

4. Փոփոխական վեկտորի գրաֆիկական (SVG) HTML5

HTML 5 ձեռնարկներ, ուղեցույց և նմուշներ

Scalable վեկտոր Graphic կամ սովորաբար հայտնի է որպես (SVG) 2-չափաչափ վեկտորային գրաֆիկա, որը սահմանվում է XML տեքստային ֆայլերում: Այլ կերպ ասած, քանի որ նրանց ԴՆԹ-ն հիմնված է XML տեքստային ֆայլի վրա, դրանք կարող են ստեղծվել կամ խմբագրվել վեբ-հարթակում: Դա նույնպես նշանակում է, որ կարող է հեշտությամբ լինել մասշտաբներ, և որոնիչները ի վիճակի են կարդալ և հասկանալ պատկերը.

Նմուշի կոդ

Այլ հիանալի օրինակներ.

5. Կինոյի ֆայլը HTML5- ում տեղադրելը

Տեսանյութ HTML5- ում

Ահա HTML5- ի հնարավորությունները ցուցադրելու ևս մեկ հետաքրքիր մաս: Տեսանյութերից շատերը սովորաբար ներկայացվում են վեբ-վեբին Flash- ի տեսքով: Մինչև վերջերս HTML5- ում տեսանյութը ներկառուցելը դանդաղորեն թափ է հավաքում (YouTube- ը լավ օրինակ է) և Flash- ը դանդաղորեն կորցնում է իր գրավչությունը: Ինչու է այդպես: Բջջային օգտագործողներ: Եթե ​​ցանկանում եք, որ ձեր տեսանյութը կարողանա խաղալ ինչպես iPhone- ի, այնպես էլ Android հեռախոսների մեջ, HTML5- ը առաջ շարժվելու ձևն է.

Տեսանյութը տեղադրելու համար ձեզ հարկավոր է իմանալ ներկայումս 3 ձևաչափեր, որոնք տարբեր բրաուզերների կողմից են օժանդակվում; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Նմուշի կոդ

Այլ հիանալի օրինակ. https://www.html5rocks.com/am/tutorials/video/basics/

6. Սլայդ ներկայացում HTML5- ում

HTML 5 ձեռնարկներ, ուղեցույց և նմուշներ

Powerpoint- ը սլայդերի ներկայացման հոմանիշի գործընկերն է: Բայց ինչու՞ սահմանափակվել ինքնակառավարման ներկայացմամբ, որտեղ կարող եք ստեղծել սլայդներ, որոնք նախատեսված են վեբ լսարանի համար: HTML5- ը օգնության է հասել ներկայացնելու շատ հզոր ներկայացման սլայդներ ՝ ամբողջական անցումային և նավիգացիոն ընտրացանկով: Լավագույն մասն այն է, որ դուք նույնիսկ կարող եք կիրառել 3D ձևափոխում ձեր ներկայացման վրա.

Նմուշի կոդ

Նախընտրական {
անցում. բոլոր 1-ների դյուրինությունը;
}

նախ. hover {
ֆոնային գույնը ՝ # F2F5FE;
սահմանային գույնը ՝ սև;
}

div {
վերափոխել. պտտել 3d (1,1,0, 45deg);
}

Այլ հիանալի օրինակներ.

7. Խմբագրելի բովանդակություն HTML5- ում

HTML 5 ձեռնարկներ, ուղեցույց և նմուշներ

Ստատիկ տեքստն այնքան հին դպրոց է այն դարաշրջանում, որտեղ ճկունությունն ու դինամիկան տիրում են աշխարհին: HTML5- ում դուք կարող եք սահմանել վեբ օգտագործողի կողմից այն խմբագրվող տեքստային տարածք `առանց տեքստի խմբագրչի.

Նմուշի կոդ

Այս բովանդակությունը խմբագրվում է!

Այլ հիանալի օրինակ. http://html5demos.com/contentiable

8. Ինտերակտիվ վեբ կտավ HTML5- ում

HTML 5 ձեռնարկներ, ուղեցույց և նմուշներ

Բացի SVG- ից HTML5- ում, կտավը հաջորդ լավագույն բանը, որ երբևէ պատահել է համացանցում: Կտավը թույլ է տալիս մատուցել 2 չափսի ձևեր, որոնք փոխազդեցություն են բերում մի ամբողջ մակարդակի ՝ առանց Flash- ի օգնության.

Այնուամենայնիվ, այստեղ HTML5- ի պարզ կոդավորումը, որը ստեղծում է զարմանալի անիմացիոն փոխազդեցություն, արժե նշել այստեղ.

Այլ հիանալի օրինակ. http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Քաշեք և թողեք HTML5- ում

HTML 5 ձեռնարկներ, ուղեցույց և նմուշներ

Քաշել և թողնել (երբեմն հայտնի է որպես DnD) ևս մեկ հիանալի առանձնահատկություն է, որը հասանելի է HTML5- ին: Հիանալի օրինակ կլինի Google- ի կողմից իրենց Gmail- ի իրականացումը: Եթե ​​դուք օգտագործում եք HTML5 օժանդակ բրաուզերներից որևէ մեկը, ապա կարող եք պարզապես ֆայլ քաշել ձեր համակարգչից և գցել կազմելու հաղորդագրության պատուհանի վրա: Այն ինքնաբերաբար կավելացվի որպես հավելված: Որքան զվարճալի է դա?

Նմուշի կոդ (հայրենի DnD)

document.addEventListener (‘dragstart’, գործառույթ (իրադարձություն))
event.dataTransfer.setData (‘տեքստ’, ‘հարմարեցված տեքստ’);
event.dataTransfer.effectAllowed = ‘պատճեն’;
}, կեղծ);

Այլ հիանալի օրինակ. http://www.html5rocks.com/am/tutorials/dnd/basics/

10. Մաքուր CSS տվյալների աղյուսակ HTML5- ում

HTML 5 ձեռնարկներ, ուղեցույց և նմուշներ

HTML5- ից առաջ նաև անհնար է ներկայանալի գծապատկեր ստեղծել, պարզապես HTML- ում կոդավորումը օգտագործելով: Ավելին, տվյալների արժեքը փոխելը և գծապատկերում արտացոլելը պարզ խնդիր չէ: Կրկին ՝ HTML5 դեպի փրկարար: CSS- ի հետ միասին կարող եք ստեղծել բացարձակապես գեղեցիկ գծապատկեր, որը Microsoft Excel- ին ամոթ է առաջացնում: Կոդերը շատ պարզ են, և այն ամենը, ինչ դուք պետք է անեք, ձեր ժամանակացույցի համար կատարյալ գույնն ու էֆեկտը հարմարեցնելու համար ժամանակ է ծախսում.

Այլ հիանալի օրինակ. http://cssglobe.com/pure-css-data-chart/

Չի կարող բավարարվել HTML 5-ով?

Մենք էլ ենք այդպես: Ահա թեման ավելի շատ ՝ գնացեք դրանք ստուգեք.

* HTML 5 կայքերի 30 շատ հոյակապ օրինակ
* Սկսել HTML 5-ը
* Պետք է կարդալ HTML 5 ձեռնարկը 2012 թվականին
* Իմացեք HTML 5: 10-ը պետք է կարդալ դասերը

Նաև ստուգեք  այս HTML 5 վթարի դասընթացը ՝ Ռոբին Նիքսոնի. Ռոբին Նիքսոնը PHP- ի, MySQL- ի և JavaScript- ի ուսուցման հեղինակն է. դասընթացը ներառում է գրեթե ամեն ինչ, որը պետք է իմանա նորեկը HTML5- ում `ներառյալ HTML- ի հիմնական կոդավորումը, նկարչության, տեղաբաշխման, տեղական պահեստավորման, ինչպես նաև HTML5 աուդիո և վիդեո նկարագրությունը HTML5 հիմնական կտավը:.

Բնօրինակ հոդվածն առաջին անգամ հրապարակվում է WHSR բլոգ; այն այժմ կառավարվում և թարմացվում է BuildThis.io- ի աշխատակազմի կողմից.

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