Blog. Just Blog

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

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

3D текст с помощью CSS

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

3D текст с помощью CSS

Небольшой трюк, как можно оформить любой элемент сайта в виде "трехмерного" текста совсем без графики, с помощью одного только CSS. Такое оформление будет хорошо смотреться на крупных надписях, например, на заголовках.

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

Символ рубля без использования шрифтов

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

Символ рубля без использования шрифтов

Небольшой трюк, как можно нарисовать символ рубля без использования юникода и внешних шрифтов, средствами одного только CSS. Кроме того, даже с отключенными стилями цена будет отображаться просто с буквой "Р", что тоже, в принципе, допустимо.
  1. <div class="price">Цена20,100,999 <span class="rub">Р</span></div>
Блок с ценой обернут в элемент DIV, а символ рубля находится внутри строчного элемента SPAN. Обратите внимание, что в тексте страницы символ записан обычной буквой "Р", а горизонтальная палочка выполнена в виде символа "узкое тире" и добавляется к нему в CSS при помощи псевдоэлемента ::before.
  1. <style type="text/css">
  2. .price {
  3.     font-familyVerdana;
  4.     font-size24px;
  5. }
  6.  
  7. .rub {
  8.     positionrelative;
  9.     color#FF0000;
  10. }
  11. .rub::before {
  12.     content'–';
  13.     positionabsolute;
  14.     bottom: -4px;
  15.     left: -2px;
  16. }
  17. </style>
Способ кроссбраузерный, работает как на стационарных, так и на мобильных платформах. При использовании разных размеров шрифтов скорее всего понадобятся корректировки смещений палочки по горизонтали и вертикали, это вы можете легко сделать самостоятельно. Готовый результат можно посмотреть на демонстрационной страничке.

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

Скрипт быстрого выбора для элемента SELECT

22.09.2017 | Категория: Web-мастеру и не только | Автор: ManHunter
Небольшой вспомогательный скрипт на JavaScript, который облегчает работу с выпадающими списками. Суть его в том, что рядом с элементом select создается текстовое поле. При вводе фрагмента строки в это поле, выпадающий список автоматически устанавливается на строку, в которой этот фрагмент найден. Это заметно упрощает работу с формами, где есть длинные выпадающие списки. Форма остается прежней, никаких кастомных модификаций не требуется:
  1. <div>
  2.     <select>
  3.         <option value="">---</option>
  4.         <option value="1">Yellow Banana</option>
  5.         <option value="2">Red Apple</option>
  6.         <option value="3">Green Leaf</option>
  7.         <option value="4">Some strange</option>
  8.     </select>
  9.  
  10.     <input type="text" onkeyup="selecthelper(event);">
  11. </div>
Важно, чтобы вспомогательное поле ввода находилось после выпадающего списка, но обязательно на одном уровне иерархии с ним в DOM-структуре. Вы можете, в случае необходимости, доработать скрипт-обработчик под ваши нужды. Верстка остается валидная, количество выпадающих списков и полей ввода в форме может быть любым.

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

Как узнать, что web-страница была распечатана на принтере

13.05.2017 | Категория: Web-мастеру и не только | Автор: ManHunter
В процессе создания одной из рабочих систем, с подачи начальства возникла очень необычная задача. Организационные подробности описывать не буду, только техническую сторону. В системе пользователю генерируется некий документ, который он должен распечатать. Задача заключалась в том, что система должна была узнать, что документ был распечатан. Причем просто просмотр версии для печати на экране не считается, требовалось определить именно факт отправки документа на принтер. После недолгих размышлений пришло на ум следующее решение. На страницу документа, которая должна быть распечатана, добавляется примерно следующий код:
  1. <style type="text/css">
  2. .print_hook {
  3.     displayinline-block;
  4. }
  5. @media print {
  6.     .print_hook {
  7.         background:url('/print_hook.php?id=123');
  8.     }
  9. }
  10. </style>
  11. <div class="print_hook"></div>
Поясню словами. Вспомогательному элементу div назначается фоновый рисунок в виде скрипта-перехватчика. Стили, определенные через @media print, задействуются только при печати, просто при просмотре страницы фоновый рисунок дергаться не будет. В параметрах перехватчику передаются определенные значения, по которым идентифицируется печатаемый документ. Файл-перехватчик print_hook.php, к которому выполняется обращение, разбирает переданные ему параметры, заносит в базу необходимые статистические данные, а затем выдает в качестве фона прозрачный однопиксельный GIF.

Стили для перехватчика динамически генерируются на странице, во внешних файлах и в глобальных таблицах CSS их хранить не надо. Способ кроссбраузерный, работает везде, где поддерживаются CSS3 Media Queries и не требует включения никаких скриптов на стороне клиента.

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

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

Стилизация нумерованных списков с помощью CSS

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

Стилизация нумерованных списков с помощью CSS

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

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

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