Дизайн контейнер css. Добавете CSS стил за заместител

Placeholder е елемент от полето за въвеждане, в което може да се постави подсказка. Когато потребителят започне да въвежда данни, поддържащият текст изчезва, за да не пречи. Всеки браузър има собствено мнение за това как трябва да се показва този елемент и понякога стиловете по подразбиране нарушават целия дизайн. За да ги управлявате, трябва да използвате специално CSS placeholder правило.

Къде е контейнерът?

Проблемът е, че подсказката на полето за въвеждане е здраво скрита в сенчестия DOM и не е толкова лесно да се стигне до нея. За целта се използва специален нестандартен CSS::placeholder псевдоелемент. С негова помощ можете да управлявате свойствата на подсказката.

Ще ви бъде интересно:

Оформянето на контейнер в CSS изглежда така:

input::placeholder ( цвят: червен; непрозрачност: 1; стил на шрифта: курсив; )

Поддръжка на браузър

Псевдоелементът CSS placeholder се обработва добре от всички модерни браузъри, а за поддръжка на по-стари браузъри можете да използвате префиксите:

::-webkit-input-placeholder - за уебкит браузъри (Safari, Chrome, Opera);
::-moz-placeholder - за Firefox браузъринад версия 19;
:-moz-placeholder - за по-стар Firefox;
:-ms-input-placeholder - за Internet Explorerнад версия 10.

Както можете да видите, по-старите браузъри на Mozilla, както и IE, считат контейнера за CSS псевдо-клас, а не за псевдо-елемент. Нека не спорим с тях, просто ще вземем предвид този аспект, когато стилизираме полето за въвеждане.

Опции за стилизиране

Псевдоелементът заместител в CSS може да бъде зададен на следните параметри:

фон - група свойства на фона. Фонът на блока с подсказки се отнася за цялото поле за въвеждане. Можете да зададете не само цвета (background-color), но и изображението (background-image).
цвят на текста - цвят;
прозрачност - непрозрачност;
подчертаване, надчертаване или зачертаване - текст-украса;
случай - преобразуване на текст;
вътрешни отстъпи - padding. Не се поддържа от всички браузъри. Както при вградените елементи, подложките отгоре и отдолу се игнорират.
показване на шрифт - свойства на групата шрифтове, височина на реда и различни отстъпи (текст-отстъп, междубуквени интервали, междусловни интервали);
вертикално подравняване в ред - vertical-align;
изрязване на текст при препълване на контейнера - text-overflow.

Input1::placeholder (фоново изображение: линеен градиент (лайм, синьо); цвят: бяло; ) .input2::placeholder (text-decoration: line-through; цвят: лилав; font-weight: получер; ) .input3 ::placeholder (размер на шрифта: 16px; разстояние между буквите: 10px;) .input4::placeholder (фон: кафяв; цвят: бял; text-overflow: многоточие;)

На фокус

По подразбиране подсказката изчезва от полето за въвеждане само ако в него е въведен поне един символ. Но псевдоелементът CSS placeholder ви позволява да внедрите избледняване веднага, когато фокусирате върху полето. За да направите това, трябва да го комбинирате с псевдо-класа: фокус.

input:focus::placeholder ( цвят: прозрачен; )

В някои браузъри е възможно да се анимират промени в редица свойства на контейнери с помощта на оператора за преход.

input::placeholder ( цвят: черен; преход: цвят 1s; ) input:focus::placeholder ( цвят: бял; )

В браузъра Google ChromeКогато фокусирате върху такова поле, цветът на подсказката ще се промени плавно в рамките на една секунда.

Заместителите, онези текстови елементи, които често са оцветени в сиво във входа, могат да бъдат болезнени за стилизиране. За щастие ние намерихме кратко, но ефективно CSS решение за стилизиране на текста на контейнера във вашия вход във всеки цвят и непрозрачност, които желаете. Прочетете за кода.

Промяна на цвета на текста на контейнера

Нека започнем с просто въвеждане и малко текст на контейнера, за този пример ще използваме думата „търсене“, но вие можете да използвате всичко, което искате. Основният HTML е по-долу:

HTML

Текстът на контейнера за въвеждане (и текстово поле) е по подразбиране със светлосив цвят, но можем да променим това с няколко реда CSS. Тук ще оцветим въведения текст в червено, като използваме HTML име на цвят, но всеки метод на оцветяване ще е достатъчен (HEX, RGB, HSL).

CSS

::-webkit-input-placeholder ( /* Chrome */ цвят: червен; ) :-ms-input-placeholder ( /* IE 10+ */ цвят: червен; ) ::-moz-placeholder ( /* Firefox 19 + */ цвят: червен; непрозрачност: 1; ) :-moz-placeholder ( /* Firefox 4 - 18 */ цвят: червен; непрозрачност: 1; )

Обърнете внимание, че е важно да включите различните префикси на доставчиците, за да поддържате възможно най-много браузъри. Само текстът на контейнера за въвеждане на текст на Firefox е по подразбиране с лека прозрачност, така че не е необходимо да задавате свойството за непрозрачност в IE или Chrome.

Промяна на цвета на текста на фокуса на заместителя

Добре, успешно сменихме цвета на текста на контейнера на червено, но би било хубаво, ако нещо се случи, когато потребител кликне вътре в нашия вход. Използвайки същите свойства на CSS с префикс на доставчика, можем да променим непрозрачността на текста на контейнера на входа на фокус.

CSS

вход (очертание: няма; подложка: 12px; border-radius: 3px; border: 1px плътно черно; ) ::-webkit-input-placeholder ( /* Chrome */ цвят: червен; преход: непрозрачност 250ms улесняване на излизане ; ) :focus::-webkit-input-placeholder (непрозрачност: 0,5; ) :-ms-input-placeholder ( /* IE 10+ */ цвят: червен; преход: непрозрачност 250ms ease-in-out; ) :focus :-ms-input-placeholder (непрозрачност: 0,5; ) ::-moz-placeholder ( /* Firefox 19+ */ цвят: червен; непрозрачност: 1; преход: непрозрачност 250ms леко влизане навън; ) :focus:: -moz-placeholder ( непрозрачност: 0,5; ) :-moz-placeholder ( /* Firefox 4 - 18 */ цвят: червен; непрозрачност: 1; преход: непрозрачност 250ms леко влизане навън; ) :focus:-moz-placeholder (непрозрачност: 0,5; )

В примера по-горе добавихме няколко основни стила към самия вход и добавихме преход към непрозрачността, за да направим изживяването малко по-приятно. Вижте демонстрацията и експериментирайте с други CSS свойства и преходи.

Къде е контейнерът?

Проблемът е, че подсказката на полето за въвеждане е здраво скрита в сенчестия DOM и не е толкова лесно да се стигне до нея. За целта се използва специален нестандартен ::placeholder. С негова помощ можете да управлявате свойствата на подсказката.

Оформянето на контейнер в CSS изглежда така:

Input::placeholder ( цвят: червен; непрозрачност: 1; стил на шрифта: курсив; )

Поддръжка на браузър

Псевдоелементът CSS placeholder се обработва добре от всички съвременни браузъри и за поддръжка на по-стари браузъри можете да използвате следните префикси:

::-webkit-input-placeholder - за уебкит браузъри (Safari, Chrome, Opera);
::-moz-placeholder - за браузъри Firefox над версия 19;
:-moz-placeholder - за по-стар Firefox;
:-ms-input-placeholder - за Internet Explorer над версия 10.

Опции за стилизиране

Можете да зададете следните опции за псевдоелемента на заместителя в CSS:

фон - блоковата група с подсказки се прилага към цялото поле за въвеждане. Можете да зададете не само цвета (background-color), но и изображението (background-image).
цвят на текста - цвят;
прозрачност - непрозрачност;
подчертаване, надчертаване или зачертаване - текст-украса;
случай - преобразуване на текст;
вътрешни отстъпи - padding. Не се поддържа от всички браузъри. Както при вградените елементи, подложките отгоре и отдолу се игнорират.
показване на шрифт - свойства на групата шрифтове, височина на реда и различни отстъпи (текст-отстъп, междубуквени интервали, междусловни интервали);
вертикално подравняване в ред - vertical-align;
изрязване на текст при препълване на контейнера - text-overflow.

.input1::placeholder (фоново изображение: линеен градиент (лайм, синьо); цвят: бяло; ) .input2::placeholder (текст-декорация: ред; цвят: лилав; тегло на шрифта: получер; ) . input3::placeholder (размер на шрифта: 16px; разстояние между буквите: 10px;) .input4::placeholder (фон: кафяв; цвят: бял; text-overflow: ellipsis;)

На фокус

По подразбиране подсказката изчезва от полето за въвеждане само ако в него е въведен поне един символ. Но контейнерът ви позволява да приложите изчезването веднага, когато фокусирате върху полето. За да направите това, трябва да го комбинирате с псевдо-класа: фокус.

Input:focus::placeholder ( цвят: прозрачен; )

Input::placeholder ( цвят: черен; преход: цвят 1s; ) input:focus::placeholder ( цвят: бял; )

IN Google браузърЦветът на подсказката на Chrome при фокусиране върху такова поле ще се промени плавно в рамките на една секунда.

Атрибутът placeholder се използва за създаване на подсказки в празни полета за въвеждане (тагове И ). В тази статия ще разгледам начини за стилизиране на контейнери, както и как да ги направя по-удобни за потребителя.</p> <p>Нека започнем с пример за тези, които все още не знаят какво е контейнер и как да го използвате:</p> <input type= "email" placeholder= "example@gmail.com" > <p> <input type="email" placeholder="example@gmail.com" class="demo-css-placeholders-input"></p> <p>Когато разработвате интерфейси, трябва да вземете предвид поведението на контейнерите. Текстът на контейнера изчезва веднага щом започне въвеждането. Ето защо не трябва да ги използвате за предаване на информация за самото поле за въвеждане (колко и какви символи трябва да съдържа). За тези цели е най-добре да използвате етикета <label>или параграф с малък намек. Можете да прочетете повече за функциите на използването на контейнери.</p> <h2>Стилизация</h2> <p>Следните правила се използват за стилизиране на контейнери:</p>::-webkit-input-placeholder ( цвят : син ; ) ::-moz-placeholder ( цвят : син ; ) /* Firefox 19+ */ :-moz-placeholder ( цвят : син ; ) /* Firefox 18- * / :-ms-input-placeholder (цвят: син;) <p>Изглежда ужасно, нали? И има причина за това - досега CSS правилата за placeholders не са стандартизирани и имплементацията е различна във всеки браузър. Повече информация за всички необходими префикси можете да намерите на caniuse.</p> <p>Ако използвате CSS препроцесор, вероятно ще ви е най-удобно да напишете прост миксин, за да приложите стилове към контейнери. Пример в Sass:</p>@mixin placeholder ( & : :- webkit-input-placeholder ( @content ; ) & : - moz-placeholder ( @content ; ) & : :- moz-placeholder ( @content ; ) & : - ms-input-placeholder ( @съдържание ;)) <p>В зависимост от контекста, mixin може да се използва за прилагане на стилове или глобално, или на базата на индивидуален елемент (изпробвайте го на SassMeister):</p> <span>// Глобално за всяко поле за въвеждане</span>@include контейнер (цвят: син;) <span>// За конкретни полета за въвеждане</span>.input (@include placeholder (цвят: зелен;)) <h4>Пример</h4> <p>Син текст за заместител (никога не правете това):</p>.blue-text ::-webkit-input-placeholder ( цвят : #2e8ece ; ) .blue-text :-moz-placeholder ( цвят : #2e8ece ; ) .blue-text ::-moz-placeholder ( цвят : #2e8ece ; ) .blue-text :-ms-input-placeholder ( цвят : #2e8ece ; ) <p> <input type="text" placeholder="Започнете да пишете тук" class="demo-css-placeholders-input pl-blue-text"></p> <h2>Поддържани свойства</h2> <p>Не всеки <a href="https://realbazar.ru/bg/games-for-android/cvet-shrifta-zadaetsya-atributom-tega-font-family-font-size-color-i-drugie-svoistva-css/">CSS свойство</a>може да се използва с контейнери. Тук <a href="https://realbazar.ru/bg/updates-and-firmware/udalit-nepravilno-ustanovlennuyu-programmu-kak-udalit-programmu-s/">пълен списък</a>поддържани свойства:</p> <ul><li>шрифт и всички свързани свойства (font-size, font-family и т.н.)</li> <li>фон и всички свързани свойства (фонов цвят, фоново изображение и т.н.)</li> <li>непрозрачност</li> <li>текст-отстъп</li> <li>текст-препълване</li> <li>цвят</li> <li>преобразуване на текст</li> <li>височина на линията</li> <li>разстояние между думите</li> <li>разстояние между буквите</li> <li>текст-украса</li> <li>вертикално подравняване</li> </ul><h2>Анимации</h2> <p>Идеите за анимация принадлежат на блога html5.by.</p> <p>Всички следващи примери са написани с помощта на препроцесора Sass. Всеки идва с връзка към SassMeister, където можете да намерите компилирания CSS код.</p> <p>Най-вероятно ще искате да приложите анимации към контейнери, когато полето за въвеждане има фокус. Всичко това се прави съвсем просто. Достатъчно е само да използвате предварително написания placeholder mixin няколко пъти:</p>.input ( @include контейнер ( <span>// Стилове за нормално състояние</span>) & :focus ( @include контейнер ( <span>// Стилове след фокусното събитие</span> } } } <h3>Промяна на прозрачността</h3>.input (@include контейнер (цвят: #aaa; непрозрачност: 1; преход: непрозрачност 300ms;) & :focus (@include контейнер (непрозрачност: 0;))) <p> <input type="text" placeholder="Демо: Промяна на прозрачността" class="demo-css-placeholders-input pl-opacity"></p> <h3>Преместване надясно и наляво</h3> <p>Колкото по-широко е полето за въвеждане, толкова по-голяма трябва да бъде стойността на свойството text-indent. За стандартно поле за въвеждане ще са достатъчни 500px, за по-широки трябва да го изберете ръчно. Скоростта на анимацията зависи от ширината на полето за въвеждане и стойността на отстъпа на текста. За да преместите наляво, трябва да използвате отрицателни стойности, например -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>Както в предишния пример, анимацията зависи от размера на входа, но в този случай обърнете внимание на височината. За по-голямата част от полетата за въвеждане изискваната стойност на височината на реда ще бъде в рамките на 100px. За съжаление свойството line-height не може да се използва за създаване на ефект на изместване нагоре, тъй като свойството не приема отрицателни стойности.</p>.input ( @include placeholder ( text-indent : 0px ; преход : 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: ляво, $position: 500px, $duration: 200ms) ( @include placeholder (текст-отстъп: 0; преход: text-indent $duration;) & :focus ( @include placeholder ( text-indent: if ($side == ляво, - $position, $position); ) )) @mixin pl-slide-down ($position: 5, $duration: 200ms) ( @include placeholder (line-height: 1; преход: line-height $duration;) & :focus ( @include placeholder (line-height: $position; ))) @mixin pl-fade-out ($duration: 200ms) ( @include placeholder (opacity: 1) ; преход: непрозрачност $продължителност ;) & :focus ( @include placeholder (непрозрачност: 0; ))) <p>Много е лесен за използване. Достатъчно е да свържете желания миксин към което и да е поле за въвеждане или просто да създадете едно глобално правило за всички пейсхолдери на страницата:</p> <span>// За отделни елементи</span>.pl-shift-right ( @include pl-shift ( right ); ) .pl-fade-out ( @include pl-fade-out ; ) <span>// За всичко останало</span>@include pl-shift (ляво); <h2>Автопрефикс</h2> <p>Ако не използвате препроцесор и все пак не искате вашият CSS изходен файл да се превърне в бъркотия от префикси за всички възможни браузъри, тогава погледнете Autoprefixer. С негова помощ чистият CSS може да бъде направен мръсен (но в различен файл) чрез добавяне на всички необходими префикси към всички свойства. За да накарате приставката да работи с контейнери, просто използвайте псевдо-елемента::placeholder:</p>::заместител (цвят: оранжев;). 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 ( цвят : син ; )<script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </div> </article> <div id="post-ratings-1455-loading" class="post-ratings-loading"> <img src="https://realbazar.ru/wp-content/plugins/wp-postratings/images/loading.gif" width="16" height="16" class="post-ratings-image" / loading=lazy loading=lazy>Зареждане...</div> </main> </section> <div id="right-sidebar" itemtype="http://schema.org/WPSideBar" itemscope="itemscope" role="complementary" class="widget-area grid-25 tablet-grid-25 grid-parent sidebar"> <div class="inside-right-sidebar"> <aside id="wpp-3" class="widget inner-padding popular-posts"> <h4 class="widget-title">Популярен</h4> <ul class="wpp-list wpp-list-with-thumbnails"> <li> <a href="https://realbazar.ru/bg/news/fgds-v-leningradskii-oblastnoi-onkologicheskii-dispanser/" title="Ленинградски регионален онкологичен център Ленинградски регионален онкологичен център Liteiny 37" target="_self"><img src="/uploads/c709035d3e91b99752af5b8ee0906333.jpg" width="195" height="98" alt="Ленинградски регионален онкологичен център Ленинградски регионален онкологичен център Liteiny 37" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/news/fgds-v-leningradskii-oblastnoi-onkologicheskii-dispanser/" title="Ленинградски регионален онкологичен център Ленинградски регионален онкологичен център Liteiny 37" class="wpp-post-title" target="_self">Ленинградски регионален онкологичен център Ленинградски регионален онкологичен център Liteiny 37</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/the-galaxy-s-series/ginekologicheskoe-otdelenie-moskovskii-oblastnoi-nii/" title="Московски регионален изследователски институт по акушерство и гинекология (Moniag) Процедура за прием в гинекологичния отдел" target="_self"><img src="/uploads/f4fa2e7ab30663e80a2d7a260b10fbd2.jpg" width="195" height="98" alt="Московски регионален изследователски институт по акушерство и гинекология (Moniag) Процедура за прием в гинекологичния отдел" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/the-galaxy-s-series/ginekologicheskoe-otdelenie-moskovskii-oblastnoi-nii/" title="Московски регионален изследователски институт по акушерство и гинекология (Moniag) Процедура за прием в гинекологичния отдел" class="wpp-post-title" target="_self">Московски регионален изследователски институт по акушерство и гинекология (Moniag) Процедура за прием в гинекологичния отдел</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/comparison/vrachi-penzenskoi-oblastnoi-bolnicy-im-burdenko-oblastnaya/" title="Лекари от областната болница в Пенза на името на Бурденко" target="_self"><img src="/uploads/bdaeb6c9f044a6420e488b2551ef1f87.jpg" width="195" height="98" alt="Лекари от областната болница в Пенза на името на Бурденко" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/comparison/vrachi-penzenskoi-oblastnoi-bolnicy-im-burdenko-oblastnaya/" title="Лекари от областната болница в Пенза на името на Бурденко" class="wpp-post-title" target="_self">Лекари от областната болница в Пенза на името на Бурденко</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/updates-and-firmware/kogda-poyavilis-magnitofony-v-sssr-istoriya-poyavleniya-magnitnoi/" title="Историята на магнитната лента" target="_self"><img src="/uploads/95ac5060487c509f52fe66b5f46eaeff.jpg" width="195" height="98" alt="Историята на магнитната лента" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/updates-and-firmware/kogda-poyavilis-magnitofony-v-sssr-istoriya-poyavleniya-magnitnoi/" title="Историята на магнитната лента" class="wpp-post-title" target="_self">Историята на магнитната лента</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/updates-and-firmware/vidy-licenzionnogo-programmnogo-obespecheniya-i-problemy-ego-ispolzovaniya/" title="Софтуер: примери" target="_self"><img src="/uploads/7b5ab727c8c7599a0978805d5660107a.jpg" width="195" height="98" alt="Софтуер: примери" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/updates-and-firmware/vidy-licenzionnogo-programmnogo-obespecheniya-i-problemy-ego-ispolzovaniya/" title="Софтуер: примери" class="wpp-post-title" target="_self">Софтуер: примери</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> </ul> </aside> <style>.rpwe-block ul{ list-style: none !important; margin-left: 0 !important; padding-left: 0 !important; } .rpwe-block li{ border-bottom: 1px solid #eee; margin-bottom: 10px; padding-bottom: 10px; list-style-type: none; } .rpwe-block a{ display: inline !important; text-decoration: none; } .rpwe-block h3{ background: none !important; clear: none; margin-bottom: 0 !important; margin-top: 0 !important; font-weight: 400; font-size: 16px !important; line-height: 1.5em; } .rpwe-thumb{ border: 2px solid #eee !important; box-shadow: none !important; margin: 2px 10px 2px 0; padding: 3px !important; } .rpwe-summary{ font-size: 14px; } .rpwe-time{ color: #bbb; font-size: 11px; } .rpwe-comment{ color: #bbb; font-size: 11px; padding-left: 5px; } .rpwe-alignleft{ display: inline; float: left; } .rpwe-alignright{ display: inline; float: right; } .rpwe-aligncenter{ display: block; margin-left: auto; margin-right: auto; } .rpwe-clearfix:before, .rpwe-clearfix:after{ content: ""; display: table !important; } .rpwe-clearfix:after{ clear: both; } .rpwe-clearfix{ zoom: 1; } </style><aside id="rpwe_widget-2" class="widget inner-padding rpwe_widget recent-posts-extended"><h4 class="widget-title">Последни записи</h4><div class="rpwe-block "><ul class="rpwe-ul"> <li> <a href="https://realbazar.ru/bg/series-galaxy-note/kak-postavshchik-marketingovyh-uslug-elektronnoi-pochty-mozhet-uvelichit-vashu/" title="Какви услуги предоставя пощата на Русия?" target="_self"><img src="/uploads/c0d96aea0ced43d622eaaf103127aa8d.jpg" width="195" height="98" alt="Какви услуги предоставя пощата на Русия?" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/series-galaxy-note/kak-postavshchik-marketingovyh-uslug-elektronnoi-pochty-mozhet-uvelichit-vashu/" title="Какви услуги предоставя пощата на Русия?" class="wpp-post-title" target="_self">Какви услуги предоставя пощата на Русия?</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/the-galaxy-s-series/prezentaciya-socialnye-statusy-prezentaciya-socialnye/" title="Презентация"Социальные статусы и роли" (10 класс) по обществознанию – проект, доклад" target="_self"><img src="/uploads/81938d6981e55c5bb0c8d918dcf4011c.jpg" width="195" height="98" alt="Презентация"Социальные статусы и роли" (10 класс) по обществознанию – проект, доклад" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/the-galaxy-s-series/prezentaciya-socialnye-statusy-prezentaciya-socialnye/" title="Презентация"Социальные статусы и роли" (10 класс) по обществознанию – проект, доклад" class="wpp-post-title" target="_self">Презентация "Социални статуси и роли" (10 клас) по социални науки - проект, доклад</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/samsung-galaxy-s6-edge/prozrachnyi-oksid-alyuminiya-prozrachnyi-alyuminii---dve-versii-dve/" title="Прозрачен алуминий - две версии, две технологии, две открития - worldbuilding - LJ" target="_self"><img src="/uploads/afc4936ab7146ede3036a77340593942.jpg" width="195" height="98" alt="Прозрачен алуминий - две версии, две технологии, две открития - worldbuilding - LJ" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/samsung-galaxy-s6-edge/prozrachnyi-oksid-alyuminiya-prozrachnyi-alyuminii---dve-versii-dve/" title="Прозрачен алуминий - две версии, две технологии, две открития - worldbuilding - LJ" class="wpp-post-title" target="_self">Прозрачен алуминий - две версии, две технологии, две открития - worldbuilding - LJ</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/samsung-galaxy-s5/kak-udalit-realizaciyu-v-1s-8-3-buhuchet-info-kak-pometit-na/" title="Как да изтриете внедряване в 1s 8" target="_self"><img src="/uploads/359296621f1b6ce88c1f5181c060b83e.jpg" width="195" height="98" alt="Как да изтриете внедряване в 1s 8" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/samsung-galaxy-s5/kak-udalit-realizaciyu-v-1s-8-3-buhuchet-info-kak-pometit-na/" title="Как да изтриете внедряване в 1s 8" class="wpp-post-title" target="_self">Как да изтриете внедряване в 1s 8</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> <li> <a href="https://realbazar.ru/bg/an-overview-of-the-devices/chto-za-prilozhenie-s-babochkami-i-cvetami-na-golove-obrabotka/" title="Обработка на снимки за Instagram: сърца над главите им Приложение, в което добавят сърца на актьори над главите им" target="_self"><img src="/uploads/9ae521307ff65e99a7e055a01883fc49.jpg" width="195" height="98" alt="Обработка на снимки за Instagram: сърца над главите им Приложение, в което добавят сърца на актьори над главите им" class="wpp-thumbnail wpp_cached_thumb wpp_featured" / loading=lazy loading=lazy></a> <a href="https://realbazar.ru/bg/an-overview-of-the-devices/chto-za-prilozhenie-s-babochkami-i-cvetami-na-golove-obrabotka/" title="Обработка на снимки за Instagram: сърца над главите им Приложение, в което добавят сърца на актьори над главите им" class="wpp-post-title" target="_self">Обработка на снимки за Instagram: сърца над главите им Приложение, в което добавят сърца на актьори над главите им</a> <span class="wpp-excerpt">На човек, който има собствена игра...</span> <br><br> </li> </ul></div></aside><aside id="custom_html-2" class="widget_text widget inner-padding widget_custom_html"> <div class="textwidget custom-html-widget"> </div> </aside> </div> </div> </div> </div> <div class="site-footer grid-container grid-parent "> <div id="footer-widgets" class="site footer-widgets"> <div class="footer-widgets-container grid-container grid-parent"> <div class="inside-footer-widgets"> <div class="footer-widget-1 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="categories-3" class="widget inner-padding widget_categories"> <h4 class="widget-title">Категории</h4> <ul> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/bg/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/bg/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/bg/category/games-for-android/" title="Игри за Android">Игри за Android</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/bg/category/news/" title="Новини">Новини</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/bg/category/an-overview-of-the-devices/" title="Преглед на устройството">Преглед на устройството</a> </li> <li class="cat-item cat-item-99"><a href="https://realbazar.ru/bg/category/different/" title="Различен">Различен</a> </li> </ul> </aside> </div> <div class="footer-widget-2 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="text-9" class="widget inner-padding widget_text"> </aside> </div> <div class="footer-widget-3 grid-parent grid-33 tablet-grid-50 mobile-grid-100"> <aside id="pages-2" class="widget inner-padding widget_pages"> <h4 class="widget-title">Страници</h4> <ul> <li class="page_item page-item-422"><a href="https://realbazar.ru/bg/sitemap.xml">Карта на сайта</a></li> <li class="page_item page-item-917"><a href="https://realbazar.ru/bg/feedback/">Обратна връзка</a></li> </ul> </aside> <aside id="text-11" class="widget inner-padding widget_text"> <h4 class="widget-title">© 2023 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">2023 г</span> • </div> </div> </footer> </div> <a id="scroll-to-top" href="#" title="Превъртете до върха">Връх</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>