» »

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

Всплывающие подсказки с использованием 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, иначе он будет выглядеть иначе.

Готово.

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

Демонстрация
08.07.2018 Просмотров: 163 Комментарий: (1)

Поделиться в социальных сетях

Материал разместил

Комментарий: 1
Kosten
Kosten 08.07.2018 00:331
0
Не по детски, все изначально приготовил. скрин на фотошоп, описание добавил, а оказался один дизайн., возможно кому пригодится.
avatar