Нейрум

Вопрос для Нейро

18 января

#Анимация #Псевдоэлементы #Веб #Приложение

Как работает анимация псевдоэлементов в современных веб-приложениях?

Нейро

На основе 5 источников

1

2

3

4

5

Анимация псевдоэлементов в современных веб-приложениях работает так же, как и анимация обычных элементов. Для этого используются свойства CSS, такие как transform (translate, rotate, scale, skew), transition, positioning и z-index. Например…

Вопрос для Нейро

20 февраля

#Псевдоэлементы #Placeholder #Разница #CSS

В чем разница между псевдоэлементами :placeholder-shown и :placeholder?

Нейро

На основе 5 источников

1

www.geeksforgeeks.org

2

3

4

5

Разница между псевдоэлементами :placeholder-shown и ::placeholder заключается в том, что они выполняют разные задачи. :placeholder-shown предназначен для выделения самого поля ввода, когда отображается текст-подсказка (плейсхолдер). Он выбирает на…

Вопрос для Нейро

17 февраля

#Html #Css #LineHeight #Псевдоэлементы #Выравнивание

В чем разница между вертикальным выравниванием с помощью line-height и псевдоэлементов?

Нейро

На основе 5 источников

1

2

3

4

5

Разница между вертикальным выравниванием с помощью line-height и псевдоэлементов заключается в подходе к решению задачи: 1. Line-height растягивает строку на всю высоту контейнера, при этом свободное пространство равномерно распределяется сверху и…

Вопрос для Нейро

19 декабря

#Псевдоэлементы #CSS #Html #Дизайн #Оформление

Для чего используются псевдоэлементы :before и :after?

Нейро

На основе 5 источников

1

2

3

4

5

Псевдоэлементы :before и :after используются для создания нового контента внутри HTML-дерева. Этот контент привязан к определённому элементу и может появляться до него или после. ::before позволяет добавить контент перед выбранным элементом…

Вопрос для Нейро

12 февраля

#Псевдоэлементы #Браузеры #CSS #Html #Особенности

Какие особенности использования псевдоэлемента :before в разных версиях браузеров?

Нейро

На основе 5 источников

1

2

3

4

5

Некоторые особенности использования псевдоэлемента :before в разных версиях браузеров: Opera 9.2. Учитывает все пробелы, как если бы они были заключены в тег

.  Firefox до версии 2.0. Нестабильно работает с позиционированными элементами, а…

Вопрос для Нейро

12 февраля

#Css #Псевдоэлементы #Selection

Как работает псевдоэлемент ::selection в CSS?

Нейро

На основе 5 источников

1

2

3

4

5

doka-guide.vercel.app

Псевдоэлемент ::selection в CSS позволяет применить стили к пользовательскому выделению (например, к выделенному с помощью мыши тексту) и изменить его вид. Он задаётся сам по себе, без привязки к какому-либо HTML-элементу. Используя ::selection…

Вопрос для Нейро

20 февраля

#CSS #Псевдоэлементы #ВсплывающиеПодсказки #Дизайн #Разработка #Юзабилити

В чем преимущества использования псевдоэлементов CSS для создания всплывающих подсказок?

Нейро

На основе 5 источников

1

www.geeksforgeeks.org

2

webdesign.tutsplus.com

3

sky.pro

4

tproger.ru

5

habr.com

Преимущества использования псевдоэлементов CSS для создания всплывающих подсказок: Расширенное оформление. Псевдоэлементы позволяют добавлять дополнительное содержимое до или после указанного элемента, что даёт возможность создавать стилизованные…

Вопрос для Нейро

21 февраля

#Селекторы #Псевдоклассы #Псевдоэлементы #CSS

Чем отличаются селекторы псевдоклассов от псевдоэлементов в CSS?

Нейро

На основе 5 источников

1

2

3

4

5

Селекторы псевдоклассов и псевдоэлементов в CSS отличаются по своему назначению и синтаксису. Псевдоклассы — это селекторы, которые обозначают элемент при каком-либо действии, например когда пользователь наводит курсор на подсказки или кликает по…

Вопрос для Нейро

21 февраля

#Псевдоэлементы #CSS #ДвойноеДвоеточие #ОдинарноеДвоеточие

Почему рекомендуется использовать псевдоэлементы с двойным двоеточием вместо одинарного?

Нейро

На основе 5 источников

1

2

3

4

5

Использование псевдоэлементов с двойным двоеточием вместо одинарного рекомендуется, чтобы визуально отделить их от псевдоклассов. Двойное двоеточие (::) было добавлено в CSS3 для того, чтобы различать псевдоэлементы типа ::before и ::after от…

Вопрос для Нейро

14 января

#HTML #Псевдоэлементы #Атрибуты #Placeholder

Каковы ключевые отличия использования псевдоэлемента :placeholder от атрибута placeholder в HTML?

Нейро

На основе 5 источников

1

blog.skillfactory.ru

2

doka.guide

3

code.mu

4

www.geeksforgeeks.org

5

purpleschool.ru

Ключевые отличия использования псевдоэлемента ::placeholder от атрибута placeholder в HTML: 1. Псевдоэлемент ::placeholder используется для стилизации текста-подсказки (плейсхолдера) в полях ввода и . Он позволяет изменить цвет…</a></h6></div></div></div></section></div><div class="lc-bordersshadow" style="border-radius:0px 23px 23px 23px"></div><div class="lc-bordersborder" style="border-radius:0px 23px 23px 23px"></div></div></div></div></div><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:8;grid-row-start:7;grid-column-end:3;grid-column-start:2;width:min-content;height:32px;justify-self:start;align-self:start;margin-left:0px;margin-top:4px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="chitat-dalee-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="chitat-dalee" class="lc-section lc-section_is-expanded lc-section_no-paddings lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-button-component lc-button-component_in-grid2"><span style="--font-family-base:YS Text, Helvetica, Arial, sans-serif;--font-weight-base:400;--color-base:#000000;--background-color-base:#f2f2f2;--border-radius-base:100px 100px 100px 100px;--border-base:none;--shadow-base:none;--font-family-hover:YS Text, Helvetica, Arial, sans-serif;--font-weight-hover:400;--color-hover:rgba(37, 37, 37, 1);--background-color-hover:rgba(0, 0, 0, 0.1);--border-radius-hover:100px 100px 100px 100px;--border-hover:none;--shadow-hover:none;--font-family-active:YS Text, Helvetica, Arial, sans-serif;--font-weight-active:400;--color-active:rgba(37, 37, 37, 1);--background-color-active:rgba(0, 0, 0, 0.1);--border-radius-active:100px 100px 100px 100px;--border-active:none;--shadow-active:none;--sizes-width:120px;--sizes-height:50px;--sizes-padding-left:16px;--sizes-padding-right:16px;--sizes-font-size:12px;--sizes-letter-spacing:0px;--sizes-icon-height:20px;--sizes-icon-offset:5px"><a class="Link link lc-link lc-button2 lc-button2_size_min lc-button2_animation_off lc-button2_type_link undefined" href="/neurum/c/tehnologii/q/kakovy_klyuchevye_otlichiya_ispolzovaniya_psevdoelementa_6363c05a" data-clickable="true" data-log-node="0--100"><div class="lc-button2under"></div><span class="lc-button2text"><div class="lc-styled-text"><span class="lc-styled-text__text">Читать далее</span></div></span></a></span></div></div></section></div></div></div></div></div></section></div></div></div></div></div></section></div></div></div><section id="loader" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-custom-html"><div class="loader-wrap"> <span class="loader"></span> </div> <style> #loader { visibility: hidden; } #loader.shown { visibility: visible; } .loader-wrap { text-align: center; margin: 0 0 30px; } .loader { width: 32px; height: 32px; border: 4px solid #F8604A; border-bottom-color: transparent; border-radius: 50%; display: inline-block; box-sizing: border-box; animation: rotation 1s linear infinite; opacity: 0.5; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } </style></div></section><div class="lc-multi-background"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="podval-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="podval" class="lc-section lc-section_is-expanded lc-section_no-margins lpc-section "><div class="lc-offsets lc-grid2-offsets" style="padding:0px 0px 76px 0px"><div class="lc-grid2" style="row-gap:0px;column-gap:0px;grid-template-columns:calc((100% - 0px - (649px)) * 0.5) 649px calc((100% - 0px - (649px)) * 0.5);grid-template-rows:min-content"><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:2;grid-row-start:1;grid-column-end:3;grid-column-start:2;width:100%;height:min-content;justify-self:start;align-self:start;margin-left:0px;margin-top:0px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="setochnaya-gruppa-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="setochnaya-gruppa" class="lc-section lc-section_is-expanded lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-grid2" style="row-gap:0px;column-gap:0px;grid-template-columns:calc((100% - 0px) * 1);grid-template-rows:min-content"><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:2;grid-row-start:1;grid-column-end:2;grid-column-start:1;width:min-content;height:min-content;justify-self:start;align-self:start;margin-left:0px;margin-top:0px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="kopirajt-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="kopirajt" class="lc-section lc-section_is-expanded lc-section_no-paddings lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-text-block lc-text-block_size_custom lc-text-block_bpsize_custom lc-text-block_font_text lc-text-component" style="--font-weight:400;--font-size:10px;--color:rgba(32, 35, 51, 0.5);--font-family:YS Text, Helvetica, Arial, sans-serif;--letter-spacing:normal;line-height:140%" aria-hidden="false"><div class="lc-styled-text"><div class="lc-styled-texttext lc-styled-texttext_align_left">© 2024 ООО «Яндекс»</div></div></div></div></section></div></div></div><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:2;grid-row-start:1;grid-column-end:2;grid-column-start:1;width:min-content;height:min-content;justify-self:start;align-self:start;margin-left:115px;margin-top:0px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="polzovatelskoe-soglashenie-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="polzovatelskoe-soglashenie" class="lc-section lc-section_is-expanded lc-section_no-paddings lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-text-block lc-text-block_size_custom lc-text-block_bpsize_custom lc-text-block_font_text lc-text-component" style="--font-weight:400;--font-size:10px;--color:rgba(32, 35, 51, 0.5);--font-family:YS Text, Helvetica, Arial, sans-serif;--letter-spacing:normal;line-height:140%" aria-hidden="false"><div class="lc-styled-text"><div class="lc-styled-texttext lc-styled-texttext_align_left"><a href="https://yandex.ru/legal/yaneurum/" target="_blank">Пользовательское соглашение</a></div></div></div></div></section></div></div></div><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:2;grid-row-start:1;grid-column-end:2;grid-column-start:1;width:min-content;height:min-content;justify-self:start;align-self:start;margin-left:265px;margin-top:0px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="svyazatsya-s-nami-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="svyazatsya-s-nami" class="lc-section lc-section_is-expanded lc-section_no-paddings lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-text-block lc-text-block_size_custom lc-text-block_bpsize_custom lc-text-block_font_text lc-text-component" style="--font-weight:400;--font-size:10px;--color:rgba(32, 35, 51, 0.5);--font-family:YS Text, Helvetica, Arial, sans-serif;--letter-spacing:normal;line-height:140%" aria-hidden="false"><div class="lc-styled-text"><div class="lc-styled-texttext lc-styled-texttext_align_left"><a href="https://forms.yandex.ru/surveys/13479981.b18fd47c33e9c58ba79eba4d8a8b7b9b56ac73e9/" target="_blank">Связаться с нами</a></div></div></div></div></section></div></div></div></div></div></section></div></div></div></div></div></section></div></div><section id="js" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-custom-html"><script src="https://yastatic.net/s3/distribution/hanky/log-2808-1.js"></script> <script src="https://yastatic.net/s3/distribution/hanky/more-questions-1710-2.js"></script> <script src="https://yastatic.net/s3/distribution/hanky/autosize.min.js"></script> <script src="https://yastatic.net/s3/distribution/hanky/question-2102-3.js"></script> <div id="nextUrl" data-url="/neurum/api/next/tag?key=91c21fc7625d5b4be2d5c0b5ae232a52448af2bf52547b9f1eb4a3daad5be9e00a2ae2dc22119fcbcb5b1b6c083127024b49e931ab618f36300bebf4f8409b5d4c444b4118bc82746e1fc3bf0152543e3e85c03b69576af78e16cecd233b3102fb798d516511"></div></div></section><div class="visibility-actions visibility-actions_visible"><div class="lc-multi-background"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="plavayushaya-knopka-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="plavayushaya-knopka" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-group"><div class="lc-groupcontent lc-groupcontent_justify_start lpc-section"><section id="css-knopki" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-custom-html"><style> #knopka { position: relative; transition: transform .1s ease-out; will-change: transform; } #knopka:hover { transform: scale(1.02); } @media (max-width: 1209px) { #plavayushaya-knopka { display: none; } } .lc-fixed-grid2 { z-index: 1000; } </style></div></section><div class="lc-fixed-grid2" style="--fixed-grid-width:250px;--fixed-grid-margin-right:0px;--fixed-grid-margin-top:0px"><div class="lc-multi-background"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="fiks-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="fiks" class="lc-section lc-section_is-expanded lc-section_no-margins lpc-section "><div class="lc-offsets lc-grid2-offsets" style="padding:0px 0px 0px 0px"><div class="lc-grid2" style="row-gap:0px;column-gap:0px;grid-template-columns:calc((100% - 0px) * 1);grid-template-rows:min-content"><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:2;grid-row-start:1;grid-column-end:2;grid-column-start:1;width:210px;height:40px;justify-self:end;align-self:start;margin-right:24px;margin-top:19px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="knopka-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="knopka" class="lc-section lc-section_is-expanded lc-section_no-paddings lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-button-component lc-button-component_in-grid2"><span style="--font-family-base:YS Text, Helvetica, Arial, sans-serif;--font-weight-base:400;--color-base:rgba(37, 37, 37, 1);--background-color-base:#ffffff;--border-radius-base:100px 100px 100px 100px;--border-base:1px solid rgba(0, 0, 0, 0.15);--shadow-base:none;--font-family-hover:YS Text, Helvetica, Arial, sans-serif;--font-weight-hover:400;--color-hover:rgba(37, 37, 37, 1);--background-color-hover:#ffffff;--border-radius-hover:100px 100px 100px 100px;--border-hover:1px solid rgba(0, 0, 0, 0.15);--shadow-hover:none;--font-family-active:YS Text, Helvetica, Arial, sans-serif;--font-weight-active:400;--color-active:rgba(37, 37, 37, 1);--background-color-active:#ffffff;--border-radius-active:100px 100px 100px 100px;--border-active:1px solid rgba(0, 0, 0, 0.15);--shadow-active:none;--icon-url-base:url(https://avatars.mdst.yandex.net/get-lpc/69669/ea983e37-31c4-4d8c-8dfd-544bf732d98b/orig);--icon-opacity-base:1;--icon-url-hover:url(https://avatars.mdst.yandex.net/get-lpc/69669/ea983e37-31c4-4d8c-8dfd-544bf732d98b/orig);--icon-opacity-hover:1;--icon-url-active:url(https://avatars.mdst.yandex.net/get-lpc/69669/ea983e37-31c4-4d8c-8dfd-544bf732d98b/orig);--icon-opacity-active:1;--sizes-width:120px;--sizes-height:50px;--sizes-padding-left:0px;--sizes-padding-right:0px;--sizes-font-size:14px;--sizes-letter-spacing:0px;--sizes-icon-height:24px;--sizes-icon-offset:4px"><a class="Link link lc-link lc-button2 lc-button2_size_min lc-button2_animation_off lc-button2_layout_textOnRight lc-button2_type_link undefined" href="https://ya.ru/neuro-search/?utm_source=neurum" target="_blank" data-clickable="true" rel="noopener" data-log-node="0--100"><div class="lc-button2under"></div><span class="lc-button2text"><span class="lc-button2icon lc-button2icon_iconText"><span class="lc-button2image lc-button2image_base"></span></span><div class="lc-styled-text"><span class="lc-styled-texttext">Что такое Поиск с Нейро?</span></div></span></a></span></div></div></section></div></div></div></div></div></section></div></div></div></div></div></div></section></div></div></div><div class="lc-multi-background"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="modalka-zadat-vopros-backgrounds"></div><div class="lc-multi-background__section-container"><section id="modalka-zadat-vopros" class="lc-section lpc-section "><div class="lc-offsets lc-offsets_padding-top_none lc-offsets_padding-bottom_none"><div style="display:none"><div class="lc-multi-background lc-modalbackground"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="modalka-zadat-vopros-backgrounds"></div><div class="lc-multi-backgroundsection-container"><div class="lc-modalclose" aria-label="Закрыть" role="button" tabindex="0"></div><div class="lc-modal__background-inner"><section id="css-modal" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-custom-html"><style> #modalka-zadat-vopros-backgrounds + .lc-multi-backgroundsection-container .lc-modalclose { top: 13px; right: 2px; } .lc-modalcontent { max-width: 630px; } .lc-modalclose { width: 22px; height: 22px; top: 5px; right: 0; } .lc-modalclose::after, .lc-modalclose::before { width: 22px; height: 22px; } .lc-modalclose::after { right: 3px; } .lc-modalclose::before { right: 19px; } @media (max-width: 1209px) { .lc-modalcontent { min-width: 100%; margin: 0; min-height: 100%; align-items: end; } .lc-modalinternal-content { margin: 0; } } </style></div></section><div class="visibility-actions visibility-actions_visible"><div class="lc-multi-background"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:20px 20px 0px 0px" id="kontent-backgrounds"><div style="background-color:rgba(255, 255, 255, 1)" class="lc-multi-backgroundbackground"></div></div><div class="lc-multi-backgroundsection-container"><div class="lc-bordersadvanced-borders-wrapper" style="border-radius:20px 20px 0px 0px"><div class="lc-borders__component-wrapper" style="border-radius:20px 20px 0px 0px"><section id="kontent" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-offsets" style="padding:48px 32px 32px 32px"><div class="lc-group"><div class="lc-groupcontent lc-groupcontent_justify_start lpc-section"><div class="lc-multi-background"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="setka-1-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="setka-1" class="lc-section lc-section_is-expanded lc-section_no-margins lpc-section "><div class="lc-offsets lc-grid2-offsets" style="padding:0px 0px 0px 0px"><div class="lc-grid2" style="row-gap:0px;column-gap:0px;grid-template-columns:calc((100% - 0px) * 1);grid-template-rows:min-content min-content min-content"><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:2;grid-row-start:1;grid-column-end:2;grid-column-start:1;width:min-content;height:64px;justify-self:center;align-self:start;margin-top:0px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="logotip-v-modalke-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="logotip-v-modalke" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-image-lpc lc-image-lpc_in-grid2 lc-image-lpc_width-auto lc-image-lpc_no-padding"><div class="lc-image-lpc__component"><div class="lc-picture lc-picture_has-thumbnail lc-image-lpcimage"><img alt="" aria-hidden="true" class="lc-picturefull-size-block lc-pictureimage" src="https://avatars.mdst.yandex.net/get-lpc/69009/d622eb0d-b948-4cdb-8354-12fd80f85543/orig" style="opacity:1" width="64" height="64" loading="lazy"/><img aria-hidden="true" class="lc-picturefull-size-block lc-picturethumbnail lc-picturethumbnail_pulsing" src="https://avatars.mdst.yandex.net/get-lpc/69009/d622eb0d-b948-4cdb-8354-12fd80f85543/lqip_q70" width="64" height="64"/></div></div></div></div></section></div></div></div><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:3;grid-row-start:2;grid-column-end:2;grid-column-start:1;width:100%;height:min-content;justify-self:center;align-self:start;margin-top:24px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="zadajte-vopros-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="zadajte-vopros" class="lc-section lc-section_is-expanded lc-section_no-paddings lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-text-block lc-text-block_size_s24 lc-text-block_bpsize_s24 lc-text-block_font_text lc-text-component" style="--font-weight:600;--color:rgba(0, 0, 0, 1);--font-family:YS Text, Helvetica, Arial, sans-serif;--letter-spacing:normal;line-height:117%" aria-hidden="false"><div class="lc-styled-text"><div class="lc-styled-texttext lc-styled-texttext_align_center">Задайте вопрос...</div></div></div></div></section></div></div></div><div class="lc-grid2-item" data-grid-item-id="false" style="grid-row-end:4;grid-row-start:3;grid-column-end:2;grid-column-start:1;width:100%;height:min-content;justify-self:center;align-self:start;margin-top:8px"><div class="lc-multi-background lc-multi-background_inLcGrid2"><div class="lc-multi-backgroundbackgrounds-container" style="--border-radius:" id="i-poluchite-otvet-backgrounds"></div><div class="lc-multi-backgroundsection-container"><section id="i-poluchite-otvet" class="lc-section lc-section_is-expanded lc-section_no-paddings lc-section_no-margins lpc-section "><div class="lc-offsets" style="padding:0px 0px 0px 0px"><div class="lc-text-block lc-text-block_size_s16 lc-text-block_bpsize_s16 lc-text-block_font_text lc-text-component" style="--font-weight:400;--color:rgba(0, 0, 0, 1);--font-family:YS Text, Helvetica, Arial, sans-serif;--letter-spacing:normal;line-height:150%" aria-hidden="false"><div class="lc-styled-text"><div class="lc-styled-texttext lc-styled-texttext_align_center">…и сразу получите ответ в Поиске с Нейро</div></div></div></div></section></div></div></div></div></div></section></div></div><section id="input-poiska" class="lc-section lc-section_is-expanded lpc-section "><div class="lc-custom-html"><style> #input-poiska { } #input-poiska .FuturisInput { width: 100%; margin: 24px 0 0; position: relative; display: flex; align-items: center; gap: 16px; transition: left .3s ease-out; } @media (max-width: 681px) { #input-poiska .FuturisInput { width: auto; margin: 20px 0 0; } } #input-poiska .FuturisInput-Container { display: flex; flex-grow: 1; align-items: center; position: relative; border-radius: 25px; background-color: rgb(242, 242, 242); } #input-poiska .FuturisInput-Content { width: 100%; } #input-poiska .FuturisInput-Text { height: 52px; padding: 16px; display: block; box-sizing: border-box; width: 100%; font: 16px/20px "YS Text",-apple-system,BlinkMacSystemFont,Arial,Helvetica,sans-serif; resize: none; color: #000; border: 0; outline: 0; background-color: transparent; scrollbar-width: none; } #input-poiska .FuturisInput-Panel { margin: 7px 10px; gap: 10px; display: flex; align-self: end; } #input-poiska .Button2 { cursor: pointer; position: relative; display: inline-block; overflow: visible; box-sizing: border-box; margin: 0; padding: 0; font-weight: inherit; user-select: none; text-align: center; white-space: nowrap; text-decoration: none; border-width: 0; outline: 0; background: 0 0; -webkit-tap-highlight-color: transparent; touch-action: manipulation; font-family: inherit; font-size: 0; } #input-poiska .Button2::before { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; content: ""; border-radius: 12px; } #input-poiska .Button2::after { position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; content: ""; transform: scale(0); } #input-poiska .Button2-Text { position: relative; resize: none; white-space: nowrap; pointer-events: none; display: flex; justify-content: center; align-items: center; width: 32px; height: 32px; } #input-poiska .FuturisVoice-Ripple { position: absolute; z-index: 1; width: 40px; height: 40px; content: ""; border-radius: 50%; transition: transform .7s ease-in-out; will-change: transform; } #input-poiska .FuturisVoice-Ripple:first-child { opacity: .2; transform: scale(1.1); } #input-poiska .FuturisVoice-Ripple:nth-child(2) { opacity: .1; transform: scale(1.2); } #input-poiska .FuturisVoice-Icon { z-index: 2; width: 32px; height: 32px; } #input-poiska .FuturisVoice-Icon rect { transition: height .7s ease-in-out; transform: rotate(180deg); transform-origin: center; fill: rgba(0, 0, 0, .4); } #input-poiska .FuturisVoice-Icon path { fill: rgba(0, 0, 0, .4); } #input-poiska .FuturisInput-Search { padding: 4px; fill: #f8604a; transition: .1s ease-out; cursor: pointer; } #input-poiska .FuturisVoice { position: relative; padding: 4px; color: rgba(0, 0, 0, .4); border-radius: 50%; transition: .1s ease-out; } #input-poiska .FuturisVoice:hover { transform: scale(1.1); } #input-poiska .FuturisInput-Search:hover { transform: scale(1.1); } </style> <form id="search-modal-form" class="search__form" action="https://ya.ru/search/" method="get" target="_blank"> <div class="FuturisInput"> <div class="FuturisInput-Container"> <div class="FuturisInput-Content"> <div class="FuturisAutocomplete-Wrapper"> <textarea id="search-textarea" name="text" type="text" class="FuturisAutocomplete-Input FuturisInput-Text" aria-label="Задать свой вопрос" placeholder="Задать свой вопрос" maxlength="1024" enterkeyhint="search" autocorrect="off" autocapitalize="none" spellcheck="false" autocomplete="off" value="" style="height: 52px;">

Главная / #Псевдоэлементы

#Псевдоэлементы