Раскрывающиеся блоки для подсказок или дополнительной информации
Здравствуйте уважаемые начинающие веб мастера.
Очень часто возникает необходимость разместить на странице подсказку или дополнительную информацию к какому либо слову, словосочетанию или абзацу.
Делать это открытым текстом не всегда удобно, так как возможно будет теряться основная нить статьи, поэтому в таком случае лучше будет применить скрытый текст открывающийся по клику мыши.
Объектом для клика может быть выделенная часть текста или кнопка «Справка» размещёная в удобном месте.
Дополнительная информация будет открываться под выделенной частью текста отдельным абзацем, при этом весь остальной контент будет сдвигаться в низ, освобождая место для вкладки.
При повторном клике на выделенный текст или кнопку, вкладка с подсказкой закроется.
Примеры:
1. Выделенная часть текста.
Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Код:
Html
<div>Бла-бла-бла-бла-бла-бла <input type="checkbox"/>
<label for="hd-1" >Справка</label> бла-бла-бла-бла-бла-бла
<span>
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
</span>
<div>
Css
.reference {
display: none;
}
.reference ~ .story {
display: none;
}
.reference + label {
font-size: 16px;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
2. Кнопка, которую можно разместить в любой части контента.
Бла-бла-бла-бла-бла Справка бла-бла-бла-бла-бла
Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла Бла-бла-бла-бла-бла-бла-Бла-бла-бла-бла-бла-бла
Код:
Html тот-же что и в первом примере.
Css
.reference {
display: none;
}
.reference ~ .story{
display: none;
}
.reference + label {
position: absolute;
top: 0;
left: 200px;
border: 1px solid #333;
border-radius: 4px;
background: #F0FFF0;
padding: 3px;
color: green;
font-size: 16px;
cursor: pointer;
display: inline-block;
}
.reference:checked ~ .story {
display: block;
background: Snow;
padding: 10px;
}
.spravca {
position: relative;
}
Можно дополнительно оформить раскрывающиеся блоки в css под стиль вашего сайта.
В HTML5 похожая опция заложена по умолчанию.
Реализуется она тегами
1. <details></details> — контейнер, который можно развернуть и свернуть.
2. <summary></summary> — заголовок, по которому можно щёлкнуть, чтоб развернуть контейнер. Повторный щелчёк сворачивает контейнер.
Смотрится и работает эта опция так:
Заголовоктекст текст текст текст
Код:
<details>
<summary>Заголовок</summary>
текст текст текст текст
</details>
Теги details и summary по умолчанию блочные элементы, поэтому, если нужно вставить контейнер в строку, ему нужно будет задать свойство display: inline-block;
Можно так же задать и другое стилевое оформление.
Желаю творческих успехов.
В раздел >>>
Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster
Раскрывающиеся блоки с скрытым содержанием с помощью CSS3
HTML
<div> <div> <input type=»radio» name=»tabs» checked> <label for=»tab1″ title=»Вкладка 1″> <p>Блок 1</p><div></div></label> <input type=»radio» name=»tabs»> <label for=»tab2″ title=»Вкладка 2″>Блок 2<div></div></label> <input type=»radio» name=»tabs»> <label for=»tab3″ title=»Вкладка 3″>Блок 3<div></div></label> <input type=»radio» name=»tabs»> <label for=»tab4″ title=»Вкладка 4″>Блок 4<div></div></label> <section> <p> Cодержание 1…. </p> </section> <section> <p> Содержание 2…. </p> </section> <section> <p> Содержание 3…. </p> </section> <section> <p> Содержание 4…. </p> </section> </div> </div>
CSS
.main { width:100%; min-width:360px; } /* Базовый контейнер табов */ .tabs { width: 100%; padding: 0px; margin: 0 auto; } /* стили вкладок (табов) */ .tabs label { display: table-cell; width:1%; height:50px; margin: 0 0 -1px; padding: 15px 15px; font-weight: bold; text-transform: uppercase; text-align: center; vertical-align:middle; color: #aaa; background: #f1f1f1; } /* изменения стиля заголовков вкладок при наведении */ .tabs label:hover { color: #888; cursor: pointer; } /* стили для активной вкладки */ .tabs input:checked + label { color: #555; background: #fff; } .tabs input:checked + label > div:after { content: »; position: absolute; width:0; height:0; top:80px; border: 15px solid transparent; margin-left:-15px; border-top-color: #292929; } /* активация секций с помощью переключателя :checked */ #tab1:checked ~ #content1, #tab2:checked ~ #content2, #tab3:checked ~ #content3, #tab4:checked ~ #content4 { display: block; } /* стили секций с содержанием */ section { display: none; padding: 15px; background: #fff; } .tabs input { display: none; }
JAVASCRIPT
Плавающий блок CSS
Наведи курсор
Здравствуйте уважаемые начинающие веб-мастера.
Всем встречались оживающие пункты меню и другие элементы при наведении курсора.
Создаётся такой эффект свойством CSS transition, а 3D эффект свойством box-shadow.
Величина и направление перемещения задаются свойством transform, причём изменяя значения в этом свойстве, можно задать не только линейное перемещения в любом направлении, но и наклоны на заданный угол.
Пример элемента в начале статьи.
Код:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8" />
<title>Документ без названия</title>
<style>
.element {
color: rgba(0, 0, 0, 0.8);
padding: 30px 5px 0 5px;
position: relative;
display: inline-block;
width: 100px;
height: 80px;
background-color: #fff;
border-radius: 5px;
border: 2px solid rgba(0, 0, 0, 0.5);
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}.element:after {
content: "";
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
opacity: 0;
-webkit-transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1));
transition: all 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
}.element:hover {
-webkit-transform: translate(10px);
transform: translate(10px);
}
.element:hover:after {
opacity: 1;
}
</style>
</head>
<body>
<div>Наведи курсор</div>
</body>
</html>
Обратите внимание как в этом примере реализован 3D эффект. Тень заданная в псевдоэлементе :after присутствует с самого начала, но полностью прозрачная.
А при наведении курсора прозрачность убирается и 3D эффект появляется, что исключает отрисовку дополнительных позиций трансформации.
Желаю творческих успехов.
Рекомендую: Бесплатные HTML шаблоны на русском от TemplateMonster
Запись опубликована в рубрике CSS основы. Добавьте в закладки постоянную ссылку.Как сделать блок по центру в css, а также сделать его невидимым
От автора: я снова приветствую вас на нашем блоге. В этой статье я хотел бы подробнее обсудить такой вопрос, как сделать блок по центру в css, а также несколько других манипуляций с блочными элементами.
Центрирование
Есть много элементов на веб-странице, которые могут по дизайну стоять по центру. Например, заголовки, логотип в шапке или информация в футере. Но как выровнять ее идеально по центру? Конечно, нужно понимать, что высчитывать вручную отступы или применять позиционирование не стоит, когда есть замечательное значение свойства margin – auto:
.block{ margin: 0 auto; }
Первое значение этого свойства задает отступ сверху и снизу. Соответственно, вместо нуля вы можете записать свое значение, если необходимо дать такие отступы. Второе значение auto определяет отступы слева и справа. Они определяются так, что элемент станет по центру. Но здесь очень важно соблюсти еще одно правило:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнееЭлементу нужно задать ширину. Обязательно. Я объясню почему. Например, он находится в общем контейнере шириной 980 пикселей. И если вы не зададите явную ширину блоку, то как он выровняется по центру, если он и без этого занимает всю ширину? В общем, достаточно записать width или max-width и центровка будет работать.
Таким же способом можно отцентрировать и те блоки, которые будут вложены уже в этот. Вообще уровень вложенности никак не помешает центровке.
Как создать блок в css и его внешний вид
Я уже говорил в одной из предыдущих статей, что блочные элементы создаются тегом div. Он парный. Это просто пустой контейнер для содержимого. Ему нужно также задать стилевой класс или идентификатор, чтобы получить возможность обращаться к нему через css. Допустим, так:
<div class = «post-anonce»></div>
<div class = «post-anonce»></div> |
Давайте классам понятные имена, чтобы сразу было понятно, какую роль они выполняют. Например, в этой строчке кода сразу понятно, что наш блок является анонсом статьи. Далее его нужно соответствующим образом оформить.
.post-anonce{ margin: 10px; padding: 15px; background: #ccc; border-radius: 15px; width: 250px; height: 220px; }
.post-anonce{ margin: 10px; padding: 15px; background: #ccc; border-radius: 15px; width: 250px; height: 220px; } |
Мы дали нашему фрагменту много разных правил. Например, внешние и внутренние отступы, фон, закругление углов, а также основные размеры – ширину и высоту.
Добавим содержимое
Мы создали блок для анонса, но самого анонса в нем пока нет. Давайте его добавим, чтобы было как на реальном сайте. Что вообще включает в себя анонс? Обычно дату публикации и имя автора, заголовок статьи, картинку-миниатюру и кнопку читать далее. Но давайте сделаем простой анонс: заголовок, картинка и кнопка.
<div class = «post-anonce»> <img src = «html.png»> <h2>Заголовок статьи</h2> <p>Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи, Чтобы читатель мог примерно понять, о чем она будет.</p> <a href = «#»>Читать полностью</a> </div>
<div class = «post-anonce»> <img src = «html.png»> <h2>Заголовок статьи</h2> <p>Это текст анонса, обычно в него помещаются первые 40-50 слов из статьи, Чтобы читатель мог примерно понять, о чем она будет.</p> <a href = «#»>Читать полностью</a> </div> |
Как видите, мы добавили все, что нужно. Картинку, заголовок, небольшой текст в абзаце и ссылку на то, чтобы прочитать полностью. Конечно, она никуда не ведет, так как у нас не реальный сайт – мы просто рассматриваем, как можно сделать блок.
Картинку мы задали, как будто она лежит в той же папке, что и css-файл, в котором задаются эти стили. Теперь остается оформить ее:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее.post-anonce img{ width: 64px; height: 64px; padding: 10px; float: left }
.post-anonce img{ width: 64px; height: 64px; padding: 10px; float: left } |
Зададим ей четкие размеры, прижмем к левому краю, чтобы текст обтекал справа, также дадим небольшие отступы. И вот что в итоге получилось:
Это похоже на анонс? Конечно похоже, мне кажется, даже очень неплохо получилось. Конечно, на реальном сайте он бы еще дорабатывался. Текст и заголовок получили бы те цвета и шрифты, которые определены им по дизайну, а слева добавились бы другие блоки-анонсы.
Тем не менее вот вам простой пример создания блока, в котором есть все необходимое для удобства пользователя.
Как сделать блок невидимым в css
В начале я обещал вам еще несколько манипуляций с блоками. Рассмотрим их коротко, они касаются видимости элемента на странице. Например, добавим только что созданному блоку такое свойство: display: none;
Обновите страницу и вы увидите, что на ней ничего нет – блок исчез. Другой способ убрать его – сделать прозрачным. За это отвечает свойство opacity. По умолчанию все элементы на странице непрозрачные, то есть имеют opacity: 1. Если задать opacity: 0, то блок станет полностью прозрачным. Также можно задавать значения между этими цифрами.
Применение на практике
Сделаем наш блок прозрачным и добавим перед ним слова, на которые нужно будет навести для того, чтобы он появился.
<div class = «show-anonce»>Наведи сюда, чтобы увидеть анонс</div>
<div class = «show-anonce»>Наведи сюда, чтобы увидеть анонс</div> |
Так мы создали нужный блок.
.post-anonce{ Opacity: 0; }
.post-anonce{ Opacity: 0; } |
Сделали анонс прозрачным.
.show-anonce:hover + .post-anonce{ opacity: 1; } .post-anonce:hover{ opacity: 1; }
.show-anonce:hover + .post-anonce{ opacity: 1; } .post-anonce:hover{ opacity: 1; } |
Эти правила означают следующее: при наведении на блок show-anonce наш анонс будет становиться непрозрачным, то есть полностью видимым. Тоже произойдет и когда курсор наведен на сам анонс, чтобы он не пропадал из виду сразу.
Протестируйте у себя и убедитесь, что так и есть. Конечно, я редко где встречал такое, когда на сайте был скрыт изначально анонс, но тут главное уловить суть. Теперь вы можете сделать выпадающее меню на чистом css даже без скриптов. К этому всему делу можно добавить плавные изменения цветов и другие преобразования. Простор для вашей фантазии.
Вот так вот я начал с центровки, а закончил управлением видимости блока. На самом деле все это лишь крошечные возможности, которые дает css в управлении элементами. Если вы хотите знать больше, то изучайте css и подписывайтесь на наш блог, чтобы получать полезные материалы по сайтостроению каждую неделю.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Верстка сайта на HTML5 и CSS3 с нуля
Смотреть