Blog. Just Blog

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Динамическое изменение favicon сайта в браузере

24.04.2014 | Категория: Web-мастеру и не только | Автор: ManHunter
Ни для кого не секрет, как на сайт добавляется иконка, которая отображается в адресной строке браузера. Достаточно прописать ссылку на нее в заголовке HTML-страницы:
  1. <html>
  2.   <head>
  3.     <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  4.   <head>
  5.   <body>
  6.   ...
  7.   </body>
  8. </html>
С добавлением никаких сложностей нет. А вот можно ли динамически поменять иконку после того, как страница загружена? Первое, что приходит в голову, это присвоить тегу link с иконкой какой-нибудь id и затем попробовать поменять его свойства через DOM. Увы, такой способ не срабатывает. Чтобы динамически поменять иконку страницы, надо сперва удалить тег link со старой иконкой из заголовка страницы, а затем добавить его с новым содержимым. Делается это так:
  1. <script type="text/javascript">
  2. // Ссылка на файл новой иконки
  3. var icon='new_favicon.ico';
  4.  
  5. var head document.getElementsByTagName('head')[0];
  6.  
  7. // Найти и удалить старую иконку из тега HEAD
  8. var links head.getElementsByTagName('link');
  9. for (var 0links.lengthi++) {
  10.     var lnk links[i];
  11.     if (lnk.rel=='shortcut icon') {
  12.         head.removeChild(lnk);
  13.     }
  14. }
  15.  
  16. // Добавить новую иконку
  17. var link document.createElement('link');
  18. link.setAttribute('href',icon);
  19. link.setAttribute('type','image/x-icon');
  20. link.setAttribute('rel','shortcut icon');
  21. head.appendChild(link);
  22. </script>
Метод кроссбраузерный и самодостаточный, не требует никаких сторонних библиотек. Таким способом, например, можно оповестить пользователя о каком-нибудь событии, когда вкладка со страницей не активна. Для истинных извращенцев есть даже игра в favicon. Главное не злоупотреблять анимацией в рабочих проектах.

Просмотров: 9401 | Комментариев: 14

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