• Сервис онлайн-записи на собственном Telegram-боте
    Тот, кто работает в сфере услуг, знает — без ведения записи клиентов никуда. Мало того, что нужно видеть свое расписание, но и напоминать клиентам о визитах тоже. Нашли самый бюджетный и оптимальный вариант: сервис VisitTime.
    Для новых пользователей первый месяц бесплатно.
    Чат-бот для мастеров и специалистов, который упрощает ведение записей:
    — Сам записывает клиентов и напоминает им о визите;
    — Персонализирует скидки, чаевые, кэшбэк и предоплаты;
    — Увеличивает доходимость и помогает больше зарабатывать;
    Начать пользоваться сервисом
  • Как продвинуть сайт на первые места?
    Вы создали или только планируете создать свой сайт, но не знаете, как продвигать? Продвижение сайта – это не просто процесс, а целый комплекс мероприятий, направленных на увеличение его посещаемости и повышение его позиций в поисковых системах.
    Ускорение продвижения
    Если вам трудно попасть на первые места в поиске самостоятельно, попробуйте технологию Буст, она ускоряет продвижение в десятки раз, а первые результаты появляются уже в течение первых 7 дней. Если ни один запрос у вас не продвинется в Топ10 за месяц, то в SeoHammer за бустер вернут деньги.
    Начать продвижение сайта
CSS spoiler

Спойлер на CSS: без плагина

MnogoBlog > WordPress > Дизайн > CSS и теги > Спойлер на CSS: без плагина
Добавить комментарий

Здравствуйте, сегодня поговорим о том как сделать спойлер (spoiler) без плагинов, без javascript, без jquery, а только с применением CSS.

Скачать исходники для статьи можно ниже

1-ый вариант:

Добавляем в файл стилей (для сайтов на wordpress: входим в админку, в левом меню выбираем пункт “Внешний вид”, его подпункт “Редактор”, справа в списке шаблонов выбираем файл – style.css) следующий код:

  

.spoiler {
margin-bottom: 1em;
}
.spoiler:before {
content: "Текст ссылки";
text-decoration: underline;
}
.spoiler p {
display: none;
}
.spoiler:hover {
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
margin-top: -4px;
padding-top: 3px;
padding-bottom: 1em;
}
.spoiler:hover p {
display: block;
margin: 1em 0 0;
}

Здесь строчка:
content: “Текст ссылки”;
отвечает за текст спойлера.

Далее на сайте нужно применить следующий код: 

Пример спойлера на CSS:
<div class="spoiler">
<p>
Текст, который скрыт от посетителя.
Чтобы увидеть нажмите на ссылку спойлера.
</p>
</div>
На этом все!

Для сайтов на wordpress вышеуказанный код можно вставить либо в виджет “Текст”, либо в “Тестовом редакторе” (Текст) при создании записей или страничек:

спойлер на CSS

В итоге это будет выглядеть так:
спойлер без плагинов

Похожие записи:

Добавить комментарий