Результати пошуку за запитом: html
Властивість 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 и разделяете наше восхищение данной технологией.
Курс з верстки лендінгу - безкоштовно
Автор: Редакція ITVDN
Привет, друзья!
Создание лендингов - автономных интернет-страниц, нацеленных на конкретное действие пользователя - один из трендов веб-разработки. Чаще всего лендинги создают для мероприятий, отдельных продуктов или услуг.
Если вы владеете базовыми знаниями языков верстки HTML и CSS и при этом намерены научиться создавать эффективные лендинги, у нас для вас хорошая новость.
С 9 по 16 апреля 2020 года на ITVDN проходит акция “Курс по верстке лендинга - бесплатно”. Участники акции получат бесплатный доступ к практическому курсу, который состоит из 9 уроков общей длительностью 8 часов. В курсе рассмотрены важные этапы создания лендинга с акцентом на адаптивности и интерактивности.
Темы уроков:
Организация рабочего процесса.
Препроцессор PUG.
Препроцессор SASS.
Непосредственно верстка (5 занятий).
Создание интерактива на JavaScript.
Автор курса - Сергей Рубец - Full Stack JS Developer.
В каждом уроке для вас будут доступны видео и исходные файлы с кодом автора.
Доступ к курсу будет открыт на 10 дней.
Курс входит в комплексные программы обучения по специальностям FrontEnd Developer и Верстальщик и демонстрирует практическое применение знаний языков HTML, CSS и JavaScript в решении реальной задачи - создании лендинга.
Желаем вам здоровья и успехов в изучении основ верстки! Оставайтесь на ITVDN!
Technical skills марафон
Автор: Редакція ITVDN
Подтверди свои навыки и выиграй подписку ITVDN на 3 месяца!
C 10 до 20 ноября 2017 года на ITVDN проходит большой марафон среди начинающих программистов.
Задача участников марафона - успешно (на 100%) и с максимальными баллами выполнить все задания практикума по одной или нескольким технологиям - JavaScript, SQL, C# или HTML. Победителей и призов будет много!
Условия акции:
В период с 10 по 20 ноября 2017 года проверь свои знания, выполнив все задания на Тренажере ITVDN по одной или нескольким технологиям. Чем больше технологий ты знаешь, тем больше призов можешь выиграть.
Соревнование проводится в 5 номинациях:
JavaScript
SQL
HTML, CSS
C# Starter
С# Essential
Призы победителям
В каждой номинации будет разыграна 1 подписка ITVDN на 3 месяца и 5 подписок на месяц.
В пакете подписки полный доступ ко всем видео курсам, представленным в Каталоге ITVDN.
В розыгрыше примут участие те, кто выполнит все задания соответствующего практикума на 100%.
Супер-приз - фирменная футболка и брендированная дженга ITVDN – достанется тому, кто за время акции пройдет все практикумы с максимальными баллами.
Определение и награждение победителей
Победители будут определены с помощью сервиса random.org. Трансляцию розыгрыша смотрите в прямом эфире на нашем YouTube канале 21 ноября в 17:00.
Итоги акции будут опубликованы на нашем сайте 21 ноября 2017 года после 18:00.
Вивчай ASP.NET MVC безкоштовно!
Автор: Ирина Музыка
Подарок от ITVDN – видео курс ASP.NET MVC Fundamentals с 12 по 19 января 2017 года доступен бесплатно для всех зарегистрированных пользователей ITVDN.
ASP.NET MVC – это технология Microsoft, предназначенная для разработки современных веб приложений.
Курс ASP.NET MVC Fundamentals рассчитан на С#/.NET и web-разработчиков, у которых есть базовые знания по C#, HTML, CSS и JavaScript. Знание ASP.NET существенно ускорит изучение ASP.NET MVC.
Курс записан Дмитрием Охрименко - Сертифицированным тренером и разработчиком Microsoft, лучшим профессионалом года в номинации IT Education (Ukrainian IT Awards 2015). Курс состоит из 10 уроков.
Темы, которые изучаются в курсе:
Введение в ASP.NET MVC
Маршрутизация и области
Представления и компоновки
Контроллеры и действия
Вспомогательные методы и HTML формы
Модель
Привязка модели и валидация
Фильтры и авторизация
AJAX
Поиск и устранение уязвимостей
Для наилучшего результата используйте все возможности нашего ресурса:
Смотрите видео уроки.
Скачайте учебные материалы и работайте с практическими примерами урока.
Выполняйте все задания к каждому уроку.
Проверяйте, как усвоен материал, проходя тестирование после каждого урока.
Для получения электронного сертификата, пройдите тестирование по всему курсу.
Перейти к видео курсу ASP.NET MVC Fundamentals
Для получения полного бесплатного доступа к курсу Вы должны быть зарегистрированным пользователем ITVDN.
Новий відео курс — HTML5 & CSS3 Стартовий
Автор: Редакція ITVDN
Доброго дня!
На ITVDN опубліковано новий відео курс – "HTML5 & CSS3 Стартовий"! Через війну, яку рф розв’язала проти України, у лютому вся робота над новими уроками була призупинена, але зараз ми практично відновили наші бізнес-процеси. Новий курс завершений і доступний в повному обсязі. Він містить фундаментальні знання мов верстання HTML5 & CSS3 та допоможе ввести новачків у світ верстання веб-сайтів та розроблення клієнтської сторони веб-додатків (FrontEnd).
В основі роботи будь-якого веб-сайту є демонстрація тексту, зображень та іншого контенту у вікні спеціальної програми – веб-браузера. За допомогою мови HTML створюється початкова розмітка (каркас) кожної веб-сторінки. Потім CSS перетворює сайт, налаштовуючи спосіб відображення елементів і надаючи йому привабливий, ефектний зовнішній вигляд. Вивчення цих мов є основою для навчання будь-якого верстальника та веб-розробника.
На курсі «HTML5 & CSS3 Стартовий» ви ознайомитеся з основними конструкціями та принципами використання цих базових мов роботи веб-сайтів. Ви познайомитеся з тим, що таке HTML-теги та як їх використовувати, з особливістю того, як влаштована структура будь-якого сайту, що таке блоки, як формується текст та відображаються картинки. Дізнаєтеся, як працювати з таблицями та списками, їх правила вкладеності, дізнаєтеся правила розміщення блоків та способи роботи зі шляхами для файлів.
Автор курсу – Віталій Мазяр, FrontEnd Developer, тренер-консультант CyberBionic Systematics, сертифікований спеціаліст Microsoft, автор відео курсів на ITVDN. У записаних відео уроках він ділиться техніками ефективного використання HTML5 & CSS3, спираючись на власний досвід та найкращі практики.
Структура курсу:
Введення у HTML.
Типи елементів та атрибути.
Вступ до CSS.
Визначення розмірів блоків.
Робота з відступами, властивість margin.
Робота з текстом та видимістю елементів.
Верстання з використанням Flexbox.
Комбінування селекторів.
Робота з фоном, властивості background.
Семантичне верстання.
Чого ви навчитеся на даному курсі:
Розуміти основи використання базових конструкцій мови розмітки HTML та мови стилів CSS.
Створювати прості односторінкові сайти.
Реалізовувати головне меню сайту.
Розуміти основи адаптивного та кросбраузерного розроблення сайтів.
Створювати блок соціальних мереж.
Створювати картки товару та подібні до них інформаційні блоки.
Реалізовувати верстання сайту за допомогою модуля Flexbox.
Попередні вимоги
Цей курс підходить для новачків, які жодного разу не програмували. Для старту навчання знадобиться комп'ютер/ноутбук та стабільний доступ до Інтернету.
Дивіться перший урок у вільному доступі. Якщо у вас є активна підписка, курс доступний для вас у повному обсязі.
CoffeeScript
Автор: Владимир Виноградов
CoffeeScript - это язык программирования, который транслируется в JavaScript. CoffeeScript добавляет синтаксический сахар похожим образом с Ruby, Python и Haskell для того, чтобы улучшить чтение кода и уменьшить его размер. В среднем, для выполнения одинаковых действий на CoffeeScript нужно в 2 раза меньше строк, чем для JavaScript. Целевой аудиторией курса являются верстальщики и web-разработчики. Для успешного прохождения нужны знания языка разметки страниц HTML и CSS, и владение базовым уровнем JavaScript. Пройдя курс, Вы сможете уверенно понимать код CoffeeScript, освоите написания модулей на CoffeeScript и компиляцию в JavaScript код.
Властивість 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!
Новий відео курс — Верстання сторінок з використанням Gulp
Автор: Редакція ITVDN
Дорогі друзі, на ITVDN опубліковано новий відео курс, присвячений вивченню Gulp – популярного таск-менеджера для автоматизації рутинних завдань!
Gulp дозволяє автоматизувати та прискорити виконання безлічі рутинних завдань розроблення, з якими щодня доводиться стикатися під час створення веб-сайту (мініфікація, тестування, об'єднання файлів тощо).
Цей курс допоможе вам вивчити можливості застосування Gulp, починаючи від основ використання та базових правил, закінчуючи розглядом складніших структур. Проходячи уроки, ви крок за кроком познайомитеся з усіма можливостями Gulp API. Ви пройдете через весь процес створення сторінки: від створення репозиторію для зберігання проекту, через створення gulpfile.js для структури проекту, підготовку макета сайту у Figma, забезпечення структури сторінки в html, додавання стилів до існуючої сторінки та скриптів у проект, до підсумкового результату – пакування проекту та виконання деплою на сервісі Netlify.
Після проходження курсу ви будете розбиратися в основах роботи тасків та їх створенні, а також дізнаєтеся про можливості бібліотек, які працюють з GulpJs. Якщо ви ще не знайомі з GulpJs, або хочете більше розібратися в роботі тих чи інших методів, цей курс допоможе вам у цьому.
Автор курсу – Сластен Максим, FrontEnd Developer. У записаних відео уроках він ділиться техніками ефективного використання Gulp, спираючись на власний досвід та найкращі практики.
Структура курсу:
Встановлення Gulp. Налаштування робочого оточення.
Властивості та можливості Gulp.
Підготовка gulpfile.js
Створення сторінки.
Пакування та деплой.
Чого ви навчитеся на даному курсі:
Розуміти та вміти застосовувати особливості Gulp у повному циклі розроблення лендінгу.
Встановлювати Gulp, виконувати налаштування робочого оточення та створювати таски для перевірки коректності встановлення та відсутності помилок.
Розуміти особливості 4-ї версії Gulp, її відмінності від 3-ї версії, розуміти різновиди Gulp файлів та особливості Gulp API.
Застосовувати існуючі Gulp-плагіни, розуміти особливості їх підключення та налаштування в тасках для різних завдань. Використовувати плагіни для роботи з HTML, з PUG, плагіни для оброблення JS та графіки
Попередні вимоги
Для розуміння матеріалу даного курсу необхідні знання мов верстання HTML & CSS, а також базове володіння мовою JavaScript.
Дивіться перший урок у вільному доступі. Якщо у вас є активна підписка, курс доступний для вас у повному обсязі.
