Placeholder styling css. The appearance of the field names or how to change the placeholder

If you're not familiar with the placeholder attribute, let's explain a bit what it is and where it's used. It is used in form input fields. The attribute displays an inscription in the input field, representing the role of a hint. Earlier on our site there was an example with using javascript, positive side this method it's cross browser. Now let's talk about styling the placeholder attribute, which is used on the input and textarea elements.
The code for the input field in our example would look something like this:

At the output, we get the following field:

Now let's imagine that we need to style the placeholder, for this we need to write a set of rules in CSS:

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

We get:

We can not change all properties, but a list of most of them supported by modern browsers is given below:
font(also related properties)
background(also related properties)
color
word-spacing
letter spacing
text-decoration
vertical-align
text-transform
line-height
text indent
text overflow
opacity

AT different browsers the rule is written differently, because as long as there is no single standard, this set of records continues to be relevant. In the IE browser, as well as firefox below version 18, placeholder is perceived as a pseudo-class, and in the new firefox browsers, webkit and blink are treated as pseudo-elements.

Shorten text in placeholder
Sometimes hints can be so long that they cannot fully fit into the input field. For these purposes, you can also use additional properties that will shorten the placeholder text in the input field.

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

As a result, we get an input field with a placeholder like this:

Hide text on click
By default, each browser interprets the placeholder response differently. In some browsers, it is hidden immediately when you click on the field, in others it is hidden if there is at least one character in the input field. Let's make it so that the text is hidden when clicking on the field, the same in all browsers.

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

We get this action:

In an effort to reduce shape and reduce visual noise, tag designers are replaced by the placeholder attribute, thereby increasing the load on short-term memory. For visually impaired people, the hint is difficult to read. Better place directly above the input field. An empty field is more easily recognized as an element that needs to be filled.

Badly

Good

Styling: change color of placeholder CSS

Change input field style with placeholder CSS

Badly

placeholder effect for

The placeholder attribute only works for and , even if other tags have the contenteditable attribute set.</p> <style> .raz { height: 3em; border: 1px solid; } </style> <div contentEditable placeholder="You can enter text" 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="You can enter text" class="raz"></div> <h2>An ancient memory method that changes JavaScript value</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>The placeholder attribute is used to create tooltips inside empty input fields (tags <input>and <textarea>). In this article, I will look at ways to style placeholders, as well as how to make them more usable.</p> <p>Let's start with an example for those who don't yet know what a placeholder is and how to use it:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>When developing interfaces, you should take into account the behavior of placeholders. The placeholder text disappears as soon as typing begins. That is why you should not use them to convey information about the input field itself (how many and what characters it should contain). For these purposes, it is best to use the tag <label>or a paragraph with a little hint. You can read more about the features of using placeholders.</p> <h2>Stylization</h2> <p>The following rules are used to style placeholders:</p>::-webkit-input-placeholder ( color : blue ; ) ::-moz-placeholder ( color : blue ; ) /* Firefox 19+ */ :-moz-placeholder ( color : blue ; ) /* Firefox 18- * / :-ms-input-placeholder ( color : blue ; ) <p>Looks terrible, doesn't it? And there is a reason for this - until now, CSS rules for placeholders have not been standardized and the implementation in each browser is different. You can learn more about all the necessary prefixes at caniuse .</p> <p>If you're using a CSS preprocessor, you'll probably find it best to write a simple mixin to style placeholders. Example in Sass:</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @content ; ) ) <p>Depending on the context, the mixin can be used to apply styles globally or on individual elements (try it out on SassMeister):</p> <span>// Globally for each input field</span>@include placeholder ( color : blue ; ) <span>// For certain input fields</span>.input ( @include placeholder ( color : green ; ) ) <h4>Example</h4> <p>Blue text for the placeholder (never do this):</p>.blue-text ::-webkit-input-placeholder ( color : #2e8ece ; ) .blue-text :-moz-placeholder ( color : #2e8ece ; ) ; ) .blue-text :-ms-input-placeholder ( color : #2e8ece ; ) <p> <input type="text" placeholder="Start typing here" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Supported properties</h2> <p>Not every CSS property can be used with placeholders. Here <a href="https://zhumor.ru/en/computer/poryadok-okazaniya-uslug-v-ramkah-arhivnyh-tarifnyh-planov-s.html">full list</a> supported properties:</p> <ul><li>font and all related properties (font-size , font-family , etc.)</li> <li>background and all related properties (background-color , background-image , etc.)</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>Animations</h2> <p>Animation ideas belong to the html5.by blog.</p> <p>All of the following examples are written using the Sass preprocessor. Each comes with a link to SassMeister where you can find the compiled CSS code.</p> <p>You will most likely want to apply animations to placeholders when the focus is on an input field. All this is done quite simply. It is enough just to use the previously written placeholder mixin a few times:</p>.input( @include placeholder( <span>// Styles for the normal state</span>) & :focus ( @include placeholder ( <span>// Styles after the focus event</span> } } } <h3>Changing transparency</h3>.input ( @include placeholder ( color : #aaa ; opacity : 1 ; transition : opacity 300ms ; ) & :focus ( @include placeholder ( opacity : 0 ; ) ) ) <p> <input type="text" placeholder="Demo: change transparency" class="demo-css-placeholders-input pl-opacity"></p> <h3>Shift right and left</h3> <p>The larger the width of the input field, the larger the value of the text-indent property should be. For a standard input field, 500px will be enough, for wider ones, you should select manually. The width of the input field and the text-indent value determine the speed of the animation. To shift to the left, you need to use negative values, for example -500px .</p><p> <input type="text" placeholder="Demo: shift right" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: shift left" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Shift down</h3> <p>As in the previous example, the animation depends on the size of the input, but in this case, pay attention to the height. For the vast majority of input fields, the desired line-height value will be within 100px . Unfortunately, using the line-height property, it is impossible to implement the effect of moving up, since the property does not accept negative values.</p>.input ( @include placeholder ( text-indent : 0px ; transition : text-indent 300ms ; ) & :focus ( @include placeholder ( text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Demo: shift down" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Together</h3> <p>To make it nice and convenient to use the animation code for placeholders, you can write a small library of mixins for any preprocessor. The library looks like this ():</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>Its very easy to use. It is enough to connect the desired mixin to any input field, or simply create one global rule for all the paceholders on the page:</p> <span>// For individual elements</span>.pl-shift-right ( @include pl-shift ( right ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// For everything else</span>@include pl-shift ( left ); <h2>Autoprefixer</h2> <p>If you are not using a preprocessor and still do not want your original <a href="https://zhumor.ru/en/internet/v-kakoi-papke-faily-css-struktura-papok-i-elementov-papka-abstract-zdes-zhivut.html">css file</a> turned into a mess of prefixes for all possible browsers, then take a look at Autoprefixer . With it, pure CSS can be made dirty (but in a different file) by adding all the necessary prefixes to all properties. To make the plugin work with paceholders, it is enough to use pseudo-element::placeholder:</p>::placeholder ( color : orange ; ) . input : : placeholder ( color : blue ; ) <p>After parsing your styles, Autoprefixer will create a separate CSS file in which it will write all the necessary prefixes for all the browsers you specified.</p> <h2>What's next</h2> <p>As I wrote above, everything related to applying styles to placeholders has not yet been standardized. It will be fixed soon. A pseudo-class was added to the Selector Level 4 specification: placeholder-shown , which will finally bring to the standard all that crazy mixture of pseudo-classes and pseudo-elements that exists now. You can check support on caniuse (currently not supported in any browser).</p> <p>Applying styles with :placeholder-shown will be much easier:</p>.input :placeholder-shown ( color : blue ; ) <blockquote>Typically the placeholder attribute on input and textarea is used to call to action within those elements. In this note I will describe several options for styling the text of placeholders, as well as options for their animation</blockquote> <p>So, the text color of our placeholder can be changed using, for example, the following set of css rules:</p> <p>::-webkit-input-placeholder ( color : #c0392b ;) ::-moz-placeholder ( color : #c0392b ;) /* Firefox 19+ */ :-moz-placeholder ( color : #c0392b ;) /* Firefox 18- */ :-ms-input-placeholder ( color : #c0392b ;)</p> <p>The bulk of the code for styling such a simple property is due to the lack of a common standard, in connection with which each browser implemented support for placeholder styling in its own way.</p> <p>Also, not all are supported. <a href="https://zhumor.ru/en/computer/zaderzhka-animacii-css3-primery---obratnaya-animaciya-css-proigryvanie-animacii-svoistvo-animation-p.html">css properties</a>. Here is a list of exactly supported properties:</p> <p>font (and related) <br>background (and related) <br>color <br>word-spacing <br>letter spacing <br>text-decoration <br>vertical-align <br>text-transform <br>line-height <br>text indent <br>text overflow <br>opacity</p> <p>It also happens that the text of the placeholder "goes" beyond the width of the input or textarea element (a common case for <a href="https://zhumor.ru/en/internet/samsung-galaxy-core-lte-otzyvy-samsung-galahy-sore-lte---tehnicheskie-harakteristiki-sim-karta.html">mobile devices</a>). At the same time, it is automatically cropped ugly.</p> <p>A css property such as text-overflow: ellipsis will help us fix this trouble, which will add an aesthetic ellipsis to the cropped area of ​​the placeholder-a. In styles we write like this:</p> <p>input [ placeholder ] ( text-overflow : ellipsis ;) input ::-moz-placeholder ( text-overflow : ellipsis ;) input :-moz-placeholder ( text-overflow : ellipsis ;) input :-ms-input-placeholder ( text-overflow : ellipsis ;)</p> <p>To add even more aesthetics to our placeholders, we can add the effect of hiding it when the corresponding element receives focus.</p> <p>A few examples of such hiding with animation elements:</p> <p>/* smooth change of placeholder transparency on focus */</span>.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 :focus::-moz-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;) .input :focus:-moz-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;) .input :focus :-ms-input-placeholder ( opacity : 0 ; transition : opacity 0.3s ease ;) <span>/* shift placeholder to the right on focus */</span>.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 <span>:focus::-webkit-input-placeholder</span>( 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 ;) <span>/* move the placeholder down on focus */</span>.input ::-webkit-input-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;) .input ::-moz-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;) .input :-moz-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;) .input :-ms-input-placeholder ( line-height : 20px ; transition : line-height 0.5s ease ;) .input <span>:focus::-webkit-input-placeholder</span>( line-height : 100px ; transition : line-height 0.5s ease ;) .input :focus::-moz-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;) .input :focus:- moz-placeholder ( line-height : 100px ; transition : line-height 0.5s ease ;)</p> <p>This is where we will end.</p> <p>The placeholder attribute is used to call to action inside empty input and textarea elements. In this article, we will look at the possibilities of styling placeholder-a text, as well as some tricks that will make it more convenient and functional.</p> <p>So, let's start with an example for those who don't know what a placeholder is.</p> <h4>html</h4> <input type="text" placeholder="Leave a message here"> <p>Placeholder-a style can be changed using the following set of css rules:</p> <h4>css</h4>::-webkit-input-placeholder (color:#c0392b;) ::-moz-placeholder (color:#c0392b;)/* Firefox 19+ */ :-moz-placeholder (color:#c0392b;)/* Firefox 18- */ :-ms-input-placeholder (color:#c0392b;) <p>Looks scary, doesn't it? The fact is that this is still not in the standards. Each browser has implemented support for placeholder styling in its own way.</p> <p>in IE and <a href="https://zhumor.ru/en/internet/plagin-adobe-flash-player-dlya-firefox-obnovlenie-adobe-flash-player-dlya-firefox-v-staryh-versiyah.html">old firefox</a>(before the 18th) placeholder is considered a pseudo-class, and in <a href="https://zhumor.ru/en/computer/kak-sdelat-udobnoi-rabotu-s-bolshim-kolichestvom-vkladok-v-brauzere-kak-vernut.html">new firefox</a>, webkit and blink are pseudo-elements.</p> <p>Let's see what happened:</p> <p>I must say that not all possible css properties are supported. Most modern browsers allow you to change:</p> <ul><li>font (and related properties)</li> <li>background (and related properties)</li> <li>color</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>text overflow</li> <li>opacity</li> </ul><h2>What if the placeholder doesn't fit?</h2> <p>Sometimes text input fields are reduced in width due to layout features, in particular on <a href="https://zhumor.ru/en/internet/kesh-na-telefone-mozhno-li-udalyat-dannye-kak-ochistit-kesh-brauzera-i.html">mobile devices</a>. In this case <a href="https://zhumor.ru/en/internet/css-obrezat-izobrazhenie-po-vysote-kosoi-kak-pri-pomoshchi-css.html">long text</a> placeholder will be ugly cut off. To prevent this, you can use text-overflow: ellipsis . This syntax will work in all new browsers.</p> <h4>css</h4>input (text-overflow:ellipsis;) input::-moz-placeholder (text-overflow:ellipsis;) input:-moz-placeholder (text-overflow:ellipsis;) input:-ms-input-placeholder (text-overflow :ellipsis;) <h2>How to hide placeholder on focus?</h2> <p>Hiding a placeholder occurs in different ways.</p> <ol><li>in some browsers when getting focus by input</li> <li>in other browsers if there is at least one character entered</li> </ol><p>I like the first option better. In order to set this behavior in all browsers that support placeholder, we define the following css rules:</p> <h4>css</h4>:focus::-webkit-input-placeholder (color: transparent) :focus::-moz-placeholder (color: transparent) :focus:-moz-placeholder (color: transparent) :focus:-ms-input-placeholder ( color:transparent) <h2>Hiding the placeholder nicely</h2> <p>You can also add a transition to show and hide the placeholder:</p> <h4>css</h4>/* fade placeholder opacity on focus */ .input1::-webkit-input-placeholder (opacity: 1; transition: opacity 0.3s ease;) .input1::-moz-placeholder (opacity: 1; transition: opacity 0.3s ease;) .input1:-moz-placeholder (opacity: 1; transition: opacity 0.3s ease;) .input1:-ms-input-placeholder (opacity: 1; transition: opacity 0.3s ease;) .input1 :focus::-webkit-input-placeholder (opacity: 0; transition: opacity 0.3s ease;) .input1:focus::-moz-placeholder (opacity: 0; transition: opacity 0.3s ease;) .input1:focus :-moz-placeholder (opacity: 0; transition: opacity 0.3s ease;) .input1:focus:-ms-input-placeholder (opacity: 0; transition: opacity 0.3s ease;) focus*/ .input2::-webkit-input-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;) .input2::-moz-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;) .input2:-moz-placeholder (text-indent: 0px; transition: text-indent 0.3s ease;).input2:-ms-input-placeholde r(text-indent: 0px; transition: text-indent 0.3s ease;) .input2:focus::-webkit-input-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;) text-indent: 500px; transition: text-indent 0.3s ease;) .input2:focus:-moz-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;) .input2:focus:-ms- input-placeholder (text-indent: 500px; transition: text-indent 0.3s ease;) /* move the placeholder down on focus */ .input3::-webkit-input-placeholder (line-height: 20px; transition: line-height 0.5s ease;) .input3::-moz-placeholder (line-height: 20px; transition: line-height 0.5s ease;) -height 0.5s ease;) .input3:-ms-input-placeholder (line-height: 20px; transition: line-height 0.5s ease;) .input3:focus::-webkit-input-placeholder (line-height: 100px; transition: line-height 0.5s ease;) .input3:focus::-moz-placeholder (line-height: 100px; transition: line-height 0.5s ease;) er (line-height: 100px; .input3:focus:-ms-input-placeholder (line-height: 100px; transition: line-height 0.5s ease;) <p>Hope you find it useful. Write comments and suggestions in the comments.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> <div class="clear"></div> <div class="share"> <div class="title">Liked the article? Share with your friends:</div> <div class="social-likes"> <div class="facebook" title="Share link on facebook">Facebook</div> <div class="twitter" title="Share link on Twitter">Twitter</div> <div class="mailru" title="Share link in my world">My world</div> <div class="vkontakte" title="Share link in Vkontakte">In contact with</div> <div class="plusone" title="Share link on google plus">Google+</div> </div> </div> <div class="information"> <div class="date left" itemprop="datePublished">26.03.2020</div> <div class="category left" itemprop="articleSection">A computer</div> <div class="clear"></div> </div> <div class="related_posts"> <div class="block_title">The most interesting:</div> <div class="items"> <div class="item left"> <div class="thumb"> <a href="https://zhumor.ru/en/computer/na-kakom-rasstoyanii-mozhno-smotret-zhk-televizor-rasstoyanie-ot.html"><img class="img" src="/uploads/0a94591b800ec5ec272b28f36c5b541c.jpg" loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/computer/na-kakom-rasstoyanii-mozhno-smotret-zhk-televizor-rasstoyanie-ot.html">Distance from the TV depending on the diagonal ... bad choice ...</a></div> </div> <div class="item left"> <div class="thumb"> <a href="https://zhumor.ru/en/internet/kak-sdelat-gruppu-otkrytoi-kak-sdelat-zakrytuyu-gruppu-vkontakte-kak.html"><img class="img" src="/uploads/15a73fff906c74b642c96e7d2fb7c72b.jpg" loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/internet/kak-sdelat-gruppu-otkrytoi-kak-sdelat-zakrytuyu-gruppu-vkontakte-kak.html">How to make a closed VKontakte group How to make a private VKontakte group</a></div> </div> <div class="item left"> <div class="thumb"> <a href="https://zhumor.ru/en/internet/zashchita-telefona-ot-proslushki-kak-obezopasit-svoi-smartfon.html"><img class="img" src="/uploads/e21e7ca1020e4565a26e7a81448b36a6.jpg" loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/internet/zashchita-telefona-ot-proslushki-kak-obezopasit-svoi-smartfon.html">How to find out if a mobile phone is being tapped How to find out a mobile phone for wiretapping</a></div> </div> <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> </div> </div> </div> </section> <aside class="right"> <div class="block cats"> <div class="block_title">Blog Categories</div> <div class="block_data"> <ul class="first_level"> <li> <a href="https://zhumor.ru/en/category/internet/"> <div class="icon"><img src="https://zhumor.ru/wp-content/uploads/2016/06/ic_cat11.png" alt="" loading=lazy loading=lazy></div> Internet</a> </li> <li> <a href="https://zhumor.ru/en/category/internet/"> <div class="icon"><img src="https://zhumor.ru/wp-content/uploads/2016/06/ic_cat11.png" alt="" loading=lazy loading=lazy></div> Internet</a> </li> <li> <a href="https://zhumor.ru/en/category/computer/"> <div class="icon"><img src="https://zhumor.ru/wp-content/uploads/2016/06/ic_cat11.png" alt="" loading=lazy loading=lazy></div> A computer</a> </li> </ul> </div> </div> <div class="banner" style="margin: 0 auto 30px;width:240px;"> </div> <div class="banner"> </div> <div class="block articles "> <div class="block_title">Popular Articles</div> <div class="block_data"> <div class="items"> <div class="item"> <div class="thumb"> <a href="https://zhumor.ru/en/computer/luchshie-kanaly-na-youtube-tolko-samoe-poleznoe-i-interesnoe-kanaly-na-youtube.html"> <img src="/uploads/03097b30847f2bb50e18a9f0f7211070.jpg" alt="Only the most useful and interesting!" / loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/computer/luchshie-kanaly-na-youtube-tolko-samoe-poleznoe-i-interesnoe-kanaly-na-youtube.html">Only the most useful and interesting!</a></div> </div> <div class="item"> <div class="thumb"> <a href="https://zhumor.ru/en/internet/obuchenie-programmirovaniyu-s-nulya-poshagovoe-rukovodstvo-dlya.html"> <img src="/uploads/601d8ac2768e995de46054d43c5699f8.jpg" alt="Ten steps from a teapot to a professional programmer" / loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/internet/obuchenie-programmirovaniyu-s-nulya-poshagovoe-rukovodstvo-dlya.html">Ten steps from a teapot to a professional programmer</a></div> </div> <div class="item"> <div class="thumb"> <a href="https://zhumor.ru/en/internet/sozdat-uchetnuyu-zapis-v-kontakte-kak-sozdat-stranicu-vkontakte.html"> <img src="/uploads/a1b6ddeea978de17e778ec98cba93047.jpg" alt="How to create a page"ВКонтакте" без номера телефона: полная инструкция" / loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/internet/sozdat-uchetnuyu-zapis-v-kontakte-kak-sozdat-stranicu-vkontakte.html">How to create a VKontakte page without a phone number: complete instructions</a></div> </div> <div class="item"> <div class="thumb"> <a href="https://zhumor.ru/en/internet/skachat-prilozhenie-kamera-na-russkom-besplatno-ekrannaya-kamera-ubedites.html"> <img src="/uploads/b1e42cbe1be53349cdc3bc1f8ad6ec84.jpg" alt="Screen camera Make sure the camera is connected windows 10" / loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/internet/skachat-prilozhenie-kamera-na-russkom-besplatno-ekrannaya-kamera-ubedites.html">Screen camera Make sure the camera is connected windows 10</a></div> </div> <div class="item"> <div class="thumb"> <a href="https://zhumor.ru/en/internet/igrovoi-draiver-na-vindovs-8-luchshie-programmy-dlya-avtomaticheskogo-obnovleniya-draiverov-windows-por.html"> <img src="/uploads/f1a2462d18cf4e3e52b9a251d69e9098.jpg" alt="Best Software to Automatically Update Windows Drivers" / loading=lazy loading=lazy> </a> </div> <div class="name"><a href="https://zhumor.ru/en/internet/igrovoi-draiver-na-vindovs-8-luchshie-programmy-dlya-avtomaticheskogo-obnovleniya-draiverov-windows-por.html">Best Software to Automatically Update Windows Drivers</a></div> </div> </div> </div> </div> <div class="banner airSticky"> </div> </aside> <script type="text/javascript">!function(t,e){ "use strict";function n(){ if(!a){ a=!0;for(var t=0;t<d.length;t++)d[t].fn.call(window,d[t].ctx);d=[]} }function o(){ "complete"===document.readyState&&n()} t=t||"docReady",e=e||window;var d=[],a=!1,c=!1;e[t]=function(t,e){ return a?void setTimeout(function(){ t(e)} ,1):(d.push({ fn:t,ctx:e} ),void("complete"===document.readyState||!document.attachEvent&&"interactive"===document.readyState?setTimeout(n,1):c||(document.addEventListener?(document.addEventListener("DOMContentLoaded",n,!1),window.addEventListener("load",n,!1)):(document.attachEvent("onreadystatechange",o),window.attachEvent("onload",n)),c=!0)))} }("wpBruiserDocReady",window); (function(){ var wpbrLoader = (function(){ var g=document,b=g.createElement('script'),c=g.scripts[0];b.async=1;b.src='/?gdbc-client=3.1.11-'+(new Date()).getTime();c.parentNode.insertBefore(b,c);} );wpBruiserDocReady(wpbrLoader);window.onunload=function(){ };window.addEventListener('pageshow',function(event){ if(event.persisted){ (typeof window.WPBruiserClient==='undefined')?wpbrLoader():window.WPBruiserClient.requestTokens();} },false);} )(); </script> <script type='text/javascript' src='https://zhumor.ru/wp-content/plugins/cookie-notice/js/front.min.js?ver=1.2.40'></script> <script type='text/javascript' src='/assets/front1.min1.js'></script> <script type='text/javascript' src='https://zhumor.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <div id="cookie-notice" role="banner" class="cn-bottom bootstrap" style="color: #fff; background-color: #000;"><div class="cookie-notice-container"><span id="cn-notice-text">Friends, I use cookies to give you the best experience on my site. If you agree, click "OK".</span><a href="#" id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie button bootstrap">OK</a> </div> </div> <div class="clear"></div> </div> <div class="cont"> <footer> <div class="col left"> <div class="l"> <img src="/img/logo.png" loading=lazy loading=lazy> </div> <div class="copyright">zhumor.ru - Simple and accessible. We teach technology</div> </div> <ul id="menu-foot" class="links left"> <li class="menu-item type-post_type object-page "><a href="https://zhumor.ru/en/feedback.html">Contacts</a></li> <li class="menu-item type-post_type object-page "><a href="">Advertising and collaboration</a></li> <li class="menu-item type-post_type object-page "><a href="">About the site</a></li> </ul> <div class="clear"></div> </footer> </div> </div> <div class="buttonUp"><a href="#top"></a></div> </div> <script src="/assets/jquery1.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/jquery-migrate.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/scrollTop.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/social-likes.min.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/fancybox.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/jquery.airStickyBlock.min.js"></script> <script src="/wp-includes/js/comment-reply.min.js"></script> <script src="https://zhumor.ru/wp-content/themes/raten/js/scripts.js"></script> <script>// <![CDATA[ // < ![CDATA[ function GoTo(link){ window.open(link.replace("_","http://","https://"));} // ]]></script> <script type="text/javascript">(window.Image ? (new Image()) : document.createElement('img')).src = location.protocol + '//vk.com/rtrg?r=VaOkaUHa8b7aOnpvk6*6aJe31KwblJWqkjoKUg6hphyBGU1uxyonnbQb1r4oIvdJyeruVbHyREoFF4QvP9MgyWw60g4RK7x6C7HK4QqiFEFVR9ga/77OHVf6lAy59pIahKMAGkZelNuxMkkmSG4v6PPVXCRWTvnrTQdWQiLrJII-';</script> </body> </html>