Стилизуем формы, используя CSS3

#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; }

Здесь мы назначим свойства для шапки:

/**** текст ****/ #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%); }

Замечу, что сегодня только браузеры с webkit поддерживают background-clip: text , поэтому мы сделаем полосатый фон только для webkit и привяжем его к заголовку H1. Так как параметр background-clip: text работает только в Webkit браузерах, я решил работать только со свойствами webkit. Именно поэтому я разделил CSS на две части и использовал только градиент webkit. Однако вы не должны использовать лишь webkit на своих вебсайтах! Так, например, параметр -webkit-text-fill-color: transparent позволяет нам иметь прозрачный фон, но только для браузеров webkit, все другие браузеры проигнорируют это свойство.

Мы также создали тонкую линию под заголовком с помощью элемента:after pseudo-class. Мы использовали градиент с 2px в высоту и уменьшили прозрачность по краям до нуля.

Теперь давайте позаботимся о полях ввода и придадим им приятный вид.

/**** 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; }

Во-первых, мы стилизуем поля и уберем обводку. Но будьте осторожны: обводка помогает пользователю понять, на каком поле он находится. Если же вы уберете ее, то нужно применить свойства:active и:focus.

/* все поля исключают 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; }

Здесь мы использовали псевдо класс:not, чтобы стилизовать все поля, кроме чекбоксов. Кроме того, я решил убрать обводку и добавил свойства:focus и:active.

Теперь время веселиться: шрифт с иконками. Так как мы не можем использовать псевдо-классы:before и:after, мы добавим иконку в параметр label, а затем разместим в поле. Я буду использовать библиотеку fontomas . Вы можете сами сопоставить иконки с соответствующей буквой. Помните атрибут data-icon ? Именно в него нужно вставить букву. Я использовал data-icon=’u’ для логина, ‘e’ для email, ‘p’ для пароля. Как только я выбрал буквы, я скачал шрифт и использовал генератор шрифтов fontsquirrel для конвертации в формат, пригодный для @font-face.

@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; }

Вот собственно и все. Вам не требуется иметь отдельный класс для каждой иконки. Мы использовали параметр content: attr(data-icon) , чтобы получить букву из атрибута data-icon. Таким образом, нам нужно лишь назначить шрифт, выбрать цвет и разместить иконку.

Теперь назначим правила для кнопки отправки формы.

/*стилизуем обе кнопки*/ #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; }

Трюк заключается в том, чтобы использовать box-shadow, чтобы создать несколько рамок. Естественно, вы можете использовать лишь одну рамку, но также можно и несколько. Мы будем использовать параметр length для создания “фейковой” второй белой рамки, 3px в ширину, без размытия.

Теперь стилизуем чекбокс, здесь мы ничего необычного не сотворим:

/* стилизуем чекбокс "запомнить меня"*/ .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.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; }

Сейчас вы видите, что у нас две приятные формы, но ведь мы хотим, чтобы отображалась только лишь одна из них. Пришло время анимации!

Создаем анимацию

#register{ z-index: 21; opacity: 0; }

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс:target. Вам нужно понять одну вещь по поводу:target: для перемещения мы будем использовать якоря. Нормальное поведение якоря - прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами. И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none . Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register, #tologin:target ~ #wrapper #login{ z-index: 22; animation-name: fadeInLeft; animation-delay: .1s; }

Вот, что происходит: когда мы кликаем на кнопку Присоединиться , мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft . Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться. Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.
Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

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); } }

Форма, которая “исчезает”, будет иметь анимацию затемнения влево:

#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); } }

Теперь вы можете использовать другие анимации от Dan Eden’ с помощью файла animate.css: просто измените класс.animate class и названия анимаций. Вы также обнаружите несколько других анимаций в конце файла animate-custom.css file.

Вот и все, друзья. Надеюсь вам понравился этот туториал!

Заметим, что в некоторых браузерах параметр background-clip: text не поддерживается. В Internet Explorer 9 анимации не работают. В Internet Explorer 8 и ниже псевдо-класс:target pseudo-class не поддерживается, поэтому там этот эффект вообще работать не будет.

P.S. Все замечания по поводу перевода с удовольствием приму в личку. Спасибо!

Теги: Добавить метки

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://i0.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 . Например, можно сделать фон текущего поля более темным или добавить цветную рамку, чтобы оно выделялось среди остальных:</p><p>Input:focus { background: #eaeaea; } </p><p>Ещё один полезный html5-атрибут — атрибут autofocus . Он позволяет автоматически установить фокус на нужном начальном поле для элементов <input> и <textarea> (только в один элемент каждой формы).</p> <h2>Пример создания формы регистрации</h2> <div class="form-wrap"> <div class="profile"><img src='https://i1.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><b>Примечание </b><br> action="form.php" — ссылка на файл обработчика формы. Создайте файл в кодировке UTF-8, закачайте его на сервер и замените action="form.php" на путь к файлу на вашем сервере.</p> <br><img src='https://i2.wp.com/html5book.ru/wp-content/uploads/2016/10/form-default.png' width="100%" loading=lazy> Рис. 2. Внешний вид формы по умолчанию <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> <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> <div class="clear"></div> </div> <script type="text/javascript" src="//yastatic.net/share/share.js" charset="utf-8"></script><div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="button" data-yashareQuickServices="vkontakte,odnoklassniki,facebook,twitter,moimir,lj,moikrug,gplus"></div> </noindex> </div> </article> <div class="clear"></div> <h4 class="heading"> <i class="fa fa-hand-o-right"></i>Читайте также:</h4> <ul class="related-posts group"> <li class="related post-hover"> <article class="post-2154 post type-post status-publish format-standard has-post-thumbnail hentry category-steny"> <div class="post-thumbnail"> <a href="/windows/kak-vklyuchit-zvuk-esli-on-propal-propal-zvuk-na-kompyutere-chto-delat.html" title="Пропал звук на компьютере: что делать"> <img width="520" height="245" src="/uploads/a68913d980bceaff35882be02da6787c.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Пропал звук на компьютере: что делать" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> <a class="post-comments" href="/windows/kak-vklyuchit-zvuk-esli-on-propal-propal-zvuk-na-kompyutere-chto-delat.html"><span><i class="fa fa-comments-o"></i>0</span></a> </div> <div class="related-inner"> <h4 class="post-title"> <a href="/windows/kak-vklyuchit-zvuk-esli-on-propal-propal-zvuk-na-kompyutere-chto-delat.html" rel="bookmark" title="Пропал звук на компьютере: что делать">Пропал звук на компьютере: что делать</a> </h4> <div class="post-meta group"> <p class="post-date">2024-05-19 19:06:52</p> </div> </div> </article> </li> <li class="related post-hover"> <article class="post-2153 post type-post status-publish format-standard has-post-thumbnail hentry category-steny"> <div class="post-thumbnail"> <a href="/windows/ip-skaner-lokalnoi-seti-na-russkom-programmy-dlya-skanirovaniya-ip-adresov.html" title="Программы для сканирования IP-адресов и портов"> <img width="520" height="245" src="/uploads/7e68dc3e9160304a9b5d914b94463b6e.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Программы для сканирования IP-адресов и портов" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> <a class="post-comments" href="/windows/ip-skaner-lokalnoi-seti-na-russkom-programmy-dlya-skanirovaniya-ip-adresov.html"><span><i class="fa fa-comments-o"></i>0</span></a> </div> <div class="related-inner"> <h4 class="post-title"> <a href="/windows/ip-skaner-lokalnoi-seti-na-russkom-programmy-dlya-skanirovaniya-ip-adresov.html" rel="bookmark" title="Программы для сканирования IP-адресов и портов">Программы для сканирования IP-адресов и портов</a> </h4> <div class="post-meta group"> <p class="post-date">2024-05-19 19:06:52</p> </div> </div> </article> </li> <li class="related post-hover"> <article class="post-2152 post type-post status-publish format-standard has-post-thumbnail hentry category-steny"> <div class="post-thumbnail"> <a href="/printer/vosstanovlenie-dannyh-s-pomoshchyu-r-studio-r-studio-vosstanovlenie-udalennyh.html" title="R-Studio: восстановление удаленных файлов на компьютере Чтение диска по смещению не удалось"> <img width="520" height="245" src="/uploads/02c91cb549543ce95ff6e18f8707762b.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="R-Studio: восстановление удаленных файлов на компьютере Чтение диска по смещению не удалось" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> <a class="post-comments" href="/printer/vosstanovlenie-dannyh-s-pomoshchyu-r-studio-r-studio-vosstanovlenie-udalennyh.html"><span><i class="fa fa-comments-o"></i>0</span></a> </div> <div class="related-inner"> <h4 class="post-title"> <a href="/printer/vosstanovlenie-dannyh-s-pomoshchyu-r-studio-r-studio-vosstanovlenie-udalennyh.html" rel="bookmark" title="R-Studio: восстановление удаленных файлов на компьютере Чтение диска по смещению не удалось">R-Studio: восстановление удаленных файлов на компьютере Чтение диска по смещению не удалось</a> </h4> <div class="post-meta group"> <p class="post-date">2024-05-19 19:06:52</p> </div> </div> </article> </li> </ul> </div> </section> <div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковое меню"><i class="fa icon-sidebar-toggle"></i></a> <div class="sidebar-content"> <div class="sidebar-top group"> <p>Категории:</p> </div> <div id="categories-5" class="widget widget_categories"><h3> </h3> <ul> <li class="cat-item cat-item-16"><a href="/category/reboot/">Перезагрузка</a> </li> <li class="cat-item cat-item-16"><a href="/category/laptop/">Ноутбук</a> </li> <li class="cat-item cat-item-16"><a href="/category/printer/">Принтер</a> </li> <li class="cat-item cat-item-16"><a href="/category/algorithm/">Алгоритм</a> </li> <li class="cat-item cat-item-16"><a href="/category/subtleties/">Тонкости</a> </li> <li class="cat-item cat-item-16"><a href="/category/virus-removal/">Удаление вирусов</a> </li> <li class="cat-item cat-item-16"><a href="/category/hard-drive/">Жесткий диск</a> </li> <li class="cat-item cat-item-16"><a href="/category/pc/">ПК</a> </li> <li class="cat-item cat-item-16"><a href="/category/windows/">Windows</a> </li> </ul> </div> <div id="recent-posts-8" class="widget widget_recent_entries"> <h3>Свежие записи</h3> <ul> <li> <a href="/free-antiviruses/luchshie-draivera-dlya-karty-amd-ustanovka-draiverov-cherez-amd-radeon-software.html">Установка драйверов через AMD Radeon Software Adrenalin Edition</a> </li> <li> <a href="/algorithm/kak-otklyuchit-mestopolozhenie-v-viber-kak-posmotret-mestopolozhenie.html">Как посмотреть местоположение собеседника в вибере</a> </li> <li> <a href="/laptop/skachat-programmy-dlya-remonta-rs-vosstanovlenie-sistemy-windows.html">Восстановление системы Windows</a> </li> <li> <a href="/algorithm/programma-dlya-usileniya-zvuka-na-pk-kak-uvelichit-gromkost.html">Как увеличить громкость на ноутбуке: программы для усиления динамиков</a> </li> <li> <a href="/windows/kak-poluchit-smartfon-xiaomi-iz-kitaya-bez-problem-s-prohozhdeniem-tamozhni.html">Как получить смартфон Xiaomi из Китая без проблем с прохождением таможни</a> </li> <li> <a href="/algorithm/vai-fai-na-noutbuke-windows-10.html">Вай фай на ноутбуке windows 10</a> </li> <li> <a href="/reboot/soobshchenie-o-tom-chto-toner-zakanchivaetsya-ili-kak-mozhno-proverit.html">Как определить уровень чернил в картриджах принтера</a> </li> <li> <a href="/printer/proverka-ostatka-urovnya-tonera-i-chernil-v-printere-kak-opredelit.html">Как определить уровень чернил в картриджах принтера</a> </li> </ul> </div> </div> </div> <div class="sidebar s2"> <a class="sidebar-toggle" title="Развернуть боковое меню"><i class="fa icon-sidebar-toggle"></i></a> <div class="sidebar-content"> <div class="sidebar-top group"> <p>Популярное:</p> </div> <div id="search-4" class="widget widget_search"><form method="get" class="searchform themeform" action="/"> <div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Укажите что ищете и нажмите Enter';" onfocus="if(this.value=='Укажите что ищете и нажмите Enter')this.value='';" value="Укажите что ищете и нажмите Enter" /> </div> </form></div><div id="alxposts-4" class="widget widget_alx_posts"> <h3> </h3> <ul class="alx-posts group thumbs-enabled"> <li> <div class="post-item-thumbnail"> <a href="/virus-removal/super-bit-opisanie-super-bit-mts-opisanie-tarifa.html" title="Супер бит мтс описание тарифа"> <img width="520" height="245" src="/uploads/499719d197ac2d33fc620b30a7bf630a.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Супер бит мтс описание тарифа" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/virus-removal/super-bit-opisanie-super-bit-mts-opisanie-tarifa.html" rel="bookmark" title="Супер бит мтс описание тарифа">Супер бит мтс описание тарифа</a></p> <p class="post-item-date">2024-05-17 20:44:30</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/hard-drive/zagruzhennoe-no-ne-ustanovlennoe-obnovlenie-oshibka-nam-ne-udalos-nastroit.html" title="Ошибка: Нам не удалось настроить обновления Windows"> <img width="520" height="245" src="/uploads/6188f31d9244a57435eb742cdfdc4caa.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Ошибка: Нам не удалось настроить обновления Windows" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/hard-drive/zagruzhennoe-no-ne-ustanovlennoe-obnovlenie-oshibka-nam-ne-udalos-nastroit.html" rel="bookmark" title="Ошибка: Нам не удалось настроить обновления Windows">Ошибка: Нам не удалось настроить обновления Windows</a></p> <p class="post-item-date">2024-05-17 20:44:30</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/algorithm/kak-skryt-ili-polnostyu-ubrat-znachki-na-rabochem-stole-windows-udalenie-znachkov.html" title="Windows: Удаление значков из области уведомлений (панели задач) Как удалить в панели управления ненужные значки"> <img width="520" height="245" src="/uploads/c52a279e8e4f99bf9900130cdc90b0e0.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Windows: Удаление значков из области уведомлений (панели задач) Как удалить в панели управления ненужные значки" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/algorithm/kak-skryt-ili-polnostyu-ubrat-znachki-na-rabochem-stole-windows-udalenie-znachkov.html" rel="bookmark" title="Windows: Удаление значков из области уведомлений (панели задач) Как удалить в панели управления ненужные значки">Windows: Удаление значков из области уведомлений (панели задач) Как удалить в панели управления ненужные значки</a></p> <p class="post-item-date">2024-05-16 18:51:32</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/pc/klaviatury-na-noutbukah-nastroika-sochetaniya-klavish.html" title="Настройка дополнительных кнопок мультимедийной клавиатуры Как изменить ввод клавиатуры"> <img width="520" height="245" src="/uploads/f2bd11b1be438c137c3a0b83b091cbe0.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Настройка дополнительных кнопок мультимедийной клавиатуры Как изменить ввод клавиатуры" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/pc/klaviatury-na-noutbukah-nastroika-sochetaniya-klavish.html" rel="bookmark" title="Настройка дополнительных кнопок мультимедийной клавиатуры Как изменить ввод клавиатуры">Настройка дополнительных кнопок мультимедийной клавиатуры Как изменить ввод клавиатуры</a></p> <p class="post-item-date">2024-05-16 18:51:32</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/virus-removal/oficialnaya-proshivka-4-2-2-jelly-bean-alternativnye-proshivki-dlya.html" title="Официальная прошивка 4.2 2 jelly bean. Альтернативные прошивки для Android. Общее впечатление от CyanogenMod"> <img width="520" height="245" src="/uploads/a3fbc6b71ef8691e77c8cf407459c189.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Официальная прошивка 4.2 2 jelly bean. Альтернативные прошивки для Android. Общее впечатление от CyanogenMod" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/virus-removal/oficialnaya-proshivka-4-2-2-jelly-bean-alternativnye-proshivki-dlya.html" rel="bookmark" title="Официальная прошивка 4.2 2 jelly bean. Альтернативные прошивки для Android. Общее впечатление от CyanogenMod">Официальная прошивка 4.2 2 jelly bean. Альтернативные прошивки для Android. Общее впечатление от CyanogenMod</a></p> <p class="post-item-date">2024-05-16 18:51:32</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/virus-removal/razblokirovka-bootloader-samsung-chto-takoe-bootloader-ego-razblokirovka-i-zachem-mne.html" title="Что такое bootloader, его разблокировка, и зачем мне это нужно?"> <img width="520" height="245" src="/uploads/dea0a4e4ad892e640ea937b3e3ca654c.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Что такое bootloader, его разблокировка, и зачем мне это нужно?" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/virus-removal/razblokirovka-bootloader-samsung-chto-takoe-bootloader-ego-razblokirovka-i-zachem-mne.html" rel="bookmark" title="Что такое bootloader, его разблокировка, и зачем мне это нужно?">Что такое bootloader, его разблокировка, и зачем мне это нужно?</a></p> <p class="post-item-date">2024-05-16 18:51:32</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/laptop/2-ngff-razbiraemsya-v-soketah-klyuchah-razmerah-i-naznachenii.html" title="2 (NGFF) – разбираемся в сокетах, ключах, размерах и назначении"> <img width="520" height="245" src="/uploads/bb04ae694a579d480ab08cdc776649b6.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="2 (NGFF) – разбираемся в сокетах, ключах, размерах и назначении" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/laptop/2-ngff-razbiraemsya-v-soketah-klyuchah-razmerah-i-naznachenii.html" rel="bookmark" title="2 (NGFF) – разбираемся в сокетах, ключах, размерах и назначении">2 (NGFF) – разбираемся в сокетах, ключах, размерах и назначении</a></p> <p class="post-item-date">2024-05-15 19:10:48</p> </div> </li> <li> <div class="post-item-thumbnail"> <a href="/free-antiviruses/vaiber-ne-podklyuchaetsya-pishet-net-seti-pochemu-ne-rabotaet-viber-na.html" title="Почему не работает Viber на компьютере"> <img width="520" height="245" src="/uploads/3f2b4d1bffb50a2bf33cacf2ca30e4af.jpg" class="attachment-thumb-medium size-thumb-medium wp-post-image" alt="Почему не работает Viber на компьютере" sizes="(max-width: 520px) 100vw, 520px" / loading=lazy> </a> </div> <div class="post-item-inner group"> <p class="post-item-title"><a href="/free-antiviruses/vaiber-ne-podklyuchaetsya-pishet-net-seti-pochemu-ne-rabotaet-viber-na.html" rel="bookmark" title="Почему не работает Viber на компьютере">Почему не работает Viber на компьютере</a></p> <p class="post-item-date">2024-05-15 19:10:48</p> </div> </li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="clear"></div> <footer id="footer"> <section class="container" id="footer-bottom"> <div class="container-inner"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a> <div class="pad group"> <div class="grid one-half"> <div id="copyright"> <p> © 2024. Все права защищены. <a href="/sitemap.xml">Карта сайта</a></p> </div> <div id="credit"> <noindex> </noindex> </div> </div> <div class="grid one-half last"> </div> </div> </div> </section> </footer> </div> <script> var $nocnflct = jQuery.noConflict(); $nocnflct(function () { $nocnflct.scrollUp({ scrollName: 'scrollUp', // Element ID scrollClass: 'scrollUp scrollup-image scrollup-right', // Element Class scrollDistance: 300, // Distance from top/bottom before showing element (px) scrollFrom: 'top', // top or bottom scrollSpeed: 300, // Speed back to top (ms ) easingType: 'linear', // Scroll to top easing (see http://easings.net/) animation: 'fade', // Fade, slide, none animationInSpeed: 200, // Animation in speed (ms ) animationOutSpeed: 200, // Animation out speed (ms ) scrollText: '', // Text for element, can contain HTML scrollTitle: false, // Set a custom link title if required. Defaults to scrollText scrollImg: false, // Set true to use image activeOverlay: false, // Set CSS color to display scrollUp active point zIndex: 2147483647 // Z-Index for the overlay } ); } );</script><script type='text/javascript' src='/wp-content/plugins/smooth-scroll-up/js/jquery.scrollUp.min.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-content/themes/hueman/js/jquery.jplayer.min.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-content/themes/hueman/js/scripts.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.7.5'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.7.5'></script> <!--[if lt IE 9]> <script src="/wp-content/themes/hueman/js/ie/respond.js"></script> <![endif]--> </body> </html>