Оформлення placeholder css. Додаємо CSS стиль для placeholder

Плейсхолдер – елемент поля введення, у якому можна розмістити підказку. Коли користувач починає вводити дані, допоміжний текст зникає, щоб не заважати. Кожен браузер має свою думку щодо того, як слід відображати цей елемент, і часом дефолтні стилі ламають весь дизайн. Щоб керувати ними, потрібно скористатися спеціальним правилом CSS placeholder.

Де знаходиться плейсхолдер?

Проблема в тому, що підказка поля введення надійно захована в тіньовому DOM, і добратися до неї не так просто. Для цього використовується спеціальний нестандартний псевдоелемент CSS::placeholder. З його допомогою можна керувати властивостями підказки.

Підтримка браузерами

Псевдоелемент CSS placeholder добре обробляється всіма сучасними браузерами, а для підтримки старих оглядачів можна скористатися префіксами:

::-webkit-input-placeholder – для webkit-браузерів (Safari, Chrome, Opera);
::-moz-placeholder – для браузерів Firefox вище 19 версії;
:-moz-placeholder – для старих Firefox;
:-ms-input-placeholder - для Internet Explorerвище 10 версії.

Як видно, старі браузери Mozilla, а також IE вважають placeholder CSS-псевдокласом, а не псевдоелементом. Не будемо з ними сперечатися, просто зважимо на цей аспект при стилізації поля введення.

Можливості стилізації

Для псевдоелемента placeholder в CSS можна встановити наступні параметри:

фон - група background-властивостей. Фон блоку підказки поширюється по всьому полі введення. Можна задати як колір (background-color), а й зображення (background-image).
колір тексту – color;
прозорість – opacity;
підкреслення, надкреслення або закреслення – text-decoration;
регістр – text-transform;
внутрішні відступи - padding. Підтримується не всіма браузерами. Як для малих елементів, верхній та нижній відступи ігноруються.
відображення шрифту - властивості групи font, line-height та різноманітні відступи (text-indent, letter-spacing, word-spacing);
вертикальне вирівнювання у рядку - vertical-align;
обрізка тексту при переповненні контейнера – text-overflow.

Input1::placeholder ( background-image: linear-gradient(lime, blue); color: white; ) .input2::placeholder ( text-decoration: line-through; ::placeholder ( font-size: 16px; letter-spacing: 10px; ) .input4::placeholder ( background: brown; color: white; text-overflow: ellipsis; )

У фокусі

За замовчуванням підказка зникає з поля введення лише в тому випадку, якщо введено хоча б один символ. Але псевдоелемент CSS placeholder дозволяє реалізувати зникнення відразу при фокусуванні на полі. Для цього необхідно поєднати його із псевдокласом: focus.

input:focus::placeholder ( color: transparent; )

У деяких браузерах можна анімувати зміну ряду властивостей плейсхолдера за допомогою інструкції transition.

input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )

У браузері Google Chromeколір підказки при фокусуванні на такому полі плавно змінюватиметься протягом однієї секунди.

Placeholders, які швиденько вирізані з тексту елементів всередині, може бути ніби в стилі. Fortunately we"ve sourced a short but ефективні CSS solution до style your input"s placeholder текст будь-якого кольору і небезпечності ви. Read on for the code.

Changing placeholder text color

Let"s start with a simple input and some placeholder text, for this example we"ll use the word "search" but you can use anything you want. The basic HTML is below:

HTML

Input (and textarea) placeholder text defaults до світлого кольору, як, якщо можна змінити те, що з кількома лініями CSS. Тут ми можемо завантажити текст, використовуючи HTML-колір name, але будь-який колір методу виходу (HEX, RGB, HSL).

CSS

::-webkit-input-placeholder ( /* Chrome */ color: red; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; ) ::-moz-placeholder ( /* Firefox 19 + */ color: red; opacity: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ color: red; opacity: 1; )

Очевидно, що це важливо, щоб включати різні повноваження fixs in order to support as browsers as possible.

Changing placeholder focus text color

Правильно, ми успішно змінювали кольори місцезнаходження тексту на чорний, але це буде добре, якщо миттєво завантажені, коли ваші кнопки всередині нашого повідомлення. on focus.

CSS

input (outline: none; padding: 12px; border-radius: 3px; border: 1px solid black;) ::-webkit-input-placeholder ( /* Chrome */ color: red; transition: opacity 250ms ease-in-out ; ) :focus::-webkit-input-placeholder ( opacity: 0.5; ) :-ms-input-placeholder ( /* IE 10+ */ color: red; transition: opacity 250ms ease-in-out; ) :focus :-ms-input-placeholder ( opacity: 0.5; ) ::-moz-placeholder ( /* Firefox 19+ */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; ) :focus:: -moz-placeholder ( opacity: 0.5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ color: red; opacity: 1; transition: opacity 250ms ease-in-out; ) :фокус:-moz-placeholder ( opacity: 0.5; )

У тексті вище ми бачимо кілька основних стилів на вхіді йогоself, і посилаються на перехід на оpacity, щоб зробити життєвий добрий nicer.

Де знаходиться плейсхолдер?

Проблема в тому, що підказка поля введення надійно захована в тіньовому DOM, і добратися до неї не так просто. Для цього використовується особливий нестандартний ::placeholder. З його допомогою можна керувати властивостями підказки.

Стилізація placeholder на CSS виглядає так:

Input::placeholder ( color: red; opacity: 1; font-style: italic; )

Підтримка браузерами

::-webkit-input-placeholder – для webkit-браузерів (Safari, Chrome, Opera);
::-moz-placeholder – для браузерів Firefox вище 19 версії;
:-moz-placeholder – для старих Firefox;
:-ms-input-placeholder – для Internet Explorer вище 10 версії.

Можливості стилізації

Для псевдоелемента placeholder в CSS можна встановити такі параметри:

фон - група блоку підказки поширюється по всьому полі введення. Можна задати як колір (background-color), а й зображення (background-image).
колір тексту – color;
прозорість – opacity;
підкреслення, надкреслення або закреслення – text-decoration;
регістр – text-transform;
внутрішні відступи - padding. Підтримується не всіма браузерами. Як для малих елементів, верхній та нижній відступи ігноруються.
відображення шрифту - властивості групи font, line-height та різноманітні відступи (text-indent, letter-spacing, word-spacing);
вертикальне вирівнювання у рядку - vertical-align;
обрізка тексту при переповненні контейнера – text-overflow.

.input1::placeholder ( background-image: linear-gradient(lime, blue); color: white; ) .input2::placeholder ( text-decoration: line-through; color: purple; font-weight: bold; ) . input3::placeholder ( font-size: 16px; letter-spacing: 10px; ) .input4::placeholder ( background: brown; color: white; text-overflow: ellipsis; )

У фокусі

За замовчуванням підказка зникає з поля введення лише в тому випадку, якщо введено хоча б один символ. Але placeholder дозволяє реалізувати зникнення відразу при фокусуванні на полі. Для цього необхідно поєднати його із псевдокласом: focus.

Input:focus::placeholder ( color: transparent; )

У деяких браузерах можна анімувати зміну ряду властивостей плейсхолдера за допомогою інструкції transition.

Input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )

В браузері Google Chrome колір підказки при фокусуванні на такому полі плавно змінюватиметься протягом однієї секунди.

Атрибут placeholder використовується для створення підказок усередині порожніх полів введення (теги і ). У цій статті я розгляну способи стилізації плейсхолдерів, а також, як зробити їх зручнішими у використанні.</p> <p>Почнемо з прикладу для тих, хто ще не знає, що таке плейсхолдер і як його використовувати:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>Під час створення інтерфейсів слід враховувати особливості поведінки плейсхолдерів. Текст плейсхолдера зникає, як починається введення. Саме тому не варто використовувати їх для передачі інформації про поле введення (скільки і які саме символів воно повинно містити). Для цих цілей найкраще використовувати тег <label>або параграф із невеликою підказкою. Докладніше про особливості використання плейсхолдерів можна почитати.</p> <h2>Стилізація</h2> <p>Для стилізації плейсхолдерів використовуються такі правила:</p>::-webkit-input-placeholder ( color : blue ; ) ::-moz-placeholder ( color : blue ; ) /* Firefox 19+ */ :-moz-placeholder ( color : blue ; ) /* Firefox 18- * / :-ms-input-placeholder ( color : blue ; ) <p>Виглядає жахливо, чи не так? І на це є причина – досі CSS правила для плейсхолдерів не були стандартизовані та імплементація у кожному браузері різна. Докладніше про всі необхідні префікси можна дізнатися на caniuse.</p> <p>Якщо ви використовуєте CSS-препроцесор, то, швидше за все, для застосування стилів до плейсхолдерів вам буде найзручніше написати простий міксин. Приклад на Sass:</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @content ; ) ) <p>Залежно від контексту міксин можна використовувати як для глобального застосування стилів, так і для окремих елементів (спробуйте на SassMeister):</p> <span>// Глобально для кожного поля введення</span>@include placeholder (color: blue;) <span>// Для певних полів уведення</span>.input ( @include placeholder ( color : green ; ) ) <h4>Приклад</h4> <p>Синій текст для плейсхолдера (ніколи так не робіть):</p>.blue-text ::-webkit-input-placeholder ( color : #2e8ece ; ) .blue-text :-moz-placeholder ( color : #2e8ece ; ) .blue-text ::-moz-placeholder ( color : #2e8ece ; ) .blue-text :-ms-input-placeholder ( color : #2e8ece ; ) <p> <input type="text" placeholder="Почніть друкувати тут" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Підтримувані властивості</h2> <p>Не кожну властивість CSS можна використовувати з плейсхолдерами. Ось <a href="https://realbazar.ru/uk/updates-and-firmware/udalit-nepravilno-ustanovlennuyu-programmu-kak-udalit-programmu-s/">повний список</a>підтримуваних властивостей:</p> <ul><li>font і всі пов'язані властивості (font-size, font-family і т.д.)</li> <li>background і всі пов'язані властивості (background-color, background-image тощо)</li> <li>opacity</li> <li>text-indent</li> <li>text-overflow</li> <li>color</li> <li>text-transform</li> <li>line-height</li> <li>word-spacing</li> <li>letter-spacing</li> <li>text-decoration</li> <li>vertical-align</li> </ul><h2>Анімації</h2> <p>Ідеї анімацій належить блогу html5.by.</p> <p>Всі наступні приклади написані з використанням препроцесора Sass. До кожного додається посилання на SassMeister, за яким ви зможете знайти скомпільований CSS код.</p> <p>Швидше за все, ви захочете використовувати анімації до плейсхолдерів при фокусі на полі введення. Робиться це досить просто. Достатньо всього кілька разів використовувати написаний раніше міксин placeholder:</p>.input ( @include placeholder ( <span>// Стилі для нормального стану</span>) & :focus ( @include placeholder ( <span>// Стилі після події focus</span> } } } <h3>Зміна прозорості</h3>.input ( @include placeholder ( color : #aaa ; opacity : 1 ; transition : opacity 300ms ; ) & : focus ( @include placeholder ( opacity : 0 ; ) ) ) <p> <input type="text" placeholder="Демо: зміна прозорості" class="demo-css-placeholders-input pl-opacity"></p> <h3>Зсув праворуч і ліворуч</h3> <p>Чим більша ширина поля введення, тим більше має бути значення властивості text-indent. Для стандартного поля введення буде достатньо 500px, для ширших варто підбирати вручну. Від ширини поля введення та значення text-indent залежить швидкість анімації. Для зсуву вліво потрібно використовувати негативні значення, наприклад -500px.</p><p> <input type="text" placeholder="Демо: зсув праворуч" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Демо: зрушення вліво" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Зрушення вниз</h3> <p>Як і в минулому прикладі анімація залежить від розмірів воля введення, але в цьому випадку увагу звернути на висоту. Для переважної більшості полів введення шукане значення line-height перебуватиме в межах 100px. На жаль, за допомогою властивості line-height неможливо реалізувати ефект зсуву вгору, оскільки властивість не набуває негативних значень.</p>.input ( @include placeholder ( text-indent : 0px ; transition : text-indent 300ms ; ) & :focus ( @include placeholder ( text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Демо: зрушення вниз" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Всі разом</h3> <p>Щоб використовувати код анімацій для плейсхолдерів, було приємно і зручно, можна написати невелику бібліотеку міксинів для будь-якого препроцесора. Бібліотека виглядає так ():</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ) @mixin pl-shift ($side : left , $position : 500px , $duration : 200ms ) ( @include placeholder ( text-indent : 0 ; transition : text-indent $duration ; ) & :focus ( @include placeholder ( text-indent : if ($side == left , - $position , $position ); ) ) ) @mixin pl-slide-down ($position : 5 , $duration : 200ms ) ( @include placeholder ( line-height : 1 ; transition : line-height $duration ; ) & :focus ( @include placeholder ( line-height : $position ; ) ) ) @mixin pl-fade-out ($duration : 200ms ) ( @include placeholder ( opacity : 1 transition : opacity $duration ; ) & :focus ( @include placeholder ( opacity : 0 ; ) ) ) <p>Використовувати її дуже просто. Достатньо підключити бажаний міксин до будь-якого поля введення або просто створити одне глобальне правило для всіх пэйсхолдерів на сторінці:</p> <span>// Для окремих елементів</span>.pl-shift-right ( @include pl-shift ( right ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// Для решти</span>@include pl-shift (left); <h2>Autoprefixer</h2> <p>Якщо ви не використовуєте препроцесор і все ще не хочете, щоб ваш вихідний CSS файл перетворився на кашу з префіксів для всіх можливих браузерів, зверніть увагу на Autoprefixer . З його допомогою чистий CSS можна зробити брудним (але вже в іншому файлі), додавши всі необхідні префікси всім властивостям. Щоб змусити плагін працювати з пэйсхолдерами, достатньо використовувати псевдоелемент::placeholder:</p>::placeholder (color: orange;). input : : placeholder ( color : blue ; ) <p>Після парсингу стилів Autoprefixer створить окремий CSS файл, в якому пропише всі необхідні префікси для всіх вказаних вами браузерів.</p> <h2>Що далі</h2> <p>Як я вже писав вище, все, що пов'язане із застосуванням стилів до плейсхолдерів ще не стандартизовано. Незабаром це виправлять. У специфікацію Selector Level 4 був доданий псевдоклас:placeholder-shown, який, нарешті, приведе до стандарту всю ту шалену суміш із псевдокласів та псевдоелементів, яка існує зараз. Слідкувати за підтримкою можна на caniuse (зараз не підтримується в жодному браузері).</p> <p>Застосовувати стилі за допомогою:placeholder-shown буде набагато простіше:</p>.input :placeholder-shown ( color : blue ; )<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 loading=lazy>");</script> </div> </div> </article> <div id="post-ratings-1455-loading" class="post-ratings-loading"> <img src="https://realbazar.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy loading=lazy>Завантаження...</div> </main> </section> <div id="right-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"> <div class="inside-right-sidebar"> <aside id="wpp-3" class="widget inner-padding popular-posts"> <h4 class="widget-title">Популярне</h4> <ul class="wpp-list wpp-list-with-thumbnails"> <li> <a href="https://realbazar.ru/uk/samsung-galaxy-s3/skachat-wifi-cracker-polnyi-programmy-dlya-vzloma-wi-fi-zashchishchaem-svoyu-wifi/" title="Програми для злому Wi-Fi" target="_self"><img src="/uploads/b5901d9352f8d54a07a2a404e37033ae.jpg" width="195" height="98" alt="Програми для злому Wi-Fi" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/samsung-galaxy-s3/skachat-wifi-cracker-polnyi-programmy-dlya-vzloma-wi-fi-zashchishchaem-svoyu-wifi/" title="Програми для злому Wi-Fi" class="wpp-post-title" target="_self">Програми для злому Wi-Fi</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/comparison/osnovnye-sovremennye-metody-shifrovaniya-acimmetrichnye/" title="Аcиметричні алгоритми шифрування До якого виду обробки можна віднести шифрування" target="_self"><img src="/uploads/d0b82db69b1d91ca5461293193802e23.jpg" width="195" height="98" alt="Аcиметричні алгоритми шифрування До якого виду обробки можна віднести шифрування" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/comparison/osnovnye-sovremennye-metody-shifrovaniya-acimmetrichnye/" title="Аcиметричні алгоритми шифрування До якого виду обробки можна віднести шифрування" class="wpp-post-title" target="_self">Аcиметричні алгоритми шифрування До якого виду обробки можна віднести шифрування</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/news/osnovnye-principy-programmirovaniya-staticheskaya-i-dinamicheskaya-tipizaciya/" title="Типізація мов програмування Види типізації" target="_self"><img src="/uploads/70da66ba9311dafe482230129e9d402e.jpg" width="195" height="98" alt="Типізація мов програмування Види типізації" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/news/osnovnye-principy-programmirovaniya-staticheskaya-i-dinamicheskaya-tipizaciya/" title="Типізація мов програмування Види типізації" class="wpp-post-title" target="_self">Типізація мов програмування Види типізації</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/different/algoritmy-shifrovaniya-dannyh-metody-shifrovaniya-dannyh---blog/" title="Методи шифрування даних - блог веб-програміста Застосування алгоритмів шифрування" target="_self"><img src="/uploads/64a6c07ff82a62b42acc95562d51faae.jpg" width="195" height="98" alt="Методи шифрування даних - блог веб-програміста Застосування алгоритмів шифрування" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/different/algoritmy-shifrovaniya-dannyh-metody-shifrovaniya-dannyh---blog/" title="Методи шифрування даних - блог веб-програміста Застосування алгоритмів шифрування" class="wpp-post-title" target="_self">Методи шифрування даних - блог веб-програміста Застосування алгоритмів шифрування</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/series-galaxy-note/raznica-mezhdu-besplatnym-i-open-source-programmnym-obespecheniem-chto-takoe/" title="Що таке відкритий вихідний код і чому він важливий для криптовалюти та відкритого блокчейна Відкритий вихідний код дає можливість" target="_self"><img src="/uploads/e58d56b6d555a570c61cfbff3c8323d3.jpg" width="195" height="98" alt="Що таке відкритий вихідний код і чому він важливий для криптовалюти та відкритого блокчейна Відкритий вихідний код дає можливість" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/series-galaxy-note/raznica-mezhdu-besplatnym-i-open-source-programmnym-obespecheniem-chto-takoe/" title="Що таке відкритий вихідний код і чому він важливий для криптовалюти та відкритого блокчейна Відкритий вихідний код дає можливість" class="wpp-post-title" target="_self">Що таке відкритий вихідний код і чому він важливий для криптовалюти та відкритого блокчейна Відкритий вихідний код дає можливість</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> </ul> </aside> <style>.rpwe-block ul{ list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li{ border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a{ display: inline !important; text-decoration: none; } .rpwe-block h3{ background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 16px !important; line-height: 1.5em; } .rpwe-thumb{ border: 2px solid #eee !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary{ font-size: 14px; } .rpwe-time{ color: #bbb; font-size: 11px; } .rpwe-comment{ color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft{ display: inline; float: left; } .rpwe-alignright{ display: inline; float: right; } .rpwe-aligncenter{ display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after{ content: ""; display: table !important; } .rpwe-clearfix:after{ clear: both; } .rpwe-clearfix{ zoom: 1; } </style><aside id="rpwe_widget-2" class="widget inner-padding rpwe_widget recent-posts-extended"><h4 class="widget-title">Свіжі записи</h4><div class="rpwe-block "><ul class="rpwe-ul"> <li> <a href="https://realbazar.ru/uk/the-galaxy-s-series/principy-postroeniya-asu-tp-scada-sistemy-scada-sistemy-oao/" title="Принципи побудови асу тп scada системи" target="_self"><img src="/uploads/1db034e4c37e0d40a575af6357f16a1f.jpg" width="195" height="98" alt="Принципи побудови асу тп scada системи" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/the-galaxy-s-series/principy-postroeniya-asu-tp-scada-sistemy-scada-sistemy-oao/" title="Принципи побудови асу тп scada системи" class="wpp-post-title" target="_self">Принципи побудови асу тп scada системи</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/samsung-galaxy-s5/fail-virusa-shifrovalshchika-prilagayu-bez-shansa-na-spasenie-chto-takoe/" title="Без шансу на порятунок: що таке вірус-шифрувальник та як з ним боротися" target="_self"><img src="/uploads/572320a42a757ffaf64c1d6db9b3e7fe.jpg" width="195" height="98" alt="Без шансу на порятунок: що таке вірус-шифрувальник та як з ним боротися" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/samsung-galaxy-s5/fail-virusa-shifrovalshchika-prilagayu-bez-shansa-na-spasenie-chto-takoe/" title="Без шансу на порятунок: що таке вірус-шифрувальник та як з ним боротися" class="wpp-post-title" target="_self">Без шансу на порятунок: що таке вірус-шифрувальник та як з ним боротися</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/samsung-galaxy-s5/vladelcy-dronov-pokupayut-soft-rossiiskoi-kompanii-chtoby-letat-v/" title="Зони заборонені для польотів квадрокоптерів Карта безпольотних зон dji" target="_self"><img src="/uploads/22c7ac61c30b2132ca602c935905f8ab.jpg" width="195" height="98" alt="Зони заборонені для польотів квадрокоптерів Карта безпольотних зон dji" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/samsung-galaxy-s5/vladelcy-dronov-pokupayut-soft-rossiiskoi-kompanii-chtoby-letat-v/" title="Зони заборонені для польотів квадрокоптерів Карта безпольотних зон dji" class="wpp-post-title" target="_self">Зони заборонені для польотів квадрокоптерів Карта безпольотних зон dji</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/comparison/utilita-dlya-udaleniya-antivirusa-avg-kak-udalit-avg-s-kompyutera-polnostyu/" title="Як видалити AVG з комп'ютера повністю" target="_self"><img src="/uploads/b6d43c4eb1632600de78dcad9a99cb23.jpg" width="195" height="98" alt="Як видалити AVG з комп'ютера повністю" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/comparison/utilita-dlya-udaleniya-antivirusa-avg-kak-udalit-avg-s-kompyutera-polnostyu/" title="Як видалити AVG з комп'ютера повністю" class="wpp-post-title" target="_self">Як видалити AVG з комп'ютера повністю</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> <li> <a href="https://realbazar.ru/uk/games-for-android/av-test-antivirusnaya-zashchita-na-windows-xp-sp3-est-li-xp-posle-xp-kakoi/" title="Чи є XP після XP Який антивірус краще для виндовс хр" target="_self"><img src="/uploads/cc41edcfca75570d1d081d5e9db15af2.jpg" width="195" height="98" alt="Чи є XP після XP Який антивірус краще для виндовс хр" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/uk/games-for-android/av-test-antivirusnaya-zashchita-na-windows-xp-sp3-est-li-xp-posle-xp-kakoi/" title="Чи є XP після XP Який антивірус краще для виндовс хр" class="wpp-post-title" target="_self">Чи є XP після XP Який антивірус краще для виндовс хр</a> <span class="wpp-excerpt">Людині, яка має свій плей...</span> <br><br> </li> </ul></div></aside><aside id="custom_html-2" class="widget_text widget inner-padding widget_custom_html"> <div class="textwidget custom-html-widget"> </div> </aside> </div> </div> </div> </div> <div class="site-footer grid-container grid-parent "> <div id="footer-widgets" class="site footer-widgets"> <div class="footer-widgets-container grid-container grid-parent"> <div class="inside-footer-widgets"> <div class="footer-widget-1 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="categories-3" class="widget inner-padding widget_categories"> <h4 class="widget-title">Рубрики</h4> <ul> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/uk/category/samsung-galaxy-s3/" title="Samsung Galaxy S3">Samsung Galaxy S3</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/uk/category/samsung-galaxy-s5/" title="Samsung Galaxy S5">Samsung Galaxy S5</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/uk/category/games-for-android/" title="Ігри для Андроїд">Ігри для Андроїд</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/uk/category/news/" title="Новини">Новини</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/uk/category/an-overview-of-the-devices/" title="Огляд пристроїв">Огляд пристроїв</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/uk/category/different/" title="Різні">Різні</a> </li> </ul> </aside> </div> <div class="footer-widget-2 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="text-9" class="widget inner-padding widget_text"> </aside> </div> <div class="footer-widget-3 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="pages-2" class="widget inner-padding widget_pages"> <h4 class="widget-title">Сторінки</h4> <ul> <li class="page_item page-item-422"><a href="https://realbazar.ru/uk/sitemap.xml">Карта сайту</a></li> <li class="page_item page-item-917"><a href="https://realbazar.ru/uk/feedback/">Зворотній зв'язок</a></li> </ul> </aside> <aside id="text-11" class="widget inner-padding widget_text"> <h4 class="widget-title">© 2022 realbazar.ru</h4> </aside> </div> </div> </div> </div> <footer class="site-info" itemtype="http://schema.org/WPFooter" itemscope="itemscope"> <div class="inside-site-info grid-container grid-parent"> <div class="copyright-bar"> <span class="copyright">2022</span> • </div> </div> </footer> </div> <a id="scroll-to-top" href="#" title="Scroll to Top">Top</a> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.6'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "1" }; /* ]]> */ </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/dropdown.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation-search.min.js?ver=1.4'></script>  <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "sidebar-1", "margin_top": 10, "margin_bottom": 0, "stop_id": "footer-widgets", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['custom_html-2'] }; </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.6'></script> <script type="text/javascript">  </script><br> <br> </body> </html>