Blog. Just Blog

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

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

Как увеличить размер checkbox и radio на CSS

22.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
На своей практике я неоднократно сталкивался с тем, что дизайнеры web-сайтов бывают очень далеки от реалий жизни. В результате чего при верстке приходится прилагать немалые усилия, чтобы готовый сайт получился максимально похожим на нарисованный макет. Постоянные читатели блога наверняка читали, как можно разукрасить элементы выбора файлов. Сегодня речь пойдет о чекбоксах и радиокнопках, точнее об их нестандартной стилизации. Много лет назад я уже выкладывал нечто подобное, но там размер чекбокса оставался неизменным, да и решение получилось не самое удачное. Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть.

Начнем с изменения размера. Вариант с изменением атрибутов width или height отпадает сразу, элементы checkbox или radio это игнорируют или же размер поменяется лишь в некоторых версиях каких-то браузеров. Чуть более продвинутый вариант - это увеличение элемента за счет масштабирования. Например:
  1. <label>
  2.     <input type="checkbox" style="transform:scale(3.0);" /> Option
  3. </label>
Но и это не решение. Хорошо справляется с масштабированием только движок WebKit и браузеры на его основе (Chrome и т.п.), а также последние версии Internet Explorer. Браузеры на базе Mozilla тупо растягивают стандартный чекбокс или кругляш, в результате получается просто вырвиглазный ужас. Но даже если такой фокус удастся, при изменении масштаба все равно придется шаманить с положением модифицированного элемента на странице. Не говоря уже о том, что старые браузеры вообще не поддерживают атрибут transform.

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

Сортировка строк HTML-таблицы на JavaScript

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

Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
  1. <tr data-price="10" data-ident="4" data-area="32" data-dev="СуперСтрой">
  2.     <td>менее 10 млн.</td>
  3.     <td>без отделки</td>
  4.     <td>32 м<sup>2</sup></td>
  5.     <td>ООО СуперСтрой</td>
  6. </tr>
  7. <tr data-price="50" data-ident="3" data-area="62.7" data-dev="ПИК">
  8.     <td>50.000.000</td>
  9.     <td>черновая</td>
  10.     <td>62.7 м<sup>2</sup></td>
  11.     <td>ГК "ПИК"</td>
  12. </tr>
Как вы видите, содержимое в data-атрибутах отличается от содержимого ячеек, это как раз те значения, по которым должна выполняться сортировка. Если какой-либо атрибут не указан, то такие строчки будут просто перенесены в начало таблицы.

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

Прячем IP-адрес сервера в ссылке

26.06.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Все мы давно привыкли, что IP-адрес записывается при помощи 4 октетов, разделенных точками. Я имею в виду IPv4. Но по стандарту протокол TCP/IP также поддерживает адресацию, когда IP-адрес задан единым числом. Это число получается из октетов IP-адреса по определенной формуле. К примеру, IP-адрес главной страницы поисковика Google 64.233.165.94. Разобьем его на октеты и преобразуем в число:

(64<<24) + (233<<16) + (165<<8) + 94 = 1089054046
или более наглядный вариант:

(64*256*256*256) + (233*256*256) + (165*256) + 94 = 1089054046
В PHP такое преобразование делается вообще одной командой ip2long. Теперь подставляем найденное значение в ссылку вместо IP-адреса: закодированная ссылка на Google. Современные браузеры распознают такие подмены и при наведении курсора на ссылку показывают корректный IP-адрес, но можете посмотреть в исходном коде страницы и убедиться, что вместо IP-адреса там действительно стоит число. При клике по этой ссылке открывается главная страница поисковика. По таким ссылкам можно загружать файлы, открывать сайты, пересылать данные, делать все то же самое, что и с обычными адресами. Единственное условие, чтобы целевой ресурс однозначно сопоставлялся с конкретным IP-адресом.

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

Таблица с колонками одинаковой ширины

29.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Периодически возникающая задача на верстку: нужна таблица с колонками одинаковой ширины, при этом ни количество колонок, ни их содержимое заранее неизвестно. Решается эта задача всего двумя правилами CSS:
  1. .equal_table {
  2.     table-layoutfixed;
  3. }
  4. .equal_table td {
  5.     width:100%;
  6. }
Класс применяется к таблице, у которой надо сделать колонки одинаковой ширины, больше никаких действий не требуется.
  1. <table class="equal_table" style="width:600px;">
  2. <tr>
  3.     <td>первая</td>
  4.     <td>вторая</td>
  5.     <td>третья</td>
  6.     <td>а в этой колонке будет очень длинный текст</td>
  7. </tr>
  8. </table>
Готовый пример можете посмотреть на демонстрационной страничке.

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

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>
Верстка абсолютно валидная, стили стандартные, поддерживаются всеми современными браузерами. В зависимости от места применения, вы можете отрегулировать цвет и толщину линии, а также угол ее наклона. Обратите внимание, что если применять этот эффект к многострочному тексту с переносами, то перечеркнутой окажется только первая строчка. Готовый пример вы можете посмотреть на демонстрационной странице.

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

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