Цвет placeholder css. Как изменить цвет placeholder с помощью css

Атрибут 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>Для стилизации плэйсхолдеров используются <a href="/ponyatie-i-vidy-translyatorov-i-kompilyatorov-programmnaya-realizaciya.html">следующие правила</a>:</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>В зависимости от контекста миксин можно использовать как для глобального применения стилей, так и для <a href="/chto-eto-takoe-udalenie-prilozhenii-i-otdelnyh-elementov.html">отдельных элементов</a> (опробуйте на 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>Не каждое <a href="/teg-html-perenosa-na-druguyu-stroku-kak-dobavit-s-pomoshchyu-svoistv-css.html">CSS свойство</a> можно использовать с плэйсхолдерами. Вот <a href="/interaktivnoe-televidenie-rostelekom-spisok-kanalov-predlozheniya-dlya.html">полный список</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>Все <a href="/slozhnye-makety-s-primeneniem-flex-css-primery-veshchi-kotorye-sleduet-pomnit.html">следующие примеры</a> написаны с использованием препроцессора 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>Чем <a href="/pochemu-pri-vyravnivanii-po-shirine-bolshie-probely-ubiraem.html">больше ширина</a> поля ввода, тем больше должно быть значение свойства 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 файл превратился в кашу из префиксов для всех <a href="/adobe-flesh-pleer-dlya-yandeks-brauzera-vozmozhnye-problemy-i-sboi.html">возможных браузеров</a>, то обратите внимание на Autoprefixer . С его помощью <a href="/kak-sdelat-modalnoe-okno-na-css-modalnoe-okno-na-chistom.html">чистый CSS</a> можно сделать грязным (но уже в другом файле), добавив все необходимые префиксы ко всем свойствам. Чтобы заставить плагин работать с пэйсхолдерами достаточно использовать псевдоэлемент::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 ; } <p>Из этого туториала Вы узнаете, как изменить <b>цвет замещающего текста </b> (placeholder text color) поля формы.</p><p>Замещающий текст поля формы содержит подсказку, которая указывает ожидаемые данные в поле. Это может быть пример или <a href="/kakie-programmy-neobhodimo-ustanovit-na-kompyuter-kakie.html">краткое описание</a> ожидаемой информации. Краткая подсказка отображается в поле до того, как пользователь начнёт вводить данные.</p><p>По умолчанию, замещающий текст светло-серый (таким его отображают браузеры). Для того чтобы добавить к этому тексту пользовательские стили, Вам нужно будет использовать браузерные префиксы для свойств CSS.</p><p>Для того чтобы изменить цвет замещающего текста, следуйте таким инструкциям:</p><ol><p>Составьте код в соответствии со <a href="/trikolor-tv-podtverdit-dannye-lichnyi-podtverzhdenie-personalnyh.html">следующей информацией</a> (обратите внимание, что Вам необходимо добавить один и тот же код 4 раза для каждого браузерного префикса):</p><p>Выберите файл, в который Вы добавите код. Вы можете добавить его в любой файл CSS вашего сайта, но мы приготовили для Вас список файлов, в которые рекомендуется добавлять <a href="/krasivyi-markirovannyi-spisok-v-css-pravila-css-dlya-nastroiki-vneshnego-vida.html">правила CSS</a> для <a href="/kakoi-serii-aifon-se-luchshe-iphone-se---chto-eto-takoe-stoit-li-pokupat-iphone-se.html">разных типов</a> движков сайтов:</p><h5>Шаблоны CMS:</h5><ul><li>Темы WordPress (Темы WooCommerce/Jigoshop) <i>/wp-content/themes/themeXXXXX/style.css </i></li><li>Шаблоны Joomla (Шаблоны VirtueMart) <i>/templates/themeXXXX/css/template.css </i></li><li>Темы Drupal <i>/sites/all/themes/themeXXX/css/style.css </i></li><li>Шаблоны Web (HTML5) <i>/css/style.css </i></li> </ul><h5>Шаблоны E-commerce:</h5><ul><li>Темы Magento <i>/skin/frontend /default/themeXXX/css/styles.css </i></li><li>Темы PrestaShop <i>/themes/themeXXXX/css/global.css </i></li><li>Темы OpenCart <i>/catalog/view/theme/themeXXX/stylesheet /stylesheet .css </i></li><li>Темы ZenCart <i>/includes/templates/themeXXX/css/stylesheet .css </i></li><li>Шаблоны osCommerce <i>/css/stylesheet .css </i></li><li>Шаблоны Shopify <i>style.css.liquid </i></li> </ul></li><li><p>Сохраните изменения и загрузите <a href="/skachat-fail-css-rar-dlya-garris-mod-kak-ubrat-rozovye-error-tekstury-v-garry-s.html">файлы CSS</a> на ваш сервер.</p> </ol> <p>Что такое placeholder (плейсхолдер)? Это <a href="/chto-predstavlyaet-soboi-programma-dlya-zapominaniya-angliiskih.html">английское слово</a> переводится как <i>заполнитель </i>. Используется в качестве пояснения или примера в полях ввода текста (имя, фамилия, e-mail и т. п.), в виде атрибута.</p> <p>На <a href="/bilain-svyaz-v-stranah-sng-opisanie-opcii-bilain-dobro-pozhalovat-na-vs.html">данный момент</a> поддерживается всеми <a href="/brauzer-i-kak-im-polzovatsya-chto-takoe-internet-brauzer.html">современными браузерами</a>. Ранее работа эмулировалась с помощью JavaScript. Элемент доказал свою пользу и разработчики браузеров ввели дополнительные свойства, позволяющие стилизовать «заполнитель» под свой дизайн.</p> <p>До сих пор нет единого мнения, является ли плейсхолдера псевдоклассом или псевдоэлементом. на основе WebKit/blink и Gecko (Firefox 19+) считают псевдоклассом (:, <a href="/kak-polnostyu-udalit-brauzer-s-kompyutera-deistviya-v-obozrevatele-internet-explorer.html">обозреватели Internet</a> Explorer (движок Trident) и Firefox 18- относят к псевдоэлементам (. Opera 12 вообще не позволяет изменять оформление, хотя атрибут поддерживается. И пока в CSS не будет официально закреплён этот пресдо-тип, склока между разработчиками продолжится.</p> <p>К счастью, устаревшие браузеры довольно оперативно заменяются новыми версиями - Chrome и Firefox с ускоренным циклом разработки «дисциплинировали» пользователей.</p> <p>Если решите поддерживать старые версии обозревателей (Opera 12, IE8 для Windows XP, IE9 - <a href="/ustanovka-windows-vista-kak-edinstvennoi-operacionnoi-sistemy.html">Windows Vista</a>), придётся действовать .</p> <p>Про placeholder сказал уже кучу раз, давайте посмотрим, как его можно использовать.</p> <p>Как обычно выглядит форма:</p> <form class="exam_form"> <p>Ваше имя:<br><input value=""></p> </form> <span>< form >< p > Ваше имя :< br >< input value = "" ></ p ></ form > </span> <p>Пример с плейсхолдером:</p> <form class="exam_form"> <p><input value="" placeholder="Ваше имя"></p> </form> <span>< form >< p >< input value = "" = "Ваше имя" ></ p ></ form > </span> <p>Таким нехитрым способом удаётся сократить итоговые размеры форм. Увы, но в примере выше есть один недостаток: <a href="/chto-takoe-ustroistvo-vneshnei-pamyati-vidy-vneshnei-pamyati-pk-ih-osobennosti-i.html">внешний вид</a> плейсхолдера отдаётся на откуп браузеру. Если учесть, что многие обозреватели устанавливают заполнителя серым, это лишает возможности использовать серые поля ввода.</p> <h2>Изменяем вид placeholder посредством css</h2> ::-webkit-input-placeholder { /* вид для Chrome/Safari/... */ } ::-moz-placeholder { /* вид для Firefox */ } :-ms-input-placeholder { /* вид для IE */ } <p>Теперь, сделаем цвет плейсхолдера оранжевым и более блеклым (полупрозрачным):</p> <p> ::-webkit-input-placeholder { color:#f80; opacity:.5; } ::-moz-placeholder { color:#f80; opacity:.5; } :-ms-input-placeholder { color:#f80; opacity:.5; } </p> <p>Псевдоэлемент::placeholder color </span> (<span>в некоторых случаях псевдокласс </span>) позволяет задать текстовое наполнение элемента формы. Он устанавливается при помощи атрибута placeholder : <input type="email" placeholder="jane@firefly.com">.</p> <p>Этот текст можно стилизовать для большинства современных браузеров с помощью специальных префиксов:</p> <p>::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: pink; } ::-moz-placeholder { /* Firefox 19+ */ color: pink; } :-ms-input-placeholder { /* IE 10+ */ color: pink; } :-moz-placeholder { /* Firefox 18- */ color: pink; }</p> <p>Предупреждение: это нестандартный синтаксис, с этим связаны и странные названия. :placeholder-shown – это стандарт, и даже авторы спецификации, вероятно, думают, что ::placeholder стандартизирован.</p> <p>Как и в случае с любым псевдоэлементом, его вы можно применять к <a href="/windows-10-razmer-shrifta-prilozheniya-gotovye-reg-faily-dlya-izmeneniya.html">определенным элементам</a> следующим образом:</p> <p>input.big-dog::-webkit-input-placeholder { color: orange; }</p> <p>Посмотреть пример </p> <h2>Разница между:placeholder-shown и::placeholder</h2> <p>:placeholder-shown предназначен для выделения формы ввода, а CSS placeholder color отвечает за стилизацию текста.</p> <p>Взгляните на диаграмму:</p> <p>Оказалось, что многих это сбивает с толку, и я часто вижу спецификацию, где есть :placeholder-shown , но отсутствует ::placeholder .</p> <p>Нужно отметить, что :placeholder-shown может влиять на стилизацию текста, так как является для него <a href="/dochernie-selektory-css-tehniki-raboty-s-dom-roditelskie-dochernie-i.html">родительским элементом</a> (<span>например, можно изменять font-size </span>).</p> <p>Обратите внимание: :placeholder-shown – псевдокласс (<span>элемент в конкретном состоянии </span>), а ::placeholder – это псевдоэлемент (<span>видимая часть, которая находится не в DOM </span>). Отличаются они одинарными и дойными кавычками.</p> <p>Так как :placeholder-shown является псевдоклассом, то он должен выделять существующий элемент. И поэтому выделяет форму ввода, когда текст в элементе формы отображается. Псевдоэлемент ::placeholder оборачивает сам текст заглушки.</p> <h3>Элемент или класс?</h3> <p>В этом плане <a href="/kak-zadat-cvet-placeholder-v-input-css-oformlenie-pleisholdera-s-pomoshchyu-css.html">input placeholder</a> color не стандартизирован. Это значит, что у каждого браузера своё понимание того, как это должно работать.</p> <p>Изначально этот псевдокласс был внедрён в браузер Firefox . Этот псевдокласс даёт не так уж много пространства для манёвра. Например, если нужно изменить цвет текста при выделении формы ввода, потребуется использовать селектор типа input:focus::placeholder . А псевдокласс не позволяет этого сделать.</p> <p>IE10 поддерживает этот функционал в качестве псевдокласса, а не элемента. Во всех остальных браузерах он расценивается как псевдоэлемент.</p> <h3>Цвет заглушки в Firefox</h3> <p>Вы заметили, что цвет заглушек выглядит более тусклым по сравнению с другими браузерами. На картинке, приведенной ниже, слева показан Firefox 43 , а справа — Chrome 47 :</p> <p><br><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201708/placeholders-150246.png' width="100%" loading=lazy></p> <p>Так происходит потому, что по умолчанию все «заглушки » в Firefox получают дополнительное значение прозрачности. Чтобы избавиться от этого эффекта, нам понадобится <a href="/otstup-krasnoi-stroki-v-vorde-chtoby-sdelat-krasnuyu-stroku-sleduet-vse-sposoby.html">следующая строка</a> кода:</p> <p>::-moz-placeholder { opacity: 1; }</p> <p>Попробуйте открыть это демо в браузере Firefox .</p> <h3>Поддержка стилей</h3> <p>Псевдоэлемент поддерживает следующие свойства:</p> <ul><li>font properties ;</li> <li>color ;</li> <li>background properties ;</li> <li>word-spacing ;</li> <li>letter-spacing ;</li> <li>text-decoration ;</li> <li>vertical-align ;</li> <li>text-transform ;</li> <li>line-height ;</li> <li>text-indent ;</li> <li>opacity ;</li> </ul><h3>Дополнительные ресурсы</h3> <p>Документация MDN <br>Документация IE <br><span>Развёрнутая статья на блоге Treehouse </p> <p>Если вы не знакомы с атрибутом placeholder, то давайте немного разъясним, что это такое и где он используется. Используется он в полях ввода формы. Атрибут выводит надпись в поле ввода, представляя роль некой подсказки. Ранее на нашем сайте был пример, с с <a href="/js-opredelenie-brauzera-opredelenie-brauzera-v-javascript-s-primerom-koda.html">помощью javascript</a>, <a href="/chto-vy-znaete-o-socialnyh-setyah-polza-i-vred-socialnyh.html">положительная сторона</a> <a href="/20-metody-peredachi-dannyh-na-fizicheskom-urovne-metody-peredachi-diskretnyh.html">данного метода</a> это кроссбраузерность. Теперь давайте поговорим о стилизации атрибута placeholder, который используется в <a href="/html-kakoi-teg-opredelyaet-pole-vvoda-dannyh-primery-form-sozdannyh-na-input-s.html">элементах input</a> и textarea.<br> Код поля ввода в нашем примере будет выглядеть примерно так:</p><p> <input type="text" placeholder="Введите ваше имя"> </p><p>На выходе мы получает такое поле: <input type="text" placeholder="Введите ваше имя"></p> <p>Теперь давайте представим, что нам необходимо стилизовать placeholder, для этого нам следует прописать набор правил в CSS:</p><p> ::-webkit-input-placeholder { color: #c1c1c1; } ::-moz-placeholder { color: #c1c1c1; } /* Firefox 19+ */ :-moz-placeholder { color: #c1c1c1; } /* Firefox 18- */ :-ms-input-placeholder { color: #c1c1c1; } </p><p>Получаем: <input class="plc" type="text" placeholder="Введите ваше имя"></p> <p>Изменять мы можем не все свойства, но список большинства из них, поддерживаемых современными браузерами приведен ниже:<br><b>font </b> (так же смежные свойства)<br><b>background </b> (так же смежные свойства)<br><b>color </b><br><b>word-spacing </b><br><b>letter-spacing </b><br><b>text-decoration </b><br><b>vertical-align </b><br><b>text-transform </b><br><b>line-height </b><br><b>text-indent </b><br><b>text-overflow </b><br><b>opacity </b></p> <p>В <a href="/u-vas-otklyuchen-javascript-v-brauzere-kak-vklyuchit-java-ili-javascript-v-raznyh.html">разных браузерах</a> правило пишется по разному, т.к. пока нет единого стандарта, этот набор записей продолжает быть актуальным. В браузере IE, а так же firefox ниже 18 версии placeholder воспринимается как псевдокласс, а в новых <a href="/istoriya-firefox-istoriya-sozdaniya-brauzera-firefox.html">браузерах firefox</a>, webkit и blink воспринимается как псевдоэлемент.</p><p><b>Сокращение текста в placeholder </b><br> Иногда подсказки могут быть такой длины, что не способны полностью поместиться в поле ввода. Для этих целей можно так же воспользоваться <a href="/kak-ustanovit-vpn-na-noutbuke-dopolnitelnye-svoistva-soedineniya-dlya-chego.html">дополнительными свойствами</a>, которые позволят сократить <a href="/kak-izmenit-cvet-teksta-podskazki-v-placeholder-s-pomoshchyu-stilei-css-kak.html">текст placeholder-а</a> в поле ввода.</p><p>Input { text-overflow:ellipsis; } input::-moz-placeholder { text-overflow:ellipsis; } input:-moz-placeholder { text-overflow:ellipsis; } input:-ms-input-placeholder { text-overflow:ellipsis; } </p><p>В результате получаем поле ввода такого с placeholder такого вида: <input class="plc2" type="text" placeholder="Введите ваше имя"></p><p><b>Скрываем текст при клике по полю </b><br> По умолчанию каждый браузер интерпретирует реакцию placeholder-a по своему. В одних браузерах он скрывается сразу при клике на поле, в других он скрывается при наличии хотя бы одного символа в поле ввода. Давайте сделаем так, чтобы текст скрывался при клике по полю, одинаково во всех браузерах.</p><p> :focus::-webkit-input-placeholder { color: transparent; } :focus::-moz-placeholder { color: transparent; } :focus:-moz-placeholder { color: transparent; } :focus:-ms-input-placeholder { color: transparent; } </p><p>Получаем такое действо: </p> <br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </article> </div> </div> <div id="sidebar"> <aside> <div class="inner"> <div> <div class="xyz_wrapper"> <div> </div> </div> <div> </div> </div> </div> </aside> </div> </div> </div> <script type="text/javascript" src="/assets/like.js"></script> </main> <div id="slide-menu"> <div id="slide-menu"> <div class="menu-content"> <div class="slide-menu-close" id="slide-menu-close" title="Закрыть"></div> <dblock></dblock> <ul> <li><span class="link" onclick="go('/category/beeline/')"><i class=""></i> Beeline</span></li> <li><span class="link" onclick="go('/category/internet/')"><i class=""></i> Интернет</span></li> <li><span class="link" onclick="go('/category/tele2/')"><i class=""></i> Tele2</span></li> <li><span class="link" onclick="go('/category/useful/')"><i class=""></i> Полезное</span></li> <li><span class="link" onclick="go('/category/ip-telephony/')"><i class=""></i> IP-Телефония</span></li> <li><span class="link" onclick="go('/category/iota/')"><i class=""></i> Йота</span></li> <li><span class="link" onclick="go('/category/mts/')"><i class=""></i> Mts</span></li> <li><span class="link" onclick="go('/category/megafon/')"><i class=""></i> Megafon</span></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">Реклама</a></li> <li><a href="">О сайте</a></li> </ul> </div> </div> </div> <div id="slide-search"> <div class="search-content"> <div class="search-form-close" id="slide-search-close" title="Закрыть"></div> <div class="search-form-header"><img src="/assets/vsadu-icon-gray.svg" alt="Портал о мобильных операторах" onerror="this.src='/ui/vsadu-icon-gray.png'" style="height: 45px" loading=lazy> Поиск</div> <form style="position: relative" action="/search" method="get" autocomplete="off"> <input type="text" class="m-seach-field" name="q" placeholder="поиск по сайту" value="" /> <div> <dblock></dblock> </div> <div class="desktop_screen" style="position: absolute;right: 9px;top: 9px;"> <input type="submit" class="button yellow big" value="Найти" /> </div> </form> </div> </div> <script type="text/javascript" src="/assets/slide-menu.3.js"></script> <script type="text/javascript" src="/assets/sticky.min.js"></script> <script type="text/javascript" src="/assets/jquery.lazyload.min.js"></script> <script type="text/javascript" src="/assets/jquery-ui.min.js"></script> <script type="text/javascript" src="/assets/JsHttpRequest.js"></script> <script type="text/javascript" src="/assets/Request.js"></script> <div class="white_section"> <div> <div class="desktop_screen" style="padding: 15px 0;background:#f6f8f2;"> <dblock></dblock> </div> </div> </div> <footer> <div class="footer"> <dblock></dblock> <div class="silver_section"> <div class="content"><div class="inner"> <div class="section group" style="text-align: center"> <div class="col span_1_of_3"> <div style="font-size: 16px; vertical-align: middle; line-height: 45px;"><i class="fa fa-envelope-o"></i> cena5.ru - Портал о мобильных операторах</div> </div> <div class="col span_1_of_3"> </div> <div class="col span_1_of_3"> <a target="_blank" href="https://connect.ok.ru/offer?url=https://cena5.ru/cvet-placeholder-css-kak-izmenit-cvet-placeholder-s-pomoshchyu-css-izmenyaem-vid.html"><img class="soc" alt="Портал о мобильных операторах Одноклассники" src="/assets/ok.svg" onerror="this.src='/ui/icons/ok.png'" loading=lazy></a> <a target="_blank" href="https://vk.com/share.php?url=https://cena5.ru/cvet-placeholder-css-kak-izmenit-cvet-placeholder-s-pomoshchyu-css-izmenyaem-vid.html"><img class="soc" alt="Портал о мобильных операторах ВКонтакте" src="/assets/vk.svg" onerror="this.src='/ui/icons/vk.png'" loading=lazy></a> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://cena5.ru/cvet-placeholder-css-kak-izmenit-cvet-placeholder-s-pomoshchyu-css-izmenyaem-vid.html"><img class="soc" alt="Портал о мобильных операторах Facebook" src="/assets/fb.svg" onerror="this.src='/ui/icons/fb.png'" loading=lazy></a> <a target="_blank" href="https://www.twitter.com/share?url=https://cena5.ru/cvet-placeholder-css-kak-izmenit-cvet-placeholder-s-pomoshchyu-css-izmenyaem-vid.html"><img class="soc" alt="Портал о мобильных операторах Twitter" src="/assets/tw.svg" onerror="this.src='/ui/icons/tw.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Google+" src="/assets/g+.svg" onerror="this.src='/ui/icons/g+.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Pinterest" src="/assets/pin.svg" onerror="this.src='/ui/icons/pin.png'" loading=lazy></a> <div class="soc-caption">Портал о мобильных операторах в социальных сетях</div> </div> </div> </div></div> </div> <div class="content desktop_screen" style="overflow: inherit; margin-top: 20px"><div class="inner"> <div class="section group"> <div class="col span_2_of_5"> <div class="share-widget"> <script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> <div class="ya-share2" data-services="collections,vkontakte,gplus,odnoklassniki,facebook,moimir,twitter,pinterest,lj,viber,whatsapp,pocket" data-url="https://cena5.ru" data-counter="true" data-limit="6"></div> </div> </div> <div class="col span_3_of_5" style="text-align: center;"> <a class="section_link" href="/feedback.html">Контакты</a> <a class="section_link" href="" style="color: #ff4500 !important;">Реклама</a> <a class="section_link" href="">Вакансии</a> <script> document.write('<a class="section_link" href="mailto:info' + '@cena5.ru">Написать нам</a>') </script> </div> </div> </div> </div> <dblock></dblock> <div class="content"> <div class="inner"> <p style="margin: 20px 0">Copyright © «cena5.ru» 2024 Копирование и видоизменение материалов сайта возможно только после письменного согласия правообладателей. <br /> Статьи защищены законом об авторских и смежных правах, при цитирование материалов проекта «cena5.ru» <span style="text-decoration: underline">прямая открытая ссылка</span> на <strong>cena5.ru</strong> обязательна. <br /> Все права защищены.</p> <dblock></dblock> </div> </div> </div> </footer> <script src="/assets/init.3.js"></script> <div class="push-popup"> <img src="/assets/vsadu-icon.png" style="float: left; margin-right: 10px; margin-bottom: 70px" / loading=lazy> Мы можем оповещать вас о новых статьях,<br /> чтобы вы всегда были в курсе самого интересного. <br /><br /> <button class="button blue uppercase push-button" style="margin-bottom: 10px">Продолжить</button> <button class="button blue-text uppercase push-cancel" style="margin-bottom: 10px">Нет, спасибо</button> </div> <script src="/assets/init.1.js"></script> <div id="p-b"> </div> <style> #yinfo-badge .yinfo-links, #yinfo-badge .yinfo-report { display: none !important } ::shadow .yinfo-links, ::shadow .yinfo-report { display: none !important } </style> <div class="page-top-button wide_desktop_screen hidden"> <div class="page-top-sec"> <a href="/" title="Главная Портал о мобильных операторах"><i class="fa fa-home gray" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a href="" title="О сайте"><i class="fa fa-calendar green" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a title="Связаться с нами" href="/feedback.html"><i class="fa fa fa-commenting-o" style="font-size: 32px; color:#ff4500"></i></a> </div> </div> </body> </html>