Всплывающие подсказки с использованием CSS
 | |
| Это чисто дизайн на сплывающее подсказку, которую можно применить на любом загруженном элементе, где показывает ключевые слова в интерфейс. В этой статье мы создаем всплывающую подсказку с использованием CSS. Ну, всплывающие подсказки, созданные для того, чтобы что-то сообщить или показать какую-то информацию пользователю. Поэтому мы создаем простую подсказку, которая описывает информацию о чем-то. В этом уроке мы создадим первичную, опасную, успешную и предупреждающую подсказку. Вы можете использовать любую из этих всплывающих подсказок. Итак, это всплывающая подсказка, которую мы создаем сегодня. Мы создадим новый проект в редакторе визуального кода. Если у вас нет редактора кода, вы можете использовать возвышенный текст или атом, но мы лично предпочитаем этот редактор. В редакторе визуального кода вы можете быстро создать новый дизайн с помощью минут, и также выставить код со стилями CSS, который уже создан, где под него можно поставить палитру цвета.. Чтобы создать новый проект, просто создайте папку на рабочем столе и откройте эту папку в редакторе визуального кода. В этой папке создайте два файла Index.html и Style.css. HTML Код <div class="text-center mt-4"> <h3 style="margin-bottom:5%;">Tooltips</h3> <div class="row mt-4"> <div class="col-md-4 offset-4"> <div class="d-flex flex-row"> <label for="required" class="primary-dangerun">Скрипты для uCoz</label> <label for="required" class="primary-dangerun">Шаблоны для uCoz</label> <label for="required" class="primary-dangerun">Ajax окна для uCuz</label> <label for="required" class="primary-dangerun">Меню для сайта uCoz</label> </div> </div> </div> </div> В файле создайте простые фрагменты html5 и bootstrap и файл style.css. Мы используем только для типографии и разметки. Разрабатываем эту подсказку с помощью CSS. Если вы не связали файл начальной загрузки, ничего не произойдет. Так что не путайте. 1. В приведенном выше коде вы увидите, что сначала связали файл css, а затем связали файл style.css, который является пользовательским CSS-файлом. 2. После этого в разделе body мы вставим div с текстовым центром и классом margin-top. Класс текстового центра будет центрировать весь текст, а класс margin-top добавляет некоторый запас в верхнюю часть элемента. 3. Затем мы вставим заголовок h3 с нижним значением 5% и определим текст всплывающей подсказки. После этого мы добавим новую строку и столбец. Поэтому класс row создаст новый, а col-md-4 создаст новый столбец. 4. В этом столбце мы добавим класс flex-row d-flex. Этот класс выровняет все элементы в новой строке. Итак, что бы вы ни разместили в классе, они будут соответствовать новой строке. Здесь мы создадим четыре ярлыка, основной, опасный, предупреждающий и успешный ярлык по своим наружным предупреждением или функциям. CSS Добавим стиль для создания этой всплывающей подсказки. Код .primary-dangerun { position: absolute; top: 0; left: 15%; padding: 1% 15%; border-radius: 3px; background-color: #ff978a; color: #803030; } .primary-dangerun::before{ content: ""; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 10px solid #ff978a; position: absolute; bottom: -21%; left: 10%; } .primary-dangerun:nth-child(2) { top: 68px; left: 15%; background-color: #99e4da; } .primary-dangerun:nth-child(2)::before{ border-top: 10px solid #99e4da; } .primary-dangerun:nth-child(3) { top: 140px; left: 15%; padding: 1% 15%; background-color: #46d07c; } .primary-dangerun:nth-child(3)::before{ border-top: 10px solid #46d07c; } .primary-dangerun:nth-child(4) { top: 211px; left: 15%; padding: 1% 14.5%; background-color: #efc345; } .primary-dangerun:nth-child(4)::before{ border-top: 10px solid #efc345; } Понимание кода: 1.1. Поэтому в файле style.css мы сначала удаляем маркер и дополнение из тега body. 1.2. Затем мы создадим конструкцию всплывающей подсказки с использованием ошибок и ошибок перед селектором. Поэтому в файле style.css вы увидите, что мы создали класс ошибок, а также создали ошибку перед селектором. 1.3. Используя перед селектором, мы создадим треугольник, который будет выровнен в нижней части класса ошибки. Таким образом, это будет выглядеть как всплывающая подсказка, мы используем свойство position, чтобы выровнять все. Используя положение absolute, вы можете выровнять все эти элементы в указанной позиции. 1.4. После этого с помощью nthChild 2 мы выберем вторую метку и сменим верхнюю часть и оставим свойство, а также изменим цвет фона. 1.5. Затем мы изменим цвет свойства границы. Убедитесь, что вы указали один и тот же цвет для фона и свойства border-top, иначе он будет выглядеть иначе. Готово. Ваш дизайн готов, теперь можете скопировать этот код и поместить его в свой файл, или вы можете ввести его вручную и практиковать. Ввести его в свой собственный - это лучший способ запомнить эти вещи. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
