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

Предзагрузка изображений с помощью CSS
01.02.2016 | Категория: Web-мастеру и не только | Автор: ManHunter
При размещении на web-странице "тяжелых" изображений, которые в дальнейшем должны будут без задержек сразу открываться, часто используют технологию предзагрузки. Она заключается в том, что изображение открывается браузером в фоновом режиме, но не отображается сразу, а только кэшируется. Затем, при обращении к изображению, оно извлекается из локального кэша и мгновенно отображается, так как не требуется повторной загрузки данных из сети. Обычно прелоадеры изображений делают на JavaScript и вешают на событие onload или на DOMContentLoaded, или же просто размещают скрипт в начале страницы. Сам скрипт сводится к созданию нужного количества объектов Image и назначению им свойства src со ссылками на предзагружаемые изображение. Что-то наподобие такого:Code (JavaScript) : Убрать нумерацию
- var img1=new Image();
- img1.src='/images/slider_image.jpg';
- var img2=new Image();
- img2.src='/images/menu_sprites.png';
- var img3=new Image();
- img3.src='/images/loading_spinner.gif';
Code (HTML) : Убрать нумерацию
- <style type="text/css">
- body:after {
- content:
- url('/images/slider_image.jpg')
- url('/images/menu_sprites.png')
- url('/images/loading_spinner.gif')
- ;
- display: none;
- }
- </style>
Просмотров: 6885 | Комментариев: 5

Кроссбраузерная стилизация input type="file" с помощью CSS
14.04.2015 | Категория: Web-мастеру и не только | Автор: ManHunter
Продолжаем тему извечного противостояния дизайнеров и верстальщиков. Основной конфликт возникает тогда, когда дизайнер рисует картинку сайта так, как нужно заказчику, а потом верстальщику приходится адаптировать под это изображение различные элементы HTML. Один из самых сложных для стилизации элементов - это поле выбора файлов, элемент input с типом file. В качестве наглядного примера, вот как он отображается в различных браузерах:
Поле input type="file" в разных браузерах
Дополнительную сложность создает то, что это поле попадает под различные правила безопасности браузеров, поэтому его нельзя, например, заменить каким-нибудь стилизованным div, нельзя обернуть тегом label, нельзя напрямую присвоить значение с помощью скриптов или вызвать окно выбора файла, сэмулировав нажатие через element.click(). А в некоторых браузерах даже нельзя сделать поле выбора файлов скрытым, так как после отправки формы его значение не будет передано на сервер. В разных интернетах я встречал попытки сделать кроссбраузерное решение, но все они, на самом деле, не универсальные и ограничиваются конкретными браузерами.
Читать статью целиком »
Просмотров: 14454 | Комментариев: 3

Горизонтальная раскраска текста на CSS
04.03.2015 | Категория: Web-мастеру и не только | Автор: ManHunter
Предлагаю вашему вниманию простой эффект раскраски текста горизонтальными полосами. Делается просто, выглядит хорошо, в итоге получается валидная и кроссбраузерная верстка. Сперва немного теории. Разноцветные горизонтальные полосы проще всего сделать путем наложения друг на друга нескольких слоев разной высоты, но с одинаковым содержимым. Вот как это выглядит схематически:
Наложение слоев текста
Теперь переходим к верстке. Высота и количество цветных полос могут быть любыми. Например, вот так можно раскрасить текст в цвета российского триколора:
Code (HTML) : Убрать нумерацию
- <!-- фоновый DIV - нижняя полоса -->
- <div style="color:#FF0000; position:relative;">RUSSIA
- <!-- первый абсолютно позиционированный DIV - средняя полоса -->
- <div style="color:#0000FF; position:absolute; top:0px; height:28px;
- overflow:hidden;">RUSSIA</div>
- <!-- второй абсолютно позиционированный DIV - верхняя полоса -->
- <div style="color:#FFFFFF; position:absolute; top:0px; height:18px;
- overflow:hidden;">RUSSIA</div>
- </div>
Читать статью целиком »
Просмотров: 5175 | Комментариев: 2

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

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

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

Галерея в стиле старого альбома с фотоуголками
В каждой семье наверняка хранятся старые советские фотоальбомы, в которые фотографии надо было вклеивать самим. Обычно для этого использовались бумажные фотоуголки. Они надевались на углы фотографий, смачивались языком и прикладывались на страницу фотоальбома. Однажды я подумал: а почему бы не сделать нечто подобное в виртуальном мире, создать веб-страницу галереи, которая будет выглядеть как старый фотоальбом? Вот что у меня получилось.
Читать статью целиком »
Просмотров: 7688 | Комментариев: 9
