Blog. Just Blog

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

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

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

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

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

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

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

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

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

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

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

Читать статью целиком »
Просмотров: 248 | Комментариев: 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-" и т.д.

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

Создание скриншотов сайтов с помощью Headless Chrome

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

Создание скриншотов сайтов с помощью Headless Chrome

Ранее я рассказывал о сервисах для создания скриншотов сайтов, но время не стоит на месте. Если у вас в распоряжении есть свой сервер, то вы легко сможете организовать собственный сервис для создания скриншотов сайтов. Начиная с версии 59, браузер Chrome может работать в так называемом "безголовом" режиме, то есть он реально не отрисовывает содержимое web-страницы, а все формирует в памяти. При этом он работает из командной строки и может быть установлен на сервер.

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

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

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. А под картинкой будет указана ссылка, по которой она должна находиться.

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

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