Zástupný štýl css. Pridanie štýlu CSS do zástupného symbolu

Zástupný symbol – prvok vstupného poľa, do ktorého môžete umiestniť nápovedu. Keď používateľ začne zadávať údaje, text pomocníka zmizne, aby neprekážal. Každý prehliadač má svoj vlastný názor na spôsob zobrazenia tohto prvku a niekedy predvolené štýly narušia celý dizajn. Na ich ovládanie je potrebné použiť špeciálne pravidlo CSS pre zástupný symbol.

Kde je zástupný symbol?

Problém je v tom, že nápoveda vstupného poľa je bezpečne ukrytá v tieňovom DOM a nie je také ľahké sa k nemu dostať. Na tento účel sa používa špeciálny neštandardný pseudoprvok CSS::placeholder. Pomocou neho môžete ovládať vlastnosti popisku.

Bude vás zaujímať:

Štýl zástupného symbolu v CSS vyzerá takto:

input::placeholder ( farba: červená; nepriehľadnosť: 1; štýl písma: kurzíva; )

Podpora prehliadača

Pseudoprvok zástupného symbolu CSS zvládne každý dobre moderné prehliadače a na podporu starších prehliadačov môžete použiť predpony:

::-webkit-input-placeholder - pre prehliadače webkit (Safari, Chrome, Opera);
::-moz-placeholder - pre prehliadače Firefox nad verziou 19;
:-moz-placeholder - pre starý Firefox;
:-ms-input-placeholder - pre internet Explorer vyššie verzie 10.

Ako vidíte, staré Prehliadače Mozilla a tiež IE považuje zástupný symbol za pseudotriedu CSS, nie za pseudoprvok. Nebudeme sa s nimi hádať, len tento aspekt zohľadníme pri štylizácii vstupného poľa.

Možnosti stylingu

Pre zástupný pseudoelement v CSS môžete nastaviť nasledujúce parametre:

background - skupina vlastností pozadia. Pozadie nápovedného bloku sa rozprestiera na celé vstupné pole. Nastaviť si môžete nielen farbu (background-color), ale aj obrázok (background-image).
farba textu - farba;
transparentnosť – nepriehľadnosť;
podčiarknutie, prečiarknutie alebo prečiarknutie - text-dekorácia;
register - textová transformácia;
vypchávka – výplň. Nepodporujú všetky prehliadače. Rovnako ako v prípade vložených prvkov sa horná a spodná výplň ignoruje.
zobrazenie písma - vlastnosti skupiny písiem, výška riadku a rôzne zarážky (text-odsadenie, letter-spacing, word-spacing);
vertikálne zarovnanie v línii - vertical-align;
orezanie textu pri pretečení kontajnera - text-overflow.

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

V zameraní

V predvolenom nastavení zmizne nápoveda zo vstupného poľa iba vtedy, ak je doň zadaný aspoň jeden znak. Pseudoprvok zástupného symbolu CSS vám však umožňuje implementovať zmiznutie okamžite, keď je pole zamerané. Aby ste to dosiahli, musíte ju skombinovať s pseudotriedou :focus.

input:focus::placeholder ( farba: transparentná; )

V niektorých prehliadačoch je prijateľné animovať zmenu v množstve vlastností zástupného symbolu pomocou príkazu prechodu.

input::placeholder ( farba: čierna; prechod: farba 1s; ) input:focus::placeholder ( color: white; )

V prehliadači Google Chrome farba nápovedy pri zaostrení na takéto pole sa plynule zmení v priebehu jednej sekundy.

Zástupné symboly, tie často sivé textové prvky vo vstupe, môžu byť náročné na štýl. Našťastie sme získali krátke, ale efektívne riešenie CSS, aby sme upravili zástupný text vášho vstupu do ľubovoľnej farby a nepriehľadnosti, ktorú si želáte. Prečítajte si kód.

Zmena farby zástupného textu

Začnime jednoduchým vstupom a nejakým zástupným textom, pre tento príklad použijeme slovo „hľadať“, ale môžete použiť čokoľvek chcete. Základné HTML je nižšie:

HTML

Vstupný text (a textarea) má predvolenú svetlošedú farbu, môžeme to však zmeniť niekoľkými riadkami CSS. Tu zafarbíme vstupný text na červeno pomocou názvu farby HTML, ale postačí akýkoľvek farebný spôsob (HEX, RGB, HSL).

css

::-webkit-input-placeholder ( /* Chrome */ farba: červená; ) :-ms-input-placeholder ( /* IE 10+ */ farba: červená; ) ::-moz-placeholder ( /* Firefox 19 + */ farba: červená; nepriehľadnosť: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ farba: červená; nepriehľadnosť: 1; )

Upozorňujeme, že je dôležité zahrnúť predpony rôznych dodávateľov, aby sa podporilo čo najviac prehliadačov. Iba vstupný zástupný text prehliadača Firefox má predvolenú miernu priehľadnosť, takže nie je potrebné nastavovať vlastnosť nepriehľadnosti v prehliadači IE alebo Chrome.

Zmena farby textu zamerania zástupného symbolu

Dobre, úspešne sme zmenili farbu zástupného textu na červenú, ale bolo by pekné, keby sa niečo stalo, keď používateľ klikne do nášho vstupu. Pomocou rovnakých vlastností CSS s predponou od dodávateľa môžeme zmeniť nepriehľadnosť vstupného zástupného textu na zameranie.

css

vstup ( obrys: žiadny; výplň: 12px; polomer okraja: 3px; okraj: 1px plná čierna; ) ::-webkit-input-placeholder ( /* Chrome */ farba: červená; prechod: nepriehľadnosť 250 ms easy-in-out ; ) :focus::-webkit-input-placeholder ( nepriehľadnosť: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ farba: červená; prechod: nepriehľadnosť 250 ms easy-in-out; ) :focus :-ms-input-placeholder ( nepriehľadnosť: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ farba: červená; nepriehľadnosť: 1; prechod: nepriehľadnosť 250 ms easy-in-out; ) :focus:: -moz-placeholder ( nepriehľadnosť: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ farba: červená; nepriehľadnosť: 1; prechod: nepriehľadnosť 250 ms easy-in-out; ) :focus:-moz-placeholder ( nepriehľadnosť: 0,5; )

Vo vyššie uvedenom príklade sme na samotný vstup pridali niekoľko základných štýlov a pridali sme prechod na nepriehľadnosť, aby bol zážitok o niečo krajší. Pozrite si ukážku a experimentujte s ďalšími vlastnosťami a prechodmi CSS.

Kde je zástupný symbol?

Problém je v tom, že nápoveda vstupného poľa je bezpečne ukrytá v tieňovom DOM a nie je také ľahké sa k nemu dostať. Na tento účel sa používa špeciálny neštandardný zástupný symbol ::. Pomocou neho môžete ovládať vlastnosti popisku.

Štýl zástupného symbolu v CSS vyzerá takto:

Vstup::placeholder ( farba: červená; nepriehľadnosť: 1; štýl písma: kurzíva; )

Podpora prehliadača

Pseudoprvok zástupného symbolu CSS dobre zvládajú všetky moderné prehliadače a na podporu starších prehliadačov možno použiť predpony:

::-webkit-input-placeholder - pre prehliadače webkit (Safari, Chrome, Opera);
::-moz-placeholder - pre prehliadače Firefox nad verziou 19;
:-moz-placeholder - pre starý Firefox;
:-ms-input-placeholder – pre Internet Explorer nad verziou 10.

Ako vidíte, staršie prehliadače Mozilla, ako aj IE, považujú zástupný symbol za pseudotriedu CSS, nie za pseudoprvok. Nebudeme sa s nimi hádať, len tento aspekt zohľadníme pri štylizácii vstupného poľa.

Možnosti stylingu

Pre zástupný pseudoelement v CSS môžete nastaviť nasledujúce možnosti:

pozadie - skupina blokov tipov sa vzťahuje na celé vstupné pole. Nastaviť si môžete nielen farbu (background-color), ale aj obrázok (background-image).
farba textu - farba;
transparentnosť – nepriehľadnosť;
podčiarknutie, prečiarknutie alebo prečiarknutie - text-dekorácia;
register - textová transformácia;
vypchávka – výplň. Nepodporujú všetky prehliadače. Rovnako ako v prípade vložených prvkov sa horná a spodná výplň ignoruje.
zobrazenie písma - vlastnosti skupiny písiem, výška riadku a rôzne zarážky (text-odsadenie, letter-spacing, word-spacing);
vertikálne zarovnanie v línii - vertical-align;
orezanie textu pri pretečení kontajnera - text-overflow.

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

V zameraní

V predvolenom nastavení zmizne nápoveda zo vstupného poľa iba vtedy, ak je doň zadaný aspoň jeden znak. Ale zástupný symbol vám umožňuje implementovať zmiznutie okamžite pri zaostrení na pole. Aby ste to dosiahli, musíte ju skombinovať s pseudotriedou :focus.

Input:focus::placeholder ( farba: transparentná; )

V niektorých prehliadačoch je prijateľné animovať zmenu v množstve vlastností zástupného symbolu pomocou príkazu prechodu.

Input::placeholder ( farba: čierna; prechod: farba 1s; ) input:focus::placeholder ( color: white; )

AT Prehliadač Google Farba popisku Chrome pri zaostrení na takéto pole sa plynule zmení v priebehu jednej sekundy.

Atribút zástupného symbolu sa používa na vytváranie popisov v prázdnych vstupných poliach (značky a ). V tomto článku sa pozriem na spôsoby, ako štýlovať zástupné symboly, ako aj na to, ako ich urobiť použiteľnejšími.</p> <p>Začnime príkladom pre tých, ktorí ešte nevedia, čo je zástupný symbol a ako ho používať:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>Pri vývoji rozhraní by ste mali brať do úvahy správanie zástupných symbolov. Zástupný text zmizne hneď po začatí písania. Preto by ste ich nemali používať na sprostredkovanie informácií o samotnom vstupnom poli (koľko a aké znaky má obsahovať). Na tieto účely je najlepšie použiť značku <label>alebo odsek s malým náznakom. Môžete si prečítať viac o funkciách používania zástupných symbolov.</p> <h2>Štylizácia</h2> <p>Nasledujúce pravidlá sa používajú na štýl zástupných symbolov:</p>::-webkit-input-placeholder ( color : blue ; ) ::-moz-placeholder ( color : blue ; ) /* Firefox 19+ */ :-moz-placeholder ( color : blue ; ) /* Firefox 18- * / :-ms-input-placeholder ( farba : modrá; ) <p>Vyzerá hrozne, však? A má to svoj dôvod – pravidlá CSS pre zástupné symboly doteraz neboli štandardizované a implementácia v každom prehliadači je iná. Viac o všetkých potrebných predponách sa dozviete na caniuse .</p> <p>Ak používate preprocesor CSS, pravdepodobne zistíte, že je najlepšie napísať jednoduchý mixin do zástupných symbolov štýlu. Príklad v Sass:</p>@mixin zástupný symbol ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @obsah ;)) <p>V závislosti od kontextu možno mixin použiť na globálne použitie štýlov alebo na jednotlivé prvky (vyskúšajte na SassMeister):</p> <span>// Globálne pre každé vstupné pole</span>@include zástupný symbol (farba: modrá;) <span>// Pre určité vstupné polia</span>.input ( @include zástupný symbol ( farba : zelená ; ) ) <h4>Príklad</h4> <p>Modrý text pre zástupný symbol (nikdy to nerobte):</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="Začnite písať tu" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Podporované vlastnosti</h2> <p>Nie každú vlastnosť CSS je možné použiť so zástupnými symbolmi. Tu <a href="https://realbazar.ru/sk/updates-and-firmware/udalit-nepravilno-ustanovlennuyu-programmu-kak-udalit-programmu-s/">úplný zoznam</a> podporované vlastnosti:</p> <ul><li>font a všetky súvisiace vlastnosti (font-size , font-family atď.)</li> <li>pozadie a všetky súvisiace vlastnosti (farba pozadia , obrázok pozadia atď.)</li> <li>nepriehľadnosť</li> <li>zarážka textu</li> <li>pretečeniu textu</li> <li>farba</li> <li>textová transformácia</li> <li>výška riadku</li> <li>slovné medzery</li> <li>medzery medzi písmenami</li> <li>text-dekorácia</li> <li>vertikálne zarovnať</li> </ul><h2>Animácie</h2> <p>Nápady na animáciu patria do blogu html5.by.</p> <p>Všetky nasledujúce príklady sú napísané pomocou preprocesora Sass. Každý prichádza s odkazom na SassMeister, kde nájdete skompilovaný kód CSS.</p> <p>S najväčšou pravdepodobnosťou budete chcieť použiť animácie na zástupné symboly, keď je zameranie na vstupné pole. To všetko sa robí úplne jednoducho. Stačí niekoľkokrát použiť predtým napísaný zástupný mixin:</p>.input( @include zástupný symbol( <span>// Štýly pre normálny stav</span>) & :focus ( @include zástupný symbol ( <span>// Štýly po udalosti zamerania</span> } } } <h3>Zmena transparentnosti</h3>.input ( @include zástupný symbol ( farba : #aaa ; nepriehľadnosť : 1 ; prechod : nepriehľadnosť 300 ms ; ) & :focus ( @include zástupný symbol ( nepriehľadnosť : 0 ; ) ) ) <p> <input type="text" placeholder="Demo: zmena transparentnosti" class="demo-css-placeholders-input pl-opacity"></p> <h3>Shift doprava a doľava</h3> <p>Čím väčšia je šírka vstupného poľa, tým väčšia by mala byť hodnota vlastnosti text-indent. Pre štandardné vstupné pole bude stačiť 500px, pre širšie treba vyberať manuálne. Rýchlosť animácie určuje šírka vstupného poľa a hodnota odsadenia textu. Ak sa chcete posunúť doľava, musíte použiť záporné hodnoty, napríklad -500px .</p><p> <input type="text" placeholder="Demo: posuňte doprava" class="demo-css-placeholders-input pl-shift-right"><input type="text" placeholder="Demo: posun doľava" class="demo-css-placeholders-input pl-shift-left"></p> <h3>Preraďte nadol</h3> <p>Rovnako ako v predchádzajúcom príklade, animácia závisí od veľkosti vstupu, ale v tomto prípade si dajte pozor na výšku. Pre veľkú väčšinu vstupných polí bude požadovaná hodnota výšky riadka v rozmedzí 100 pixelov. Bohužiaľ, pomocou vlastnosti line-height nie je možné implementovať efekt posunu nahor, pretože vlastnosť neakceptuje záporné hodnoty.</p>.input ( @include placeholder ( text-indent : 0px ; transition : text-indent 300 ms ; ) & :focus ( @include placeholder ( text-indent : 500px ; ) ) ) <p> <input type="text" placeholder="Demo: preraďte nadol" class="demo-css-placeholders-input pl-shift-down"></p> <h3>Spoločne</h3> <p>Aby bolo používanie animačného kódu pre zástupné symboly pekné a pohodlné, môžete napísať malú knižnicu mixinov pre akýkoľvek preprocesor. Knižnica vyzerá takto ():</p>@mixin zástupný symbol ( & : :- webkit-input-placeholder ( @content ) & : - moz-placeholder ( @content ) & : :- moz-placeholder ( @content ) & : - ms-input-placeholder ( @content ) ( text-indent : if ($side == left , - $position , $position ); ) ) ) @mixin pl-slide-down ($position : 5 , $duration : 200 ms ) ( @include placeholder ( line-height : 1 ; prechod : výška riadku $duration ; ) & :focus ( @include zástupný symbol ( výška riadku : $pozícia ; ) ) ) @mixin pl-fade-out ($duration : 200 ms ) ( @include zástupný symbol ( nepriehľadnosť : 1 ; prechod : opacity $duration ; ) & :focus ( @include zástupný symbol ( nepriehľadnosť : 0 ; ) ) ) <p>Jeho použitie je veľmi jednoduché. Stačí pripojiť požadovaný mixin k akémukoľvek vstupnému poľu alebo jednoducho vytvoriť jedno globálne pravidlo pre všetky paceholdery na stránke:</p> <span>// Pre jednotlivé prvky</span>.pl-shift-right ( @include pl-shift (right); ) .pl-fade-out ( @include pl-fade-out; ) <span>// Na všetko ostatné</span>@include pl-shift (vľavo); <h2>Autoprefixer</h2> <p>Ak nepoužívate preprocesor a napriek tomu nechcete, aby sa váš zdrojový súbor CSS zmenil na spleť predpôn pre všetky možné prehliadače, potom sa pozrite na Autoprefixer . S ním možno čisté CSS zašpiniť (ale v inom súbore) pridaním všetkých potrebných predpôn ku všetkým vlastnostiam. Na to, aby plugin fungoval s paceholdermi, stačí použiť pseudo-element::placeholder:</p>::zástupný znak ( farba : oranžová ; ). input : : zástupný symbol ( farba : modrá ; ) <p>Po analýze vašich štýlov Autoprefixer vytvorí samostatný súbor CSS, do ktorého zapíše všetky potrebné predpony pre všetky prehliadače, ktoré ste zadali.</p> <h2>Čo bude ďalej</h2> <p>Ako som písal vyššie, všetko, čo súvisí s aplikáciou štýlov na zástupné symboly, ešte nebolo štandardizované. Čoskoro to bude opravené. Do špecifikácie Selector Level 4 bola pridaná pseudotrieda: placeholder-show , ktorá konečne prinesie do štandardu všetku tú šialenú zmes pseudotried a pseudoprvkov, ktorá teraz existuje. Podporu si môžete overiť na stránke caniuse (v súčasnosti nie je podporovaná v žiadnom prehliadači).</p> <p>Použitie štýlov pomocou :placeholder-show bude oveľa jednoduchšie:</p>.input :placeholder-show ( farba : modrá ; )<script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> <div id="post-ratings-1455-loading" class="post-ratings-loading"> <img src="https://realbazar.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy loading=lazy>Načítava...</div> </main> </section> <div id="right-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"> <div class="inside-right-sidebar"> <aside id="wpp-3" class="widget inner-padding popular-posts"> <h4 class="widget-title">Populárne</h4> <ul class="wpp-list wpp-list-with-thumbnails"> <li> <a href="https://realbazar.ru/sk/samsung-galaxy-s3/skachat-wifi-cracker-polnyi-programmy-dlya-vzloma-wi-fi-zashchishchaem-svoyu-wifi/" title="Softvér na hackovanie Wi-Fi" target="_self"><img src="/uploads/b5901d9352f8d54a07a2a404e37033ae.jpg" width="195" height="98" alt="Softvér na hackovanie Wi-Fi" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/samsung-galaxy-s3/skachat-wifi-cracker-polnyi-programmy-dlya-vzloma-wi-fi-zashchishchaem-svoyu-wifi/" title="Softvér na hackovanie Wi-Fi" class="wpp-post-title" target="_self">Softvér na hackovanie Wi-Fi</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/comparison/osnovnye-sovremennye-metody-shifrovaniya-acimmetrichnye/" title="Asymetrické šifrovacie algoritmy Aký typ spracovania možno pripísať šifrovaniu" target="_self"><img src="/uploads/d0b82db69b1d91ca5461293193802e23.jpg" width="195" height="98" alt="Asymetrické šifrovacie algoritmy Aký typ spracovania možno pripísať šifrovaniu" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/comparison/osnovnye-sovremennye-metody-shifrovaniya-acimmetrichnye/" title="Asymetrické šifrovacie algoritmy Aký typ spracovania možno pripísať šifrovaniu" class="wpp-post-title" target="_self">Asymetrické šifrovacie algoritmy Aký typ spracovania možno pripísať šifrovaniu</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/news/osnovnye-principy-programmirovaniya-staticheskaya-i-dinamicheskaya-tipizaciya/" title="Typovanie programovacích jazykov Typy písania" target="_self"><img src="/uploads/70da66ba9311dafe482230129e9d402e.jpg" width="195" height="98" alt="Typovanie programovacích jazykov Typy písania" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/news/osnovnye-principy-programmirovaniya-staticheskaya-i-dinamicheskaya-tipizaciya/" title="Typovanie programovacích jazykov Typy písania" class="wpp-post-title" target="_self">Typovanie programovacích jazykov Typy písania</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/different/algoritmy-shifrovaniya-dannyh-metody-shifrovaniya-dannyh---blog/" title="Metódy šifrovania údajov - Web Programmer's Blog Aplikácia šifrovacích algoritmov" target="_self"><img src="/uploads/64a6c07ff82a62b42acc95562d51faae.jpg" width="195" height="98" alt="Metódy šifrovania údajov - Web Programmer's Blog Aplikácia šifrovacích algoritmov" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/different/algoritmy-shifrovaniya-dannyh-metody-shifrovaniya-dannyh---blog/" title="Metódy šifrovania údajov - Web Programmer's Blog Aplikácia šifrovacích algoritmov" class="wpp-post-title" target="_self">Metódy šifrovania údajov - Web Programmer's Blog Aplikácia šifrovacích algoritmov</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/series-galaxy-note/raznica-mezhdu-besplatnym-i-open-source-programmnym-obespecheniem-chto-takoe/" title="Čo je open source a prečo je dôležitý pre kryptomeny a otvorený blockchain" target="_self"><img src="/uploads/e58d56b6d555a570c61cfbff3c8323d3.jpg" width="195" height="98" alt="Čo je open source a prečo je dôležitý pre kryptomeny a otvorený blockchain" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/series-galaxy-note/raznica-mezhdu-besplatnym-i-open-source-programmnym-obespecheniem-chto-takoe/" title="Čo je open source a prečo je dôležitý pre kryptomeny a otvorený blockchain" class="wpp-post-title" target="_self">Čo je open source a prečo je dôležitý pre kryptomeny a otvorený blockchain</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> </ul> </aside> <style>.rpwe-block ul{ list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li{ border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a{ display: inline !important; text-decoration: none; } .rpwe-block h3{ background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 16px !important; line-height: 1.5em; } .rpwe-thumb{ border: 2px solid #eee !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary{ font-size: 14px; } .rpwe-time{ color: #bbb; font-size: 11px; } .rpwe-comment{ color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft{ display: inline; float: left; } .rpwe-alignright{ display: inline; float: right; } .rpwe-aligncenter{ display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after{ content: ""; display: table !important; } .rpwe-clearfix:after{ clear: both; } .rpwe-clearfix{ zoom: 1; } </style><aside id="rpwe_widget-2" class="widget inner-padding rpwe_widget recent-posts-extended"><h4 class="widget-title">Nedávne záznamy</h4><div class="rpwe-block "><ul class="rpwe-ul"> <li> <a href="https://realbazar.ru/sk/the-galaxy-s-series/principy-postroeniya-asu-tp-scada-sistemy-scada-sistemy-oao/" title="Princípy budovania automatizovaného riadiaceho systému pre systém SCADA" target="_self"><img src="/uploads/1db034e4c37e0d40a575af6357f16a1f.jpg" width="195" height="98" alt="Princípy budovania automatizovaného riadiaceho systému pre systém SCADA" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/the-galaxy-s-series/principy-postroeniya-asu-tp-scada-sistemy-scada-sistemy-oao/" title="Princípy budovania automatizovaného riadiaceho systému pre systém SCADA" class="wpp-post-title" target="_self">Princípy budovania automatizovaného riadiaceho systému pre systém SCADA</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/samsung-galaxy-s5/fail-virusa-shifrovalshchika-prilagayu-bez-shansa-na-spasenie-chto-takoe/" title="Žiadna šanca na záchranu: čo je to ransomware vírus a ako sa s ním vysporiadať" target="_self"><img src="/uploads/572320a42a757ffaf64c1d6db9b3e7fe.jpg" width="195" height="98" alt="Žiadna šanca na záchranu: čo je to ransomware vírus a ako sa s ním vysporiadať" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/samsung-galaxy-s5/fail-virusa-shifrovalshchika-prilagayu-bez-shansa-na-spasenie-chto-takoe/" title="Žiadna šanca na záchranu: čo je to ransomware vírus a ako sa s ním vysporiadať" class="wpp-post-title" target="_self">Žiadna šanca na záchranu: čo je to ransomware vírus a ako sa s ním vysporiadať</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/samsung-galaxy-s5/vladelcy-dronov-pokupayut-soft-rossiiskoi-kompanii-chtoby-letat-v/" title="Kvadrokoptéra bezletových zón dji mapa bezletových zón" target="_self"><img src="/uploads/22c7ac61c30b2132ca602c935905f8ab.jpg" width="195" height="98" alt="Kvadrokoptéra bezletových zón dji mapa bezletových zón" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/samsung-galaxy-s5/vladelcy-dronov-pokupayut-soft-rossiiskoi-kompanii-chtoby-letat-v/" title="Kvadrokoptéra bezletových zón dji mapa bezletových zón" class="wpp-post-title" target="_self">Kvadrokoptéra bezletových zón dji mapa bezletových zón</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/comparison/utilita-dlya-udaleniya-antivirusa-avg-kak-udalit-avg-s-kompyutera-polnostyu/" title="Ako úplne odstrániť AVG z počítača" target="_self"><img src="/uploads/b6d43c4eb1632600de78dcad9a99cb23.jpg" width="195" height="98" alt="Ako úplne odstrániť AVG z počítača" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/comparison/utilita-dlya-udaleniya-antivirusa-avg-kak-udalit-avg-s-kompyutera-polnostyu/" title="Ako úplne odstrániť AVG z počítača" class="wpp-post-title" target="_self">Ako úplne odstrániť AVG z počítača</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> <li> <a href="https://realbazar.ru/sk/games-for-android/av-test-antivirusnaya-zashchita-na-windows-xp-sp3-est-li-xp-posle-xp-kakoi/" title="Existuje XP po XP Ktorý antivírus je lepší pre Windows xp" target="_self"><img src="/uploads/cc41edcfca75570d1d081d5e9db15af2.jpg" width="195" height="98" alt="Existuje XP po XP Ktorý antivírus je lepší pre Windows xp" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/sk/games-for-android/av-test-antivirusnaya-zashchita-na-windows-xp-sp3-est-li-xp-posle-xp-kakoi/" title="Existuje XP po XP Ktorý antivírus je lepší pre Windows xp" class="wpp-post-title" target="_self">Existuje XP po XP Ktorý antivírus je lepší pre Windows xp</a> <span class="wpp-excerpt">Pre človeka, ktorý má svoju vlastnú hru...</span> <br><br> </li> </ul></div></aside><aside id="custom_html-2" class="widget_text widget inner-padding widget_custom_html"> <div class="textwidget custom-html-widget"> </div> </aside> </div> </div> </div> </div> <div class="site-footer grid-container grid-parent "> <div id="footer-widgets" class="site footer-widgets"> <div class="footer-widgets-container grid-container grid-parent"> <div class="inside-footer-widgets"> <div class="footer-widget-1 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="categories-3" class="widget inner-padding widget_categories"> <h4 class="widget-title">Kategórie</h4> <ul> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/sk/category/samsung-galaxy-s3/" title="Samsung galaxy s3">Samsung galaxy s3</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/sk/category/samsung-galaxy-s5/" title="Samsung Galaxy S5">Samsung Galaxy S5</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/sk/category/games-for-android/" title="Hry pre Android">Hry pre Android</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/sk/category/news/" title="Správy">Správy</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/sk/category/an-overview-of-the-devices/" title="Prehľad zariadenia">Prehľad zariadenia</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/sk/category/different/" title="Rôzne">Rôzne</a> </li> </ul> </aside> </div> <div class="footer-widget-2 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="text-9" class="widget inner-padding widget_text"> </aside> </div> <div class="footer-widget-3 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="pages-2" class="widget inner-padding widget_pages"> <h4 class="widget-title">Stránky</h4> <ul> <li class="page_item page-item-422"><a href="https://realbazar.ru/sk/sitemap.xml">mapa stránok</a></li> <li class="page_item page-item-917"><a href="https://realbazar.ru/sk/feedback/">Spätná väzba</a></li> </ul> </aside> <aside id="text-11" class="widget inner-padding widget_text"> <h4 class="widget-title">© 2022 realbazar.ru</h4> </aside> </div> </div> </div> </div> <footer class="site-info" itemtype="http://schema.org/WPFooter" itemscope="itemscope"> <div class="inside-site-info grid-container grid-parent"> <div class="copyright-bar"> <span class="copyright">2022</span> • </div> </div> </footer> </div> <a id="scroll-to-top" href="#" title="Prejdite na začiatok">Hore</a> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.6'></script> <script type='text/javascript'> /* <![CDATA[ */ var tocplus = { "smooth_scroll": "1" }; /* ]]> */ </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.84'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/dropdown.min.js?ver=1.4'></script> <script type='text/javascript' src='https://realbazar.ru/wp-content/themes/generatepress/js/navigation-search.min.js?ver=1.4'></script>  <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar": "sidebar-1", "margin_top": 10, "margin_bottom": 0, "stop_id": "footer-widgets", "screen_max_width": 0, "screen_max_height": 0, "width_inherit": false, "refresh_interval": 1500, "window_load_hook": false, "disable_mo_api": false, "widgets": ['custom_html-2'] }; </script> <script type='text/javascript' src='https://realbazar.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.6'></script> <script type="text/javascript">  </script><br> <br> </body> </html>