Оформлення placeholder css. Як змінити колір тексту-підказки в placeholder за допомогою стилів CSS? Завдання: зробити свій css стиль для placeholder

Зазвичай атрибут placeholder в input і textarea використовується для заклику до дії всередині цих елементів. У цій замітці опишу кілька варіантів стилізації тексту placeholder-ів, а також варіанти їхньої анімації.

Отже, колір тексту нашого placeholder-а можна змінити, використовуючи, наприклад наступний набір css-правил:

::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( color : #c0392b ;)

Об'ємність коду для стилізації такого простого властивості зумовлена ​​відсутністювідсутністю загального стандарту, у зв'язку з чим кожен браузер по-своєму реалізував підтримку стилізації placeholder-а.

Крім того, підтримуються не всі css властивості. Ось перелік точно підтримуваних властивостей:

font (і пов'язані)
background (і пов'язані)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

Також буває так, що текст плейсхолдера "виходить" за межі ширини елемента input або textarea (частий випадок для мобільних пристроїв). При цьому він автоматично негарно обрізається.

Виправити цю неприємність нам допоможе таке css-властивість, як text-overflow: ellipsis , яке додасть естетичну трикрапку до обрізаної ділянки placeholder-a. У стилях прописуємо ось так:

input [placeholder] (text-overflow : ellipsis ;) input ::-moz-placeholder ( text-overflow : ellipsis ;) input :-moz-placeholder ( text-overflow : ellipsis ;) input :-ms-input-placeholder ( text-overflow : ellipsis ;)

Для надання ще більшої естетики нашим placeholder-ам є можливість додати ефект приховування при отриманні фокусу відповідного елемента.

Декілька прикладів такого приховання з елементами анімації:

/* плавна зміна прозорості placeholder-а при фокусі */.input ::-webkit-input-placeholder ( opacity : 1 ; transition : opacity 0.3s ease ;) .input ::-moz-placeholder ( opacity : 1 ; transition : opacity 0.3s ease ;) .input :-moz- placeholder ( opacity : 1 ; transition : opacity 0.3s ease ;) .input :-ms-input-placeholder ( opacity : 1 ; transition : opacity 0.3s ease ;) .input ( opacity : 0 ; transition : o ).input :фокус::-moz-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;) .input :фокус:-moz-placeholder ( opacity : 0 ; :-ms-input-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;) /* зрушення placeholder-а вправо при фокусі*/.input ::-webkit-input-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;) .input ::-moz-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;) .input :-moz-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;) .input :-ms-input-placeholder ( text-indent : 0px ; transition : text-indent 0.3s ease ;) .input :focus::-webkit-input-placeholder( text-indent : 500px ; transition : text-indent 0.3s ease ;) .input :focus::-moz-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;) .input :focus:- moz-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;) .input :focus:-ms-input-placeholder ( text-indent : 500px ; transition : text-indent 0.3s ease ;) /* зсув placeholder-а вниз при фокусі*/.input ::-webkit-input-placeholder ( line-height : 20px ; transition : line-height 0.5s eas ;) .input ::-moz-placeholder ( line-height : 20px ; ;) .input :-moz-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;) .input :-ms-input-placeholder ( line-height : 20px ; transition : line-height 0.5s e ;) .input :focus::-webkit-input-placeholder(line-height : 100px ; transition : line-height 0.5s ease ;) .input :focus::-moz-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;) .input : moz-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;) .input :focus:-ms-input-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;)

На цьому й закінчимо.

Якщо ви не знайомі з атрибутом placeholder, то давайте трохи пояснимо, що це таке і де він використовується. Використовується в полях введення форми. Атрибут виводить напис у полі введення, представляючи роль певної підказки. Раніше на нашому сайті був приклад, з допомогою javascript, позитивна сторона даного методуце кросбраузерність. Тепер давайте поговоримо про стилізацію атрибута placeholder, який використовується в елементах input і textarea.
Код поля введення в нашому прикладі виглядатиме приблизно так:

На виході ми отримуємо таке поле:

Тепер давайте уявимо, що нам необхідно стилізувати placeholder, для цього нам слід прописати набір правил у CSS:

::-webkit-input-placeholder ( color: #c1c1c1; ) ::-moz-placeholder ( color: #c1c1c1; ) /* Firefox 19+ */ :-moz-placeholder ( color: #c1c1c1; ) /* Firefox 18- */ :-ms-input-placeholder ( color: #c1c1c1; )

Отримуємо:

Змінювати ми можемо не всі властивості, але список більшості з них, що підтримуються сучасними браузерами, наведено нижче:
font(Так само суміжні властивості)
background(Так само суміжні властивості)
color
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
text-indent
text-overflow
opacity

У різних браузерахправило пишеться по-різному, т.к. доки немає єдиного стандарту, цей набір записів продовжує бути актуальним. У браузері IE, а також firefox нижче 18 версії placeholder сприймається як псевдоклас, а в нових браузерах firefox, webkit і blink сприймається як псевдоелемент.

Скорочення тексту в placeholder
Іноді підказки можуть бути такої довжини, що не можуть повністю поміститися в полі введення. Для цих цілей можна також скористатися додатковими властивостями, які дозволять скоротити текст placeholder-а в полі введення.

Input ( text-overflow:ellipsis; ) input::-moz-placeholder ( text-overflow:ellipsis; ) input:-moz-placeholder ( text-overflow:ellipsis; ) input:-ms-input-placeholder ( text-overflow : ellipsis; )

В результаті отримуємо поле введення такого з місця, що містить такий вид:

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

:focus::-webkit-input-placeholder ( color: transparent; ) :focus::-moz-placeholder ( color: transparent; ) :focus:-moz-placeholder ( color: transparent; ) :focus:-ms-input -placeholder ( color: transparent; )

Отримуємо таке дійство:

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

Погано

добре

Стилізація: змінити колір placeholder CSS

Змінити стиль поля введення з placeholder CSS

Погано

Ефект placeholder для

Атрибут placeholder працює тільки для і , навіть якщо інші теги вказують атрибут contenteditable .</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="Можна ввести текст" class="raz"></div> <style> .raz { height: 3em; border: 1px solid; } .raz:empty:not(:focus)::before { <i>/* хак: если div задать и placeholder , то и.raz:empty:not(:placeholder-shown)::before будет работать */ </i> content: attr(data-placeholder); opacity: .5; } </style> <div contentEditable data-placeholder="Можна ввести текст" class="raz"></div> <h2>Стародавній метод на згадку, що змінює JavaScript</h2> <input onblur="this.value=(this.value=="onfocus="this.value=(this.value==this.title)?" value="Email" title="Email"> <input onblur="this.value=(this.value=="")?this.title:this.value;" onfocus="this.value=(this.value==this.title)?"":this.value;" value="Email" title="Email" /> <p>Плейсхолдер – елемент поля введення, у якому можна розмістити підказку. Коли користувач починає вводити дані, допоміжний текст зникає, щоб не заважати. Кожен браузер має свою думку щодо того, як слід відображати цей елемент, і часом дефолтні стилі ламають весь дизайн. Щоб керувати ними, потрібно скористатися спеціальним <a href="https://128gb.ru/uk/oformlenie-spiskov-list-style-pravila-css-dlya-nastroiki-vneshnego-vida-spiska-na-html.html">правилом CSS</a> placeholder.</p> <h2>Де знаходиться плейсхолдер?</h2> <p>Проблема в тому, що підказка поля введення надійно захована в тіньовому DOM, і дістатися не так просто. Для цього використовується особливий нестандартний ::placeholder. З його допомогою можна керувати властивостями підказки.</p> <p>Стилізація placeholder на CSS виглядає так:</p><p>Input::placeholder ( color: red; opacity: 1; font-style: italic; )</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/39768/2606908.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Підтримка браузерами</h2> <p>Псевдоелемент CSS placeholder добре обробляється всіма сучасними браузерами, а для підтримки старих оглядачів можна скористатися префіксами:</p> <ul><li>::-webkit-input-placeholder – для webkit-браузерів (Safari, Chrome, Opera);</li> <li>::-moz-placeholder - для <a href="https://128gb.ru/uk/download-software-mozilla-firefox-download-and-install-the-mozilla-firefox-browser-russian-version-on-your-computer.html">браузерів Firefox</a>вище за 19 версій;</li> <li>:-moz-placeholder – для старих Firefox;</li> <li>:-ms-input-placeholder - для <a href="https://128gb.ru/uk/chto-za-sluzhba-event-monitor-vosstanovlenie-internet-explorer-domashnyuyu-stranicu.html">Internet Explorer</a>вище за 10 версій.</li> </ul><p>Як видно, старі <a href="https://128gb.ru/uk/ustanovka-plagina-kriptopro-csp-v-brauzere-mozilla-firefox-kripto-pro-ecp.html">браузери Mozilla</a>, а також IE вважають placeholder CSS-псевдокласом, а не псевдоелементом. Не будемо з ними сперечатися, просто зважимо на цей аспект при стилізації поля введення.</p> <p><img src='https://i2.wp.com/fb.ru/misc/i/gallery/39768/2606909.jpg' width="100%" loading=lazy loading=lazy></p> <h2>Можливості стилізації</h2> <p>Для псевдоелемента placeholder в CSS можна встановити такі параметри:</p> <ul><li>фон - група блоку підказки поширюється по всьому полі введення. Можна задати як колір (background-color), а й зображення (background-image).</li> <li>колір тексту – color;</li> <li>прозорість – opacity;</li> <li>підкреслення, надкреслення або закреслення – text-decoration;</li> <li>регістр – text-transform;</li> <li><a href="https://128gb.ru/uk/vnutrennii-otstup-v-tablice-html-primenenie-svoistva-border.html">внутрішні відступи</a>- Padding. Підтримується не всіма браузерами. Як для малих елементів, верхній та нижній відступи ігноруються.</li> <li>відображення шрифту - властивості групи font, line-height та різноманітні відступи (text-indent, letter-spacing, word-spacing);</li> <li>вертикальне вирівнювання у рядку - vertical-align;</li> <li>обрізання тексту при переповненні контейнера - text-overflow.</li> </ul>.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; ) <h2>У фокусі</h2> <p>За замовчуванням підказка зникає з поля введення лише в тому випадку, якщо введено хоча б один символ. Але placeholder дозволяє реалізувати зникнення відразу при фокусуванні на полі. Для цього необхідно поєднати його з псевдокласом: focus.</p><p>Input:focus::placeholder ( color: transparent; )</p><p>У деяких браузерах можна анімувати зміну ряду властивостей плейсхолдера за допомогою інструкції transition.</p><p>Input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )</p><p>У браузері <a href="https://128gb.ru/uk/chto-oznachaet-verhnii-pravyi-ugol-stranicy-elementy-upravleniya-na-stranice.html">Google Chrome</a>колір підказки при фокусуванні на такому полі плавно змінюватиметься протягом однієї секунди.</p> <p>Плейсхолдер – елемент поля введення, у якому можна розмістити підказку. Коли користувач починає вводити дані, допоміжний текст зникає, щоб не заважати. Кожен браузер має свою думку щодо того, як слід відображати цей елемент, і часом дефолтні стилі ламають весь дизайн. Щоб керувати ними, потрібно скористатися спеціальним правилом CSS placeholder.</p> <h2>Де знаходиться плейсхолдер?</h2> <p>Проблема в тому, що підказка поля введення надійно захована в тіньовому DOM, і дістатися не так просто. Для цього використовується спеціальний нестандартний псевдоелемент CSS::placeholder. З його допомогою можна керувати властивостями підказки.</p> <p>You will be interested:</p> <p><img src='https://i2.wp.com/ruud.ru/wp-content/uploads/2018/06/4f1695522eb38124e423c90938dc189d.jpg' width="100%" loading=lazy loading=lazy></p><p>Стилізація placeholder на CSS виглядає так:</p> <p>input::placeholder ( color: red; opacity: 1; font-style: italic; ) <br><img src='https://i0.wp.com/ruud.ru/wp-content/uploads/2018/06/050be174ed3b60dc7c49fe3cd59e15ba.jpg' width="100%" loading=lazy loading=lazy></p><h2>Підтримка браузерами</h2> <p>Псевдоелемент CSS placeholder добре обробляється всіма сучасними браузерами, а для підтримки старих оглядачів можна скористатися префіксами:</p> <ul><li>::-webkit-input-placeholder – для webkit-браузерів (Safari, Chrome, Opera);</li> <li>::-moz-placeholder – для браузерів Firefox вище 19 версії;</li> <li>:-moz-placeholder – для старих Firefox;</li> <li>:-ms-input-placeholder – для Internet Explorer вище 10 версії.</li> </ul><p>Як видно, старі браузери Mozilla, а також IE вважають placeholder CSS-псевдокласом, а не псевдоелементом. Не будемо з ними сперечатися, просто зважимо на цей аспект при стилізації поля введення.</p> <p><img src='https://i1.wp.com/ruud.ru/wp-content/uploads/2018/06/7563ac2e917a7adb9324bb1d45af7f8e.jpg' width="100%" loading=lazy loading=lazy></p><h2>Можливості стилізації</h2> <p>Для псевдоелемента placeholder в CSS можна встановити такі параметри:</p> <ul><li>фон - група background-властивостей. Фон блоку підказки поширюється по всьому полі введення. Можна задати як колір (background-color), а й зображення (background-image).</li> <li>колір тексту – color;</li> <li>прозорість – opacity;</li> <li>підкреслення, надкреслення або закреслення – text-decoration;</li> <li>регістр – text-transform;</li> <li>внутрішні відступи - padding. Підтримується не всіма браузерами. Як для малих елементів, верхній та нижній відступи ігноруються.</li> <li>відображення шрифту - властивості групи font, line-height та різноманітні відступи (text-indent, letter-spacing, word-spacing);</li> <li>вертикальне вирівнювання у рядку - vertical-align;</li> <li>обрізання тексту при переповненні контейнера - text-overflow.</li> </ul><p>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; )</p><h2>У фокусі</h2> <p>За замовчуванням підказка зникає з поля введення лише в тому випадку, якщо введено хоча б один символ. Але псевдоелемент CSS placeholder дозволяє реалізувати зникнення відразу під час фокусування на полі. Для цього необхідно поєднати його з псевдокласом: focus.</p> <p>input:focus::placeholder ( color: transparent; )</p><p>У деяких браузерах можна анімувати зміну ряду властивостей плейсхолдера за допомогою інструкції transition.</p> <p>input::placeholder ( color: black; transition: color 1s; ) input:focus::placeholder ( color: white; )</p><p>У <a href="https://128gb.ru/uk/ustanovochnyi-fail-google-chrome-windows-xp-besplatnaya-ustanovka.html">браузері Google</a> Chrome колір підказки при фокусуванні на такому полі плавно змінюватиметься протягом однієї секунди.</p> <!-- SAPE RTB JS --> <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" type="text/javascript"> </script> <!-- SAPE RTB END --><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> </article> <div class="single-share"> <div class="row align-middle"> <div class="columns small-12 medium-expand"> <div class="single-share__title">Розповісти друзям</div> </div> </div> <div class="single-share-links"> <div class="row"> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--fb"> <div class="row"> <div class="columns"><i class="fa fa-facebook-official single-share-links-item__icon"></i> </div> <div class="columns text-right js-fb-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://vk.com/share.php?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--vk"> <div class="row"> <div class="columns"><i class="fa fa-vk single-share-links-item__icon"></i> </div> <div class="columns text-right js-vk-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('http://twitter.com/share?url=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--tw"> <div class="row"> <div class="columns"><i class="fa fa-twitter single-share-links-item__icon"></i> </div> <div id="twitter_sharer" class="columns text-right">Twitter <span class="single-share-links-item__text"></span> </div> </div> </a> </div> <div class="columns small-6 medium-3"> <a href="#" onClick="window.open('https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl=https%3A%2F%2F128gb.ru%2Foformlenie-placeholder-css-kak-izmenit-cvet-teksta-podskazki-v-placeholder-s.html/&utm_source=share2', 'sharer', 'toolbar=0,status=0, width=700, height=400'); return false" title="" class="single-share-links-item single-share-links-item--ok"> <div class="row"> <div class="columns"><i class="fa fa-odnoklassniki single-share-links-item__icon"></i> </div> <div class="columns text-right js-ok-sharer"><span class="single-share-links-item__text"></span> </div> </div> </a> </div> </div> </div> </div> <div class="banner-place" data-place="article_under_h1" style="width: 100%;"></div> <div class="prev-next-articles"> <div class="prev-next-articles__item prev-next-articles__item--left"> <i class="fa fa-chevron-left"></i><span>Samsung Game...</span> <a href="https://128gb.ru/uk/kak-ustanovit-yandeks-launcher-po-umolchaniyu-ischez-rabochii-stol-android-ili-ne.html" rel="prev">Зник робочий стіл Android або не працює лаунчер!</a> </div> <div class="prev-next-articles__item prev-next-articles__item--right"> <i class="fa fa-chevron-right"></i><span>Наступна стаття</span> <a href="https://128gb.ru/uk/sony-pc-companion-ne-rabotaet-xperia-companion-novoe-prilozhenie-na-windows-pc-dlya.html" rel="next">Xperia Companion – новий додаток на Windows PC для оновлення та відновлення Xperia</a> </div> </div> <div class="banner-place" data-place="article_above_similar_articles" style="width: 100%;"></div> <div class="banner-place" data-place="article_above_similar_articles_2" style="width: 100%;"></div> <div class="banner-place" data-place="article_under_social" style="width: 100%;"></div> <div class="banner-place" data-place="fixed_bottom_right" style="width: 100%;"></div> <div class="read-more"> <div class="read-more__title text-center">Читайте також</div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/uk/kakoi-audiopleer-luchshe-dlya-kompyutera-luchshie-muzykalnye-pleery-na.html"> <img width="130" height="85" src="/uploads/73abc6de7b92bfdc0f232fce200559a6.jpg" alt="Найкращі музичні плеєри на андроїд" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/uk/kakoi-audiopleer-luchshe-dlya-kompyutera-luchshie-muzykalnye-pleery-na.html">Найкращі музичні плеєри на андроїд</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-13 00:03:49</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/uk/chto-takoe-haby-na-vnedorozhnike-chto-takoe-hab-svitch-i-router-vyglyadit.html"> <img width="130" height="85" src="/uploads/7a29f3c07f20966e89e1b3a8b5bde139.jpg" alt="Що таке хаб, свитч та роутер?" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/uk/chto-takoe-haby-na-vnedorozhnike-chto-takoe-hab-svitch-i-router-vyglyadit.html">Що таке хаб, свитч та роутер?</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-12 00:04:38</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/uk/json-rasshifrovka-abbreviatury-osnovy-raboty-s-json-chto-takoe-json.html"> <img width="130" height="85" src="/uploads/a25ab8fadd32446d66f87b7ab9f34d96.jpg" alt="Json розшифровка абревіатури" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/uk/json-rasshifrovka-abbreviatury-osnovy-raboty-s-json-chto-takoe-json.html">Json розшифровка абревіатури</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-11 00:04:21</span> </div> </div> </div> </div> <div class="columns small-12 medium-6"> <div class="article-block-small row full noGutter"> <div class="columns shrink"> <div class="article-block-small__img"> <a href="https://128gb.ru/uk/galereya-izobrazheniya-na-jquery-galereya-izobrazhenii-na-jquery-s.html"> <img width="130" height="85" src="/uploads/e2061ca22c6de4fb892f07c2584a9328.jpg" alt="Галерея зображень на jQuery з цікавим ефектом" / loading=lazy loading=lazy> </a> </div> </div> <div class="columns"> <a class="article-block-small__link" href="https://128gb.ru/uk/galereya-izobrazheniya-na-jquery-galereya-izobrazhenii-na-jquery-s.html">Галерея зображень на jQuery з цікавим ефектом</a> <div class="article-block-small__author"> <i class="fa fa-user"></i><span>2024-03-09 00:04:15</span> </div> </div> </div> </div> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> <div class="read-more__row"> <div class="row"> </div> </div> </div> </div> </div> <div class="columns small-12 medium-4 show-for-medium"> <aside class="sidebar"> <div class="experts-list"> <b><div class="experts-list__title">Останні публікації</div></b><br> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/feff38bed77dc79090027685f0fd5f35.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/otobrazhenie-razmera-papok-v-windows-7-kak-uznat-razmer-papok-na.html" title="Як дізнатися розмір папок на диску за допомогою PowerShell" class="expert__name">Як дізнатися розмір папок на диску за допомогою PowerShell</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/solving-problems/">Вирішення проблем</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/4817d653c3d16ee7667f7adb92a72cda.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/udalenie-vtoroi-operacionnoi-sistemy-s-kompyutera-ubiraem-vtoruyu-os-windows-iz.html" title="Прибираємо другу ОС Windows зі списку завантаження Як видалити другий windows 7 з комп'ютера" class="expert__name">Прибираємо другу ОС Windows зі списку завантаження Як видалити другий windows 7 з комп'ютера</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/protection/">Захист</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/32316589abc8decf14a4a67462b55e04.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/kak-vklyuchit-vai-fai-na-noutbuke-kak-vklyuchit-vai-fai-na.html" title="Як увімкнути вай фай на ноутбуці Як налаштувати роутер ноутбуку windows 8" class="expert__name">Як увімкнути вай фай на ноутбуці Як налаштувати роутер ноутбуку windows 8</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/peripherals/">Периферія</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/8432a7bfcdb706d1a86b782c05f75e83.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/virus-zashchitil-fleshku-ot-zapisi-chto-delat-kak-snyat-zashchitu-s-fleshki-ot.html" title="Як зняти захист із флешки від запису" class="expert__name">Як зняти захист із флешки від запису</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/boot-disk/">Завантажувальний диск</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/e0d1cf337660c5106e756570c9b62ac3.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/programmnyi-kompleks-poligon-tehnicheskii-plan-poligon-pro-tehplan.html" title="Полігон Про: Техплан будівлі Координат виділених об'єктів з MapInfo" class="expert__name">Полігон Про: Техплан будівлі Координат виділених об'єктів з MapInfo</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/the-choice-of-operating-system/">Вибір операційної системи</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/53d98bc9af6ce255f05b4ec31952bfdf.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/testy-gtx-280-polzovatelyami-posle-pokupki-kompyuternyi-resurs-u-sm-osnovnye.html" title="Комп'ютерний ресурс У SM" class="expert__name">Комп'ютерний ресурс У SM</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/useful-tips/">Корисні поради</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/e3be64a997d74ba9a48f5b0195e074e5.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/udalenie-uchetnoi-zapisi-polzovatelya-windows-7-poluchenie-administratorskih-prav.html" title="Отримання адміністраторських прав" class="expert__name">Отримання адміністраторських прав</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/boot-disk/">Завантажувальний диск</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/56fcf10656e3593988adfef2c6a300fd.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/telefon-nokia-lyumiya-k-zavodskim-nastroikam-uchimsya-delat-sbros-nastroek-na.html" title="Вчимося робити скидання налаштувань на"нокиа люмия"" class="expert__name">Вчимося робити скидання налаштувань на "нокіа люмія"</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/installing-multiple-os/">Встановлення кількох ОС</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/9276f89bd5be32238287b52fc363a64e.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/kakim-antivirusom-luchshe-proskanirovat-fleshku-kak-proverit-na-virusy-fleshku.html" title="Як перевірити на віруси флешку?" class="expert__name">Як перевірити на віруси флешку?</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/peripherals/">Периферія</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> <div class="experts-list__item"> <div class="expert row align-middle full noGutter"> <div class="columns small-3 medium-3"> <div class="expert__img"> <img src="/uploads/f7802de41a637a687b0e9e72b5f2a052.jpg" width="65" height="65" loading=lazy loading=lazy> </div> </div> <div class="columns small-9 medium-9"> <a href="https://128gb.ru/uk/otkrytie-keisov-v-vorld-of-tank.html" title="Відкриття кейсів у ворлд оф танк" class="expert__name">Відкриття кейсів у ворлд оф танк</a> <div class="expert__specialty"> <a class="right-cat-link" href="https://128gb.ru/uk/category/installation-and-configuration/">Встановлення та налаштування</a> </div> <div class="row full noGutter"> <div class="columns shrink"> <div class="expert__rate"> </div> </div> <div class="columns"> <div class="expert__rate"> </div> </div> </div> </div> </div> </div> </div> <div> <div id="komojy1" style="height:500px;width:300px;" align="center"></div> </div> </aside> </div> </div> </main> </div> </div> </div> <footer class="footer"> <div class="footer-menu"> <a href="https://128gb.ru/uk/feedback.html" title="" class="footer-menu__item">Контакти</a> <a href="" title="" class="footer-menu__item">Про проект</a> <a href="https://128gb.ru/uk/feedback.html" title="" class="footer-menu__item">Реклама</a> </div> <div class="footer-bottom"> <div class="footer-bottom__wrapper"> <div class="footer-bottom__block"> <div class="footer__logo"> </div> <div class="footer__copyright" style="max-width:500px;">© 2024. Комп'ютерна допомога <br> <small></small> </div> </div> <div class="footer-submenu"> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/uk/category/useful-tips/">Корисні поради</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/uk/category/solving-problems/">Вирішення проблем</a> </div> <div class="footer-submenu__column"> <a class="footer-submenu__item" data-key="aHR0cDovL3NvdmV0cy5uZXQvYWJvdXQ=" data-type="href" href="https://128gb.ru/uk/category/iron/">Залізо</a> </div> <div class="footer-submenu__column"> </div> </div> <div class="footer-social"> </div> </div> </div> </footer> <script type="text/javascript" src="//vk.com/js/api/openapi.js?124"></script> <script> var BANNERS = { types: { code: 1, consultant: 6, modal: 9, offer: 7 } } </script> <script type="text/javascript" src="https://128gb.ru/wp-content/themes/womensovet/assets/js/app-20170207142519.js"> </script> <script type="text/javascript"> /*<![CDATA[*/ window.hashName = window.location.hash; if (window.hashName) { $(window).load(function () { $('html, body').animate({ scrollTop: $(window.hashName).offset().top} , 2000); return false; } ); } jQuery(function($) { $(document).foundation(); APP.init(); getVkSharedCount(); getFaceBookShareCount(); getOKShareCount(); } ); /*]]>*/ </script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <div class="li-stat"> </div> <!-- SAPE RTB JS --> <script async="async" src="https://cdn-rtb.sape.ru/teasers/js/291/2/92291.js" type="text/javascript"> </script> <!-- SAPE RTB END --><br> <br> </body> </html>