Blog. Just Blog

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

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

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

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

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

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

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

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


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

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

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

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

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

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

Симпатичный эффект на чистом CSS для создания красивых заголовков. Буквы с тенью накладываются друг на друга с небольшим смещением. В зависимости от шрифта смещение letter-spacing придется подрегулировать.
  1. <style type="text/css">
  2. .header div {
  3.     displayinline-block;
  4.     font-familyGeorgia;
  5.     font-size72px;
  6.     font-weightbold;
  7.     color#FFFFFF;
  8.     letter-spacing: -12px;
  9.     text-shadow: -3px 0px 5px #000000;
  10. }
  11. </style>
Верстка получается немного громоздкой, так как каждую букву текста приходится оборачивать в отдельный тег.
  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>
Готовый пример вы можете посмотреть на демонстрационной странице.

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

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

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

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

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

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

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