Быстрый поиск
Введите фрагмент названия статьи для поиска
Центрирование элементов на странице средствами CSS
06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.Поддержка браузерами свойства transform достаточно хорошая, по крайней мере эту технологию поддерживают все современные декстопные и мобильные браузеры на всех платформах. Для совместимости с некоторыми устаревшими версиями браузеров при описании свойства надо будет дополнительно использовать специфические браузерные префиксы.
Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
Code (HTML) : Убрать нумерацию
- .container {
- position: relative;
- }
Читать статью целиком »
Просмотров: 1244 | Комментариев: 1
Плавное появление надписи при наведении на картинку
21.12.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .cool_img {
- display: inline-block;
- position: relative;
- text-align: center;
- overflow: hidden;
- border-radius: 5px;
- }
- .cool_img .info {
- position: absolute;
- bottom: 0;
- }
- .cool_img .info span {
- display: block;
- position: relative;
- top: 130px;
- color: #FFFFFF;
- background: #000000;
- transition-delay: 0;
- transition-duration: 0.3s;
- }
- .cool_img .info .info_title {
- font-size: 18px;
- font-weight: bold;
- padding: 5px;
- border-radius: 5px 5px 0 0;
- opacity: 0.8;
- }
- .cool_img .info .info_text {
- font-size: 12px;
- padding: 10px;
- opacity: 0.6;
- }
- .cool_img:hover .info span, .cool_img:focus .info span {
- top: 0;
- }
- .cool_img:hover .info .info_title {
- transition-delay: 0.15s;
- }
- .cool_img:hover .info .info_text {
- transition-delay: 0.25s;
- }
- </style>
Читать статью целиком »
Просмотров: 4522 | Комментариев: 0
Стилизация недоступных ссылок на картинки
21.11.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:Code (HTML) : Убрать нумерацию
- <style type="text/css">
- img:before {
- content: "Извините, изображение " attr(alt) " недоступно";
- color: #FF0000;
- display: block;
- margin-bottom: 5px;
- }
- img:after {
- content: "Источник: " attr(src);
- color: #0000FF;
- display: block;
- margin-top: 5px;
- }
- </style>
Читать статью целиком »
Просмотров: 1423 | Комментариев: 2
Раскрытие текста при нажатии на ссылку
13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Code (HTML) : Убрать нумерацию
- <div class="textbox" id="mytext">
- Тут находится большой текст, который мы должны показать при нажатии на ссылку
- </div>
- <div>
- <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
- return false;">Посмотреть весь текст</a>
- </div>
Code: Убрать нумерацию
- <style type="text/css">
- .textbox {
- overflow: hidden;
- height: 100px;
- border: 1px dashed #A0A0A0;
- }
- .opened {
- overflow: auto;
- height: auto;
- }
- .opened+div {
- display: none;
- }
- </style>
Читать статью целиком »
Просмотров: 11738 | Комментариев: 9
Разделенные ссылки
02.07.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Разделенные ссылки - очень интересный визуальный эффект для оформления вашего сайта. Суть разделенных ссылок заключается в том, что одна ссылка имеет одновременно несколько активных областей, которые могут находиться вообще в разных местах страницы. Например:
Разделенные ссылки
При наведении курсора на название альбома также подсвечивается его обложка в левом блоке, а при наведении на любую из обложек будет подсвечено название соответствующего альбома. Никаких скриптов для этого не требуется, все реализуется средствами CSS.
Читать статью целиком »
Просмотров: 1599 | Комментариев: 1
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 36,891 раз
Поблагодарили 36,891 раз
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |