Blog. Just Blog

Быстрый поиск

Введите фрагмент названия статьи для поиска

Эффект покачивания изображения при наведении мыши

24.08.2020 | Категория: Web-мастеру и не только | Автор: ManHunter

Эффект покачивания изображения при наведении мыши

Красивый эффект для оформления сайтов на случай какой-нибудь акции или распродажи. При наведении курсора мышки на бейджик, он начинает покачиваться. Никаких скриптов, вся анимация реализована исключительно средствами CSS.

Читать статью целиком »
Просмотров: 421 | Комментариев: 0

Центрирование элементов на странице средствами CSS

06.05.2020 | Категория: Web-мастеру и не только | Автор: ManHunter
За всю историю развития верстки и Web-дизайна, было придумано немало способов размещения блока точно по центру внутри другого блока. Какие-то лучше, какие-то хуже, какие-то даже получались более-менее кроссбраузерными. Технологии на месте не стоят, поэтому правильный, красивый и современный вариант такого позиционирования достигается комбинацией свойств CSS top, left, right и transform.

Поддержка браузерами свойства transform достаточно хорошая, по крайней мере эту технологию поддерживают все современные декстопные и мобильные браузеры на всех платформах. Для совместимости с некоторыми устаревшими версиями браузеров при описании свойства надо будет дополнительно использовать специфические браузерные префиксы.

Контейнер, относительно которого должны быть спозиционированы вложенные блоки.
  1. .container {
  2.     positionrelative;
  3. }
Значение relative определяет, что абсолютное позиционирование всех вложенных блоков должно считаться не от краев экрана, а от границ родительского элемента. Ну а теперь переходим к описанию правил для вложенных блоков.

Читать статью целиком »
Просмотров: 247 | Комментариев: 1

Плавное появление надписи при наведении на картинку

21.12.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.
  1. <style type="text/css">
  2. .cool_img {
  3.     displayinline-block;
  4.     positionrelative;
  5.     text-aligncenter;
  6.     overflowhidden;
  7.     border-radius5px;
  8. }
  9.  
  10. .cool_img .info {
  11.     positionabsolute;
  12.     bottom0;
  13. }
  14.  
  15. .cool_img .info span {
  16.     displayblock;
  17.     positionrelative;
  18.     top130px;
  19.     color#FFFFFF;
  20.     background#000000;
  21.     transition-delay0;
  22.     transition-duration0.3s;
  23. }
  24.  
  25. .cool_img .info .info_title {
  26.     font-size18px;
  27.     font-weightbold;
  28.     padding5px;
  29.     border-radius5px 5px 0 0;
  30.     opacity0.8;
  31. }
  32.  
  33. .cool_img .info .info_text {
  34.     font-size12px;
  35.     padding10px;
  36.     opacity0.6;
  37. }
  38.  
  39. .cool_img:hover .info span, .cool_img:focus .info span {
  40.     top0;
  41. }
  42.  
  43. .cool_img:hover .info .info_title {
  44.     transition-delay0.15s;
  45. }
  46.  
  47. .cool_img:hover .info .info_text {
  48.     transition-delay0.25s;
  49. }
  50. </style>
Если описания планируются очень объемные, то смещение элементов span с текстом надо будет сдвинуть вниз на нужное количество пикселов. Для создания эффекта используется CSS-анимация через свойства transition, поэтому для старых браузеров придется замутить что-нибудь попроще или задействовать браузерные префиксы типа "-webkit-", "-moz-" и т.д.

Читать статью целиком »
Просмотров: 1010 | Комментариев: 0

Стилизация недоступных ссылок на картинки

21.11.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Когда-то давно я уже поднимал тему обработки недоступных ссылок на картинки, в том случае "битое" изображение подменялось на другое. Но есть и другие варианты стилизации недоступных изображений, как бы странно это ни звучало. Стилизация основана на интересном свойстве элемента <img>, а именно на том, что контент из псевдо-элементов :before и :after для изображения отображается только в том случае, если источник изображения оказывается недоступен. При нормальном положении дел эти псевдо-элементы игнорируются. Таким образом, в случае ошибки на страницу будет добавлена определенная информация. Делается это при помощи CSS:
  1. <style type="text/css">
  2. img:before {
  3.     content"Извините, изображение " attr(alt" недоступно";
  4.     color#FF0000;
  5.     displayblock;
  6.     margin-bottom5px;
  7. }
  8.  
  9. img:after {
  10.     content"Источник: " attr(src);
  11.     color#0000FF;
  12.     displayblock;
  13.     margin-top5px;
  14. }
  15. </style>
Над "битой" картинкой будет уведомление, что она недоступна, и показано название картинки из атрибута alt. А под картинкой будет указана ссылка, по которой она должна находиться.

Читать статью целиком »
Просмотров: 591 | Комментариев: 2

Раскрытие текста при нажатии на ссылку

13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.

Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
  1. <div class="textbox" id="mytext">
  2. Тут находится большой тексткоторый мы должны показать при нажатии на ссылку
  3. </div>
  4. <div>
  5.     <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
  6.     return false;">Посмотреть весь текст</a>
  7. </div>
Что происходит при нажатии на ссылку? Блоку текста просто добавляется класс "opened". И да, это не обязательно должна быть именно ссылка, а любой HTML-элемент, который может обработать событие onclick. Теперь таблица стилей. Для удобства понимания я оставил только те параметры, которые относятся непосредственно к функционированию раскрываемых блоков.
  1. <style type="text/css">
  2. .textbox {
  3.     overflowhidden;
  4.     height100px;
  5.     border1px dashed #A0A0A0;
  6. }
  7. .opened {
  8.     overflowauto;
  9.     heightauto;
  10. }
  11. .opened+div {
  12.     displaynone;
  13. }
  14. </style>
Первоначально свернутый блок имеет высоту 100px, а свойство overflow: hidden не дает его содержимому выходить за эти размеры. При добавлении класса opened высота и перекрытие блока сбрасываются к дефолтным, в результате чего он раскрывается на всю высоту его содержимого. Последнее правило CSS скрывает уже ненужный блок со ссылкой.

Читать статью целиком »
Просмотров: 1557 | Комментариев: 7

prev 01 02 03 04 05 06 07 08
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2020
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.11 сек. / MySQL: 3 (0.0458 сек.) / Память: 4.75 Mb
Наверх