Blog. Just Blog

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

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

Аккордеон на CSS3

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

Аккордеон на CSS3

Так называемый аккордеон, или вариант раскрывающегося горизонтального или вертикального меню, очень популярный элемент при оформлении сайтов. Существует огромное количество вариантов реализации, с использованием скриптов, стилей и разных HTML-элементов в качестве управляющих конструкций. Представляю вам мой вариант аккордеона на чистом CSS3, но не удивлюсь, если такой вариант уже где-то был.

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

Таблица с фиксированной шапкой на JavaScript

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

Начнем с верстки. Для корректной работы скрипта нужно выполнение всего несколько требований. Таблица, у которой будет фиксироваться заголовок, обязательно должна иметь атрибут id и фиксированную ширину. Шапка таблицы должна быть обрамлена тегом thead. Например:
  1. <table id="my_table" style="width:980px;" rules="all">
  2. <thead>
  3. <tr>
  4.     <th style="width:20px;">N</th>
  5.     <th style="background: #BABABA;">Наименование</th>
  6.     <th>Описание</th>
  7.     <th style="width:60px;">Цена</th>
  8.     <th style="width:60px;">Количество</th>
  9.     <th style="width:60px;">Сумма</th>
  10. </tr>
  11. </thead>
  12.  
  13. <tr>
  14.     <td>1</td>
  15.     <td>Предмет 1</td>
  16.     <td>Описание 1</td>
  17.     <td>26</td>
  18.     <td>97</td>
  19.     <td>2522</td>
  20. </tr>
  21.  
  22. ... остальное содержимое таблицы
  23.  
  24. </table>
Обычно при верстке HTML я никогда не использую thead, но тут этот элемент необходим, чтобы обозначить границы и содержимое шапки таблицы. Дополнительных обрамляющих элементов для таблицы не требуется.

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

Рейтинг на CSS и JavaScript

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

Рейтинг на CSS и JavaScript

Один из ставших привычным элементов web-страниц - рейтинг. Это может быть средняя пользовательская оценка какой-нибудь статьи, популярность товара или что-нибудь подобное. Обычно рейтинг представляет собой полоску с пятью или десятью звездочками, часть из которых серая, а часть, соответствующая значению рейтинга, - золотистая. Сегодня я расскажу, как сделать отображение такого рейтинга и как он может взаимодействовать с пользователем.

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

Кроссбраузерная стилизация input type="file" с помощью CSS

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


Поле input type="file" в разных браузерах

Дополнительную сложность создает то, что это поле попадает под различные правила безопасности браузеров, поэтому его нельзя, например, заменить каким-нибудь стилизованным div, нельзя обернуть тегом label, нельзя напрямую присвоить значение с помощью скриптов или вызвать окно выбора файла, сэмулировав нажатие через element.click(). А в некоторых браузерах даже нельзя сделать поле выбора файлов скрытым, так как после отправки формы его значение не будет передано на сервер. В разных интернетах я встречал попытки сделать кроссбраузерное решение, но все они, на самом деле, не универсальные и ограничиваются конкретными браузерами.

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

Горизонтальная раскраска текста на CSS

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


Наложение слоев текста

Теперь переходим к верстке. Высота и количество цветных полос могут быть любыми. Например, вот так можно раскрасить текст в цвета российского триколора:
  1. <!-- фоновый DIV нижняя полоса -->
  2. <div style="color:#FF0000; position:relative;">RUSSIA
  3.     <!-- первый абсолютно позиционированный DIV средняя полоса -->
  4.     <div style="color:#0000FF; position:absolute; top:0px; height:28px;
  5.          overflow:hidden;">RUSSIA</div>
  6.     <!-- второй абсолютно позиционированный DIV верхняя полоса -->
  7.     <div style="color:#FFFFFF; position:absolute; top:0px; height:18px;
  8.          overflow:hidden;">RUSSIA</div>
  9. </div>
Фоновый контейнер DIV имеет атрибут position:relative, поэтому все дочерние элементы с абсолютным позиционированием будут выстраиваться относительно его координат. Высота и положение дочерних элементов идет по убыванию, а чтобы текст не выходил за границы DIV, контейнеру присваивается атрибут overflow:hidden. Из минусов такого способа верстки стоит отметить необходимость дублировать текст, но если не злоупотреблять с украшательствами, то никаких проблем с индексированием страниц быть не должно.

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

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