067 607 57 84
МЕНЮ

HTML5 та CSS3 cніппети для проектування нових сайтів

Робота в якості веб-розробників часто вимагає експериментувати з новими сниппетами. Деякі з ваших експериментів будуть поганими (на жаль), а інші (якісні шматки коду) - стануть головними продуктами в процесі розробки сайтів.

В этой статье вы увидите сниппеты, которые любой веб-разработчик может использовать. Эти блоки кода включают типичные HTML5 шаблоны и еще несколько промежуточных CSS3 решения для различных макетов сайта. Вы можете хранить эти фрагменты в текстовых файлах или в разработке программного обеспечения. Но в любом случае эти блоки кода должна оказаться полезной практикой практически в любом развитии проекта.

Основна сторінка HTML5 шаблонів

Почнемо з дуже простого шаблону HTML5 веб-сторінки. Цей фрагмент коду має очевидні теги, тип документа поряд з деякими додатковими сценаріями в заголовку. У шаблоні міститься посилання на зовнішній styles.css сторінки для ваших стилів.

Також включені посилання на 2 розміщених у Google сценарії. Перший JQuery 1.8.2, потім другий HTML5shiv - це корисна бібліотека дозволяє старим версіями Internet Explorer розпізнавати нові елементи HTML5.

<!doctype html>
<html lang="en-US">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Default Page Title</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link rel="icon" href="favicon.ico">
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
 
</body>
</html>
                    
Clearfix для CSS обтікання (float)

Що таке CSS Clearfix всі дізналися кілька років тому. Більшість веб-розробників досі не особливо усвідомлюють правила роботи обтікання. А clearfix вносить деякі додаткові правила.

Ви повинні скопіювати код в будь-який документ CSS в якому ви використовуєте float в макеті. Clearfix клас потрібно додавати на будь-який контейнер елементів з внутрішнім обтіканням. Це корисно, наприклад, якщо у вас є 1 або 2 бічні панелі і вони плавають разом з вашим основним змістом.

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
 
.clearfix {
    display: inline-block;
}
 
html[xmlns] .clearfix {
    display: block;
}
 
* html .clearfix {
    height: 1%;
}
                    
CSS скидання
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
                    
CSS3 градієнти

Просто скопіюйте та вставте ці властивості в будь-який селектор CSS, який потребує градієнтного фону. Потім ви можете змінити колір значення на абсолютно будь-який, в тому числі RGBA. Internet Explorer має багато власних настройки для створення градієнтів всередині браузера. Але так як багато хто з них не підтримуються в інших місцях ви можете видалити їх з робочого коду:

background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);
                    
HTML5 теги Мета

Структура HTML буде будуватися з мета тегом viewport для управління шаблоном на мобільних пристроях.
Зазвичай оптимізовані для мобільних додатків сайти містять такі команди:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
                    
HTML5 мультимедіа

Нові теги video і audio значно полегшують створення сайтів для розробників, які часто працюють з цифровими медіа. Зображення завжди підтримувалися на веб-сайті, а аудіо і відео файли боролися за гідну підтримку довгий час. До недавнього часу було дуже мало типів файлів, які можуть транслювати відео на всіх основних операційних системах.

<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none">
  <source src="media/video.mp4" type="video/mp4"></source>
  <source src="media/video.webm" type="video/webm"></source>
  <source src="media/video.ogg" type="video/ogg"></source>
</video>
 
<audio controls="controls" preload="none">
  <source src="music.ogg" type="audio/ogg">
  <source src="music.mp3" type="audio/mpeg">
</audio>