Blog. Just Blog

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

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

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

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

Читать статью целиком »
Просмотров: 1416 | Комментариев: 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 скрывает уже ненужный блок со ссылкой.

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

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

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


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

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

Читать статью целиком »
Просмотров: 1586 | Комментариев: 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>
Готовый пример вы можете посмотреть на демонстрационной странице.

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

Исследование защиты программы 1st JavaScript Editor

09.01.2019 | Категория: Темная сторона Силы | Автор: ManHunter

Скриншот программы 1st JavaScript Editor

1st JavaScript Editor - редактор для начинающих и профессиональных web-разработчиков, поддерживающий синтаксис JavaScript, HTML, CSS, VBScript, PHP и ASP. Перечислять все его возможности я не буду, вы можете посмотреть их на офсайте, скажу только, что они весьма обширны. Без регистрации редактор работает три недели, после чего придется обратиться в ближайшую кассу. Или придется прочитать эту статью.

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

01 02 03 04 05 06 07 08 09 10 11
Это я :-)
Если программист в девять утра уже на работе, значит он там же и ночевал
Главная страница Web-мастеру и не только Образ мышления: Assembler Мои программы Software Темная сторона Силы Обзоры техники А еще я туда ем! Жизнь в оффлайне Всякая всячина
Карта сайта Ссылки Обратная связь Правила сайта Настройки сайта RSS-канал
Я в Telegram
Ограничение по возрасту 16+ Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Метки статей
.NET (33), AJAX (5), Assembler (379), COM (44), CSS (45), Exif (15), FASM (9), Firefox (7), HDD (17), Hello Teddy (10), HTML (54), iconBIT (4), JavaScript (78), MySQL (13), Nikon (19), PDF (10), PHP (125), Samsung (6), SEO (12), Sublime Text (9), Telegram (5), TintonLife (4), UGREEN (4), Windows 7 (67), аккумуляторы (23), аксессуары (12), анализаторы файлов (8), архиваторы (6), аттракционы (7), безопасность (55), браузеры (16), бытовая техника (21), варенье (19), ВВЦ (9), ВДНХ (14), видео (20), Воробьевы горы (9), вторые блюда (133), выпечка (31), выставки (123), генератор ПСЧ (10), графика (122), десерты (31), Египет (9), заготовки на зиму (47), закуска (23), закуска к пиву (26), зарядные устройства (24), защита (15), зоопарки (10), игры (36), иконки (22), интерфейс (26), исследование защиты (327), каша (4), клавиатура (7), Коломенское (37), консоль (7), концерты (52), Кузьминки (4), куклы (28), ледяные скульптуры (6), мои программы (70), мониторы (6), музеи (80), мультимедиа (83), мясо (66), напитки (14), ноутбуки (8), обфускация (7), окна (71), оформление сайта (52), парки Москвы (7), песчаные скульптуры (13), плееры (10), подводная съемка (4), поздравления (136), полезные функции (47), прохождения (4), процессы (25), птица (24), путешествия (26), распаковка (22), реверсинг (53), регулярные выражения (5), рыба (35), салаты (19), сброс триала (4), сеть (37), система (179), Сокольники (8), соусы (16), супы (14), телефоны (10), Тунис (6), умный дом (15), файлы справки (7), фаст-фуд (19), фестиваль цветов (5), флешки (6), фото (23), хеши (18), числа (8), юмор (12), яйца (19), Яндекс (11)
Вам помог этот сайт?
Сказать спасибо! Поблагодарили 36,797 раз
<< 2025 - ИЮНЬ >>
Пн Вт Ср Чт Пт Сб Вс
            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            
Международный день блогера
День мебельщика
День пивовара
День работника миграционной службы России
Всемирный день вязания на публике
Всемирный день жонглирования
Международный банный день
Нашли на сайте орфографическую ошибку? Выделите ее мышкой и нажмите
Ctrl
+
Enter
Буду очень благодарен, если размеcтите мою кнопочку:
Личный блог ManHunter'а
Valid CSS Valid XHTML 1.0 Transitional Valid mobileOK Basic Valid RSS
Яндекс тИЦ: {YANDEX_TIC} Яндекс ИКС: 360
Сейчас я слушаю
---
Имя:

Сообщение:

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

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