Започнете с 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.

Кодираща проба

#fire 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;
-моз-граничен радиус: 10px;
-webkit-border-radius: 10px;
ширина: 500px;
}

Забележка: Moz означава Mozilla, а webkit е за Safari и Chrome.

Друг страхотен пример: http://fjd1.com/roundcorner.html

4. Мащабируема векторна графика (SVG) в HTML5

HTML 5 уроци, ръководство и мостри

Мащабируема векторна графика или обикновено известна като (SVG) е двуизмерна векторна графика, която е определена в 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/en/tutorials/video/basics/

6. Слайд презентация в HTML5

HTML 5 уроци, ръководство и мостри

Powerpoint е асоциирано име на синоним с представяне на слайд. Но защо се ограничавате с офлайн презентация, където можете да създавате слайдове, предназначени за уеб аудитория? HTML5 дойде на помощ при създаването на много мощни презентационни слайдове, допълнени с преход и навигационно меню. Най-добрата част е, че дори можете да приложите 3D трансформация към вашата презентация.

Примерен код

пред {
преход: всички 1s леко вход;
}

предварително: задръжте {
цвят на фона: # F2F5FE;
цвят на рамката: черен;
}

div {
трансформация: rotate3d (1,1,0, 45deg);
}

Други страхотни примери:

7. Редактируемо съдържание в HTML5

HTML 5 уроци, ръководство и мостри

Статичният текст е толкова стара школа в епохата, в която гъвкавостта и динамичността управляват света. В HTML5 можете да определите текстова област, направена го редактирана от уеб потребителя без текстов редактор.

Примерен код

Това съдържание може да се редактира!

Друг страхотен пример: http://html5demos.com/contenteditable

8. Интерактивно уеб платно в HTML5

HTML 5 уроци, ръководство и мостри

Освен SVG в HTML5, платното е следващото най-добро нещо, което някога се е случвало в мрежата. Canvas позволява изобразяване на 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/en/tutorials/dnd/basics/

10. Чиста CSS диаграма на данни в HTML5

HTML 5 уроци, ръководство и мостри

Преди HTML5 също е невъзможно да се създаде презентабелна диаграма, като се използва само кодиране в HTML. Освен това, промяната на стойността на данните и отразяването им в диаграмата не е проста задача. Отново HTML5 за помощ. Заедно с CSS можете да създадете абсолютно красива диаграма, която накара Microsoft Excel да се срамува. Кодовете са прости и всичко, което трябва да направите, е да отделите време, за да персонализирате перфектния цвят и ефект за вашата диаграма.

Друг страхотен пример: http://cssglobe.com/pure-css-data-chart/

Не може да получи достатъчно HTML 5?

Както и ние! Ето още по темата, отидете да ги проверите.

* 30 много готини примера на уебсайтове с HTML 5
* Първи стъпки с HTML 5
* Трябва да прочетете HTML 5 уроци през 2012 г.
* Научете HTML 5: 10 Трябва да прочетете уроци

Също така, проверете  този курс за крах на HTML 5 от Робин Никсън. Робин Никсън е автор на Learning 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