Аллегория login form html. HTML Формы

HTML формы — сложные элементы интерфейса. Они включают в себя разные функциональные элементы: поля ввода и , списки <select> , подсказки и т.д. Весь код формы заключается в элемент <form> .</p> <p>Большая часть информации веб-форм передаётся с помощью элемента <input> . Для ввода одной строки текста применяется элемент <input type="text"> , для нескольких строк - элемент <textarea> . Элемент <select> создает выпадающий список.</p> <p>Элемент <label> создаёт надписи к полям формы. Существует два способа группировки надписи и поля. Если поле находится внутри элемента <label> , то атрибут for указывать не нужно.</p><p> <label for="lastname">Last Name</label><input type="text" id="lastname"> <input type="text" id="lastname"><label for="lastname">Last Name</label> <label>Last Name<input type="text" name="lastname"></label> </p><p>Поля формы можно разделять на логические блоки с помощью элемента <fieldset> . Каждому разделу можно присвоить название с помощью элемента <legend> .</p><p> <fieldset> <legend>Контактная информация</legend> <label>Имя<input type="text" required></label> <label>E-mail<input type="email" required></label> </fieldset> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2015/05/fieldset.png' width="100%" loading=lazy> Рис. 1. Группировка полей формы </p><p>Чтобы сделать форму более понятной для пользователей, в поля формы добавляют текст, содержащий пример вводимых данных. Такой текст называется подстановочным и создаётся с помощью атрибута placeholder .</p> <p>Обязательные для заполнения поля также необходимо выделять. До появления HTML5 использовался символ звездочки * , установленный возле названия поля. В новой спецификации появился специальный атрибут required , который позволяет отметить обязательное поле на уровне разметки. Этот атрибут дает указание браузеру (при условии, что тот поддерживает HTML5), указание не отправлять данные после нажатия пользователем кнопки отправить, пока указанные поля не заполнены.</p><p> <input type="text" required placeholder="Ваше имя"> </p><p>Для изменения внешний вид текстового поля при получении фокуса, используется псевдокласс focus . Например, можно сделать фон текущего поля более темным или добавить <a href="/computer-literacy/cvetnye-ramki-dlya-vord-gostovskie-chertezhnye-ramki-dlya.html">цветную рамку</a>, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <p><b>HTML разметка </b></p><p> <div class="form-wrap"> <div class="profile"><img src='https://i0.wp.com/сайт/wp-content/uploads/2016/10/profile-image.png' loading=lazy> <h1>Регистрация</h1> </div> <form method="post" action="form.php"> <div> <label for="name">Имя</label> <input type="text" name="name" required> </div> <div class="radio"> Пол <label> <input type="radio" name="sex" value="мужской">мужской <div class="radio-control male"></div> </label> <label> <input type="radio" name="sex" value="женский">женский <div class="radio-control female"></div> </label> </div> <div> <label for="email">E-mail</label> <input type="email" name="email" required> </div> <div> <label for="country">Страна</label> <select name="country"> <option>Выберите страну проживания</option> <option value="Россия">Россия</option> <option value="Украина">Украина</option> <option value="Беларусь">Беларусь</option> </select> <div class="select-arrow"></div> </div> <button type="submit">Отправить</button> </form> </div> </p><p><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i1.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. <a href="/windows-10/kakoi-razem-dlya-naushnikov-na-lumia-735-vneshnii-vid-razmery.html">Внешний вид</a> формы по умолчанию <p>Как видно из рисунка, каждый элемент формы имеет стили браузера по умолчанию. Очистим стили и оформим элементы формы.</p><p>Form-wrap { width: 550px; background: #ffd500; border-radius: 20px; } .form-wrap *{transition: .1s linear} .profile { width: 240px; float: left; text-align: center; padding: 30px; } form { background: white; float: left; width: calc(100% - 240px); padding: 30px; border-radius: 0 20px 20px 0; color: #7b7b7b; } .form-wrap:after, form div:after { content: ""; display: table; clear: both; } form div { margin-bottom: 15px; position: relative; } h1 { font-size: 24px; font-weight: 400; position: relative; margin-top: 50px; } h1:after { content: "\f138"; font-size: 40px; font-family: FontAwesome; position: absolute; top: 50px; left: 50%; transform: translateX(-50%); } /********************** стилизация элементов формы **********************/ label, span { display: block; font-size: 14px; margin-bottom: 8px; } input, input { border-width: 0; outline: none; margin: 0; width: 100%; padding: 10px 15px; background: #e6e6e6; } input:focus, input:focus { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio label { position: relative; padding-left: 50px; cursor: pointer; width: 50%; float: left; line-height: 40px; } .radio input { position: absolute; opacity: 0; } .radio-control { position: absolute; top: 0; left: 0; height: 40px; width: 40px; background: #e6e6e6; border-radius: 50%; text-align: center; } .male:before { content: "\f222"; font-family: FontAwesome; font-weight: bold; } .female:before { content: "\f221"; font-family: FontAwesome; font-weight: bold; } .radio label:hover input ~ .radio-control, .radiol input:focus ~ .radio-control { box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); } .radio input:checked ~ .radio-control { color: red; } select { width: 100%; cursor: pointer; padding: 10px 15px; outline: 0; border: 0; background: #e6e6e6; color: #7b7b7b; -webkit-appearance: none; /*убираем галочку в webkit-браузерах*/ -moz-appearance: none; /*убираем галочку в Mozilla Firefox*/ } select::-ms-expand { display: none; /*убираем галочку в IE*/ } .select-arrow { position: absolute; top: 38px; right: 15px; width: 0; height: 0; pointer-events: none; /*активизируем показ списка при нажатии на стрелку*/ border-style: solid; border-width: 8px 5px 0 5px; border-color: #7b7b7b transparent transparent transparent; } button { padding: 10px 0; border-width: 0; display: block; width: 120px; margin: 25px auto 0; background: #60e6c5; color: white; font-size: 14px; outline: none; text-transform: uppercase; } /********************** добавляем форме адаптивность **********************/ @media (max-width: 600px) { .form-wrap {margin: 20px auto; max-width: 550px; width:100%;} .profile, form {float: none; width: 100%;} h1 {margin-top: auto; padding-bottom: 50px;} form {border-radius: 0 0 20px 20px;} } </p><p><b>Файл form.php </b></p><p> <?php $name = trim(strip_tags($_POST["name"])); $sex = trim(strip_tags($_POST["sex"])); $email = trim(strip_tags($_POST["email"])); $country = trim(strip_tags($_POST["country"])); $subject = "Регистрация на сайте url_вашего_сайта"; $msg = "Ваши данные формы регистрации:\n" ."Имя: $name\n" ."Пол: $sex\n" ."Ваш email: $email\n" ."Страна: $country"; $headers = "Content-type: text/plain; charset=UTF-8" . "\r\n"; $headers .= "From: Ваше_имя <ваш_email>" . "\r\n"; $headers .= "Bcc: ваш_email". "\r\n"; if(!empty($name) && !empty($sex) && !empty($email) && !empty($country) && filter_var($email, FILTER_VALIDATE_EMAIL)){ mail($email, $subject, $msg, $headers); echo "Спасибо! Вы успешно зарегистрировались."; } ?> </p><p><b>Примечание </b><br> В переменной $subject укажите текст, который будет отображаться как заголовок письма;<br> Ваше_имя — здесь вы можете указать имя, которое будет отображаться в поле «от кого письмо» ;<br> url_вашего_сайта замените на адрес сайта с формой регистрации;<br> ваш_email замените на ваш адрес электронной почты;<br> $headers .= "Bcc: ваш_email". "\r\n"; отправляет скрытую копию на ваш адрес электронной почты.</p> <p>В формате данного урока создадим <b>форму авторизации на CSS </b>, покажу, как подключать шрифтовые иконки, каким образом задавать прозрачность у элементов, задействуем в форме анимированные эффекты при наведение.</p> <h3>Каркас формы в HTML</h3> <p>Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.</p> <p>Создаем блок, который будет являться контейнер для формы. Присвоим ему класс .container , в нем размещаем форму с input Первый input для ввода логина <span>type="text" name="username" placeholder="Введите логин" </span>, второй <span>input type="password" name="password" placeholder="Введите пароль" </span> принимает пароль и за ним кнопка submit . Ниже размещаем надпись для восстановления пароля, сделаем ее простой ссылкой.</p><p> <div class="container"> <form> <input type="text" name="username" placeholder="Введите логин"> <input type="password" name="password" placeholder="Введите пароль"> <input type="submit" name="submit" value="ВОЙТИ"> Восстановить пароль </form> </div> </p><h3>Описываем в CSS элементы формы</h3> <p>Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.</p><p> <link rel="stylesheet" href="css/style.css" type="text/css"> </p><p>Я предлагаю на задний фон поставить изображение, для этого создадим дополнительную директорию img , и поместим в нее свое изображение. Подключаем картинку в style.css для body . Прописываем путь до картинки, выходим с текущей директории, заходим в папочку img , и далее название картинки.<br></p><p>Body{ background-image: url("../img/bg.png"); } </p><p>A{ color: #fff; } a:hover{ text-decoration: none; } </p><p>Предадим стили контейнеру с формой .container . Зададим ширину в 450 пик., и временно установим высоту в 500 пик. Зададим цвет #182134 , и отцентрируем ее посередине экрана margin: 250px auto 0 auto; . Текст в нутрии блока размещаем по центру, сверху сделаем отступ в 20 пик.<br></p><p>Container{ width:450px; height: 500px; background-color: #182134; margin: 250px auto 0 auto; text-align: center; } </p><p>Оформим затем input для ввода логина и пароля. Что бы не затронуть кнопку, отберем их по атрибутам text и password , указываем ширину в 300 пик. , высоту в 50 пик. Текст увеличиваем на 18 пик., сделаем отступы между ними в 25 пик., закруглим углы border-radius: 4px; , текст сдвинем на 10 пик. влево.</p><p>Input,input{ width: 300px; height:50px; font-size: 18px; margin-bottom: 25px; border-radius: 4px; padding-left: 10px; } </p><p>Затем отцентруем inpyt , для этого обернем их в дополнительный блок и присвоим класс .dws-input . Сделаем перенос строки после кнопки, и вверху перед кнопкой вставим картинку с нашим логотипом. Для этого скопируем ее в папку img , и пропишем к ней путь img src="img/men.png" .<br></p><p> <div class="container"> <img src='https://i2.wp.com/img/men.png' loading=lazy> <form> <div class="dws-input"> <input type="text" name="username" placeholder="Введите логин"> </div> <div class="dws-input"> <input type="password" name="password" placeholder="Введите пароль"> </div> <input type="submit" name="submit" value="ВОЙТИ"><br /> Восстановить пароль </form> </div> </p><p>Далее опишем ее стили. Картинке присвоим ширину и высоту по 120 пик. , затем подымем ее чуть выше формы margin: -60px 0 30px 0; , делаем об водку в 5 пик. border: 5px solid #1a394f; , закругляем углы в 50%.</p><p>Container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; } </p><p>Теперь опишем стили кнопки. Присвоим ей класс .dws-submit , и назначаем ей стили. Назначаем отступы, увеличим текст на 15 пик., делаем его белым, а фон кнопки синим, убираем об водку и сделаем в низу плашку, а также курсор Pointer .</p><p>Dws-submit { padding: 13px 30px; margin: 5px 0 20px 0; font-size: 15px; color: #fff; background-color: #2ca8c6; border: none; border-bottom: 4px solid #6ee9fd; cursor: pointer; } </p><p>Чтобы отцентровать инпуты и кнопку, поместим их отдельно каждый в свой блок. Опишем стили кнопке при наведении. Делаем плавный переход, цвет кнопки меняем на белый, а в тоже время шрифт будет меняться на темный.</p><p>Dws-submit:hover{ transition: all 0.5s; background: #fff; color: #2c536c; } </p><p>Сделаем, сверху нашей формы синею плашку, box-shadow: 0 -5px 0 #3adbfd; , и добавим ее к картинке box-shadow: 0 -5px 0 #3adbfd; . Сделаем фон формы немного прозрачнее, для этого пропишем этот цвет в формате RGBA .</p> <p>Я пользуюсь сервисом w3schools.com , спускаемся вниз до Color Picker , в форму введем наш цвет и преобразуем его в RGB . Копируем, вставляем в стиль контейнера.</p><p>Container{ width:450px; height: 500px; background-color: rgba(24, 33, 52, 0.7); margin: 250px auto 0 auto; text-align: center; box-shadow: 0 -5px 0 #3adbfd; } .container img{ width:120px; height:120px; margin: -60px 0 30px 0; border: 5px solid #1a394f; border-radius: 50%; box-shadow: 0 -5px 0 #3adbfd; } </p><p>Для эффекта, закруглим нижние углы, для этого пропишем border-radius: 0 0 10px 10px; .<br></p> <h3>Добавление шрифтовых иконок</h3> <p>Добавим иконки в виде шрифтов, переходим на сервис fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.</p><p> <link rel="stylesheet" href="css/font-awesome.css" type="text/css"> </p><p>Отберем иконки для наших инпутов, для этого переходим на страничку <b>Icons </b>, первый подключим стиль для ввода логина, используем <b>user </b>, копируем его код <b>f007 </b>, и описываем его в стилях при помощи псевдоэлемента.</p> <p>Подключаем шрифты font-family: "FontAwesome"; ,затем саму иконку, позиционируем ее абсолютно поля, увеличим ее на 30 пик, отцентруем и изменим цвет.</p><p>Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } </p><p>Немного подвинем текст в input - padding-left: 40px; .</p> <p>Отберем вторую иконку с названием <b>lock </b>, копируем ее код <b>f023 </b>, и описываем ее стили.</p> <p>Для этого отбираем второй элемент <span>.dws-input:nth-child(2)::before{} </span>, и прописываем картинку content: "<b>\f023 </b>";. <br></p><p>Dws-input::before{ font-family: "FontAwesome"; content: "\f007"; position: absolute; font-size: 30px; padding: 10px 0 0 7px; color: #2c536c; } .dws-input:nth-child(2)::before{ content: "\f023"; } </p><p>Dws-input:hover::before{ color: #319ebc; transition: all 0.3s; } </p><p>А также, стили наведение для инпутов. <br></p><p>Dws-input input:hover{ box-shadow: 0 0 6px 3px rgba(58, 219, 253, 0.35); } </p><p> <i class="fa fa-vk" aria-hidden="true"></i> <i class="fa fa-twitter" aria-hidden="true"></i> <i class="fa fa-facebook" aria-hidden="true"></i> <i class="fa fa-google-plus-official" aria-hidden="true"></i> <i class="fa fa-odnoklassniki" aria-hidden="true"></i> </p><p>Для удобства обернем их в блок с классом .social и опишем их стили. Изменим их цвет на белый, увеличим на 20 пик., сделаем шириной в 20 пик., и дадим отступы.<br></p><p>Dws-social i{ color: #fff; font-size: 20px; width: 20px; padding: 10px; } </p><p>Затем опишем стили при наведении. Сделаем белый блок, фон иконки изменим на темный, закруглим углы и при наведение отобразим курсор.<br></p><p>Social i:hover{ background-color: #fff; color: #1a394f; border-radius: 5px; cursor: pointer; } </p><p>Уберем высоту блока формы, которую задавали в самом начале, а в место ее добавим нижний отступ padding-bottom: 20px; .</p> <p>В принцыпе и все, получилась довольно симпатичная форма, которую можно подключить на сайт и использовать для авторизации.</p> <p>Пробуйте сделать на примере данного урока что нибудь свое оригинальное, тренируйтесь, и не забывайте делится данным материалом.</p> <br> Здравствуй, дорогой хабрадруг! В этом туториале мы научимся создавать две формы HTML5: форма входа и форма регистрации. Эти формы будут меняться друг с другом местами с помощью псевдо-класса CSS3 :target . Мы будем использовать CSS3 и шрифт с иконками. Идея этого демо в том, чтобы показать пользователю форму входа и предоставить ему ссылку “перехода” к форме регистрации. <br> В этом туториале я подробно расскажу о том, как создавать эффект как в Демо 1 .<h3> HTML </h3> <div id="container_demo" >  <div id="wrapper"> <div id="login" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1>Log in</h1> <p> <label for="username" class="uname" data-icon="u" > Your email or username </label> <input id="username" name="username" required="required" type="text" placeholder="myusername or mymail@mail.com"/> </p> <p> <label for="password" class="youpasswd" data-icon="p"> Your password </label> <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> </p> <p class="keeplogin"> <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> <label for="loginkeeping">Keep me logged in</label> </p> <p class="login button"> <input type="submit" value="Login" /> </p> <p class="change_link">Not a member yet ? Join us </p> </form> </div> <div id="subscribe" class="animate form"> <form action="mysuperscript.php" autocomplete="on"> <h1> Sign up </h1> <p> <label for="usernamesignup" class="uname" data-icon="u">Your username</label> <input id="usernamesignup" name="usernamesignup" required="required" type="text" placeholder="mysuperusername690" /> </p> <p> <label for="emailsignup" class="youmail" data-icon="e" > Your email</label> <input id="emailsignup" name="emailsignup" required="required" type="text" placeholder="mysupermail@mail.com"/> </p> <p> <label for="passwordsignup" class="youpasswd" data-icon="p">Your password </label> <input id="passwordsignup" name="passwordsignup" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p> <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">Please confirm your password </label> <input id="passwordsignup_confirm" name="passwordsignup_confirm" required="required" type="password" placeholder="eg. X8df!90EO"/> </p> <p class="signin button"> <input type="submit" value="Sign up"/> </p> <p class="change_link">Already a member ? Go and log in </p> </form> </div> </div> </div> <br> Здесь мы использовали несколько приемов HTML5. Например, элемент <i>type=password </i> автоматически скрывает то, что пользователь печатает и заменяет символы точками или звездочками (зависит от браузера). Элемент <i>type=email </i> позволяет браузеру проверить правильность формата <a href="/useful-programs/bystryi-email-bez-registracii-sozdaem-odnorazovye-email-adresa.html">email адреса</a>. Кроме того, мы использовали параметр <i>require=required </i>; браузеры, поддерживающие данный параметр не позволят пользователю отправить форму до тех пор, пока поле не заполнено, JavaScript здесь не требуется. Параметр <i>autocomplete=on </i> будет автоматически заполнять некоторые поля. Мы также использовали замещающийся текст, который поможет пользователю при заполнении формы.<p>Теперь о двух хитрых моментах. Вы наверное заметили две ссылки <a href> в начале формы. Этот ловкий прием позволит нашей формы вести себя правильно при работе с якорями (anchors).</p><p>Второй момент связан с применением шрифта с иконками. Мы будем использовать data-attribute , чтобы отобразить иконки. Устанавливая параметр <i>data-icon=”icon_character” </i> с соответствующим символов в HTML, мы должны назначить лишь одно правило в CSS для установления стиля всех иконок. Подробнее об этом приеме можно почитать на сайте: 24 Ways: Displaying Icons with Fonts and Data- Attributes . </p><h2> CSS </h2> Для чистоты кода я пропущу базовые параметры (html, body и т.п.), но вы сможете найти их в исходных файлах. Повторяю, что я использую приемы CSS3, которые не будут работать во всех браузерах. Итак, давайте же приступим!<h4>Стилизуем формы, используя CSS3</h4> Во-первых, давайте назначим нашим формам базовый стиль.<p> #subscribe, #login{ position: absolute; top: 0px; width: 88%; padding: 18px 6% 60px 6%; margin: 0 0 35px 0; background: rgb(247, 247, 247); border: 1px solid rgba(147, 184, 189,0.8); box-shadow: 0pt 2px 5px rgba(105, 108, 109, 0.7), 0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset; border-radius: 5px; } #login{ z-index: 22; } </p><p>Здесь мы назначим свойства для шапки:</p><p> /**** текст ****/ #wrapper h1{ font-size: 48px; color: rgb(6, 106, 117); padding: 2px 0 10px 0; font-family: "FranchiseRegular","Arial Narrow",Arial,sans-serif; font-weight: bold; text-align: center; padding-bottom: 30px; } /** На донный момент только webkit поддерживает background-clip:text; **/ #wrapper h1{ background: -webkit-repeating-linear-gradient(-45deg, rgb(18, 83, 93) , rgb(18, 83, 93) 20px, rgb(64, 111, 118) 20px, rgb(64, 111, 118) 40px, rgb(18, 83, 93) 40px); -webkit-text-fill-color: transparent; -webkit-background-clip: text; } #wrapper h1:after{ content:" "; display:block; width:100%; height:2px; margin-top:10px; background: linear-gradient(left, rgba(147,184,189,0) 0%, rgba(147,184,189,0.8) 20%, rgba(147,184,189,1) 53%, rgba(147,184,189,0.8) 79%, rgba(147,184,189,0) 100%); } </p><p>Замечу, что сегодня только браузеры с webkit поддерживают <i>background-clip: text </i>, поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр <i>background-clip: text </i> работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр <i>-webkit-text-fill-color: transparent </i> позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.</p><p>Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.</p><p>Теперь давайте позаботимся о полях ввода и придадим им приятный вид.</p><p> /**** advanced input styling ****/ /* placeholder */ ::-webkit-input-placeholder { color: rgb(190, 188, 188); font-style: italic; } input:-moz-placeholder, textarea:-moz-placeholder{ color: rgb(190, 188, 188); font-style: italic; } input { outline: none; } </p><p>Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.</p><p> /* все поля исключают submit и checkbox */ #wrapper input:not(){ width: 92%; margin-top: 4px; padding: 10px 5px 10px 32px; border: 1px solid rgb(178, 178, 178); box-sizing: content-box; border-radius: 3px; box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset; transition: all 0.2s linear; } #wrapper input:not():active, #wrapper input:not():focus{ border: 1px solid rgba(91, 90, 90, 0.7); background: rgba(238, 236, 240, 0.2); box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.9) inset; } </p><p>Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.</p><p>Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут <i>data-icon </i>? Именно в него нужно вставить букву. Я использовал <i>data-icon=’u’ </i> для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face. </p><p> @font-face { font-family: "FontomasCustomRegular"; src: url("fonts/fontomas-webfont.eot"); src: url("fonts/fontomas-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/fontomas-webfont.woff") format("woff"), url("fonts/fontomas-webfont.ttf") format("truetype"), url("fonts/fontomas-webfont.svg#FontomasCustomRegular") format("svg"); font-weight: normal; font-style: normal; } /** магический трюк! **/ :after { content: attr(data-icon); font-family: "FontomasCustomRegular"; color: rgb(106, 159, 171); position: absolute; left: 10px; top: 35px; width: 30px; } </p><p>Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр <i>content: attr(data-icon) </i>, чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.</p><p>Теперь назначим правила для кнопки отправки формы.</p><p> /*стилизуем обе кнопки*/ #wrapper p.button input{ width: 30%; cursor: pointer; background: rgb(61, 157, 179); padding: 8px 5px; font-family: "BebasNeueRegular","Arial Narrow",Arial,sans-serif; color: #fff; font-size: 24px; border: 1px solid rgb(28, 108, 122); margin-bottom: 10px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5); border-radius: 3px; box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.07) inset, 0px 0px 0px 3px rgb(254, 254, 254), 0px 5px 3px 3px rgb(210, 210, 210); transition: all 0.2s linear; } #wrapper p.button input:hover{ background: rgb(74, 179, 198); } #wrapper p.button input:active, #wrapper p.button input:focus{ background: rgb(40, 137, 154); position: relative; top: 1px; border: 1px solid rgb(12, 76, 87); box-shadow: 0px 1px 6px 4px rgba(0, 0, 0, 0.2) inset; } p.login.button, p.signin.button{ text-align: right; margin: 5px 0; } </p><p>Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.</p><p>Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:</p><p> /* стилизуем чекбокс "запомнить меня"*/ .keeplogin{ margin-top: -5px; } .keeplogin input, .keeplogin label{ display: inline-block; font-size: 12px; font-style: italic; } .keeplogin input#loginkeeping{ margin-right: 5px; } .keeplogin label{ width: 80%; } </p><p>Стилизуем подвал формы, используя множественные линейные градиенты, чтобы создать полосатый градиент.</p><p>P.change_link{ position: absolute; color: rgb(127, 124, 124); left: 0px; height: 20px; width: 440px; padding: 17px 30px 20px 30px; font-size: 16px ; text-align: right; border-top: 1px solid rgb(219, 229, 232); border-radius: 0 0 5px 5px; background: rgb(225, 234, 235); background: repeating-linear-gradient(-45deg, rgb(247, 247, 247) , rgb(247, 247, 247) 15px, rgb(225, 234, 235) 15px, rgb(225, 234, 235) 30px, rgb(247, 247, 247) 30px); } #wrapper p.change_link a { display: inline-block; font-weight: bold; background: rgb(247, 248, 241); padding: 2px 6px; color: rgb(29, 162, 193); margin-left: 10px; text-decoration: none; border-radius: 4px; border: 1px solid rgb(203, 213, 214); transition: all 0.4s linear; } #wrapper p.change_link a:hover { color: rgb(57, 191, 215); background: rgb(247, 247, 247); border: 1px solid rgb(74, 179, 198); } #wrapper p.change_link a:active{ position: relative; top: 1px; } </p><p>Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!</p><h4>Создаем анимацию</h4> Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:<p> #register{ z-index: 21; opacity: 0; } </p><p>Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.</p><p>Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр <i>display: none </i>. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).</p><p> #toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; } </p><p>Вот, что происходит: когда мы кликаем на кнопку <i>Присоединиться </i>, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием <i>fadeInLeft </i>. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.<br> Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.</p><p>Animate{ animation-duration: 0.5s; animation-timing-function: ease; animation-fill-mode: both; } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); } 100% { opacity: 1; transform: translateX(0); } } </p><p>Форма, которая “исчезает”, будет иметь анимацию затемнения влево:</p><p> #toregister:target ~ #wrapper #login, #tologin:target ~ #wrapper #register{ animation-name: fadeOutLeftBig; } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); } 100% { opacity: 0; transform: translateX(-20px); } } </p><p>Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.</p><p>Вот и все, друзья. Надеюсь вам понравился этот туториал!</p><p><b>Заметим, что в некоторых браузерах параметр <i>background-clip: text </i> не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет. </b></p><p><b>P.S. </b> Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!</p><p>Теги: Добавить метки</p> <p>Поле для ввода пароля - обычное текстовое поле, вводимый текст в котором в зависимости от браузера отображается звёздочками или точками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Хотя вводимый текст и не показывается на экране, на сервер введённая информация передаётся в <a href="/useful-programs/kak-otkryt-xml-fail-v-chitaemom-vide-chem-otkryt-xml.html">открытом виде</a> без шифрования. Поэтому использование этого поля не обеспечивает безопасности данных и их можно перехватить.</p><p>Синтаксис создания следующий.</p><p> <input type="password" атрибуты> </p><p>Атрибуты совпадают с атрибутами текстового поля и перечислены в табл. 1.</p><p>Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить свои полномочия. В примере 1 показано, как создавать подобные поля.</p><p>Пример 1. Поле с паролем</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Поле с паролем</title> </head> <body> <form action="handler.php"> <p><strong>Логин:</strong> <input maxlength="25" size="40" name="login"></p> <p><strong>Пароль:</strong> <input type="password" maxlength="25" size="40" name="password"></p> <p><input type="submit" value="Войти"></p> </form> </body> </html> </p><p>В результате получим следующее (рис. 1).</p><p>Рис. 1. Вид поля с паролем</p><p>К полю с паролем применимы стилевые свойства задающие параметры цвета, фона, рамки и др. В примере 2 показано добавление фоновых картинок к полям формы. За основу возьмём стиль как для текстовых полей.</p><p>Пример 2. Добавление изображения в текстовое поле</p><p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Поле с паролем</title> <style> .textField, .passField { width: 100%; /* Ширина поля */ padding: 10px; /* Поля */ box-sizing: border-box; /* Алгоритм расчёта ширины */ box-shadow: inset 0 1px 5px rgba(0,0,0,0.2); /* Тень внутри */ border: 1px solid #ccc; /* Параметры рамки */ color: #ff6d37; /* Цвет текста */ background: url(/example/image/user.png) no-repeat 5px 50%; /* Картинка пользователя */ padding-left: 30px; /* Расстояние от левого края */ } .passField { background: url(/example/image/lock.png) no-repeat 5px 50%; /* Картинка для поля с паролем */ } </style> </head> <body> <form action="handler.php"> <p><input maxlength="25" name="login" class="textField"></p> <p><input type="password" maxlength="25" name="password" class="passField"></p> <p><input type="submit" value="Войти"></p> </form> </body> </html> </p><p>Результат данного примера показан на рис. 2. Картинки добавляются в качестве фона, поэтому текст обязательно надо сдвинуть вправо через padding-left , в противном случае он будет выводиться поверх изображения.</p> <p>DesignMaz have collected list of the best <b>CSS </b>/<b>HTML Login Form Templates </b> for Web Designers, Developers that they can download and use to create a <b>form </b>and most of them also have pre built <b>HTML </b>validation features as well as some option jQuery validation (like the <b>Login </b>/<b>Register form </b> with pass meter below).</p><h3>Free Responsive Flat Login Form Widget Template</h3><p>Free Responsive Flat New Login Form Widget Template for your websites. This Login form is designed using web technologies such as . It is completely free for download and can be use for your website or application sign in.</p><h3>Forms Plus</h3><h3>PopForms</h3><h3>Flat Form with Bootstrap 3</h3><p>This is a flat modern css3 design based on Booststrap 3 Framework. Responsive design with multi-color multipurpose web forms with pure css3.</p><h3>Responsive Static Login Form HTML5 Template</h3><p>Free Responsive Static Login Form HTML5 CSS3 Template. You can download this HTML CSS Sign In Widget which can be used in you web projects.</p><h3>Free Responsive Flat and Clean Login Form Template</h3><p>A Responsive Flat and Clean Login Form HTML Template designed using web technologies such as HTML5 and CSS3. You can free download and use for your website or application sign in.</p><h3>Responsive Flat Purple Login Form Template</h3><p>A free Responsive Flat Purple Login Form Template built with HTML5, and CSS3. It is completely free for download and can be used straight away in your website or app.</p><h3>Bootstrap login with social buttons</h3><p>Any <b>Twitter Bootstrap </b> developer will love these <b>free Responsive Bootstrap login form template </b> with social buttons . This<b> Responsive Bootstrap login form template </b> is a Simple and Clean <b>login form website template </b> base on Bootstrap 3.1.0 .</p><p>Easy to use the <b>beautiful </b>and colorful <b>css login form </b> for their own website. Simply insert into the existing <b>CSS </b>file and enjoy <a href="/configuring-wi-fi/podklyuchenie-the-new-ipad-k-televizoru-pri-pomoshchi-apple-tv-tehnologiya-airplay-i-e.html">the new</a> <b>CSS login form </b>. Created with rounded corners and nice look. It degrades nicely on older browsers, e.g. IE7 and IE8.</p><h3></h3><p><b>MetroLogin </b> is a Windows 8’s <b>Login form </b> simulator that gives you this ability to make a login page for your website’s users or a login Page for your admin panel with a nice metro design.</p><h3>Twitter Inspired Login Form – Jquery</h3><p>This is a drop down <b>login form </b> similar to the one found on twitter. It comes complete with <b>JavaScript </b>, <b>CSS </b> and <b>HTML </b> . Just like Twitters <b>login </b> in <b>form </b> it comes with enhancements like tooltips and a compact <b>login form </b> and a clicked state button. It uses <b>CSS3 </b> to reduce the <a href="/internet-tips/sohranenie-100-nfs-sohraneniya-dlya-need-for-speed-most-wanted-2005-skachat-chity.html">need for</a> images and it degrades nicely in non <b>CSS </b> browsers. It has great browser support and works in most modern browsers and even older ones like <a href="/the-security-of-your-computer/pochemu-ne-otkryvaetsya-yandeks-brauzer-internet-explorer-ne-otkryvaetsya-ssylka-internet-explorer.html">Internet explorer</a> 6 and 7.</p><p>This is clean and pleasant designed <b>login </b> & <b>register HTML </b> user interface with error handling and social buttons.</p><p><b>Clean and usable login </b> & <b>register form </b> is for every developer. It’s very fast pure <b>CSS </b>. Error handling states, social buttons and forgotten password state is in there.</p><h3>Zi-Popup Login Forms – Pure CSS3</h3><p>Clean and usable <b>login </b> & <b>register form </b> is for every developer. It’s very fast <b>CSS form </b> with jQuery validation. Error handling, social buttons and forgotten password handling is in there. Bring to live with a jQuery.</p><h3>Minimalistic Login/Register Form + Live Validation</h3><p><b>Minimalistic Designed Login </b>, <b>Register </b> and <b>Forgot Template Forms </b> Pack. Packed with jQuery Live Validation, 7 color styles, 3 different form size options, title animation, custom checkbox, tooltip hints and jQuery Error Handling.</p><h3>Summer Forms – Login And Registration Forms</h3><p><b>Summer Forms </b> are coupled <b>login </b> and <b>registration forms </b> having a set of impressing effects bundled <a href="/solving-problems/vyskakivaet-komandy-net-now-send-the-package-you-want-to-apply-to-the-device-with-adb.html">with the</a> bright modern design. The flexibility of these <b>responsive forms </b> <b>Summer Forms </b> may be become the first brick of your new web site or may be just a replacement of your old <b>forms </b>. Every year the people get more exacting. The <b>forms </b> are well thought out and may satisfy any user.</p><p><b>Not </b> so long ago, in order to achieve such effects, we used JS. But, now, <b>CSS3 </b> has all the necessary tools for making pop-up windows too.</p><h3>Moon Forms – Login & Registration CSS Forms</h3><p><b>Moon Forms </b> are coupled <b>login </b> and <b>registration forms </b> having a modern design. The flexibility of these <b>responsive forms </b> allows placing it into any area on your site (like a widget, like a popup window, like a standalone page).</p><h3></h3><p>Tab and <b>form </b> developed by using only <b>CSS3 </b>, no javascript used. It is simple , clean and browser compatible. Very Easy to implement on any kind of website.</p><p>Features a large collection of <b>form </b> styles that are used regularly in websites. You get Search <b>Forms </b>, <b>Login Forms </b>, <b>Contact Forms </b> and <b>General Form </b> styles. Further all these forms are available in Dark and Light coloured versions, so you get a total of 224 form styles! The <b>login </b>, contact and general <b>forms </b> also have focus and validation error styles defined in the css.</p><p> <b>Form Framework </b> that strikes a balance between simplicity and elegance.<b>CSS3 Responsive Forms </b> kit is simple, clean and fresh modern <b>form </b> pack develop using <b>bootstrap </b>.</p><h3>Day/Night Login Page</h3><p><b>Day / Night Login Forms </b> – has the net and unique design. In the kit you get 2 folder with 6 forms. In two colors white and dark. As in the kit includes 4 style buttons. Thanks to the <b>Day / Night Login Forms </b> developers can save time and money on developing the design. And the designers can see an example of the correct organization of layers.</p><p>Is a set of <b>beautiful form </b> elements. It has large amount of customized items, different color schemes, <b>responsive </b> grid system and allows you to create <b>forms </b> of any complexity and for any needs: <b>login </b>, <b>registration </b>, <b>contacts </b>, <b>review </b>, <b>order </b>, <b>comment </b>, <b>checkout </b>, etc.</p><p>Nice, clean and easy to use <b>CSS3 login </b> panel which 3 included color schemes.</p><h3>Golden Forms – Responsive CSS3 Form Framework</h3><p><b>Golden Forms </b> is a simple and professional <b>Form </b> Framework that strikes a balance between simplicity and elegance. The framework is built with pure <b>CSS3 </b> + <b>HTML5 </b> (no images), features a clean consistent <b>Form UI </b>, <b>responsive </b> 12 column grid, and can be used to build any kind of <b>Web Forms </b> quickly whether simple or complex, without special <b>CSS </b> and coding knowledge.<br><img src='https://i2.wp.com/cdn.designsmaz.com/wp-content/uploads/2014/02/3D-Flip-Log-in-Sign-up.jpg' align="center" width="100%" loading=lazy></p><p> – has a clean design and a powerfull <b>3D Flip Effect </b> which give user a unique exprince and a fast way to complete the process . In the kit you get 1 psd file with 3 forms styes.</p><h3>Responsive HTML5 – jQuery Sign In – Registration Form</h3><p><b>Responsive HTML5 Sign In </b> / <b>Registration form </b>, with jQuery effects and <b>CSS3 </b> customization.</p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </article> <div class="center"><em>Эта статья также доступна на следующих языках: <a href="/th/ebay-100/">Тайский</a><br><br></em> </div> <div class="share42init" data-url="/luchshie-magazinyi-ebay-spisok-100/" data-title="Лучшие магазины eBay: список 100+"></div> <script type="text/javascript" src="/wp-includes/share42/share42.js"></script> <div id="disqus_thread"> <div id="dsq-content"> <ul id="dsq-comments"> <li class="comment even thread-even depth-1" id="dsq-comment-1071"> <div id="dsq-comment-header-1071" class="dsq-comment-header"> <cite id="dsq-cite-1071"> <span id="dsq-author-user-1071">Next</span> </cite> </div> <div id="dsq-comment-body-1071" class="dsq-comment-body"> <div id="dsq-comment-message-1071" class="dsq-comment-message"><p>Огромное Вам СПАСИБО за очень полезную информацию в статье. Очень понятно все изложено. Чувствуется, что проделана большая работа по анализу работы магазина eBay</p> </div> </div> <ul class="children"> <li class="comment odd alt depth-2" id="dsq-comment-1072"> <div id="dsq-comment-header-1072" class="dsq-comment-header"> <cite id="dsq-cite-1072"> <a id="dsq-author-user-1072" href="/" target="_blank" >rootshell</a> </cite> </div> <div id="dsq-comment-body-1072" class="dsq-comment-body"> <div id="dsq-comment-message-1072" class="dsq-comment-message"><p>Спасибо вам и другим постоянным читателям моего блога. Без вас у меня не было бы достаточной мотивации, чтобы посвящать много времени ведению этого сайта. У меня мозги так устроены: люблю копнуть вглубь, систематизировать разрозненные данные, пробовать то, что раньше до меня никто не делал, либо не смотрел под таким углом зрения. Жаль, что только нашим соотечественникам из-за кризиса в России отнюдь не до шоппинга на eBay. Покупают на Алиэкспрессе из Китая, так как там в разы дешевле товары (часто в ущерб качеству). Но онлайн-аукционы eBay, Amazon, ETSY легко дадут китайцам фору по ассортименту брендовых вещей, винтажных вещей, ручной работы и разных этнических товаров.</p> </div> </div> <ul class="children"> <li class="comment even depth-3" id="dsq-comment-1073"> <div id="dsq-comment-header-1073" class="dsq-comment-header"> <cite id="dsq-cite-1073"> <span id="dsq-author-user-1073">Next</span> </cite> </div> <div id="dsq-comment-body-1073" class="dsq-comment-body"> <div id="dsq-comment-message-1073" class="dsq-comment-message"><p>В ваших статьях ценно именно ваше личное отношение и анализ темы. Вы этот блог не бросайте, я сюда часто заглядываю. Нас таких много должно быть. Мне на эл. почту пришло недавно предложение о том, что научат торговать на Амазоне и eBay. И я вспомнила про ваши подробные статьи об этих торг. площ. Перечитала все заново и сделала вывод, что курсы- это лохотрон. Сама на eBay еще ничего не покупала. Я не из России , а из Казахстана (г. Алматы). Но нам тоже лишних трат пока не надо. Желаю вам удачи и берегите себя в азиатских краях.</p> </div> </div> </li> </ul> </li> </ul> </li> <li class="comment odd alt thread-odd thread-alt depth-1" id="dsq-comment-1281"> <div id="dsq-comment-header-1281" class="dsq-comment-header"> <cite id="dsq-cite-1281"> <a id="dsq-author-user-1281" href="/" target="_blank" >rootshell</a> </cite> </div> <div id="dsq-comment-body-1281" class="dsq-comment-body"> <div id="dsq-comment-message-1281" class="dsq-comment-message"><p>Еще приятно, что попытки eBay по руссификации интерфейса для пользователей из России и стран СНГ, начали приносить плоды. Ведь подавляющая часть граждан стран бывшего СССР не сильна познаниями иностранных языков. Английский язык знают не более 5% населения. Среди молодежи — побольше. Поэтому хотя бы интерфейс на русском языке — это большая помощь для онлайн-шоппинга на этой торговой площадке. Ебей не пошел по пути китайского собрата Алиэкспресс, где совершается машинный (очень корявый и непонятный, местами вызывающий смех) перевод описания товаров. Надеюсь, что на более продвинутом этапе развития искусственного интеллекта станет реальностью качественный машинный перевод с любого языка на любой за считанные доли секунды. Пока имеем вот что (профиль одного из продавцов на ебей с русским интерфейсом, но англоязычным описанием):<br /> https://uploads.disquscdn.com/images/7a52c9a89108b922159a4fad35de0ab0bee0c8804b9731f56d8a1dc659655d60.png</p> </div> </div> </li> </ul> </div> </div> </div> <div id="sidebar-bottom"> <aside id="sidebar-1" class="sidebar"> <div id="categories-2" class="widget widget_categories"><h4 class="widgettitle">Разделы</h4> <ul> <li class="cat-item"><a href="/category/configuring-windows/">Настройка Windows</a> </li> <li class="cat-item"><a href="/category/hardware-solutions/">Аппаратные решения</a> </li> <li class="cat-item"><a href="/category/windows-10/">Windows 10</a> </li> <li class="cat-item"><a href="/category/internet-tips/">Интернет-подсказки</a> </li> <li class="cat-item"><a href="/category/useful-programs/">Полезные программы</a> </li> <li class="cat-item"><a href="/category/configuring-wi-fi/">Настройка Wi-Fi</a> </li> <li class="cat-item"><a href="/category/tips-for-beginners/">Советы начинающим</a> </li> <li class="cat-item"><a href="/category/solving-problems/">Решение проблем</a> </li> </ul> </div><div id="text_icl-3" class="widget widget_text_icl"> <div class="textwidget"><p><a href="" rel="alternate" type="application/rss+xml"><img src="//feedburner.google.com/fb/images/pub/feed-icon32x32.png" alt="" style="vertical-align:middle;border:0"/ loading=lazy></a> <a href="" rel="alternate" type="application/rss+xml">Подписаться на RSS</a></p></div> </div><div id="text_icl-7" class="widget widget_text_icl"> <div class="textwidget"><div class="center"></div></div> </div><div id="text_icl-8" class="widget widget_text_icl"> <div class="textwidget"></div> </div><div id="text_icl-13" class="widget widget_text_icl"> </div><div id="text_icl-14" class="widget widget_text_icl"> </div> </aside> <aside id="sidebar-2" class="sidebar"> </aside> </div> </section> <footer id="footer"> <div class="center">Разрешается копирование материалов сайта с обязательной ссылкой на <a href="/">makewap.ru</a> </div> </footer> </div> <script type='text/javascript'> /* <![CDATA[ */ var scriptParams = { "google_search_engine_id":"007248068859778613277:ewdxetioq-u"} ; /* ]]> */ </script> <script type='text/javascript' src='https://makewap.ru/wp-content/plugins/wp-google-search/assets/js/google_cse_v2.js?ver=1'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9'></script> <script> window.__bp_session_timeout = '900'; window.__bp_session_freezing = 0; !function() { window.bizpanda || (window.bizpanda = { }), window.bizpanda.bp_can_store_localy = function() { return !1 } , window.bizpanda.bp_ut_get_cookie = function(e) { for( var n = e + "=", i = document.cookie.split(";"), o = 0; o < i.length; o++ ) { for( var t = i[o]; " " == t.charAt(0); ) { t = t.substring(1); } if( 0 == t.indexOf(n) ) { return decodeURIComponent(t.substring(n.length, t.length)) } } return !1 } , window.bizpanda.bp_ut_set_cookie = function(e, n, i) { var o = new Date; o.setTime(o.getTime() + 24 * i * 60 * 60 * 1e3); var t = "expires=" + o.toUTCString(); document.cookie = e + "=" + encodeURIComponent(n) + "; " + t + "; path=/" } , window.bizpanda.bp_ut_get_obj = function(e) { var n = null; return (n = window.bizpanda.bp_can_store_localy() ? window.localStorage.getItem("bp_ut_session") : window.bizpanda.bp_ut_get_cookie("bp_ut_session")) ? (n = JSON.parse(n), n.started + 1e3 * e < (new Date).getTime() && (n = null), n) : !1 } , window.bizpanda.bp_ut_set_obj = function(e) { e.started && window.__bp_session_freezing || (e.started = (new Date).getTime()); var e = JSON.stringify(e); window.bizpanda.bp_can_store_localy() ? window.localStorage.setItem("bp_ut_session", e) : window.bizpanda.bp_ut_set_cookie("bp_ut_session", e, 5e3) } , window.bizpanda.bp_ut_count_pageview = function() { var e = window.bizpanda.bp_ut_get_obj(window.__bp_session_timeout); e || (e = { }), e.pageviews || (e.pageviews = 0), 0 === e.pageviews && (e.referrer = document.referrer, e.landingPage = window.location.href, e.pageviews = 0), e.pageviews++, window.bizpanda.bp_ut_set_obj(e) } , window.bizpanda.bp_ut_count_locker_pageview = function() { var e = window.bizpanda.bp_ut_get_obj(window.__bp_timeout); e || (e = { }), e.lockerPageviews || (e.lockerPageviews = 0), e.lockerPageviews++, window.bizpanda.bp_ut_set_obj(e) } , window.bizpanda.bp_ut_count_pageview() } (); </script> </body> </html>