• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать всплывающие подсказки на CSS (Красивые всплывающие подсказки с представлением стиля CSS)
Как сделать всплывающие подсказки на CSS
Kosten
Дата: Среда, 2019-02-20, 00:43 | Сообщение 1
Администраторы
Сообщений:23411
Награды: 56


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

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

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



HTML

Код
<div class="tasolpas-merdsab">Здесь написана ключевая фраза</div>


CSS

Код
.tasolpas-merdsab {
    background: #232121;
    padding: 5px 12px;
    display: inline-block;
    color: #f5f0f0;
    font-size: 19px;
    border-radius: 3px;
    bottom: 15px;
    position: relative;
}

.tasolpas-merdsab:before {
    content: "";
    border: 5px solid rgba(0, 0, 0, 0);
    border-top: 22px solid #232121;
    position: absolute;
    top: 25px;
    transform: rotate(30deg);
    left: 3px;
}


Стиль здесь простой и не чего лишнего в него не добавлено, где при написание все устанавливается стандартно по центру, это для того, чтоб было отлично видно и безусловно читабельно.

Демонстрация
Прикрепления: 1357913.png(2.9 Kb)
Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Как сделать всплывающие подсказки на CSS (Красивые всплывающие подсказки с представлением стиля CSS)
  • Страница 1 из 1
  • 1
Поиск: