Почему я не люблю разбираться в чужом коде

У каждого человека есть свой стиль верстки. Плохой или хороший – не важно, но он другой. Любой человек может писать как оригинальный оптимальный код в одном месте, так и непонятный избыточный в другом. Настроение у него было такое или пробелы в знаниях не позволяют одинаково легко делать выпадающие менюшки и правильно вставлять flash ролики. А комментировать свой код HTML утруждаются немногие.

Разбираться в чужом HTML коде

Читать полностью »

Простая анимация для сайта средствами CSS

Самые красивые и яркие анимационные ролики для веб-сайтов создаются, конечно же, с помощью технологий Adobe Flash и Microsoft Silverlight. Но далеко не всем веб-сайтам нужны дорогостоящие и трудоемкие анимационные шапки, а меню на flash еще и очень плохо индексируются. Уже никого не удивляют акционные баннеры, иконки или графические меню, которые могут слегка меняться при наведении на них указателя мыши.

Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая анимация, реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

Пример анимации css

Многие графические элементы на этом сайте, включая меню, меняют цвет или форму при наведении на них указателя мышки. Получается достаточно весело, оригинально и в то же время не утомительно. Рассмотрим подробнее, как это сделано, на примере пункта меню «english».

Бесплатно скачать коды урока интерактивной CSS-анимации

Читать полностью »

Код CSS, который понимает только Internet Explorer

Браузер Internet Explorer не всегда утруждает себя соблюдением всех стандартов верстки W3C. В свое время это было «фишкой» Microsoft, которая пользовалась своим монопольным положением на рынке ПО, чтобы еще больше его упрочить. А до этого «вольное трактование» языка разметки помогло победить Netscape. Впрочем, речь в этой статье пойдет не о погибшем браузере и даже не о его победителях.

IE против Mozilla

В результате отступления Майкрософта от некоторых стандартов HTML и CSS код может трактоваться по-разному браузером Internet Explorer и другими, «честными» браузерами (Firefox Mozilla, Opera, Safari и др.). Опытные веб-мастера и html-кодеры знают о нюансах создания качественного кроссбраузерного кода, но новички, у которых еще нет хорошего практического опыта верстки сайтов, часто набивают шишки и вспоминают родителей бывшего главы Microsoft. К сожалению, злость и обвинения – дело неконструктивное. Проблемы лучше решать, опираясь на опыт и шишки, желательно, чужие.

В этой статье я хотел бы рассказать об одной уловке при описании стилей CSS, позволяющей решить распространенную проблему: как сделать так, чтобы код верстки понимался только браузером Internet Explorer, но игнорировался всеми остальными «нормальными» браузерами. При этом JavaScript нам не понадобится, достаточно правок общего стиля CSS.

Читать полностью »

Растровые графические форматы для веб

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

1. JPEG: фотографии и красочные рисунки

Формат JPEG JPEG — очень популярный формат представления графики в интернет. Фотографии, картины, рисунки высокого качества с большим количеством цветов – все это сохраняется с расширением .jpg. Формат способен отображать 16,7 миллионов оттенков. Прозрачность и анимация не поддерживаются.

Качество изображения зависит от степени сжатия файла: чем больше ужат файл, тем хуже картинка, но зато меньше размер самого файла. Потому хранение фотографий в JPEG – это компромисс между качеством изображения и его размером. На сильно ужатом файле этого формата появляются размытые области, теряется контрастность. Качество картинки теряется с каждым новым сохранением файла в JPEG, потому хранить промежуточные результаты работы нужно в формате, который не влияет на качество изображения. Например, в PSD.

Изображения в формате JPEG, как и все остальные форматы для интернета, бесполезно архивировать – их размер не уменьшится, поскольку они уже являются архивом.

Читать полностью »