Результати пошуку за запитом: html
Посібник новачка з HTML5 & CSS3 – об'ємні форми в HTML5
Автор: Редакция ITVDN
Введение
К сожалению, от бумажных форм не скрыться даже сегодня. Разумеется, когда появились web-формы, распространение бумажных сбавило свой былой темп. В наше время, когда нужно зарегистрироваться в системе, необходимо просто посетить соответствующий веб-сайт и заполнить веб-форму через браузер. У такой веб-формы будет кнопка в нижней части экрана, для сиюминутной передачи информации нужно всего лишь щелкнуть по ней. Веб-форма – это в первую очередь удобный и быстрый способ передать серверу информацию пользователя для обработки. Веб-формы прежде всего были придуманы, чтобы избавиться от неудобств предшественников – бумажных форм. А также для простоты обмена информациtq в социальных сетях и для удобств электронной коммерции: например, легко можно осуществлять электронную оплату.
Нет сомнений, на сегодняшний день веб-формы – необходимая часть любого веб-сайта. По существу, данная форма – это HTML-документ, состоящий из различных элементов и атрибутов. Теперь рассмотрим создание HTML5 форм.
Прочитав эту статью, Вы научитесь создавать объёмную форму с помощью HTML5.
Основы создания формы
index.html – HTML-файл (показанный ниже). В него Вы добавите HTML-код, чтобы создать форму. Читая эту статью, Вы будете добавлять код между закомментированными тегами start и end.
<!DOCTYPE html>
<html>
<head>
<title>Formidable Form with HTML5title>
head>
<body>
<div class="container">
<header>
<h1>Formidable Form with HTML5h1>
header>
<div class="form">
div>
div>
body>
html>
Приступайте к работе с HTML формой
HTML форма – основа многих веб-форм, известных на сегодняшний день. Она может содержать следующие элементы ввода данных:
1. Текстовые поля, поля пароля, checkbox, radio buttons и кнопки submit.
2. Текстовая область и выпадающие списки.
Они вместе предоставляют средства управления UI, чтобы ввести и отправить информацию на сервер. Кроме того, форма может содержать элементы fieldset, legend и label.
В любом текстовом редакторе откройте файл index.html и добавьте HTML-код, между тегами и . Как только это сделаете, сохраните файл и откройте его в браузере – и увидите результат.
Как продемонстрировано, код для формы мы включаем между тегами и .
имеет три атрибута:
Id. Содержит значения – к примеру, particularsform – используемые для ссылки на HTML-элемент в JavaScript и CSS.
Action. Содержит URL веб-страницы – данные формы будут отправлены на него после ввода.
Method. Присваивает значение «get» в данном примере. Метод get передаст данные формы на страницу получения, добавляя их в виде пар имя-значение в URL-страницы. В данном атрибуте иногда ещё используется метод post.
Тег – самый важный в элемент HTML-форме. Он определяет поле ввода в теге.
<input type="submit"> определяет кнопку отправки. Когда пользователь нажимает эту кнопку, она отправляет данные формы в файл, определенный в атрибуте «action». Добавьте выделенный код в index.html. Это выведет на экран кнопку отправки с заголовком «Sign up». Заголовок «Sign up» присвоен через значение атрибута.
Введите любые значения в текстовые поля имени и адреса электронной почты соответственно, щелкните по кнопке «Sign up» и наблюдайте.
Значения, введенные в соответствующие текстовые поля вместе с их соответствующими именами, были бы отправлены в acknowledge.html, значение атрибута action тега
. В данном примере acknowledge.html просто выведет в браузере на экран данные, полученные от index.html.
Обратите внимание на строку поиска. Вы видете, что имя, электронная почта, и кнопка отправки были добавлены к URL acknowledge.html как пары значение-имя таким образом:
Это то, как данные передаются к странице получения, когда в теге определяется значение get.
maxlength
Вы можете добавить атрибут maxlength к элементу , чтобы ограничить вводимое пользователем количество символов.
<input maxlength="10">
Тег <input type="password"> определяет поле пароля. Это текстовое поле, символы в котором замаскированы в форме звездочек или кругов.
Добавьте выделенный код в index.html. Это создаст два поля пароля. Когда Вы введете текст в эти поля, Вы увидите, что каждый символ был превращен или в звездочку, или в круг.
Тег <input type="radio"> – тег-переключатель. Переключателей обычно как минимум два и они находятся в группах, используют одинаковое значение для их атрибутов name, но различное значение для их атрибутов value. Пользователь может выбрать только один из них в группе.
Добавьте выделенный код в index.html. Это создаст два переключателя для выбора пола. Эти переключатели используют одинаковое название "Gender", который идентифицирует их как группу, и только один пол может быть выбран в этой группе. Если Вы измените одно из названий на другое значение, Вы нарушите это правило, и обе кнопки могут быть выбраны одновременно. Но, конечно, это не имеет никакого смысла для выбора пола.
and
Тег
используется, чтобы сгруппировать связанные элементы в форме, создавая рамки вокруг них. Тег используется, чтобы определить заголовок для этой рамки.
Давайте изменим код выделенной области. Это образует рамки вокруг этих 2 переключателей для выбора пола с заголовком "Gender".
Тег <input type="checkbox"> создает область с флажком, чтобы пользователь мог выбрать или отменять опцию. Как в случае с переключателями, флажки обычно находятся в группах. Но в отличие от переключателей, пользователь может выбрать больше, чем одну строку с флажком.
Добавьте выделенный код в index.html. Это создаст шесть переключателей для выбора хобби. Эти переключатели используют одинаковое название "hobbies", идентифицирующее их как группу.
Тег <input type="file"> определяет кнопку загрузки для пользователей, чтобы выбрать и загрузить файл.
Добавьте выделенный код в index.html. Это создаст кнопку загрузки, где пользователь может щелкнуть, чтобы выбрать файл и загрузить его.
Таким образом можно без проблем создать свою форму с помощью HTML5.
Источник: http://www.codeproject.com/Articles/761123/Beginners-Guide-to-HTML-CSS-Formidable-Forms-with
Властивість CSS: z-index
Автор: Редакция ITVDN
Введение
В данной статье с помощью некоторых примеров мы научим Вас использовать свойство CSS: Z-index.
Z-index используется для стабилизации порядка элементов, которые перекрываются.
Z-Index является важным свойством CSS. Оно указывает на уровень элемента в стеке. Свойство z-index регулирует вертикальный порядок перекрытия элементов, а сам z-index определяет, какой элемент будет располагаться выше остальных.
Элемент с большим указателем порядка стека всегда будет располагаться выше элемента более низкого порядка. А элемент с самым большим индексом перекроет остальные элементы. «Порядок стека» обращается к позиции элемента по оси Z. Чем выше значение z-индекса, тем ближе элемент будет располагаться к верхней части порядка наложения.
Синтаксис Z-index
z-index: auto| number | initial | inherit;
Z-index: auto
Это настройка по умолчанию, что приписывает одинаковое значение и элементу, и родителю. Если значение не определено для родителя, то оно равняется нулю (0);
Z-index: integer number
Z-index: 1
Z-index: 2
Z-index: 3
Z-index: negative number
Z-index: -1
Z-index: inherit
Принимает такое же определенное значение, как свойство элемента родителя.
Ниже предоставлен HTML код, который будем использовать.
<!DOCTYPE html>
<html>
<head>
<title>Z-Index tutorialtitle>
head>
<body>
<div id="one">Onediv>
<div id="two">Twodiv>
<div id="Three">Threediv>
<div id="Four">Fourdiv>
<div id="Five">Fivediv>
body>
html>
Далее мы используем CSS код для установки внешнего вида всем элементам HTML, что использовались ранее.
#one {
border: solid 5 px silver;
background-color: Aqua;
position: absolute;
z-index: 1;
opacity: 0.5;
height: 100 px;
width: 100 px;
}
#two {
border: solid 5 px silver;
background-color: Green Yellow;
position: absolute;
top: 30 px;
left: 35 px;
z-index: 2;
opacity: 0.5;
height: 100 px;
width: 100 px;
}
#Three {
border: solid 5 px silver;
background-color: Coral;
position: absolute;
top: 60 px;
left: 60 px;
opacity: 0.5;
z-index: 3;
height: 100 px;
width: 100 px;
}
#Four {
border: solid 5 px silver;
background-color: Yellow;
position: absolute;
top: 90 px;
left: 90 px;
opacity: 0.5;
z-index: 4;
height: 100 px;
width: 100 px;
}
#Five {
border: solid 5 px silver;
background-color: MediumSpringGreen;
position: absolute;
top: 120 px;
left: 120 px;
opacity: 0.5;
z-index: 5;
height: 100 px;
width: 100 px;
}
Полный код
<!DOCTYPE html>
<html>
<head>
<title>Z-Index tutorialtitle>
<style>
#one {
border: solid 5px silver;
background-color: Aqua;
position: absolute;
z-index: 1;
opacity: 0.5;
height: 100px;
width: 100px;
}
#two {
border: solid 5px silver;
background-color: Green Yellow;
position: absolute;
top: 30px;
left: 35px;
z-index: 2;
opacity: 0.5;
height: 100px;
width: 100px;
}
#Three {
border: solid 5px silver;
background-color: Coral;
position: absolute;
top: 60px;
left: 60px;
opacity: 0.5;
z-index: 3;
height: 100px;
width: 100px;
}
#Four {
border: solid 5px silver;
background-color: Yellow;
position: absolute;
top: 90px;
left: 90px;
opacity: 0.5;
z-index: 4;
height: 100px;
width: 100px;
}
#Five {
border: solid 5px silver;
background-color: MediumSpringGreen;
position: absolute;
top: 120px;
left: 120px;
opacity: 0.5;
z-index: 5;
height: 100px;
width: 100px;
}
style>
head>
<body>
<div id="one">Onediv>
<div id="two">Twodiv>
<div id="Three">Threediv>
<div id="Four">Fourdiv>
<div id="Five">Fivediv>
body>
html>
Наш результат:
Заключение
Надеемся, что данная статья Вам понравилась. Она будет полезной для новичков в HTML и CSS.
Источник: http://www.c-sharpcorner.com/UploadFile/88d8c0/z-index-property-in-css/
Основи AJAX. Створення запитів HTTP.
Автор: Софія Єрмолаєва
Введение
AJAX (Asynchronous JavaScript and XML) - это концепция объединения воедино нескольких технологий. Результатом их совместной роботы является способность обмена данными между сервером и страницей без ее полной перезагрузки.
Примером использования данной технологии является «живой поиск», реализованный почти во всех современных поисковиках. Работа такого поиска состоит в том, что при наборе пользователем поискового запроса при помощи JavaScript с сервера будет получен список возможных дополнений. Зачастую этот список выводится снизу поисковой строки.
Рассмотрим небольшой пример.
Напишем функцию для обработки пользовательского ввода, которая будет моментально отображать введенную информацию на странице. Сперва создадим HTML страничку и добавим в
, в который поместим одно поле для ввода и один параграф
.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple exampletitle>
head>
<body>
<div>
<p>My name is <span id="namePlace">span>p>
<input type="text" id="name">input>
div>
body>
html>
Далее добавим функцию для обработки ввода, а также обозначим для поля ввода эту функцию как обработчик события “onkeyup”.
Назовем функцию “change” и просто возьмем значение поля с id= “name” и присвоим его элементу с id= “namePlace”.
Код будет выглядеть так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple exampletitle>
<script type="text/javascript" charset="utf-8" async defer>
function change() {
var res = document.getElementById("name").value;
document.getElementById("namePlace").innerHTML = res;
}
script>
head>
<body>
<div>
<p>My name is <span id="namePlace">span>p>
<input type="text" id="name" onkeyup="change()">input>
div>
body>
html>
Откроем страницу в браузере:
После введения своего имени, вы сразу же увидите его отображенным:
В основе AJAX лежит использование XMLHttpRequest объекта, предоставляющего легкий способ получения данных от URL с частичной перезагрузкой страницы. Несмотря на то, что название данного объекта включает в себя «XML», он способен взаимодействовать с любыми типами данных, не только с XML. Также он поддерживает работу не только с HTTP протоколом, а и с многими другими (включая файлы и ftp).
Для того чтобы создать экземпляр класса XMLHttpRequest, достаточно лишь добавить в код строку:
var newRequest = new XMLHttpRequest();
Для создания кроссбраузерного экземпляра нужного класса потребуется следующий код:
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
newRequest = new XMLHttpRequest();
if (newRequest.overrideMimeType) {
newRequest.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
newRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
newRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
Далее нужно создать JavaScript функцию для обработки ответа от сервера и указать свойству XMLHttpRequest объекта - onreadystatechange, что данная функция будет этим заниматься. Для реализации нам нужно присвоить свойству onreadystatechange имя данной функции без скобок (так как нам нужна лишь ссылка на функцию без ее вызова) или же пойти другим путем и присвоить саму функцию (название функции упускается).
Код для первого случая:
function nameOfFunction() {
//body of the function
}
newRequest.onreadystatechange = nameOfFunction;
Код для второго случая:
newRequest.onreadystatechange = function () {
//body of the function
};
Написание самой функции мы рассмотрим позже, а сейчас перейдем к созданию самого запроса, за что отвечают две функции описываемого ранее класса – open() и send().
Функция open() отвечает за инициализацию запроса. Рассмотрим несколько вариантов использования:
· open( method, URL, async )
· open( method, URL, async, userName, password )
Параметром method задают HTTP метод, такой как GET или POST.
Вторым параметром(URL) задается адрес запрашиваемой страницы.
Параметр asynch – имеет булевое значение (true/false) и определяет, будет ли значение асинхронным (true) или синхронным (false). В дальнейших примерах используются только асинхронные запросы, так что третий параметр всегда будем устанавливать в положительное значение.
Последние два параметра userName и password определяют данные для авторизации пользователя.
Функция send() отправляет запрос. Тип данных параметров этого метода не ограничен. Хочу отметить, что при значении параметра method - GET в методе open() передаваемое значение параметра метода send() будет null, так как у GET-запроса нет тела.
Рассмотрим пример с использованием всех вышеперечисленных методов.
Создадим HTML страничку и добавим в один
с id=” textField” и вложенным в него параграфом
. Также добавим блок для ввода текста "textarea" с id=”area”, а также одну кнопку для активизации работы наших функций. Присвоим событию onclick имя функции для создания запроса, в данном примере функция будет называться makeRequest().
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Creation of AJAX requesttitle>
head>
<body>
<div id="area"><p>We will change this text with content of the given file.p>div>
<textarea id="ar" width="100"> Changeable texttextarea>br>
<button type="button" onclick="makeRequest()">Show content of the filebutton>
body>
html>
Теперь напишем саму функцию makeRequest(), для этого стоит вспомнить все, о чем вы прочитали ранее. Первым делом создадим объект класса XmlHttpRequest, после чего присвоим функцию для обработки самого запроса, в нашем примере функция будет называться outputContents(newRequest) и будет принимать на вход сам запрос. Далее вызвать функцию open(), подав на вход соответствующие параметры (в качестве url подадим путь к текстовому файлу), и затем вызовем функцию send().
Функция outputContents(newRequest) будет получать ответ от сервера и далее вставит этот результат в поля с id=”area” и id=”textField”.
Финальный код страницы:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Creation of AJAX requesttitle>
<script type="text/javascript" language="javascript">
function makeRequest() {
var newRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
newRequest = new XMLHttpRequest();
if (newRequest.overrideMimeType) {
newRequest.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
newRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
newRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) { }
}
}
if (!newRequest) {
alert('Ooops we have some problem with creation of XmlHttpRequest object!');
return false;
}
newRequest.onreadystatechange = function () { outputContents(newRequest); };
newRequest.open('GET', 'login.txt', true);
newRequest.send(null);
}
function outputContents(newRequest) {
if (newRequest.readyState == 4) {
if (newRequest.status == 200) {
var res = newRequest.responseText;
document.getElementById('textField').innerHTML = res;
document.getElementById('area').innerHTML = res;
} else {
alert('There is some problems with the request!');
}
}
}
script>
head>
<body>
<div id="textField"><p>We will change this text with content of the given file.p>div>
<textarea id="area" width="100"> Changeable texttextarea>br>
<button type="button" onclick="makeRequest()">Show content of the filebutton>
body>
html>
В браузере мы увидим следующее:
При нажатии на кнопку контент нашей страницы изменится таким образом:
Надеемся, что вы разобрались с созданием забросов посредством AJAX и разделяете наше восхищение данной технологией.
Властивість CSS3 box-shadow
Автор: Валерія Прокопенко
Введение
С приходом CSS3 в мир веб-разработки множества модных новинок, отображать потрясающий анимационный эффект стало доступным с помощью нескольких строчек кода. Сегодня мы рассмотрим одно из свойств CSS3 box-shadow и с его помощью научимся создавать такой элемент управления, как кнопка. Особенностью такого подхода является то, что компоненты на странице выглядят объемными и привлекательными, чем обращают на себя внимание пользователя.
Для начала создадим 3 слоя, которые и будут выступать в роли наших кнопок и опишем для них стили:
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
width: 80px;
height: 80px;
margin: 30px;
display: inline-block;
cursor: pointer;
background: green;
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
В результате получим три зеленые кнопочки на фоне, который мы применили к телу нашего документа.
Теперь можно начать работу с box-shadow, но для начала познакомимся с его возможностями. Итак, данное свойство добавляет тень к нужному элементу, причем указав его параметры через запятую, можно применить несколько теней к одному компоненту и при их наложении первая в списке будет выше, а вторая ниже. Значение inset выводит тень внутрь элемента, но этот параметр не является обязательным.
Вооружившись знаниями о данном свойстве, можно приступить к созданию наших кнопок. Для начала изменим фон элементов на такой же, как у тела нашего документа. Теперь указываем параметры для box-shadow: первый отвечает за смешение по горизонтали, второй – по вертикали, третий - за радиус размытия, четвертый определяет цвет. Также используем значение inset, с помощью которого делаем внутреннюю верхнюю тень белой, а внутреннюю нижнюю - черной, при этом устанавливаем для них прозрачность, чтобы они не выглядели грубо.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
В результате мы получили объемные формы, теперь сымитируем эффект нажатия при наведении на кнопку, для этого используем псевдокласс :hover и в нем опишем внутренние тени элементов, причем верхняя должна быть черной, а нижняя – белой, и не забываем установить прозрачность для данных элементов.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
.button:hover {
box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
Следующее, что мы сделаем – это добавим иконки для наших кнопок, для этого мы используем псевдокласс :after и, чтобы усилить эффект вдавленности элемента при наведении, мы будем смещать картинки на 3% от начально положения.
<!DOCTYPE html>
<html>
<head>
<title>Box-Shadowtitle>
<style type="text/css">
body {
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
}
.button {
display: inline-block;
cursor: pointer;
margin: 30px;
width: 80px;
height: 80px;
background: url(http://palma-ceramic.ru/images/newcatalog/1945.jpg);
box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
-moz-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
-webkit-box-shadow: 0 4px 22px rgba(0,0,0, 0.25), inset 0 3px 0 rgba(255,255,255, 0.5), 0 3px 0 rgba(0,0,0, 0.1), inset 0 0 22px rgba(0,0,0, 0.1);
}
.left {
border-radius: 50%;
}
.center {
border-radius: 20%;
}
.right {
border-radius: 50%;
}
.button:hover {
box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
-moz-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
-webkit-box-shadow: inset 0 0 22px rgba(0,0,0,0.2), 0 3px 0 rgba(255,255,255,0.4),inset 0 3px 0 rgba(0,0,0,0.1), inset 0 0 22px rgba(0,0,0,0.1);
}
.button::after {
content: '';
width: 80px;
height: 80px;
display: block;
opacity: 0.7;
}
.left::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-previous.png?itok=Myj2aYPA);
background-repeat: no-repeat;
background-position: 50%;
}
.center::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-play.png?itok=iQrN1tL3);
background-repeat: no-repeat;
background-position: 50%;
}
.right::after {
background: url(http://www.defaulticon.com/sites/default/files/styles/icon-front-page-32x32-preview/public/field/image/MD-next.png?itok=LBqF9Nod);
background-repeat: no-repeat;
background-position: 50%;
}
.button:hover::after {
background-position: center 53%;
}
style>
head>
<body>
<div class="button left">div>
<div class="button center">div>
<div class="button right">div>
body>
html>
Как видим, CSS3 делает жизнь разработчика намного проще, предоставляя множество интересных и простых в использовании плюшек.
Основи AngularJS на практиці
Автор: Редакция ITVDN
Введение
AngularJS – фреймворк-библиотека Javascript, разработанная для создания одностраничных приложений на основе MVC (Model-View-Controller) шаблона.
Будем осваивать данную технологию на практике.
Создадим HTML страничку со стандартной структурой. Далее нам нужно преобразовать ее в одностраничное приложение. Для этого подключим AngularJS к своей странице, добавив в
тег с данным кодом:
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
script>
Следующим шагом мы явно укажем на то, что наша страница является AngularJS приложением. Нужно добавить ng-app директиву, которой мы обозначим корневой элемент приложения. Зачастую таким элементом выступает тег или же тег . Добавим эту директиву к :
<!DOCTYPE html>
<html ng-app="">
<head>
<title>title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
script>
head>
<body>
body>
html>
Проверим, все ли работает, добавив небольшое выражение для подсчета произведения чисел 123 и 45. В AngularJs все выражения записываются в двойных скобках. Добавим в параграф со следующим содержимым:
<p>Результат произведение чисел 123 и 45 равен : {{ 123 * 45 }}p>
Запустим в браузере:
Теперь у нас есть готовый шаблон приложения, который мы будем использовать во всех последующих примерах.
AngularJS позволяет разработчику легко взаимодействовать с пользовательским вводом. Для этого есть соответствующая директива ng-model, которая связывает значения HTML элементов контроля (teaxtarea, input etc.) с приложением. Использовать эти данные поможет директива ng-bind, добавив эти данные во View (элемент MVC) и отобразив их на странице.
Применим полученные знания на практике. В созданный ранее шаблон добавим поле для ввода <input> с директивой ng-model и параграф для вывода данных c директивой ng-bind.
Код странички:
<!DOCTYPE html>
<html ng-app="">
<head>
<title>title>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
script>
head>
<body>
<p>Ввведте свое имя:p>
<input type="text" ng-model="yourName">
<p>Здравствуй, <span ng-bind="yourName">span>p>
body>
html>
Откроем в браузере:
Теперь попробуйте ввести свое имя в поле для ввода.
Давайте добавим в данный пример дефолтное значение имени, к примеру Анна. Сделаем это, конечно же, с помощью директивы ng-init, которая позволяет инициализировать любую переменную AngularJS приложения.
В строку добавим директиву ng-init.
<input type="text" ng-model="yourName" ng-init="yourName='Aнна'">
Посмотрим изменения в браузере:
Теперь мы имеем значение по дефолту – Анна, но все так же можем изменять его:
Вывод данных в этом примере можно сделать еще одним способом, а именно, использовав выражение. Заменим на {{yourName}}.
<p>Здравствуй, {{ yourName }}p>
Открыв страницу, мы не увидим абсолютно никаких изменений, а все потому, что выражения в AngularJS связывают данные со страничкой точно так же, как и ng-bind директива.
Как упоминалось в статье ранее, AngularJS строит приложения на основе MVC. Часть модель – представление (Model - View) определяется с помощью директивы ng-app. Контроллер в свою очередь определяется директивой ng-controller.
Рассмотрим пример с использованием контроллера страницы.
Создадим страничку со списком гостей, которых Вы пригласите на свой день рождения.
К созданному ранее шаблону добавим контроллер, а так же установим имя для приложения. В тег внесем следующие изменения:
<html ng-app="firstApp" ng-controller="firstController">
Далее добавим с типом text для введения имени гостя и еще один с типом submit для добавления гостя в список. Также добавим
с полем для вывода списка и чекбоксом с типом checkbox для того, чтобы можно было удалять тех, кто не придет на ваш праздник. В данный
добавим директиву ng-repeat, отвечающую за повторение данных в обозначенном контейнере.
<!DOCTYPE html>
<html>
<head>
<title>title>
<meta type="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">script>
head>
<body ng-app="firsApp" ng-controller="firstController">
<h2>Мои гости:h2>
<form ng-submit="addGuest()">
<input type="text" ng-model="guestsInput" size="50" placeholder="Введите имя гостя">
<input type="submit" value="Добавить гостя">
form>
br>
<div ng-repeat="guest in listOfGests">
<input type="checkbox" ng-model="guest.come"> <span ng-bind="guest.guestName">span>
div>
<p><button ng-click="remove()">Удалить гостя button>p>
body>
html>
Осталось добавить скрипт, который будет содержать функции для работы с элементами нашего приложения. Замечу, что все функции будут расположены в контроллере приложения.
Скопируйте и добавьте после закрывающегося тега параграфа с кнопкой
<p><button ng-click="remove()">Удалить гостя button>p>
следующий код:
<script>
var app = angular.module('firsApp', []);
app.controller('firstController', function($scope) {
$scope.listOfGests = [{guestName:'Я любимый', come:false}];
var countOfGuests = 1;
$scope.addGuest = function() {
$scope.listOfGests.push({guestName:$scope.guestsInput, come:false});
$scope.guestsInput = "";
countOfGuests++;
checkNumberOfGuests();
};
$scope.remove = function() {
var oldGuests = $scope.listOfGests;
$scope.listOfGests = [];
angular.forEach(oldGuests, function(guest) {
if (!guest.come) $scope.listOfGests.push(guest);
countOfGuests--;
});
checkNumberOfGuests()
};
function checkNumberOfGuests(){
if(countOfGuests <= 2){
alert("Маленькая вечеринка тоже не плохо! Не печалься! Лучших друзей не бывает много!");
}else if(countOfGuests >= 9){
alert("Праздник?! ВЕЧЕРИНИЩЕ!");
}else{
alert("Узкий круг самых близких, это всегда хорошо!");
}
} script>
В данном коде у нас есть три функции: добавление и удаление гостя и проверка количества гостей.
В функции добавления мы берем введенные данные guestsInput и добавляем их в лист listOfGests. Устанавливаем значение чекбокса в false (в нашем случае, это значит, что человек придет / если значение true, то есть галочка стоит - значит не придет), после чего очищаем поле ввода. Далее увеличиваем счетчик гостей и вызываем функцию проверки их количества.
В функции удаления мы берем список гостей listOfGests и проверяем значение чекбокса каждого гостя, определяя, кто придет, а кто нет. Удаляем тех, кто отмечен галочкой (не пойдет) и уменьшаем счетчик элементов.
Функция проверки количества гостей очень проста, поэтому подробнее мы ее разбирать не будем.
Давайте откроем пример в браузере и поработаем с ним:
Добавим несколько гостей:
С изменением количества гостей содержимое оповещений будет меняться.
Когда вы добавите больше 9 друзей, тогда увидите такое оповещение:
Поздравляем, вот Вы и создали свое первое одностраничное приложение с помощью AngularJS!
Путівник ITVDN за версткою сайтів
Автор: Редакция ITVDN
Верстальщик сайтов – это специалист, который занимается созданием веб-страниц. Его работа заключается в том, чтобы при помощи различных элементов языка разметки веб-страницы перевести графические элементы дизайна (рисунки, шрифты, таблицы и т.д.) в понятный для браузера формат, то есть сверстать сайт.
Работа верстальщика не очень сложная, но требует определенного уровня подготовки и большого внимания к деталям. На хороших специалистов практически постоянно существует большой спрос.
На ITVDN все, кто заинтересован в изучении технологий для верстки веб-страницы, найдут необходимые видео уроки и материалы. А также курсы для «прокачки» практических навыков верстки сайта и Тренажер для навыков написания кода. Курсы записаны сертифицированными разработчикам и тренерами Microsoft.
ITVDN рекомендует проходить обучение в такой последовательности:
HTML & CSS, автор Александр Петрик
How to HTML & CSS, автор Сергей Раздобудько
Photoshop. Базовый курс для web-разработчика, автор Сергей Воропаев
JavaScript Essential, автор Дмитрий Охрименко
How to JavaScript, автор Валерия Прокопенко
Основы использования Git, автор Александр Пономаренко
Twitter Bootstrap 3, автор Сергей Швайцер
Создание адаптивного сайта с Bootstrap 3, автор Александр Пономаренко
WordPress Starter, автор Артем Кондранин
Практический курс по верстке лендинга, автор Сергей Рубец
HTML5 & CSS3, автор Дмитрий Охрименко
Также вас могут заинтересовать записи вебинаров ITVDN (все в свободном доступе):
Верстаем сайт правильно
Photoshop: зачем он нужен веб-разработчику?
WordPress: создаем блог за час
Скоростная верстка, или как упростить себе жизнь с Bootstrap 3
Интеграция верстки лендинга на CMS WordPress
Адаптивный веб-дизайн: типы адаптивных макетов
Семантика HTML5, создаем змейку, используя canvas
Что надо знать для веб разработки. (реальная разработка + обзор вакансий)
Создание веб-приложения с Angular 1.5, Firebase и Gulp
Как решить проблемы верстки с помощью HTML5 Web Components
Если вы планируете свое обучение с нуля, тогда наилучшим решением будет приобретение подписки ITVDN сроком от 3 месяцев. Это оптимальный срок, за который вы сможете научиться создавать красивые сайты, мастерски владея современным инструментарием верстальщика.
Використання метатегів
Автор: Редакция ITVDN
Введение
Метатеги никак не влияют на отображение содержимого веб-страниц, но их активно используют поисковые машины для сбора информации про сайт. Тег meta можно записать внутри элемента head безмерное количество раз с такими атрибутами, как charset, name, http-equiv и content. При применении атрибута name или http-equiv content обязателен.
Names
Значения атрибута name разнообразные. Это и author, и description, и keywords. Author явно указывает на автора HTML- страницы, description обычно используется поисковыми машинами для отображение описания страницы в выдаче поиска.
Поисковики активно используют метатеги для определения некоего доверия веб-страницам. Вот почему так важно использовать теги meta. Так, например, keywords очень широко используется (иногда слишком). Хотя, современные поисковые машины генерируют релевантный контент самостоятельно.
HTTP эквиваленты
Атрибут http-equiv может быть использован вместо name и сгенерирует HTTP название, что будет отправлено на сервер. Атрибут должен редко применятся, его значения:
Content-type – оправляются зашифрованные данные;
Default-style – предпочитаются стили с указанных источников;
Refresh –определяется, как часто (в секундах) страница будет обновляться или пересылать на другую. Не очень разумно.
Очень удобно использовать запись
вместо аналогичного
для определения кодировки страницы.
<head>
<title>Air conditioners? YEAH conditioners!title>
<meta charset="utf-8">
<meta http-equiv="refresh" content="3">
<meta name="description" content="This is my really, really, REALLY exciting web page about air conditioners">
Источник: http://www.htmldog.com/guides/html/intermediate/metatags/
Робота з текстом: Адреси, Визначення, 2-спрямованість та редагування
Автор: Редакция ITVDN
Введение
Должно быть, Вы уже знаете, что существует огромное количество текстовых тегов. Вы знакомы с параграфами, заголовками и даже аббревиатурами. Но существует множество других, более непонятных и сложных тегов. Непонятных, потому что вы вряд ли найдете их в интернете, и не потому что они не нужны. Если Вы найдете текст с объяснениями, то используйте новые для себя элементы для создания более качественного, лучшего, более значимой HTML-страницы.
Адреса
Тег address используется специально для контактных данных или всей веб-страницы (единожды). Это не значит, что address нужно обязательно применять для всех старых адресов.
<h3>Author contact detailsh3>
<address>
<ul>
<li>0123-456-7890li>
<li>author_dude@noplaceinteresting.comli>
<li>http://www.noplaceinteresting.com/contactme/li>
ul>
address>
Определения
Тег dfn используется для выделения первого термина. Как и тег abbr, атрибут title может быть использован для описания термина.
<p>Bob's <dfn title="Dog">caninedfn> mother and <dfn title="Horse">equinedfn> father sat him down and carefully explained that he was an <dfn title="A mutation that combines two or more sets of chromosomes from different species">allopolyploiddfn> organism.p>
Двунаправленный текст
Тег bdo может использовать обратное направление текста, следовательно, может отображать языки, что читаются справа налево. Атрибут dir может принимать значения ltr (слева направо) или rtl (справа налево).
<bdo dir="rtl">god lmthbdo>
Редакции
Теги ins и del используются для отображения соответственно вставленных и удаленных частей. Они не имеют ограничений применения в тексте, также могут быть применены для целых разделов контента и, как правило, используются в «Track Changes» - дословно «отслеживание изменений».
Теги редакции также имеют атрибуты datetime, чтобы показать, когда была произведена правка, а также cite – причины изменений.
<p>I have decided to <del datetime="2013-01-26">decreasedel><ins cite="http://www.icecreamforall.com/changeofpolicy/">increaseins> the amount of free ice cream that the State will provide for its citizens.p>
Как и в обычных текстовых редакторах, элемент ins применяют для подчеркивания текста, а для зачеркивания – del.
Источник: http://www.htmldog.com/guides/html/intermediate/text2/
5 важливих речей, які Вам необхідно знати про веб-розробку
Автор: Редакция ITVDN
1. Используйте сброс CSS стилей в браузерах (Reset CSS)
Различные браузеры по-разному устанавливают шрифты, поля и другие свойства. Вместо того, чтобы устранять каждый элемент по одному, большинство разработчиков используют “Reset CSS” стиля для сброса таких параметров, как margin, border, font-size и других.
Примеры и библиотеки для сброса CSS:
Eric Meyer
Yahoo!
Crucial
2. Используйте средства разработки браузера и дополнительные плагины.
Очень полезно при разработке визуализировать «невидимые» части веб-страницы, например, свойства - margin, padding, parent positions и так далее. Вместо того, чтобы спрашивать себя, почему функция остановилась или неверно задан border style, рекомендуется использовать встроенные средства веб-разработки или использовать плагины для браузера.
Firebug – плагин для браузера Firefox. Фантастическая и бесценная вещь при разработке страницы.
Yahoo!'s YSlow – Плагин для Firebug для проверки скорости загрузки страницы.
3. Выучите JavaScript
JavaScript является языком высокого уровня, где автоматически выполняется установка и компилирование. Он подходит для людей даже без опыта программирования.
С появлением AJAX, JS становится очень важной частью современных веб приложений.
4. Выучите Photoshop
Photoshop - необходимая вещь для каждого разработчика. Используя различные инструменты программы, Вы можете создать как отдельную часть дизайна, например, кнопку, так и полноценный дизайн, который не только произведет впечатление на клиентов, но и позволит Вам проявить Ваше творчество.
5. Тестируйте Ваш продукт на IE
30% пользователей интернета до сих пор используют данный браузер для просмотра контента. К сожалению, Internet Explorer на данный момент не получил стандартов HTML, и веб разработчики должны учитывать это в своих продуктах.
Проверяйте Ваш продукт на всех браузерах. Например, Firefox имеет полную поддержку стандарта HTML, в то время как Internet Explorer только продолжает развиваться.
Источник: http://www.hackification.com/2008/11/06/ten-web-development-tips-i-wish-id-known-two-years-ago/
Створення секундоміра за допомогою CSS3
Автор: Редакция ITVDN
Введение
В этой статье Вы научитесь создавать секундомер, используя HTML5 и CSS3. Мы рассмотрим CSS3 анимацию с тремя кнопками: старт, остановка и сброс. Запуск начинает работу секундомера, стоп – останавливает секундомер, и кнопка сброса сбрасывает секундомер.
Основная логика создания секундомера очень простая, Вы будете использовать простой контейнер div, содержащий цифры, они будут увеличиваться с помощью ключевого кадра анимации.
Сначала создайте div (содержащий числа) с помощью кода HTML:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="number">0 1 2 3 4 5 6 7 8 9div>
body>
html>
Вот результат предыдущего кода:
Теперь Вам нужно выровнять числа по вертикали за счет уменьшения ширины контейнера. Итак, создайте файл CSS (styles.css) и введите следующий код в этот CSS-файл.
* {
margin: 0;
padding: 0;
}
.numbers {
width: 10px;
}
Согласно предыдущему коду, Ваши цифры будут выровнены вертикально:
Теперь используем цифровые шрифты, Вы можете скачать их с сайта ds-digi.font. Используйте следующий код CSS, чтобы изменить шрифт:
.number {
width: 10px;
font-family: digital, arial, verdana;
font-size: 50px;
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Результат такого кода:
Давайте поместим числа в поле для отображения только одной цифры. Таким образом, в HTML-файле поместите div с цифрами в другой div. Код будет таким:
<div class="box">
<div class="number">0 1 2 3 4 5 6 7 8 9div>
div>
Теперь примените такие настройки CSS, чтобы отображать только одну цифру.
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
}
Таким будет результат:
Давайте создадим анимацию цифр, так как это главная задача статьи. Логика анимации – изменить значение top position absolute от 0 до -400 px, потому что высота поля 40 px, а у нас есть цифры от 0 до 9, то есть в общей сложности 10 цифр, так что 40 * 10 = 400, Вы будете менять верхнюю от 0 до -400 px. Вот так выглядит код файла style.css:
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
Вот каким будет результат:
Вы можете увидеть, что цифры заменяются, а не перемещаются вверх пиксель за пикселем. Теперь создайте еще несколько div: два для часов, два для минут, два для секунд и три для мили-секунд.
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds">0 1 2 3 4 5 6 7 8 9div>
div>
div>
body>
html>
Результат предыдущего кода:
Теперь установите float left для всех div, как указано ниже.
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
}
После применения float left мы получим такой результат:
Таким образом, максимальное значение минут и секунд будет 60. Вы должны создать две анимации, одна из которых будет 10-шаговой и 10-цифровой, и одна 6-шаговой, и только 6-цифровой. Используйте следующий код CSS для этого:
* {
margin: 0;
padding: 0;
}
.box {
width: 40px;
height: 40px;
border: 1px solid #000;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
}
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Теперь, после создания предыдущих анимаций, примените класс CSS к HTML следующим образом:
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
Таким будет результат:
Теперь Вам нужно синхронизировать скорость анимации со скоростью времени. Примените следующие свойства:
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
Вот таким будет результат:
Вы можете увидеть, что сейчас с секундомером все в порядке. Теперь добавьте стили к секундомеру. Модифицируйте HTML и CSS.
HTML-файл:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="MainContainer">
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
div>
body>
html>
CSS-файл:
* {
margin: 0;
padding: 0;
}
body {
background: url(images.jpg);
}
.MainContainer {
padding: 200px;
text-align: center;
}
.stopwatch {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #eeeeee;
border-radius: 20px;
box;
}
.box {
width: 40px;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
}
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.onesPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
После применения некоторых стилей результат будет следующим:
Теперь добавьте 3 кнопки типа radio для запуска, остановки и сброса секундомера. Эти кнопки будут управлять секундомером.
HTML-код:
<!doctype html>
<html>
<head>
<title>Stopwatchtitle>
<link rel="stylesheet" href="Style.css" />
head>
<body>
<div class="MainContainer">
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="stopwatch">
<div class="box">
<div class="number tensPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number onesPlaceHours moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceMinutes moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceMinutes moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number tensPlaceSeconds moveupsix">0 1 2 3 4 5 6div>
div>
<div class="box">
<div class="number onesPlaceSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box divider">
<div class="number">:div>
div>
<div class="box">
<div class="number onesPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number tensPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
<div class="box">
<div class="number hundredsPlaceMiliSeconds moveuptens">0 1 2 3 4 5 6 7 8 9div>
div>
div>
<div id="stopwatch_controls">
<label for="start">Startlabel>
<label for="stop">Stoplabel>
<label for="reset">Resetlabel>
div>
div>
body>
html>
Теперь измените код CSS для стилизации элементов управления секундомером:
* {
margin: 0;
padding: 0;
}
body {
background: url(images.jpg);
}
.MainContainer {
padding: 200px;
text-align: center;
}
.stopwatch {
padding: 10px;
background: linear-gradient(top, #222, #444);
overflow: hidden;
display: inline-block;
border: 7px solid #eeeeee;
border-radius: 20px;
box;
}
.box {
width: 40px;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}
.number {
width: 40px;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;
position: absolute;
top: 0;
left: 0;
-webkit-animation: moveup 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveup 1s steps(10, end) infinite;
}
#stopwatch_controls label {
cursor: pointer;
padding: 5px 10px;
background: #eeeeee;
font-family: arial, verdana, tahoma;
font-size: 20px;
border-radius: 0 0 3px 3px;
}
input[name="controls"] {
display: none;
}
#stop:checked ~ .stopwatch .number {
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
#start:checked ~ .stopwatch .number {
animation-play-state: running;
-webkit-animation-play-state: running;
}
#reset:checked ~ .stopwatch .number {
animation: none;
-webkit-animation: none;
}
.moveuptens {
-webkit-animation: moveuptens 1s steps(10, end) infinite; /* Chrome, Safari, Opera */
animation: moveuptens 1s steps(10, end) infinite;
/*By default animation will be paused*/
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.moveupsix {
-webkit-animation: moveupsix 1s steps(6, end) infinite; /* Chrome, Safari, Opera */
animation: moveupsix 1s steps(6, end) infinite;
/*By default animation will be paused*/
animation-play-state: paused;
-webkit-animation-play-state: paused;
}
.onesPlaceSeconds {
animation-duration: 10s;
-webkit-animation-duration: 10s;
}
.tensPlaceSeconds {
animation-duration: 60s;
-webkit-animation-duration: 60s;
}
.onesPlaceMiliSeconds {
animation-duration: 1s;
-webkit-animation-duration: 1s;
}
/*1/10th of .second*/
.tensPlaceMiliSeconds {
animation-duration: 0.1s;
-webkit-animation-duration: 0.1s;
}
.hundredsPlaceMiliSeconds {
animation-duration: 0.01s;
-webkit-animation-duration: 0.01s;
}
.onesPlaceMinutes {
animation-duration: 600s;
-webkit-animation-duration: 600s;
}
/*60 times .second*/
.tensPlaceMinutes {
animation-duration: 3600s;
-webkit-animation-duration: 3600s;
}
/*60 times .minute*/
.onesPlaceHours {
animation-duration: 36000s;
-webkit-animation-duration: 36000s;
}
/*60 times .minute*/
.tensPlaceHours {
animation-duration: 360000s;
-webkit-animation-duration: 360000s;
}
/*10 times .hour*/
@-webkit-keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveup {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@keyframes moveuptens {
0% {
top: 0px;
}
100% {
top: -400px;
}
}
@-webkit-keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@keyframes moveupsix {
0% {
top: 0px;
}
100% {
top: -240px;
}
}
@font-face {
font-family: 'digital';
src: url('DS-DIGI.TTF');
}
Финальный результат
Источник: http://www.c-sharpcorner.com/UploadFile/75a48f/stopwatch-using-css3/