Blog. Just Blog

Web-мастеру и не только

Полезные решения для Web-мастеров
Web-мастеру и не только - RSS-канал Web-мастеру и не только - Карта сайта

CSS: перечеркнутый по диагонали текст

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

Этот способ основан на применении абсолютно спозиционированного псевдоэлемента ::before, с помощью которого на текст накладывается цветная линия. Текстовое содержимое псевдоэлемента пустое, но при этом он растянут по всей ширине родительского элемента и смещен относительно его базовой линии.
  1. .striked {
  2.     positionrelative;
  3. }
  4.  
  5. .striked:before {
  6.     positionabsolute;
  7.     width100%;
  8.     height50%;
  9.     content'';
  10.     border-bottom4px solid #FF0000;
  11.     pointer-eventsnone;
  12. }
Угол и направление наклона линии регулируется дополнительными стилями:
  1. .up::before {
  2.     transformrotate(-5deg);
  3. }
  4. .down::before {
  5.     transformrotate(5deg);
  6. }
В коде HTML-страницы это выглядит примерно так:
  1.     <div><span class="striked up">Исправленному</spanверить.</div>
  2.     <div><span class="striked down">Исправленному</spanверить.</div>
Верстка абсолютно валидная, стили стандартные, поддерживаются всеми современными браузерами. В зависимости от места применения, вы можете отрегулировать цвет и толщину линии, а также угол ее наклона. Обратите внимание, что если применять этот эффект к многострочному тексту с переносами, то перечеркнутой окажется только первая строчка. Готовый пример вы можете посмотреть на демонстрационной странице.

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

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

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

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

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

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

Производственный календарь на PHP

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

Производственный календарь на PHP

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

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

Как удалить BOM из файлов

24.12.2017 | Категория: Web-мастеру и не только | Автор: ManHunter
Маркер последовательности байтов, он же BOM - специальный символ Юникода, который вставляется в начало текстового файла для обозначения того, что в этом файле используется Юникод. Согласно спецификации, использование этого символа не является обязательным, однако оно широко распространено, что иногда приводит к проблемам при обработке данных.

Так, к примеру, однажды я столкнулся с ситуацией, когда от сторонней системы передавался файл в формате JSON, а я у себя должен был извлечь поступившие данные при помощи стандартной функции PHP json_decode. Файл передается и принимается успешно, на первый взгляд имеет абсолютно корректную структуру, правильно открывается в браузере и блокноте, но функция декодирования все равно возвращает ошибку, что данные некорректные. Сейчас я не смогу сказать, сколько времени потратил на выяснение причины ошибки, пока, наконец, не решил открыть файл при помощи HEX-редактора. Оказалось, что всему виной был маркер BOM, из-за которого функция json_decode не могла корректно раскодировать файл.

Для решения проблемы я быстренько нарисовал вот такую функцию в несколько строчек:
  1. // Функция удаления BOM из потока данных
  2. function remove_BOM($data) {
  3.     // Маркер UTF-8
  4.     if (substr($data,0,3)=="\xEF\xBB\xBF") {
  5.         return substr($data,3);
  6.     }
  7.     // Маркер UTF-16
  8.     elseif (substr($data,0,2)=="\xFF\xFE") {
  9.         return substr($data,2);
  10.     }
  11.     else {
  12.         return $data;
  13.     }
  14. }
При получении файла данные сперва обрабатывались при помощи этой функции и только после этого отправлялись на декодирование в json_decode.

Просмотров: 2083 | Комментариев: 1

Установка ImageMagic для PHP5 под Windows

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

Установка ImageMagic для PHP5 под Windows

По умолчанию PHP идет с библиотекой для обработки изображений GD. Удобная и мощная штука, которой хватает для большинства задач. Но иногда ее функций становится недостаточно. В этом случае надо установить дополнительную библиотеку ImageMagic. Вот и у меня на рабочем проекте возникла необходимость работать с графическими файлами в формате SVG. Продакшен крутится на CentOS, а рабочая машина под Windows. Везде пришлось устанавливать ImageMagic. Под CentOS все делается парой команд, а вот под Windows пришлось повозиться.

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

prev 01 ... 06 07 08 09 10 11 12 ... 36 next
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2021
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.07 сек. / MySQL: 2 (0.0019 сек.) / Память: 5 Mb
Наверх