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

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

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

Текст с наложением тени с помощью CSS
Симпатичный эффект на чистом CSS для создания красивых заголовков. Буквы с тенью накладываются друг на друга с небольшим смещением. В зависимости от шрифта смещение letter-spacing придется подрегулировать.
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- .header div {
- display: inline-block;
- font-family: Georgia;
- font-size: 72px;
- font-weight: bold;
- color: #FFFFFF;
- letter-spacing: -12px;
- text-shadow: -3px 0px 5px #000000;
- }
- </style>
Code (HTML) : Убрать нумерацию
- <div class="header">
- <div>C</div>
- <div>S</div>
- <div>S</div>
- <div> </div>
- <div>i</div>
- <div>s</div>
- <div> </div>
- <div>A</div>
- <div>w</div>
- <div>e</div>
- <div>s</div>
- <div>o</div>
- <div>m</div>
- <div>e</div>
- </div>
Просмотров: 1682 | Комментариев: 2

Как увеличить размер checkbox и radio на CSS
22.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
На своей практике я неоднократно сталкивался с тем, что дизайнеры web-сайтов бывают очень далеки от реалий жизни. В результате чего при верстке приходится прилагать немалые усилия, чтобы готовый сайт получился максимально похожим на нарисованный макет. Постоянные читатели блога наверняка читали, как можно разукрасить элементы выбора файлов. Сегодня речь пойдет о чекбоксах и радиокнопках, точнее об их нестандартной стилизации. Много лет назад я уже выкладывал нечто подобное, но там размер чекбокса оставался неизменным, да и решение получилось не самое удачное. Сейчас задача заключается в том, чтобы увеличить кликабельную часть checkbox или radio, и решать я ее буду с помощью современных инструментов, а именно на чистом CSS. Заодно проведу работу над ошибками и сделаю стилизацию элементов так, как должно быть.Начнем с изменения размера. Вариант с изменением атрибутов width или height отпадает сразу, элементы checkbox или radio это игнорируют или же размер поменяется лишь в некоторых версиях каких-то браузеров. Чуть более продвинутый вариант - это увеличение элемента за счет масштабирования. Например:
Code (HTML) : Убрать нумерацию
- <label>
- <input type="checkbox" style="transform:scale(3.0);" /> Option
- </label>
Читать статью целиком »
Просмотров: 12916 | Комментариев: 2

Сортировка строк HTML-таблицы на JavaScript
05.12.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Понадобился скрипт для сортировки строчек HTML-таблицы в зависимости от значений столбцов. В этих ваших интернетах есть немало готовых решений, но, как часто случается на моей работе, постановка задачи включает в себя кучу дополнительных условий. Например, в ячейке таблицы может быть не просто текст, а несколько HTML-тегов, сортируемое значение может быть отформатировано особым образом или к нему могут быть дописаны какие-нибудь дополнительные данные, а то и вовсе отображаемое текстовое значение в ячейке соответствует какому-то внутреннему индексу в системе и сортировать надо именно по этому индексу. Короче, отображаемое содержимое ячеек таблицы не влияет на ожидаемый порядок их сортировки.Разнобой со значениями, влияющими на сортировку, решается добавлением к каждой строке таблицы набора data-атрибутов, введенных в HTML5. Вкратце, чтобы не грузить вас теорией, data-атрибуты позволяют хранить нужную вам дополнительную информацию в стандартных элементах HTML без применения хаков вроде нестандартных атрибутов, лишних DOM-свойств и т.п. Например:
Code (HTML) : Убрать нумерацию
- <tr data-price="10" data-ident="4" data-area="32" data-dev="СуперСтрой">
- <td>менее 10 млн.</td>
- <td>без отделки</td>
- <td>32 м<sup>2</sup></td>
- <td>ООО СуперСтрой</td>
- </tr>
- <tr data-price="50" data-ident="3" data-area="62.7" data-dev="ПИК">
- <td>50.000.000</td>
- <td>черновая</td>
- <td>62.7 м<sup>2</sup></td>
- <td>ГК "ПИК"</td>
- </tr>
Читать статью целиком »
Просмотров: 5314 | Комментариев: 7

Таблица с колонками одинаковой ширины
29.04.2018 | Категория: Web-мастеру и не только | Автор: ManHunter
Периодически возникающая задача на верстку: нужна таблица с колонками одинаковой ширины, при этом ни количество колонок, ни их содержимое заранее неизвестно. Решается эта задача всего двумя правилами CSS:Code: Убрать нумерацию
- .equal_table {
- table-layout: fixed;
- }
- .equal_table td {
- width:100%;
- }
Code (HTML) : Убрать нумерацию
- <table class="equal_table" style="width:600px;">
- <tr>
- <td>первая</td>
- <td>вторая</td>
- <td>третья</td>
- <td>а в этой колонке будет очень длинный текст</td>
- </tr>
- </table>
Просмотров: 2396 | Комментариев: 1
