Blog. Just Blog

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

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

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

21.12.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Красивый эффект на чистом CSS, который будет хорошо смотреться в какой-нибудь web-галерее. При наведении курсора на картинку, поверх нее плавно выезжает название и описание, причем отдельными независимыми блоками. Начнем с таблицы стилей.
Code (HTML) : Убрать нумерацию
  1. <style type="text/css">
  2. .cool_img {
  3.     display: inline-block;
  4.     position: relative;
  5.     text-align: center;
  6.     overflow: hidden;
  7.     border-radius: 5px;
  8. }
  9.  
  10. .cool_img .info {
  11.     position: absolute;
  12.     bottom: 0;
  13. }
  14.  
  15. .cool_img .info span {
  16.     display: block;
  17.     position: relative;
  18.     top: 130px;
  19.     color: #FFFFFF;
  20.     background: #000000;
  21.     transition-delay: 0;
  22.     transition-duration: 0.3s;
  23. }
  24.  
  25. .cool_img .info .info_title {
  26.     font-size: 18px;
  27.     font-weight: bold;
  28.     padding: 5px;
  29.     border-radius: 5px 5px 0 0;
  30.     opacity: 0.8;
  31. }
  32.  
  33. .cool_img .info .info_text {
  34.     font-size: 12px;
  35.     padding: 10px;
  36.     opacity: 0.6;
  37. }
  38.  
  39. .cool_img:hover .info span, .cool_img:focus .info span {
  40.     top: 0;
  41. }
  42.  
  43. .cool_img:hover .info .info_title {
  44.     transition-delay: 0.15s;
  45. }
  46.  
  47. .cool_img:hover .info .info_text {
  48.     transition-delay: 0.25s;
  49. }
  50. </style>
Если описания планируются очень объемные, то смещение элементов span с текстом надо будет сдвинуть вниз на нужное количество пикселов. Для создания эффекта используется CSS-анимация через свойства transition, поэтому для старых браузеров придется замутить что-нибудь попроще или задействовать браузерные префиксы типа "-webkit-", "-moz-" и т.д.

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

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

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

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

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

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

Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Code (HTML) : Убрать нумерацию
  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. Теперь таблица стилей. Для удобства понимания я оставил только те параметры, которые относятся непосредственно к функционированию раскрываемых блоков.
Code: Убрать нумерацию
  1. <style type="text/css">
  2. .textbox {
  3.     overflow: hidden;
  4.     height: 100px;
  5.     border: 1px dashed #A0A0A0;
  6. }
  7. .opened {
  8.     overflow: auto;
  9.     height: auto;
  10. }
  11. .opened+div {
  12.     display: none;
  13. }
  14. </style>
Первоначально свернутый блок имеет высоту 100px, а свойство overflow: hidden не дает его содержимому выходить за эти размеры. При добавлении класса opened высота и перекрытие блока сбрасываются к дефолтным, в результате чего он раскрывается на всю высоту его содержимого. Последнее правило CSS скрывает уже ненужный блок со ссылкой.

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

Разделенные ссылки

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


Разделенные ссылки

При наведении курсора на название альбома также подсвечивается его обложка в левом блоке, а при наведении на любую из обложек будет подсвечено название соответствующего альбома. Никаких скриптов для этого не требуется, все реализуется средствами CSS.

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

Текст с наложением тени с помощью CSS

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

Текст с наложением тени с помощью CSS

Симпатичный эффект на чистом CSS для создания красивых заголовков. Буквы с тенью накладываются друг на друга с небольшим смещением. В зависимости от шрифта смещение letter-spacing придется подрегулировать.
Code (HTML) : Убрать нумерацию
  1. <style type="text/css">
  2. .header div {
  3.     display: inline-block;
  4.     font-family: Georgia;
  5.     font-size: 72px;
  6.     font-weight: bold;
  7.     color: #FFFFFF;
  8.     letter-spacing: -12px;
  9.     text-shadow: -3px 0px 5px #000000;
  10. }
  11. </style>
Верстка получается немного громоздкой, так как каждую букву текста приходится оборачивать в отдельный тег.
Code (HTML) : Убрать нумерацию
  1. <div class="header">
  2.     <div>C</div>
  3.     <div>S</div>
  4.     <div>S</div>
  5.     <div>&nbsp;&nbsp;&nbsp;</div>
  6.     <div>i</div>
  7.     <div>s</div>
  8.     <div>&nbsp;&nbsp;&nbsp;</div>
  9.     <div>A</div>
  10.     <div>w</div>
  11.     <div>e</div>
  12.     <div>s</div>
  13.     <div>o</div>
  14.     <div>m</div>
  15.     <div>e</div>
  16. </div>
Готовый пример вы можете посмотреть на демонстрационной странице.

Просмотров: 1026 | Комментариев: 2

01 02 03 04 05 06 07 08 09
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (21), AJAX (5), Assembler (268), COM (19), CSS (38), Exif (15), FASM (7), Firefox (7), HDD (13), Hello Teddy (9), HTML (45), iconBIT (4), JavaScript (62), MySQL (12), Nikon (19), PDF (9), PHP (97), Samsung (6), SEO (12), Sublime Text (9), TintonLife (4), UGREEN (4), Windows 7 (64), аккумуляторы (22), аксессуары (12), анализаторы файлов (8), архиваторы (5), аттракционы (6), безопасность (50), браузеры (16), бытовая техника (9), варенье (16), ВВЦ (9), ВДНХ (9), видео (20), Воробьевы горы (6), вторые блюда (99), выпечка (18), выставки (104), генератор ПСЧ (9), графика (90), десерты (27), Египет (7), заготовки на зиму (36), закуска (19), закуска к пиву (22), зарядные устройства (22), защита (15), зоопарки (9), игры (30), иконки (20), интерфейс (22), исследование защиты (252), каша (4), клавиатура (7), Коломенское (35), консоль (5), концерты (52), Кузьминки (4), куклы (26), ледяные скульптуры (6), мои программы (62), мониторы (6), музеи (65), мультимедиа (42), мясо (42), напитки (11), ноутбуки (6), обфускация (6), окна (65), оформление сайта (45), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (107), полезные функции (34), прохождения (4), процессы (20), птица (16), путешествия (24), распаковка (14), реверсинг (46), рыба (31), салаты (17), сброс триала (4), сеть (27), система (157), Сокольники (8), соусы (7), супы (12), телефоны (7), Тунис (6), файлы справки (6), фаст-фуд (15), фестиваль цветов (5), флешки (5), фото (23), хеши (15), числа (8), юмор (12), яйца (16)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 29,751 раз
<< 2021 - ДЕКАБРЬ >>
Пн Вт Ср Чт Пт Сб Вс
    1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31    
День юриста
День Неизвестного Солдата
Международный день инвалидов
Всемирный день компьютерной графики
Международный день борьбы с пестицидами
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 390
Сейчас я слушаю
---
Имя:

Сообщение:

Осталось символов: 200

   
-
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.12 сек. / MySQL: 3 (0.052 сек.) / Память: 4.75 Mb
Наверх