Быстрый поиск
Введите фрагмент названия статьи для поиска
Стилизация нумерованных списков с помощью CSS
23.11.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
Стилизация нумерованных списков с помощью CSS
Продолжаем тему стилизации различных HTML-элементов. Сегодня это будут нумерованные списки. Если вы захотите изменить отображение цифр перед строками в нумерованном списке, то обнаружите, что сделать это при помощи CSS невозможно. Но также невозможно объяснить заказчикам, почему дизайнер нарисовал в фотошопе красивый список, а повторить его на web-странице в таком же виде не получается. Решение этой проблемы есть, и даже не одно.
Читать статью целиком »
Просмотров: 4681 | Комментариев: 0
Placeholder для изображений на JavaScript
12.11.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
Placeholder для изображений на JavaScript
При разработке сайтов одна из главных задач - правильное размещение контента, в том числе и изображений. Но часто случается ситуация, когда заказчик еще не предоставил материал, а что-то показать ему уже надо. В таких случаях используют "рыбы", или, если по-английски, "placeholder". Для текстового контента это классический "Lorem ipsum..." или какие-нибудь программные генераторы. Для графического контента есть различные онлайновые сервисы, которые предоставляют картинки-placeholder'ы (про них будет отдельная статья). А я решил сделать динамический генератор картинок-пустышек на JavaScript.
Читать статью целиком »
Просмотров: 2631 | Комментариев: 1
Аккордеон на CSS3
17.10.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
Аккордеон на CSS3
Так называемый аккордеон, или вариант раскрывающегося горизонтального или вертикального меню, очень популярный элемент при оформлении сайтов. Существует огромное количество вариантов реализации, с использованием скриптов, стилей и разных HTML-элементов в качестве управляющих конструкций. Представляю вам мой вариант аккордеона на чистом CSS3, но не удивлюсь, если такой вариант уже где-то был.
Читать статью целиком »
Просмотров: 2905 | Комментариев: 4
Таблица с фиксированной шапкой на JavaScript
14.04.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
В одном из рабочих проектов появилась необходимость выводить достаточно длинную таблицу с большим количеством однотипных колонок. При вертикальной прокрутке заголовок таблицы уезжает, и уже на втором скролле становится очень сложно сориентироваться, какая из колонок к чему относится. Проблема решается с помощью создания фиксированной шапки у таблицы, которая всегда будет отображаться, пока "родной" заголовок таблицы находится за пределами видимой области страницы.Начнем с верстки. Для корректной работы скрипта нужно выполнение всего несколько требований. Таблица, у которой будет фиксироваться заголовок, обязательно должна иметь атрибут id и фиксированную ширину. Шапка таблицы должна быть обрамлена тегом thead. Например:
Code (HTML) : Убрать нумерацию
- <table id="my_table" style="width:980px;" rules="all">
- <thead>
- <tr>
- <th style="width:20px;">N</th>
- <th style="background: #BABABA;">Наименование</th>
- <th>Описание</th>
- <th style="width:60px;">Цена</th>
- <th style="width:60px;">Количество</th>
- <th style="width:60px;">Сумма</th>
- </tr>
- </thead>
- <tr>
- <td>1</td>
- <td>Предмет 1</td>
- <td>Описание 1</td>
- <td>26</td>
- <td>97</td>
- <td>2522</td>
- </tr>
- ... остальное содержимое таблицы
- </table>
Читать статью целиком »
Просмотров: 9334 | Комментариев: 8
Рейтинг на CSS и JavaScript
17.02.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
Рейтинг на CSS и JavaScript
Один из ставших привычным элементов web-страниц - рейтинг. Это может быть средняя пользовательская оценка какой-нибудь статьи, популярность товара или что-нибудь подобное. Обычно рейтинг представляет собой полоску с пятью или десятью звездочками, часть из которых серая, а часть, соответствующая значению рейтинга, - золотистая. Сегодня я расскажу, как сделать отображение такого рейтинга и как он может взаимодействовать с пользователем.
Читать статью целиком »
Просмотров: 7842 | Комментариев: 5