Blog. Just Blog

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

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

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

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


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

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

Читать статью целиком »
Просмотров: 11763 | Комментариев: 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. Из минусов такого способа верстки стоит отметить необходимость дублировать текст, но если не злоупотреблять с украшательствами, то никаких проблем с индексированием страниц быть не должно.

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

Онлайн-сервисы для создания скриншотов сайтов

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

Онлайн-сервисы для создания скриншотов сайтов

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

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

Галерея в стиле старого альбома с фотоуголками

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

Галерея в стиле старого альбома с фотоуголками

В каждой семье наверняка хранятся старые советские фотоальбомы, в которые фотографии надо было вклеивать самим. Обычно для этого использовались бумажные фотоуголки. Они надевались на углы фотографий, смачивались языком и прикладывались на страницу фотоальбома. Однажды я подумал: а почему бы не сделать нечто подобное в виртуальном мире, создать веб-страницу галереи, которая будет выглядеть как старый фотоальбом? Вот что у меня получилось.

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

Правильное поле для ввода паролей

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

Правильное поле для ввода паролей

Исторически так сложилось, что символы в полях для ввода пароля в программах и на сайтах заменяют "звездочками" или какими-нибудь другими символами. Хорошо это или плохо, однозначно сказать сложно. На эту тему было уже немало споров, но к единому мнению оппоненты так и не пришли. С одной стороны вроде бы все логично, вводимый пароль никто не видит, безопасность, приватность, паранойя и все такое. Но с другой стороны это ужасно неудобно, можно ошибиться буквой, ввести пароль не в том регистре или не в той раскладке, часто при копировании паролей из текста писем или с сайтов в конце захватывается лишний пробел или перенос строки, где-то не вовремя проявит инициативу Punto Switcher, при регистрации на сайтах надо заводить еще одно поле для подтверждения пароля, ну и так далее. В открытом текстовом поле для ввода пароля такие ошибки были бы видны сразу.

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

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