Всплывающая подсказка на CSS


Содержание

Как сделать всплывающую подсказку | CSS

Всплывающая подсказка в HTML

Согласно w3.org

  1. текст атрибута alt отображается, когда не может быть показан объект,
  2. текст атрибута title отображается во всплывающей подсказке, когда курсор мышки наведён на элемент.
содержимое
Пример: title=»про атрибут title: содержимое в большинстве случаев не индексируется поисковыми системами»> наведи на меня
Результат: наведи на меня
Пример: наведи на меня
Результат: наведи на меня

Появляющаяся подсказка (сообщение) в JavaScript

Пример: нажми на меня
Результат: нажми на меня

Своя всплывающая подсказка к тексту

Что будет работать на CSS

Желательное поведение подсказки:

  1. появляться с небольшой задержкой, чтобы не мешать незаинтересованным в подсказке посетителям,
  2. появляться по центру (слева/справа) наводимого элемента,
  3. адаптироваться к ширине и высоте окна браузера,
  4. иметь HTML-содержимое (изображение, ссылка), а не только текст,
  5. подстраиваться под содержимое (или не более содержимого, или не более указанной величины, или не более окна браузера),
  6. работать на сенсорных экранах (появляться и при наведении, и при нажатии),
  7. индексироваться поисковыми системами.

Примеры: наведи на меня (по центру) В статье «Как заработать деньги в интернете» можно увидеть практическое использование , наведи на меня (влево) Важно: tabindex в теге нужен чтобы срабатывал :focus , наведи на меня (вправо) Ничто так не воодушевляет, как сознание своего безнадёжного положения Альбер Камю

Пример с анимацией: наведи на меня Короткая

Что нельзя сделать без JavaScript

Желательное поведение:

  1. находится в видимой области окна браузера.

Пример: наведи на меня Даже когда ширина подсказки меньше окна браузера, она может уходить за край видимой области, так как подсказка располагается относительно элемента, а не относительно HTML-документа

Как сделать всплывающую подсказку, появляющуюся рядом с курсором мышки или рядом с тем местом, куда нажал посетитель

21 комментарий:

Павел Каким образом относится высказывание:»Это правило не относится к IE, поэтому лучше указать оба атрибута.» к IE? Означенные атрибуты собственно нужны не столько пользователям и браузерам, а поисковикам. Так как первым(тем кто ищет информацию отключив мультимедию) до лампочки изображения(а ссылка, как правило анонсируется), из вторых как раз таки правильно отображает указанные атрибуты IE. Вот у гугловского хрома проблема с alt. NMitra Спасибо за то, что обратили внимание на этот момент. Строку убрала, дабы не вводить в заблуждение читателей. Я имела ввиду то, что версии ниже IE 8 отображают подсказку при наведении мышки на изображение, если в теге img указан alt (без title). Серебро Оригинальное оформление. Только свойства CSS у вас прописаны для блоков podskazka, а сама конструкция подсказки привязана к блоку priskazka, что может привести к ошибкам в оформлении у читателей, взявших ваш пример на вооружение. NMitra Совершено верно. Благодарю за замечание. Бегу исправлять PANIC Я хочу, чтобы при наведении на ссылку в гаджете «страницы» (или «список ссылок») появлялась всплывающая подсказка (как у Вас вверху).
Но куда и что вставлять. не могу понять NMitra Нужно прописывать тегу a атрибут title. Это возможно либо в гаджете HTML/JavaScript, либо если размещать ссылки прямо в шаблоне. Maniak помогите привязать к картинке а картинку сделать к левому краю экрана — хочу сделать всплывающие контакты сейчас работает только после нажатия NMitra Похоже вы справились без моей помощи. К сожалению, ранее не было возможности ответить — находилась вне связи. Мишаня Скажите, пожалуйста, а можно установить какой-нибудь код, чтобы на всех размещённыхв блоге фотографиях оторбажались её свойства (размер и габариты). NMitra Правая кнопка мышки — «Информация об изображении» даст всю необходимую информацию. Можно прописать title элементу, где указать размеры. Как автоматизировать этот процесс, я точно не скажу.

Бесплатная подборка всплывающих подсказок с использованием JQuery и CSS3

Здравствуйте, дорогие читатели блога beloweb.ru. В этот замечательный вечер я спешу представить Вам, замечательную подборку бесплатных плавно всплывающих подсказок на любой вкус и цвет с использованием CSS3 и JQuery.

Ну что тут сказать, подборка получилась довольно таки не плохая. И я думаю, что она существенно поможет решить Вам проблему с подсказками на сайте. Тем более здесь есть с чего выбрать. Ну а теперь наслаждайтесь, друзья.

Всплывающие подсказки title на CSS

Рассмотрим возможность создания простых всплываек при наведении мыши на картинку или какой-нибудь html блок. При этом во всплывайки мы сможем добавлять только текст (ссылки и теги не вставить).

Как известно, html имеет «всплывайки-подсказки» по умолчанию — это title. Его можно вставить на любой тег, ссылку или кнопку:

Это бывает крайне не удобно, когда пользователь наводит на что-то мышь и ему приходится ждать появление подсказки. Часто он просто не догадывается о том, что там должно что-то появиться, быстро отводит мышь и подсказка вовсе не появляется.

Воспользуемся псевдоэлементом after , чтобы создать моментальные подсказки по аналогии с title, которые лишены этих недостатков. Сначала добавим сами элементы:

Обратите внимание — вместо title я использую выдуманный атрибут data-text , в нем и будет содержаться текст наших подсказок.

Теперь добавим css стиль, который заставит магическим образом красиво появляться подсказкам над картинками и обычным текстом в данном случае:

Здесь при наведении на .item «создается» псевдоблок after, в котором в качестве контента берется значение атрибута data-text. С помощью position: absolute; и z-index: 1; мы позиционируем подсказку сверху картинок.

Сейчас подсказка показывается снизу картинки. Чтобы она была строго посередине, измените класс так: .item

.item:hover::after <
content: attr(data-text);
position: absolute;
left: 50%;
width: 160px;
margin-left: -90px;
top: 50%;
margin-top: -30px;
height: 40px;
z-index: 1;
background: rgba(222, 222, 222, 0.82);
font-family: Arial;
font-size: 14px;
padding: 10px 10px;
color: #000;
>

Таким образом, достаточно просто сделать эффектные подсказки по аналогии с title не прибегая к использованию скриптов.

MagentaWAVE

Примеры и готовые решения для оформления блога и сайта. Разработка и дизайн шаблонов Blogger.

Простые всплывающие подсказки на CSS

Реализация простых подсказок с помощью атрибута data-title

Самый простой вариант — это CSS-стилизация обычной, текстовой подсказки. Для этого нужно использовать атрибут data-title, вместо привычного title, чтобы избежать появления сразу двух подсказок — с собственным оформлением и стандартным, которое изменить нельзя.


HTML конструкция
выглядит так:

Подсказка появляющаяся по клику реализация с помощью тега ссылки

Создание подсказка появляющейся по клику с помощью тега INPUT

* .tip-three <
display: block;
>

) элементами, применяя к ним необходимые свойства.
На словах такая хитрость или как говорят — CSS:checked хак, будет звучать примерно так: «Если флажок установлен, применить следующий стиль, к такому-то элементу.» Пример из этой статьи является одним из многочисленных вариантов использования :checked.
Более подробное описание можно посмотреть здесь (англ.).

Подсказка появляющаяся при наведении курсора

— когда блок расположен непосредственно рядом с вызывающим элементом.

Общий CSS

Теперь, в зависимости от используемого варианта, осталось организовать функционал всплывающей подсказки, который заключается в применении псевдоклассов.

Просмотреть весь код целиком и самостоятельно поработать с ним, можно скачав HTML-файл с исходным кодом демо-страницы

29 комментариев:

Очень полезная плюшка! Спасибо!

очень интересно и палезно, попробую разобраться! Спасибо!

Я начинающий блоггер. Очень ваш ресурс мне помогает. Правда, не всегда хватает мозгов. Все проделала, как у вас написано в этом посте, но при нажатии на значок, у меня ничего не появляется((( Понимаю, что спрашивать, не показывая, что я делала, немного нелепо, но может быть подскажете, в чем у меня загвоздка?

Ирина, спасибо за доверие, но вы правильно заметили что спрашивать не показывая немного нелепо. Ведь не видя ошибки, я не могу вам помочь. Но возможно вам нужно убрать из CSS при добавлении, сноски — /*. */, в этом часто бывает ошибка. А в остальном, уж простите, как говорится, — надо видеть пациента.

Круто. Можно вас попросить,сделать чтобы контент размещался не внутри тега «a» в как у вас во втором примере что на скриптах сделано? Но втором примере применяется скрипт, если его не использовать, то при клике по открывшемуся блоку он пропадает, а если скрипт не отключать, то закрыть блок можно только если нажать на крестик, а хотелось как в первом варианте по любому месту экрана. Хотелось чтоб без скриптов, немного изменить первый вариант чтоб контент находился как во втором было бы здорово. Спасибо

Такое сделать можно, но это уже совсем другая история и совершенно другой код. Для такого варианта можно использовать IMPUTы и псевдокласс:checked , но тогда CSS нужно прописывать отдельно для каждой подсказки. Вариант со скриптом самый простой, поэтому и сделан по минимуму, чем больше функций — тем больше код, это уже будет не простой скрипт, а целый плагин. Если вам нужно без скрипта то используйте этот вариант, внутри можно разместить все , кроме ссылок.

извиняюсь, немного поразмышлял, всё в порядке, этот вариант что без скрипта подходит, но вот столкнулся единственное с одной проблемой, ссылки размещать в блоке можно также кликать тоже можно, но вот если разместить в этом блоке тег список(select->option) и кликнуть по списку, то блок сразу исчезает, я так понимаю тут уже это не исправить? А можно в новом скрипте сделать что-то, чтобы не использовать плагин hoverIntent?

Просто список select так устроен, если это можно так назвать, что отображается поверх всего, вне зависимости от z-index и положения в коде, поэтому ссылка теряет фокус и блок исчезает. Но я когда ее делал даже не думал о том чтобы в нее такой список пихать.:)
hoverIntent можно и не использовать, если нужна просто подсказка по клику, или использовать обычную функцию hover(), но тогда нужно прописывать таймауты для появления при наведении чтобы не было зацикливания. А так этот плагин решает эту проблему.

Пользовался вашим подсказкой около 6 месяцев и все работало. Но с недавних пор, подсказка работать перестала.

Дело в том что внутри подсказки я использовал кнопки социальных сетей от сервиса share42 и если раньше это работало, то теперь при нажатии подсказки открывается список кнопок, но при нажатии одной из кнопки все исчезает и ничего не происходит.

Я попробовал использовать другие сервисы для моей идеи и это не помогло, результат одинаковый. В тоже время если в подсказке стоит текст, то все работает правильно. И если щелкать текст внутри подсказки, его можно выделить, скопировать и даже посмотреть код html/Подсказка исчезает при клике не на нее, а в другой области экрана.

Получается разница стала в том, что если я использую кнопки то при щелчке по подсказке она исчезает, а при использовании текста внутри подсказки она остается и я должен сам ее закрыть щелкнув в другом месте экрана (т.е как мне и нужно).

Как мне сделать чтобы подсказка не исчезала и срабатывала кнопка соц.сетей ума не приложу. Буду рад любым идеям.

Как сделать всплывающую подсказку в HTML и CSS?

Приветствую вас на сайте Impuls-Web!

Довольно часто возникает необходимость сделать всплывающую подсказку html для того, что бы пояснить пользователю какой-то момент на странице сайта, или, к примеру, сделать пояснение к изображению, которое будет появляться при наведении на него указателя мышки.

В сегодняшней статье я покажу вам два простых способа, с помощью которых с легкостью делается всплывающая подсказка html-кодом и css-стилями.

Всплывающая подсказка HTML

Итак, для создания всплывающей подсказки html мы можем использовать атрибут title, который можно присвоить для любого элемента на странице. В случае если данный атрибут задан для какого либо элемента, то при наведении указателя мышки на данный элемент будет появляться всплывающая подсказка.

Или вот еще один пример с использованием картинки:

Как видите все просто, но данная всплывающая подсказка html имеет ряд своих недостатков. А именно, все параметры отображения, такие как шрифт, цвет, размер задаются исходя из параметров браузера, и вы ни как не можете на них повлиять.

Всплывающая подсказка CSS

Второй способ заключается в том, что мы можем создать всплывающую подсказку CSS, и задать для нее такое визуальное оформление, как нам нужно. Для этого мы создадим дополнительный блок после элемента, для которого нужно сделать всплывающую подсказку CSS, в нем разместим нужный текст, а затем css-стилями зададим нужные параметры визуализации.

Вот что получится:

Данными стилями мы задаем стилизацию нашей подсказке и делаем ее полностью прозрачной. А далее при наведении указателя мышки на картинку, делаем ее видимой.

Конечно данный способ создания всплывающей подсказки CSS немного трудоемкий в плане кода, но вы можете сделать заготовку для различных случаев, а потом просо подставлять нужные классы для элементов с подсказками.

Надеюсь, моя статья будет для вас полезна и поможет вам сделать удобные и информативные подсказки. Если данная статья вам понравилась, обязательно оставьте комментарий, поделитесь ею в социальных сетях и подпишитесь на мою рассылку.

Желаю вам удачи! До встречи в следующих статьях!

Всплывающие подсказки — html, JS, Bootstrap

Всплывающая подсказка представляет собой короткое текстовое сообщение с пояснением, возникающие в результате наведения курсора мышки на элемент страницы. Далее рассмотрим как сделать всплывающую подсказку в html.

Стандартный способ

За показ подсказки отвечает . Этот атрибут можно использовать для показа подсказки к разным объектам, но чаще всего его используют в качестве поясняющего текста к изображениям.</p> <p>Для показа всплывающей подсказки нужно только лишь добавить это атрибут и написать в нем необходимый поясняющий текст.</p> <p>В качестве подсказки может использоваться как одно слово или словосочетание, так и сразу несколько предложений. Обычно всплывающая html подсказка выглядит следующим образом:</p> <p>Поясняющий текст появляется не сразу после наведения мышки на изображение, а через пару секунд. Такая особенность всплывающих подсказок заложена по умолчанию.</p> <p>Стандартная всплывающая html подсказка при наведении на текст имеет один существенный недостаток – отсутствие инструментов для стилизации. Чтобы решить эту проблему необходимо использовать другие способы создания всплывающей подсказки.</p> <h2 id="sposob-na-chistom-css">Способ на чистом css</h2> <p>Для красивого вывода подсказки обычно используется именно этот способ. Он предусматривает заключение картинки в контейнер с идентификатором. Благодаря этому, обеспечивается возможность обращения к данному контейнеру в стилях:</p> <p>В вышеуказанном примере единственным непонятным моментом может быть . Этот атрибут не выполняет никакой функции. Однако его значение используется в js и css. Таким образом, и этот атрибут может быть полезен. Но сначала необходимо описать стили блок-контейнера.</p> <p>Относительное позиционирование используется по причине того, что контейнер со всплывающей подсказкой будет позиционироваться абсолютно. Поэтому необходимо сделать так, чтобы текст позиционировался только относительно родительского блока, а не всей страницы.</p> <p>Блочно-строчное отображение не помешает родительскому блоку (в том числе и контейнеру с со всплывающей подсказкой) растянуться на всю ширину окна. Теперь осталось создать поясняющий текст.</p> <p>Всплывающие подсказки в css проще всего делать посредством псевдоэлементов:</p> <p>Несмотря на обилие кода, он очень прост для понимания. Селектор #pdskzk:hover:after необходим для создания псевдоэлемента after в тот момент, когда пользователь ставит курсор на контейнер с изображением. Свойство content: attr(data-name) предназначено для указания текстового значения. Оно соответствует свойству, которое записано в атрибуте data-name у контейнера-обертки изображения.</p> <p>После этого остается позиционировать объект абсолютно и задать ему необходимые параметры:</p> <p>Таким образом, получается такая всплывающая подсказка css при наведении на картинку:</p> <p>По сравнению со стандартной подсказкой, этот вариант поясняющего текста при наведении на изображение выглядит более интересно и привлекательно. К тому же подсказка возникает сразу при наведении курсора на элемент. При этом плавное появление всплывающей подсказки невозможно из-за то, что псевдоэлементы не поддерживают такой функционал.</p> <h2 id="plavnoe-poyavlenie">Плавное появление</h2> <p>Тем не менее, возможности css позволяют использовать плавное появление подсказки. В этом случае не используются псевдоэлементы. Это обусловлено тем, что именно они не позволяют применить опцию плавного появления. Пример реализации плавного появления всплывающей подсказки на css представлен ниже:</p> <p>Стоит заметить, что css-код практически не изменился:</p> <p>Ключевое изменение касается свойства content, которое не используется в этом примере. Оно потеряло актуальность ввиду того, что поддерживается только псевдоэлементами. Еще одно изменение – появление свойства transition. Именно это свойство отвечает за создание плавных переходов. Внимательный читатель наверняка обратил внимание на значение opacity: 0. Оно делает контейнер с подсказкой прозрачным.</p> <p>Теперь при наведении на родительский блок достаточно вернуть стандартную прозрачность контейнеру с подсказкой. После этого можно проверить работу кода и убедиться в том, что поясняющий текст возникает на экране плавно.</p> <p>CSS3 позволяет скрыть элемент и другими способами. Например, может использоваться трансформация. Этот метод предусматривает замену полной прозрачности на свойство transform: scale(0). Также необходимо уменьшить размер контейнера до 0. Таким образом, его не будет видно на странице. При наведении на контейнер с изображением нужно указать свойство transform: scale(1). Этот способ позволяет сделать появление всплывающего текстового сообщения не только плавным, но и эффектным.</p> <h2 id="drugie-sposoby">Другие способы</h2> <p>Всплывающие текстовые сообщения можно создавать и посредством jQuery. Эта библиотека может использоваться как для написания своего кода, так и для создания плагина для всплывающих подсказок на jQuery, который реализует необходимый эффект.</p> <p>Альтернативный вариант – всплывающие подсказки на Bootstrap. Этот фреймворк имеет множество готовых реализаций всплывающих подсказок. Достаточно только ознакомиться с документацией к Bootstrap и изучить доступные примеры кода. При этом совершенно необязательно полностью подключать этот фреймворк. Достаточно скачать и подключить компонент toolptips.</p> <p>В целом сегодня существует огромное количество способов создания всплывающих подсказок без js. Благодаря такому разнообразию, можно использовать как стандартные реализации, так и более эффектные с плавным или резким появлением. Кроме того, не стоит забывать о возможностях библиотеки jQuery и фреймворка Bootstrap.</p> <h2 id="kak-sdelat-chudesnye-animirovannye-vsplyvayuschie">Как сделать чудесные, анимированные всплывающие подсказки с помощью CSS.</h2> <p>Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)</p> <p>Всплывающие подсказки — это отличный способ улучшить пользовательский интерфейс — UI, когда вашим пользователям нужно дополнительное описание для той причудливой иконки, или когда они хотят перестраховаться перед тем, как нажать на кнопку, ну или может быть заголовок для «пасхального яйца» который идёт вместе с изображением. Так давайте сделаем анимированные всплывающие подсказки прямо сейчас, используя не что иное как HTML и CSS.</p> <h3 id="obrazets">Образец</h3> <p>Вот над чем мы собираемся работать:</p> <p>Прежде чем прыгать в котёл, давайте взглянем на то, что мы собираемся сварганить. Наша цель — добавить всплывающую подсказку простым способом, поэтому мы сделаем это добавив атрибут tooltip :</p> <h3 id="zamechanie-o-dostupnosti-i-vozmozhnostyah">Замечание о доступности и возможностях <br /></h3> <p>Если вы ищете всплывающие подсказки совместимые с 508-м разделом (стандарт, принятый в США, для создания веб-ресурсов для людей с ограниченными возможностями) или вам нужны более умные подсказки с обнаружением столкновения контейнеров и/или поддержкой HTML содержимого или обычного текста, существует множество решений, в которых для этих задач используются сторонние скрипты.</p> <blockquote> <p>«JavaScript необходим для создания полностью доступных интерактивных компонентов» — Сара Суэйдан, Построение полнодоступной справочной подсказки. сложнее, чем я думала</p> </blockquote> <p>В этом руководстве потребности в доступности особо не рассматриваются. Вы знаете своих пользователей и то, что им нужно, поэтому убедитесь что вы учили и уважаете их нужды.</p> <h3 id="davayte-opredelim-chego-sleduet-ozhidat">Давайте определим чего следует ожидать</h3> <ul> <li>JavaScript не требуется</li> <li>Мы будем использовать селектор атрибута (не название класса), используя встроенные возможности CSS.</li> <li>Будем использовать существующие DOM элементы (никакие новые элементы не потребуются в вашей разметке*)</li> <li>В примерах кодов <em>не используются префиксы</em> (поэтому если вам нужно, сами добавьте префикс для вашего браузера)</li> <li>Для переключения всплывающих подсказок будем использовать событие в наведении мыши — mouseover/hover</li> <li>Всплывающие подсказки поддерживают только простой текст (HTML, изображения и прочее не поддерживается)</li> <li>Лёгкая анимация при вызове всплывающих подсказок</li> </ul> <h3 id="otlichno-davayte-raskachaem-etu-lodku">Отлично! Давайте раскачаем эту лодку! <br /></h3> <p>Ой, подождите! Есть сноска (*), давайте сначала договоримся об “дополнительная разметка не нужна”. Всё-таки это магия! Нашим всплывающим подсказкам <em>действительно</em> не нужны дополнительные DOM элементы, так как они сделаны полностью на <em>псевдо-элементах</em> ( ::before и ::after ), которыми мы можем управлять с помощью CSS.</p> <p>Если вы уже используете псевдоэлементы из другого набора стилей и хотите создать всплывающую подсказку для этого элемента, вам может потребоваться <em>немного</em> изменить структуру.</p> <h3 id="nikakoy-vecherinki-bez-vsplyvayuschih-podskazok">Никакой вечеринки без всплывающих подсказок! <br /></h3> <p>Подождите. Господа! Ещё одна оговорка: <em>CSS-позиционирование</em>. Чтобы всплывающие подсказки функционировали должным образом, их родительский элемент (то, к чему мы прикрепляем подсказку) должен быть</p> <ul> <li>position: relative , или</li> <li>position: absolute , или</li> <li>position: fixed</li> </ul> <p>По существу, <em>что-либо</em> кроме position: static — это режим позиционирования по умолчанию, назначенный практически на все элементы вашим браузером. Всплывающие подсказки имеют абсолютное позиционирование и таким образом им нужно знать границы, в которых их абсолютность имеет место быть. Указанное по умолчанию <em>статическое</em> позиционирование не имеет свои собственные границы и не даст вашим всплывающим подсказкам что-то, от чего можно оттолкнуться, поэтому подсказки будут использовать ближайший родительский элемент, у которого четко объявлена граница.</p> <p>Вам нужно определить, какое позиционирование работает лучше, когда вы используйте подсказки. По этому руководству подразумевается, что родительский элемент настроен на position: relative . Если ваш интерфейс основывается на абсолютном позиционировании элементов, тогда могут потребоваться некоторые изменения (дополнительная разметка), чтобы навесить подсказку на этот элемент.</p> <p>Ну что ж, запрыгиваем и понеслась!</p> <h2 id="selektor-atributa-bystroe-napominanie">Селектор атрибута: Быстрое напоминание <br /></h2> <p>Большинство CSS правил написаны для использования по названию класса, например .this-thing , но в CSS есть несколько типов селекторов. Для наших чудесных подсказок мы будем использовать селектор атрибута/свойства — объявляется квадратными скобками.</p> <p>Когда браузер встречает что-то вроде этого:</p> <p>он поймет, что нужно применить правила [foo] , потому что в теге имеется атрибут названный <em>foo</em>. В этом случае, сам span будет полупрозрачного черного цвета с белым текстом.</p> <p><center><iframe width="420" height="315" src="https://www.youtube.com/embed/5huBlLhywJg" frameborder="0" allowfullscreen></iframe><br /> </center></p> <p>HTML элементы имеют различные встроенные атрибуты, а также мы можем придумать свои собственные. Наподобие foo , или tooltip . По умолчанию, HTML не знает что он означает, но с помощью CSS мы можем подсказать HTML, что с этим делать.</p> <h3 id="pochemu-selektory-atributov">Почему селекторы атрибутов? <br /></h3> <p>Мы будем использовать селекторы атрибутов в первую очередь для разделения задач. Использование атрибутов вместо имён классов не дает нам никаких бонусных очков в этой битве; классы и атрибуты имеют одинаковое предназначение. Однако, используя атрибуты, мы можем держать наш контент в содержимом, поскольку атрибуты HTML могут иметь значения, в то время как имена классов не могут.</p> <p>Рассмотрим в этом примере кода: имя класса .tooltip и атрибут [tooltip] . Имя класса <em>является</em> одним из значений атрибута [class] , в то время, как атрибут tooltip <em>имеет</em> значение, а содержащее текст, который мы хотим отобразить.</p> <h2 id="teper-dobavlyaem-alhimiyu-v-podskazku">Теперь добавляем Алхимию в подсказку</h2> <p>Наши подсказки будут использовать два атрибута:</p> <ul> <li>tooltip <strong>:</strong> содержит содержимое подсказки (строка простого текста)</li> <li>flow <strong>:</strong><em>не обязательно</em>; позволяет нам управлять с тем, как раскрыть подсказку. Мы можем использовать много способов размещения, но мы рассмотрим 4 обычных направления:<br />сверху, слева, справа, снизу.</li> </ul> <p>Теперь давайте настроим основу для всех подсказок. Правила 1-5 пунктов применяются для всех подсказок, независимо от того какое направление <em>flow</em> мы им зададим. Пункты 6–7 имеют различия для значений flow .</p> <h2 id="1-otnositelnost">1. Относительность</h2> <p>Это для родительского элемента подсказки. Давайте назначим позицию так, чтобы абсолютное расположение частей подсказки (псевдоэлементы ::before и ::after ) находилось в контексте родительского элемента, а не в контексте страницы в целом или прародительского элемента, или какого-то другого внешнего элемента в дереве DOM.</p> <h2 id="2-nastalo-vremya-dlya-psevdo-elementov">2. Настало время для псевдо-элементов</h2> <p>Пришло время для выхода псевдоэлементов на сцену. Пока что, мы зададим общее свойство для обоих частей ::before и ::after . Свойство content — выполняет основную работу псевдо-элемента, и скоро мы до него доберемся.</p> <h2 id="3-dink">3. Dink</h2> <p>Я не знаю, какое отношение имеет к этому «dink, но я всегда называл это так. Эта маленькая, треугольная, заострённая часть, придающая подсказкам вид, как у <em>пузыря с диалогом</em>, указывающая туда, откуда оно появилось. Заметьте, что мы используем прозрачный цвет ( transparent ) для границы; мы добавим цвет позже, также как и зависимость подсказки от направления flow .</p> <p>Это не опечатка, что значение свойства имеет пустую строку — content: »; . Нам там ничего не нужно, но нам нужно это свойство для работы псевдо-элемента.</p> <p>Чтобы создать треугольник, мы задаем сплошную границу с некоторой толщиной для пустого прямоугольника (без содержимого), без ширины и высоты, и цвет будет только у одной стороны границы. Для получения дополнительной информации ознакомьтесь со следующим руководством:</p> <h2 id="4-puzyriki">4. Пузырики!</h2> <p>Мы добрались до сути. Заметьте что content: attr(tooltip) говорит, “Этот псевдо-элемент должен использовать значение атрибута tooltip в качестве контента.” Вот почему использование атрибутов вместо названия классов является отличным решением!</p> <p>Заметьте, что значения z-index присутствуют для обоих элементов и «dink», и пузырика. Это произвольные значения, но имейте в виду, что значения z-index являятся относительными. Разъяснение: значение z-index: 1001 внутри элемента с z-index: 3, означает, что элемент 1001 будет самым верхним элементом <em>внутри</em> этого контейнера с <em>z-index: 3</em>.</p> <p>Свойство пузырика z-index должно быть как минимум на 1 меньше чем z-index у «dink». Если это значение такое же или выше чем у «dink», вы можете столкнуться с эффектом неравномерной цветовой окраски «dink», если вы применяете box-shadow для ваших подсказок.</p> <p>Чтобы узнать подробнее о свойстве z-index, взгляните на следующее руководство:</p> <h2 id="5-vzaimodeystvie-s-deystviem">5. Взаимодействие с действием</h2> <p>Наши подсказки активируются при наведении мыши на элемент с подсказкой… <em>Почти</em>.</p> <p>Если вы вернётесь нашему блоку со стилями на Шаге 2, вы должны увидеть, что мы использовали opacity: 0; наряду с display: none; для частей нашей подсказки. Мы сделали так, чтобы использовать эффекты анимации CSS, при отображении и скрытии подсказки. </p> <p>Свойство display не может быть анимировано, а свойство opacity может! И напоследок мы займёмся анимацией. Если вас не интересуют анимированные подсказки, просто уберите opacity: 0; на Пункте 2 и не обращайте внимания на анимацию в Пункте 7.</p> <p>Последнее, что нам нужно, все еще относится ко всем подсказкам — это способ подавить всплывающую подсказку, если у нее нет содержимого. Если вы заполняете всплывающие подсказки некоторой динамической системой (Vue.js, Angular, или React, PHP и т.д.), нам не нужны тупые пустые пузырьки!</p> <h2 id="6-upravlenie-napravleniem">6. Управление направлением</h2> <p>Этот шаг может быть довольно сложным, поскольку мы будем использовать некоторые не столь распространенные селекторы, чтобы помочь нашим подсказкам определиться с их местами размещения на основе их flow значений (или их отсутствия).</p> <blockquote> <p>«В Круге-K происходят странные вещи» — <em>Тед Теодор Логан</em></p> </blockquote> <p>Прежде чем перейти к стилям, давайте посмотрим на некоторые шаблоны селекторов, которые мы будем использовать.</p> <p>Это говорит браузеру: «Для всех элементов с атрибутом tooltip , которые либо <em>не имеют</em> атрибута flow , либо имеют flow со значением, которое <em>начинается с</em> “наверх”: применить эти стили к своему псевдониму ::before .»</p> <p>Мы используем шаблон, так что они могут быть распространены на другие flow без необходимости повторять CSS. Этот шаблон flow^=»up» использует сопоставитель ^= (начинается с). Это позволяет стилям также применяться к <em>up-right</em> и <em>up-left</em> (вправо-вверх и влево-верх), вы можете захотеть использовать такие направления. Мы не будем описывать их здесь, но вы можете увидеть, как они используются в моей оригинальной демонстрации всплывающей подсказки в CodePen.</p> <p>Ниже перечислены блоки CSS для всех четырех направлений, рассматриваемых в этом уроке.</p> <h3 id="naverh-po-umolchaniyu">Наверх (по умолчанию):</h3> <h3 id="vlevo">Влево:</h3> <h3 id="vpravo">Вправо:</h3> <h2 id="7-animiruem-vsyo">7. Анимируем всё</h2> <p>Анимация просто потрясающая штука. Анимация может:</p> <ul> <li>помочь пользователям чувствовать себя комфортно</li> <li>помочь пользователям с пространственной ориентацией в вашем интерфейсе</li> <li>привлечь внимание к вещам, которые необходимо увидеть</li> <li>смягчить элементы интерфейса, которые в противном случае имели бы только резкий эффект вкл/выкл</li> </ul> <p>Наши подсказки будут подпадать под это последнее описание. Вместо того, чтобы всплывать и мгновенно выскакивать, давайте сделаем нашим текстовым пузырям более <em>легкий</em> эффект.</p> <h3 id="keyframes">@keyframes</h3> <p>Нам понадобятся два вида анимации @keyframe . Подсказки вверх/вниз будут использовать keyframe tooltips-vert , а подсказки влево/вправо будут использовать keyframe tooltips-horz . Обратите внимание, что в обоих этих keyframe мы определяем только желаемое конечное состояние всплывающих подсказок. Нам не нужно знать, <em>откуда</em> они появляются (в подсказках есть информация о стиле). Мы просто хотим управлять тем, куда они <em>направляются</em>.</p> <p>Теперь нам нужно применить эти keyframe к подсказкам, когда пользователь наводит курсор мыши на элементы с атрибутами [tooltip] . Поскольку мы используем различные направления для управления отображением всплывающих подсказок, нам необходимо определить эти возможности в стилях.</p> <h3 id="ispolzuyte-hover-chtoby-peredat-upravlenie">Используйте :hover, чтобы передать управление анимации</h3> <p>Помните, что мы не можем анимировать свойство display , но мы можем дать всплывающим подсказкам эффект затухания, манипулируя opacity . Мы также анимируем свойство transform, которое придает подсказкам еле-заметное движение, как будто они вылетают, указывая на их теггированне элементы.</p> <p>Обратите внимание на ключевое слово forwards в объявлении анимации. Это говорит анимации не сбрасываться после одного выполнения, а двигаться вперед и оставаться до конца.</p> <h2 id="vyvod">Вывод</h2> <p>Фантастическая работа! Мы многое рассказали на этом уроке, и теперь у нас есть аккуратная коллекция всплывающих подсказок, показывающих нашу напряженную работу:</p> <p>Мы лишь нацарапали поверхность того, что можно делать с помощью всплывающих подсказок CSS. Повеселитесь, поиграйте с ними, продолжайте экспериментировать и придумывайте свои собственные рецепты!</p> <h2 id="vsplyvayuschie-podskazki-postroennye-tolko">Всплывающие подсказки, построенные только на CSS</h2> <p>Обеспечение дополнительной информации о потенциально сложных элементах интерфейса пользователя является очень важной частью работы веб дизайнера при разработке удобного и доступного веб сайта.</p> <p>Одним из широко используемых механизмов для вывода дополнительных сведений, кроме тех, что видны на странице, являются всплывающие подсказки(элементы дизайна для отображения подсказок об определённых элементах на экране).</p> <p>В то время, как существует много инновационных решений с использованием CSS и JavaScript (с или без использования фреймворка JavaScript, например, jQuery), иногда полезно взглянуть на то, как новые технологии встряхивают давно используемые методы.</p> <p>В данном уроке будет показано, как с использованием <strong>только CSS</strong> можно сделать чудесные кросс-браузерные всплывающие подсказки.</p> <h3 id="vsplyvayuschie-podskazki-eto-kruto">Всплывающие подсказки — это круто!</h3> <p>Где бы не нужно было объяснить аббревиацию или акроним, объяснить значение слова или дать дополнительную информацию о чём-либо, всплывающие подсказки будут <strong>простым, но эффективным решением.</strong> </p> <p>Начиная с маленького жёлтого блока с текстом, который появляется над элементом, таким как изображение, и выводит содержание атрибута title (или атрибута alt , если вы к несчастью используете Internet Explorer) до основанных на скриптах изощрённых решений с использованием, всплывающие подсказки являются фантастическим инструментом, который, кажется, мало популярен в сообществе дизайнеров.</p> <p>Большинство браузеров имеют стили по умолчанию для всплывающих подсказок, хотя они и выглядят не очень симпатично.</p> <h3 id="usilenie-effekta-vozdeystviya-vsplyvayuschih">Усиление эффекта воздействия всплывающих подсказок</h3> <p>В то время как быстро развивающиеся стандарты с новыми методами начинают все лучше и лучше поддерживаться новыми браузерами, развитие CSS также позволяет нам делать всплывающие подсказки (которые служат заменой скучным установкам по умолчанию в браузерах, как на рисунке выше) на новом уровне детализации и оформления.</p> <p>Если вы уже использовали решения на основе jQuery, то, конечно же, обратите внимание на то, что JavaScript может многое из того, что недоступно CSS(например, задержка перед исчезновением выплывающей подсказки). Но выделение и оформление может быть выполнено с помощью CSS, что способствует улучшению дизайна и вдохновляет на создание других прекрасных решений, которые выходит за рамки всплывающих подсказок.</p> <p>Существует много различных решений для организации всплывающих подсказок.</p> <h3 id="chto-my-sobiraemsya-sdelat">Что мы собираемся сделать</h3> <p>В данном уроке мы собираемся сделать <strong>всплывающие подсказки на чистом CSS</strong>.</p> <p>Это означает, что <strong>они будут работать в браузерах, которые не поддерживают CSS3</strong> (таких, как Internet Explorer 8 и старше) — они будут выглядеть в них не так хорошо, как в новых браузерах.</p> <p>Вид эффектов, таких как цвета, шрифты, изображения и рамки для всплывающих подсказок будет зависеть от того, что используется на компьютере конечного пользователя (браузера, установленных шрифтов или контраста монитора).</p> <h4 id="rasshireniya-css3">Расширения CSS3</h4> <p>Использование простых, но эффективных расширений, таких как свойства border-radius и box-shadow позволяет придать обычному прямоугольнику всплывающего сообщения новый и симпатичный вид.</p> <h3 id="chto-u-nas-pod-kapotom">Что у нас под капотом?</h3> <p>Начнём с кода HTML для нашего примера.</p> <h4 id="razlichnye-tipy-vsplyvayuschih-podskazok">различные типы всплывающих подсказок</h4> <p>Для того, чтобы дать вам достаточно идей для ваших собственных проектов, мы сделаем <strong>пять различных типов всплывающих подсказок.</strong> </p> <p>Каждый из них выглядит очень похоже на другие, для того, чтобы стандартизировать вывод на экран. Но вы можете потом поэкспериментировать с ними для детального изучения и изменения внешнего вида.</p> <p>Вот так замечательно могут выглядеть всплывающие подсказки, значительно лучше, чем то что возможно по умолчанию!</p> <h4 id="kross-brauzernaya-sovmestimost">Кросс-браузерная совместимость</h4> <p>Данный механизм должен работать во всех браузерах, однако, если вам нужно, вы можете изменить его по своему усмотрению.</p> <h3 id="osnovnaya-razmetka">Основная разметка</h3> <p>В коде, который приведен ниже, мы используем универсальный шаблон XHTML 1.0 с обычным элементом .</p> <p>Так как мы используем CSS для построения наших элементов, то с целью обучения CSS встроен в документ с помощью тега</p> <p>Содержимое всплывающих подсказок удаляется из поля зрения с помощью негативного значения свойства margin-left , а не display: none или visibility: hidden , так как некоторые программы для чтения с экрана игнорируют указанные свойства.</p> <p>Стили CSS придают странице тот вид, который нужен.</p> <h3 id="stili-css-dlya-vsplyvayuschih-podskazok">Стили CSS для всплывающих подсказок</h3> <p>На данном этапе ссылки не имеют установок для вывода всплывающих подсказок при наведении курсора мыши.</p> <p>Вскоре мы установим функционирование всплывающих подсказок для одинакового отображения в различных браузерах. А сейчас добавим несколько строк кода CSS.</p> <p>Добавив приведённый ниже кусок кода мы будем выводить всплывающие подсказки на экран, хотя они и будут выглядеть банально и их сложно будет визуально отделить от остального текста.</p> <h4 id="css-dlya-otobrazheniya-vsplyvayuschey-podskazki">CSS для отображения всплывающей подсказки</h4> <h4 id="neobhodimost-stroki-html">Необходимость строки * html</h4> <p>У вас может возникнуть вопрос, для чего включена последняя строка в выше приведённом коде? Она устанавливает прозрачность для фона сслыки. Во время тестирования всплывающих подсказок выявился странный эффект в IE6, который не поддавался удалению до тех пор, пока существовал фон ссылки!</p> <p>Всплывающие подсказки начали работать, а оформление добавим позже!</p> <p>Выше приведённый код обеспечивает функционирование всплывающих подсказок. Они выводятся на экран, но их достаточно сложно отделить от общего текста. Нет цветовых схем, которые выделяют текст подсказки на странице.</p> <h3 id="zadayom-tsvetovuyu-shemu-dlya-vsplyvayuschih">Задаём цветовую схему для всплывающих подсказок/</h3> <p>Ниже приведённый код задаёт для каждого из пяти стилей всплывающих подсказок цветовую схему.</p> <p>После изменения кода страницы и обновления её в браузере, всплывающие подсказки будут выводиться при наведении курсора мыши на ссылку почти одинаково во всех браузерах.</p> <h4 id="kod-css-dlya-tsvetovoy-shemy">Код CSS для цветовой схемы</h4> <p>Код CSS очень прост, но он придаёт отличный вид всплывающим подсказкам и выполняет свою функцию везде. Цветовую схему можно поменять по своему усмотрению.</p> <h3 id="neskolko-shtrihov-css3-dlya-prodvinutogo">Несколько штрихов CSS3 для продвинутого отображения всплывающих подсказок</h3> <p>Перед тем, как закончить урок, вставим несколько строк кода CSS3 для придания ввизуальных эффектов нашим всплывающим подсказкам. Установим скруглённые углы с помощью свойства border-radius и придадим объёмности с помощью свойства box-shadow .</p> <p>Так как ни одно из этих свойств не поддерживается глобально, то работать они будут лишь в некоторых самых новых версиях браузеров. Но там, где они будут действовать, всплывающие подсказки будут выглядеть гладенько и сексуально!</p> <p>Стили придают всплывающим подсказкам замечательный вид и уникальность!</p> <p>Добавим ниже приведённый код в селектор .tooltip:hover span и обновим страницу.</p> <p>Визуальные эффекты для рамки, тени и прозрачности поднимают всплывающую подсказку над текстом страницы и делают информацию контрастной и лёгкой для чтения.</p> <p>Вы можете заметить, что используются не только официальные свойства CSS3, но и расширения для Mozilla и WebKit.</p> <h4 id="dopolnitelnye-svoystva-css-dlya-novyh-brauzerov">Дополнительные свойства CSS для новых браузеров</h4> <p>Используем свойства CSS3.</p> <h3 id="rezyume">Резюме</h3> <p>В данном уроке продемонстрировано, что для улучшения интерфейса не нужно прилагать больших усилий. Кроме того, стоит пересмотреть опыт использования CSS, который может быть полезным в вопросе установки нового уровня интерактивности веб приложения.</p> <p>Данный урок подготовлен для вас командой сайта ruseller.com <br />Источник урока: sixrevisions.com/css/css-only-tooltips/ <br />Перевел: Сергей Фастунов <br />Урок создан: 2 Августа 2010 <br />Просмотров: 166526 <br />Правила перепечатки </p> <h2 id="5-poslednih-urokov-rubriki-css">5 последних уроков рубрики «CSS»</h2> <h4 id="zabavnye-effekty-dlya-bukv">Забавные эффекты для букв</h4> <p>Небольшой эффект с интерактивной анимацией букв.</p> <h4 id="realizatsiya-zabavnyh-podskazok">Реализация забавных подсказок</h4> <p>Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.</p> <h4 id="animirovannye-bukvy">Анимированные буквы</h4> <p>Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.</p> <h4 id="solntsezaschitnye-ochki-ot-pervogo-litsa">Солнцезащитные очки от первого лица</h4> <p>Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.</p> <h4 id="raskryvayuschayasya-navigatsiya">Раскрывающаяся навигация</h4> <p>Экспериментальный скрипт раскрывающейся навигации.</p> <h2 id="krasivye-vsplyvayuschie-podskazki-tolko-na">Красивые всплывающие подсказки только на CSS</h2> <p>Здравствуйте, уважаемые читатели. На одном из иностранных сайтов как-то давно скачал целую библиотеку <strong>всплывающих подсказок на CSS</strong> без использования JavaScript. Но все никак не доходили руки разобраться с этим архивом, но как раз для марафона на блоге решил подготовить статью на эту тему и заодно поделиться полезными красивыми всплывающими подсказками. Однажды я уже размещал пост, про оживление сайта в которой были <em>всплывающие подсказки на CSS</em>, но все они однотипные и подойдут не всем. А те, с которыми я хочу поделиться, гармонично впишутся практически в любой дизайн.</p> <p>CSS код этих подсказок достаточно объемный и я не буду его здесь размещать, покажу лишь, как добавлять подсказки на страницу. Делается это следующим образом:</p> <p>Это как пример. Нужно прописывать 2 CSS класса. Один определяет положение подсказки, а второй — ее стиль . CSS код нужно добавить в ваш файл стилей . Если возникнут какие-то трудности, пишите, будем разбираться вместе, но в принципе, особо сложного здесь ничего нет, у вас все должно получится. �� Прошу вас обратить внимание на тот факт, что эти подсказки являются весьма кроссбраузерными. По крайней мере они отлично работают в IE-7, IE-8 и, соответственно во всех остальных популярных браузерах. Если вы решили создать сайт самостоятельно, то они вам подойдут. Лучше всего они смотрятся в браузере FireFox, в нем они всплывают более плавно. Где такие подсказки можно использовать? Я, например, применяю их к кнопке, когда есть какой-то файл для скачивания и указываю во всплывающей подсказке тип и размер загружаемого файла . Так я сделал и сейчас, только подсказки остались старые, менять пока не буду. Вы же можете их использовать даже в css таблице зебре.</p> <h2 id="vsplyvayuschie-podskazki-css">Всплывающие подсказки CSS</h2> <p>2014-07-03 / Вр:15:15 / просмотров: 8579</p> <p>Перед началом создания всплывающей подсказки на CSS давайте уточним, что это такое и как она выглядит без оформления.</p> <p><strong>Всплывающая подсказка</strong> – это текст, который появляется при наведении курсора мышки на ссылку или на картинку. Подсказка будет появляться в том случае, если в атрибуте title содержится описание:</p> <p>Результат неоформленной всплывающей подсказки (пример на ссылке):</p> <p>Результат неоформленной всплывающей подсказки (пример на картинке):</p> <p>К сожаленью, не всегда и не везде можно оформить стиль всплывающей подсказки к тегу title . Но выход существует и следующие примеры тому доказательство.</p> <p><strong><strong>⇒</strong> Оформление всплывающей подсказки для ссылок</strong></p> <p>Всплывающая подсказка будет выводиться сверху. Пример:</p> <p>Итак, в HTML файле пропишите вот такой код:</p> <p>а в CSS вот такой:</p> <p>Вы заметили, что вместе с оформленной всплывающей подсказкой вылезает и неоформленная. Чтобы убрать неоформленную подсказку, замените « title » на другое название, например « bloggood-ru ».</p> <p>В CSS заменить строку 10 на вот эту:</p> <p>content: attr( bloggood-ru ); /* Выводим текст всплывающей подсказки*/</p> <p>Вот так это будет выглядеть в CSS:</p> <p><strong><strong>⇒</strong> Всплывающая подсказка для текста, которая будет выводиться снизу</strong>. <br />Пример:</p> <p>в HTML файле пропишите вот такой код:</p> <p>в CSS вот такой:</p> <p><strong>⇒ Всплывающая подсказка для картинки, которая будет выводиться снизу</strong>. <br />Пример:</p> <p>Вы заметили, что вместе с оформленной всплывающей подсказкой вылезает и неоформленная. Это не красиво. <br />По этой причине предлагаю убрать, а точнее заменить, « title » на другое название, например, « bloggood-ru ».</p> <p>В CSS заменить строку 6 на вот эту</p> <p>content: attr( bloggood-ru ); /* Выводим текст всплывающей подсказки*/</p> <p>Вот так это будет выглядеть в CSS :</p> <p>Внимание, результаты как это работает можете посмотреть здесь <br />[посмотреть все примеры]</p><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://studiowb.ru/chto-takoe-kod-asp-serverconfigssl40/" target="_blank" class="u04af01c496058e19e8032dc4c9977063"><!-- INLINE RELATED POSTS 1/3 //--><style> .u04af01c496058e19e8032dc4c9977063 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid inherit!important; text-decoration:none; } .u04af01c496058e19e8032dc4c9977063:active, .u04af01c496058e19e8032dc4c9977063:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u04af01c496058e19e8032dc4c9977063 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u04af01c496058e19e8032dc4c9977063 .ctaText { font-weight:bold; color:#C0392B; text-decoration:none; font-size: 16px; } .u04af01c496058e19e8032dc4c9977063 .postTitle { color:#2C3E50; text-decoration: underline!important; font-size: 16px; } .u04af01c496058e19e8032dc4c9977063:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Илон Маск рекомендует:</span>  <span class="postTitle">Что такое код asp serverconfigssl40</span></div></a></div> </div><!-- .entry-content --> </article><!-- #post-## --> <div class="entry-footer"> </div> <div class="b-share b-share--post"> <div class="b-share__title">Понравилась статья? Поделиться с друзьями:</div> <span class="b-share__ico b-share__vk js-share-link" data-uri="https://vk.com/share.php?url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F"></span> <span class="b-share__ico b-share__fb js-share-link" data-uri="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F"></span> <span class="b-share__ico b-share__tw js-share-link" data-uri="https://twitter.com/share?text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B0%D1%8F+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B0+%D0%BD%D0%B0+CSS&url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F"></span> <span class="b-share__ico b-share__ok js-share-link" data-uri="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F"></span> <span class="b-share__ico b-share__gp js-share-link" data-uri="https://plus.google.com/share?url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F"></span> <span class="b-share__ico b-share__whatsapp js-share-link js-share-link-no-window" data-uri="whatsapp://send?text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B0%D1%8F+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B0+%D0%BD%D0%B0+CSS%20https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F"></span> <span class="b-share__ico b-share__viber js-share-link js-share-link-no-window" data-uri="viber://forward?text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B0%D1%8F+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B0+%D0%BD%D0%B0+CSS%20https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F"></span> <span class="b-share__ico b-share__telegram js-share-link js-share-link-no-window" data-uri="https://telegram.me/share/url?url=https%3A%2F%2Fstudiowb.ru%2Fvsplyvajushhaja-podskazka-na-css%2F&text=%D0%92%D1%81%D0%BF%D0%BB%D1%8B%D0%B2%D0%B0%D1%8E%D1%89%D0%B0%D1%8F+%D0%BF%D0%BE%D0%B4%D1%81%D0%BA%D0%B0%D0%B7%D0%BA%D0%B0+%D0%BD%D0%B0+CSS"></span> </div> <div class="b-related"> <div class="b-related__header"><span>Вам также может быть интересно</span></div> <div class="b-related__items"> <div id="post-11796" class="post-card post-11796 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-cc/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/it-development-500x500-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-cc/" rel="bookmark" >Язык cc</a></div> </header><!-- .entry-header --> <div class="post-card__content"> C++ — Базовый синтаксис Когда мы рассматриваем программу на C ++, ее можно определить </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11812" class="post-card post-11812 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-refal/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/it-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/it-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/it-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-refal/" rel="bookmark" >Язык рефал</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык рефал Ура! Сегодня, 30.05.2005, наконец появилась адаптированная к современным платформам Windows-(95/98/ME/NT/2000/XP) и UNIX </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11781" class="post-card post-11781 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-pazvivajushhegosja-flaga/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/Technology-Innovation-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-pazvivajushhegosja-flaga/" rel="bookmark" >Эффект pазвивающегося флага</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Scrontch’s Flag Designer Design Your Flag! Generates Scalable Vector Graphics (SVG). This App requires </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11797" class="post-card post-11797 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-sql/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/information-technology-learning-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-sql/" rel="bookmark" >Язык sql</a></div> </header><!-- .entry-header --> <div class="post-card__content"> SQL-Урок 1. Язык SQL. Основные понятия. Для того, чтобы начать изучать SQL нам нужно </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11813" class="post-card post-11813 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-s/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/Accredited-Professional-Translation-Service-for-IT-Industry-Singapore-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-s/" rel="bookmark" >Язык с</a></div> </header><!-- .entry-header --> <div class="post-card__content"> C++ с нуля Этот самоучитель создан для тех, кто хочет освоить основы программирования на </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11782" class="post-card post-11782 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-gorjashhej-nadpisi/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/corporate-e1483006320338-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-gorjashhej-nadpisi/" rel="bookmark" >Эффект горящей надписи</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Простой огненный текст в Фотошопе Конечный результат: Ресурсы урока: Шаг 1 Создайте новый документ </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11798" class="post-card post-11798 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-documents-type-definitions-dtd/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/homepage-image-1-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-documents-type-definitions-dtd/" rel="bookmark" >Язык xml documents type definitions (dtd)</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык XML — практическое введение . Documents Type Definitions (DTD) В XML- документах DTD </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11814" class="post-card post-11814 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyki-i-grammatiki-prostejshij-kompiljator/"> <img width="278" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-3-278x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyki-i-grammatiki-prostejshij-kompiljator/" rel="bookmark" >Языки и грамматики простейший компилятор</a></div> </header><!-- .entry-header --> <div class="post-card__content"> ГРАММАТИКА ЯЗЫКОВ ПРОГРАММИРОВАНИЯ Описанию грамматики языка предшествует описание его алфавита. Алфавит любого языка состоит </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11783" class="post-card post-11783 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-ledjanoj-nadpisi/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/G10269-EC-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/G10269-EC-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/G10269-EC-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-ledjanoj-nadpisi/" rel="bookmark" >Эффект ледяной надписи</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Ледяной текст в Фотошопе Конечный результат: Ресурсы урока: 1. Создание фона Шаг 1 Создайте </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11799" class="post-card post-11799 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-dom-sovmestimye-analizatory/"> <img width="308" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-308x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-dom-sovmestimye-analizatory/" rel="bookmark" >Язык xml dom совместимые анализаторы</a></div> </header><!-- .entry-header --> <div class="post-card__content"> XML-анализаторы в java XML как набор байт в памяти, запись в базе или текстовый </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11815" class="post-card post-11815 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyki-opisanija-polzovatelskih-interfejsov/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/AI-is-coming-—-and-HR-is-not-prepared-8b38574-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyki-opisanija-polzovatelskih-interfejsov/" rel="bookmark" >Языки описания пользовательских интерфейсов</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Языки описания пользовательских интерфейсов Язык описания интерфейсов Язык описания интерфейсов (IDL), используемый OMG определяет </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11784" class="post-card post-11784 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-linzy-watcom-c/"> <img width="310" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-4-310x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-linzy-watcom-c/" rel="bookmark" >Эффект линзы (watcom c)</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11800" class="post-card post-11800 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-xml-v-microsoft-internet-explorer-5-0/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-xml-v-microsoft-internet-explorer-5-0/" rel="bookmark" >Язык xml xml в microsoft internet explorer 5 0</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11816" class="post-card post-11816 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyki-programmirovanija/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA.jpg 700w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyki-programmirovanija/" rel="bookmark" >Языки программирования</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11785" class="post-card post-11785 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-plameni/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/AI-is-coming-—-and-HR-is-not-prepared-8b38574-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-plameni/" rel="bookmark" >Эффект пламени</a></div> </header><!-- .entry-header --> <div class="post-card__content"> По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11801" class="post-card post-11801 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-vvedenie/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/homepage-image-1-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-vvedenie/" rel="bookmark" >Язык xml введение</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11817" class="post-card post-11817 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jakorja-html/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jakorja-html/" rel="bookmark" >Якоря HTML</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Что такое ссылка якорь в HTML и как ее сделать? Когда мы имеем дело </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11786" class="post-card post-11786 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-razbitogo-teksta/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-1-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/IT-1-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/IT-1-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-razbitogo-teksta/" rel="bookmark" >Эффект разбитого текста</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11802" class="post-card post-11802 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-ispolzovanie-java-xml-obrabotchikov/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/54398_luca-bravo-217276-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-ispolzovanie-java-xml-obrabotchikov/" rel="bookmark" >Язык xml использование java xml обработчиков</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11818" class="post-card post-11818 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jandeks-krupnejshaja-poiskovaja-sistema/"> <img width="275" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-2-275x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jandeks-krupnejshaja-poiskovaja-sistema/" rel="bookmark" >Яндекс — крупнейшая поисковая система русскоязычного Интернета!</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11787" class="post-card post-11787 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-skruchivanija/"> <img width="57" height="57" src="https://studiowb.ru/wp-content/uploads/2019/11/images2.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-skruchivanija/" rel="bookmark" >Эффект скручивания</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11803" class="post-card post-11803 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-opisanie-tehnologii/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/cloud_lines-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-opisanie-tehnologii/" rel="bookmark" >Язык xml описание технологии</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11819" class="post-card post-11819 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jachejka-zagolovka/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/it_eng-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jachejka-zagolovka/" rel="bookmark" >Ячейка заголовка</a></div> </header><!-- .entry-header --> <div class="post-card__content"> 17 Таблицы 17.1 Введение в таблицы Таблицы представляют отношения между данными. Авторы определяют эти </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11788" class="post-card post-11788 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffektivnoe-ispolzovanie-gnu-make/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/information-technology-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffektivnoe-ispolzovanie-gnu-make/" rel="bookmark" >Эффективное использование gnu make</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Эффективное использование gnu make Создание данного текста не имело своей целью дать полное описание </div><!-- .entry-content --> </div><!-- #post-## --> </div> </div> <meta itemprop="author" content="Study"> <meta itemprop="datePublished" content="2019-11-13T20:43:21+03:00"/> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://studiowb.ru/vsplyvajushhaja-podskazka-na-css/" content="Всплывающая подсказка на CSS"> <meta itemprop="dateModified" content="2019-11-13"> <meta itemprop="datePublished" content="2019-11-13T20:43:21+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject" style="display: none;"><img itemprop="url image" src="https://studiowb.ru/wp-content/uploads/2019/11/images-2.png" alt="Кодинг, CSS и SQL"></div><meta itemprop="name" content="Кодинг, CSS и SQL"><meta itemprop="telephone" content="Кодинг, CSS и SQL"><meta itemprop="address" content="https://studiowb.ru"></div> </main><!-- #main --> </div><!-- #primary --> </div><!-- micro --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" id="searchform_2962" action="https://studiowb.ru/" class="search-form"> <label class="screen-reader-text" for="s_2962">Поиск: </label> <input type="text" value="" name="s" id="s_2962" class="search-form__text"> <button type="submit" id="searchsubmit_2962" class="search-form__submit"></button> </form></div> </aside><!-- #secondary --> </div><!-- #content --> <footer class="site-footer container" itemscope itemtype="http://schema.org/WPFooter"> <div class="site-footer-inner "> <div class="footer-info"> © 2021 Кодинг, CSS и SQL </div><!-- .site-info --> <div class="footer-counters"> </div> </div><!-- .site-footer-inner --> </footer><!-- .site-footer --> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="//www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><script type='text/javascript'> /* <![CDATA[ */ var lang_array = {"text1":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","text2":"\u0438\u0437"}; var wps_ajax = {"url":"https:\/\/studiowb.ru\/wp-admin\/admin-ajax.php","nonce":"c63ce7a389"}; /* ]]> */ </script> <script src='https://studiowb.ru/wp-content/themes/root/js/scripts.min.js?ver=2.3.2'></script> <script src='https://studiowb.ru/wp-includes/js/comment-reply.min.js?ver=5.2.11'></script> <script src='https://studiowb.ru/wp-includes/js/wp-embed.min.js?ver=5.2.11'></script> <!--LiveInternet counter--><script type="text/javascript"> new Image().src = "//counter.yadro.ru/hit?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();</script><!--/LiveInternet--> </body> </html>