Архив метки: css

Подключение своего шрифта

Подключение и использование своего шрифта на сайте.

Необходимо предварительно скачать и поместить нужный нам шрифт (в примере это myFonts.ttf), затем в стилях прописать следующее

@font-face {
font-family:myFonts;
src: url('myFonts.TTF');
}

Этим мы привязываем имя шрифта с его местоположением

Затем это имя можно использовать в других стилях, например так для параграфа.

p {
font-family: myFonts;
}

и в теле страницы

<body>
Hello world ПРивет
<p>
Hello world ПРивет
</p>
</body>

Скриншот примера

Шрифт

 

 

 

Всплывающие подсказки (тултипы) с помощью CSS

Создание простых всплывающих подсказок («тултипов»)

В данном методе не будет использоваться JavaScript, лишь CSS3 и HTML5.

Этот способ сгодится тем, кому нужны небольшие всплывающие подсказки — «тултипчики».

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

Сам элемент зададим так

наведи на меня!

В CSS необходимо прописать следующий код

.tooltip {
    border-bottom: 1px dotted #0077AA;
    cursor: help;
}

.tooltip::after {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 8px 8px 8px 0px;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
    color: #FFF;
    content: attr(data-tooltip); /*содержимое всплывающей подсказки */
    margin-top: -24px;
    opacity: 0; /* Наш элемент прозрачен... */
    padding: 3px 7px;
    position: absolute;
    visibility: hidden; /* ...и скрыт. */

    transition: all 0.4s ease-in-out; /*Добавить плавности по вкусу */
}

.tooltip:hover::after {
    opacity: 1; /* Показываем его */
    visibility: visible;
}

Берется некий элемент (В нашем случае span), добавляем к нему атрибут с текстом, который будет показан и берём псевдоэлемент ::after. В content этого псевдоэлемента мы, пользуясь замечательнейшим свойством attr(), присваиваем нашей всплывающей подсказке текст и потом по :hover показываем его.

Остальные свойства понятны по комментариям в коде.