Вот такой у меня куб:

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

Чем ближе к линии горизонта расположен источник света, тем больше длина тени. Позиция «солнца» по горизонтали и так понятна, поэтому комментировать тут нечего.

Я выбрал источник света справа, выше линии горизонта.

Расставляем направляющие от источника света к верхним дальним углам куба. Ближний к источнику света угол нас не интересует, поскольку он полностью освещен и тени отбрасывать не будет.

Далее, самое интересное. Нужно выбрать точку, на которой сойдутся земля и вертикаль от «солнца». Все зависит от того, где находится источник света.

Если источник находится очень далеко, например это солнце, то точка схода будет находиться на горизонте.
Если источник находится условно ближе горизонта, то точка схода будет расположена ниже линии горизонта.

Ещё нужно так же учесть:

Если солнце находится впереди, то точка схода должна находиться выше объекта.
Если солнце находится за спиной, то точка схода должна находиться ниже объекта.

Замечание: точка схода всегда должна находиться ниже источника света. Если конечно ваш куб не приклеен к потолку.

От точки схода к каждому углу принадлежащему нижней грани проводим направляющие.

В итоге получаются пересечения направляющих, которые можно соединить и получить итоговую фигуру. Осталось только выяснить, какие пересечения направляющих считать углами тени. Это определяется таким правилом:

Углами тени являются те пересечения, направляющие которых проходят через углы принадлежащие одному вертикальному ребру.

Вот такая тень в итоге получается. Это конечно чисто технический вариант, не буду заморачиваться с размытостями и рефлексами. Главное научиться геометрически правильно построить тень.

VectorDesigner

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

Доступные инструменты: прямоугольники, прямоугольники с закруглёнными углами, овалы, многоугольники, звёзды, кривые безье, а так же возможность автоматического конвертирования растровой графики в векторные кривые.

Заливка: без заливки, сплошная, градиентная (линейная, радиальная, гаусса), картинкой, монохромной картинкой.

Простые геометрические операции: сложение, вычитание, пересечение и операция «исключающее или».

Текст редактируется средствами MacOS X, но кроме того поддерживаются следующие возможности: расположение текста внутри фигуры и вдоль линии, сам по себе текст может иметь заливку на фоне, эффект тени, выравнивание.

Ко всем объектам можно применять эффект смешивания цветов (Blending Mode) и полупрозрачность. Поддерживаются слои и подключаемые/отключаемые фильтры.

Документы могут редактироваться только в трёх цветовых схемах: RGB, CMYK и Gray (хотя, что ещё нужно?).

Внимание!
Самая мощная фича на которую стоит обратить наибольшее внимание: встроенный Flickr browser. Но лучше всего объяснит его работу это видео.

Остальные видео-руководства расскажут об основных преимуществах программы.

Чего не хватает:

• Настройка градиента с несколькими ползунками;
• Возможность сдвига градиентной заливки и заливки картинкой внутри объекта.
• Более лёгкий способ редактирования сгруппированных объектов (например, при двойном щелчке «прыгать» внутрь сгруппированного объекта).
• Лучшая поддержка ai-файлов. Открывать-то открывает, но такие тормоза, что редактировать невозможно.
• Обводка для текста (сейчас можно только конвертнуть в кривые и тогда добавить обводку иначе обводится прямоугольная область вокруг текста).
• Не хватает более тонкой настройки текста (трекинг, кернинг, интерлиньяж).

Если бы все эти пункты были бы реализованы, я бы точно купил эту программу и снёс бы Adobe Illustrator. Если конечно она не станет дороже $100. Сейчас цена программы — $69,95.

Pixelmator

Тоже недоделанная альтернатива, но на сей раз Photoshop-а. Внешний вид программы несколько непривычен своей «тёмностью», но немножко поигравшись, можно привыкнуть. Из фотошоповского функционала не хватает стилей слоёв, а так почти всё (что необходимо рядовому пользователю или такому неприхотливому работнику, как я) присутствует: все базовые инструменты, режимы смешивания цветов как у слоёв, так и у инструментов, тонкая настройка градиентов, настройка цветов (HSB, контраст, уровни, кривые, цветовой баланс и др.), маски, фильтры и т. д.

Накидал буквально за 5 минут:

Если добавят стили слоёв, тоже перейду на него, ведь стоит всего $59.

LightZone

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

Было:

Стало:

Было:

Стало:

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

Профессионалам программа будет как нельзя кстати (если они уже её не пользуются), поскольку содержит такие стили и эффекты, добиваться которых с помощью того же Фотошопа пришлось бы гораздо больше времени.

Цена полной версии программы — $199.95. Внимание! Есть Windows и Linux версия!

Руководствуясь этим скринкастом можно легко научиться рисовать трехмерные объекты с простой линейной двухточечной перспективой в пакетах двухмерной графики.

Долго искал бесплатный софт для редактирования сего произведения, в итоге использовал Windows Movie Maker. Да-да именно его. Потому что он отвечал всем моим требованиям:

• бесплатность,
• нарезка материала,
• музыка,
• заголовки,
• субтитры по ходу фильма,
• поддержка русского языка.

Результаты конкурса «Чья Магда круче?»

Победил человек по имени sAmSon, который теперь в качестве приза может заказать у меня бесплатный логотип для своего блога. Прошу автора сего произведения связаться со мной через контактную форму.

Победитель

• Проходит по восьми слоям и изменяет им прозрачность,
• Экспортирует картинку в gif,
• Повторяет действие восемь раз с изменёнными значениями прозрачности для каждого раза. В этоге экспортируется восемь картинок.

Что нужно сделать вам?

• Скачайть action-файл и psd-файл.
• Action-файл киньте в папку [Adobe Photoshop folder]/Presets/Photoshop Actions
• В psd-файле восемь слоёв обозначеных номерами. Нарисуйте на каждом слое фрагмент иконки.
• Запустите Action.

Важно: перед запуском action’a убедитесь, что у вас на диске C: есть папка ajax_icon. Именно в эту папку будут экспортироваться готовые картинки. Если папки не будет или она будет неправильно названа, то экспорт работать не будет.

В итоге будет создано восемь файлов с названиями a1.gif, a2.gif … a8.gif. Из этих картинок вы можете сделать анимированный gif вашим любимым способом, будь то ImageReady, Photoshop CS3 или какая-нибудь другая программа.

Тем, кто не умеет создавать анимации в программах могу посоветовать online-генератор gif-анимаций — Gifninja.

Каждую такую иконку я создаю с помощью моего Action’a за пару минут.

Рисовал в Corel Draw, так что если захотите сами такое творить, то используйте векторные редакторы, там будет проще чем в фотошопе.

Одноточечная (прямая) перспектива.

При данной перспективе существует одна точка схода (vanishing point) на линии горизонта, куда сходятся все параллельные линии на рисунке. Предметы проецируются на основе этих линий. По мере удаления от смотрящего уменьшаются сами предметы. Все вертикальные и горизонтальные линии параллельны.

Двухточечная (линейная) перспектива

Такая перспектива в основном применяется в 3D играх. Сейчас правда всё больше и больше используется трёхточечная перспектива, чтобы добавить эффект высоты.
В данной перспективе предметы проецируются на основе линий сходящихся в двух точках схода находящихся на линии горизонта как правило за пределами листа.

Видео-урок, о том, как сделать куб в такой перспективе в Gimp.

Здесь иногда используется точка измерения (к сожалению, не знаю, как она называется по-английски, обозначается MP) для расчёта размеров правильных квадратных объектов.

Трёхточечная (воздушная) перспектива

Данный вариант используется в случаях, когда нужно показать высоту объекта относительно смотрящего. Причём смотрящий может находиться как снизу (если смотреть на здание с земли), так и сверху (если смотреть на здание с высоты другого здания или, например, вертолёта).

Четырёхточечная (широкоугольная) перспектива

Используется гибрид из двухточечной перспективы и ещё двух точек, соединяемых не прямыми линиями, а изогнутыми, причём, чем дальше от центра, тем больше изгиб.

Кстати говоря, мы тоже видим окружающий мир, немного искажённым по принципу подобной перспективы, просто, наш мозг привык «выпрямлять» искажённые параллельные линии, переданные нашими глазами. Фотоаппарат делает снимки, на которых мы можем убедиться, что линза фотоаппарата, как и глаз, который, по сути, тоже является линзой передаёт изображение со слегка закруглёнными стенами здания. Снимите здание обычным фотоаппаратом и попробуйте в любом графическом редакторе расчертить контуры здания. Увидите, что линии, которые казалось бы, должны быть прямые, на самом деле получаются слегка закруглёнными.

Пятиточечная (сферическая) перспектива

Гибрид линейной и широкоугольной перспективы. В центр сферы сходятся все прямые линии, а из четырёх сторон сферы исходят, можно сказать, меридианы и параллели.

У меня, конечно, не очень правильно получилось, но думаю, принцип вы поняли.

Шестиугольная (двойная сферическая) перспектива

То же самое что и сферическая, только отображаются так же предметы, находящиеся за спиной смотрящего.

Дополнительный материал:

• http://graphic.org.ru/hagan4.html
• http://demiart.ru/forum/index.php?showtopic=20342
• http://demiart.ru/forum/index.php?showtopic=14029
• http://www.artlebedev.ru/kovodstvo/101
• http://ru.wikipedia.org/wiki/перспектива
• http://www.termespheres.com/perspective.html

Вот такой кубик можно получить если делать его по всем правилам:

Прямой излом

Самый простой способ создать ломаный градиент в Photoshop – это применение стиля Gradient Overlay к слою с объектом. Настраивается градиент примерно так:

1. Открываете окно со стилями слоя и выбираете стиль Gradient Overlay
2. Устанавливаете линейный градиент
3. Выбираете цвета и растанавливаете ползунки примерно так:

В итоге получается так:

По краям выбраны основные цвета градиента. В центре переходные цвета но не очень сильного контраста соедены вместе – получается преломление. Оно и создаёт иллюзию излома поверхности.

Но этот излом очень небольшого контраста без содержимого в объекте и без фона, конечно же, ничего из себя не представляет. Поэтому попробуем используя стандартные эфекты Photoshop’a изобразить, что-то существенное.

Стеклянная кнопка

Для начала уясним, что же создаёт этот эффект “стеклянности”? А создают его два параметра: прозрачность и глянец.

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

Глянец создаётся очень просто: градиент от светло-серого к тёмно-серому с Blend Mode: Screen. Причём, чем светлее оттенки серого, тем ярче кажется освещение отражаемое от кнопки.

Наглядным примером может послужить создание кнопки на подобие используемых в Mac OS X. Для освоения этого простого урока вам понадобится всего пара минут и Adobe Photoshop.

Рисуем

1. Создаём новый документ (не важно какого размера). И заливаем его светлосерым фоном.
2. Создаём новый слой. Выделяем область как показано ниже (это увеличенное изображение, реальный размер 71х19)

   

   т.е. выделение должно быть закруглено, но для этого не используйте Select -> Modify -> Smooth, а используйте к примеру инструмент Rounded Rectangle Tool, чтобы нарисовать векторный путь, а потом его выделить или сделайте это с помощью Marquee Tool скомбинировав два закруглённых выеления по-краям и одно прямоугольное по-середине.

3. Заливаем выделение любым сплошным но контрастным с фоном цветом.
4. Убираем выделение (Ctrl + D). Дублируем слои два раза. В итоге должны получиться три слоя (кроме фона).
5. Верхний слой называем “Glance”. Средний – “Volume”. Нижний – “Button”. Верхний и средний слой пока скрываем.
6. Открываем Blending Options у слоя “Button” и устанавливаем Gradient Overlay. Цвета конечно же выбираются наугад, главное чтобы в итоге верхний цвет был более тёмным, а нижний более светлым и ярким.

   

   

   Получаем следующее:

   

7. Добавляем стиль Stroke и выставляем параметры как показаны ниже:

   

   

   Тем самым обозначаем контур вокруг кнопки обозначающий поверхность самого стекла, если смотреть на неё с направления касательной (помните геометрию? ), где верхняя часть будет немного освещена и будет иметь оттенок основного цвета кнопки. А нижняя часть будет освещена плохо, поскольку нижний контур находится с теневой стороны, поэтому для него можно выбрать серый цвет.

   

8. Добавляем стиль Drop Shadow. Небольшая тень от кнопки, тоже добавит иллюзию объёма.

   

   

9. Выбираем слой “Volume”. Влючаем его видимость. Открываем Blending Options. С самого начала ставим Fill Opacity на 0%.
10. Добавляем стиль Gradient Overlay:

    

    

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

    

    т.е. края у кнопки должны быть затемнены.

11. Ну и последнее: глянец. Показываем слой “Glance”. И изменяем его форму и расположение, чтобы получилось примерно так (увеличенное изображение):

    

12. Обрезаем нижнюю часть:

    

13. Устанавливаем Fill Opacity на 0%. Применяем стиль Gradient Overlay:

    

    

    Получаем глянцевый эффект:

    

14. Можно добавить надпись:
    Для Windows (Tahoma):

    

    Для Mac OS X (Lucida):

    

Конечно же в Web-дизайне урок можно использовать для создания горизонтального меню, но не переусердствуйте, не лепите эти кнопки куда попало. Ну а в интерфейсе такие элементы весьма типичны.

Готовая кнопка в psd-формате: mac_button.zip

Направление градиентов

Давайте сравним объекты с разными направлениями градиентов. Для этой статьи я разберу только два вертикальных направления.

Если у вас с ощущениями всё в порядке, то вы наверняка заметите, что:

• градиент с переходом цвета от тёмного к светлому (сверху-вниз) создаёт эффект вогнутости
• градиент с переходом цвета от светлого к тёмному (сверху-вниз) создаёт эффект выпуклости

Почему так происходит?

Всё очень просто. Мы же привыкли что свет в основном падает сверху (в смысле от солнца, луны или ламп), поэтому выпуклые предметы сверху будут освещены, а снизу – затемнены. Логично также, то что вогнутые предметы сверху затемнены, и снизу освещены источниками света.

Но всё это работает, только когда мы смотрим на объект прямо и без искажений линзы (хрусталик в глазах и есть линза, которая немного искажает наше видение). Поскольку монитор не может сам нам передать трёхмерное изображение чего-либо (если мы сами это не изобразим), а всего лишь показывает плоскую картинку, то прямоугольные объекты с градиентом мы воспринимаем только так как я описал выше.

Как применять градиенты в web-дизайне?

Первый градиент, например, может послужить отличным фоном для однотонных (и не только) объектов. Тем более если выбирать переход от какого либо оттенка синего к белому, то фон вашей страницы создаст эффект воздушной (или атмосферной) перспективы. При использовании такого градиента в качестве фона для основного контента со сплошным фоном придаёт прекрасный дистанционный эффект.

Второй градиент может быть использован для изображения кнопки на сайте. Такие элементы будут эффектно выглядеть на сплошном фоне. Кроме того, градиент такого же направления только с меньшим контрастом может быть и фоном для текстового блока, но здесь не стоит перебарщивать.

Как подобрать цвета?

Градиентная составляющая должна быть либо одного цвета, но с разной яркостью, либо не на много отличающимися оттенками.

Нельзя!

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

Вы можете сами убедиться в этом если посмотрите на эти примеры.

А сходственные?

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

Поигравшись с цветами, можно найти для своего сайта уникальный градиент. Пока всё, но это ещё не всё. Продолжение по градиентам следует.

Настроение было порисовать. Но вообще статья будет не о графике, а о коде.

События JavaScript

Те кто изучал JS знают, что в основном события пишутся внутри тэга как атрибуты и применяются к конкретному элементу. Например:


<div id="someblock" onmouseover="this.backgroundColor='#eee'; onmouseout="this.backgroundColor='#fff' ">-----</div>

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

Событие можно так же описать только в javascript коде.

• Или вызвать функцию выполняющую действия над объектом:

  
function MouseOver(){
.........
}
object.onmouseover = MouseOver


• Или создать тут же анонимную функцию и сотворить с объектом всё что хочется:

  
object.onmouseover = function(){
.........
}


В моём новоиспечённом блоге вы могли заметить меняющие цвет поля ввода. Очень часто начинающие программисты неправильно выбирают события для активирования поля. Они выбирают onclick. Но они забывают, что существует ещё кнопка [TAB], с помощью которой пользователь может переключаться по полям ввода постепенно заполняя форму. Событие onclick это щелчёк мышью. Чтобы изменять фон поля ввода при активации оного, следует использовать событие onfocus, а при деактивации – onblur.

Итак, чтобы всё было ажурно и всем было немножко веселее заполнять форму отправки комментариев, я написал код, который всем полям ввода, существующим на странице добавляет события и соответственно реакцию на эти события:


function add_focus(element){
element.onfocus = function(){
this.style.backgroundColor = "#FFF"
}
element.onblur = function(){
this.style.backgroundColor = "#ebebe4"
}
}



function Input_Live(){
var elements = document.getElementsByTagName("input")
for (i = 0; i < elements.length; i++){
if (elements[i].type == "text" || elements[i].type == "password"){
add_focus(elements[i])
}
}
var elem_txt = document.getElementsByTagName("textarea")
for (i = 0; i < elem_txt.length; i++){
add_focus(elem_txt[i])
}
}

Функция Input_Live(), получает все элементы по тэгам input и textarea, проверяет у тэгов input атрибут type, и если он равен "text" или "password", применяет функцию add_focus() к каждому объекту. Функция add_focus() добавляет к объекту обработку событий onfocus и onblur в качестве анонимных функций.

Обратите внимание: внутри анонимной функции мы можем обращаться к объекту напрямую через this. Это очень удобно.

Ну и осталось всего лишь запустить функцию Input_Live(). Это можно сделать или в body:


<body onload="Input_Live()">

Или в самом конце html-шаблона (если для Wordpress, то это footer.php) написать:


<script type="text/javascript">
<!--
getElements()
// -->
</script>


Кстати, пока статья не закончилась, хочу задать вопрос: Кто как делает дебаг? Я имею в виду получение значения функции или переменной или свойства объекта в JavaScript?

Я, например, делаю так:
У меня две функции:

1. Первая почти имитирует оператор echo в php:

   
function echo(str){
document.write(str)
}

   В нужном месте вызываем:

   
echo (something);


2. Вторая почти такая же, только помещает вывод в указанный объект:

   
function echoIn(obj, str){
var obj = document.getElementById(obj)
obj.innerHTML += str
}

   И вызывается так:

   
echoIn ("obj_id", something)

   где, obj_id - id элемента в который мы хотим вывести результат.

Поделитесь своими секретами. ))

Старые записи останутся (куда же они денутся) в том виде, в котором вы привыкли видеть блог-посты, но будут доступны в разделе Архив. Редизайн коснулся и их, и сделал посты более читабельными.

В скором времени планирую добавить отдельный раздел для портфолио, где будут представлены мои лучшие работы.

Теперь любой пост или статью журнала вы сможете занести в закладки любимого сервиса. У меня по этому поводу будет просьба, если вы не увидели иконки вашего любимого сервиса, сообщите об этом и я с радостью её добавлю.

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

Почему такой дизайн?

Я перешёл на 18-й размер шрифта. Дело в том, что в связи с глобальным увеличением размеров мониторов, есть резон увеличивать и размер шрифта и ориентироваться на владельцев мониторов с разрешением больше, чем 1024х768, совсем забыв про 800х600. Опять же, с 18 размера шрифта включается анти-альясинг во всех популярных браузерах.

И это я рекоммендую делать всем, ибо на мой взгляд, такое искуственное стимулирование пользователей убедит перейти на более новые модели с большим экранным разрешением, а стало быть развяжет руки девелоперам.

На главной панели меню в шапке сайта, вместе с логотипом, который я придумал ещё месяца три назад, и на дополнительных панелях внизу я использую глянец и отражение, как дань моде Web 2.0.

Вебдванольные звёздочки на панелях содержащие белые иконки достоточно понятно излагают суть модуля.

Облако тэгов получило горизонтальный вид, и я отделил относящиеся к журналу тэги от архивных блоговских.

Что характерно, в этом дизайне я использовал только png-формат картинок. И некоторые из них с прозрачностью. И заметьте, в Internet Explorer версий 5.5 и 6.0 работает идеально. В самом глючном популярном браузере прозрачность подключается с помощью особых фильтров, о которых расскажет статья “PNG в IE”.

Что такое PNG-формат?

PNG – это формат изображения, сочетающий лучшие черты GIF и JPG/JPEG, традиционных и более распрастранённых графических форматов, используемых в World Wide Web. PNG поддерживается практически всеми крупными и мелкими браузерами, которые сегодня используются.

• В JPEG формате обычно хранятся  фотографии, причём в зависимости от качества можно добиться либо большего сходства с оригиналом, либо уменьшить его объём для быстрого скачивания с интернета, также позволяет изображению быть значительно меньше размера файла, эквивалентного необработанному изображению (pixmap или Windows bitmap).Файлы JPEG не поддерживают прозрачность, но изображение может иметь до 16 млн. цветов. Метод сжатия использует аппроксимацию, для реальных фотографии.
  

  Аппроксимация или приближение — замена одних математических объектов другими, в том или ином смысле близкими к исходным. Аппроксимация позволяет исследовать числовые характеристики и качественные свойства объекта, сводя задачу к изучению более простых или более удобных объектов (например, таких, характеристики которых легко вычисляются или свойства которых уже известны). В геометрии рассматриваются аппроксимации кривых ломанными…

  via, Wikipedia

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

• GIF формат уменьшает размер файла оригинала, за счёт определения цветового шаблона в исходном изображении, создавая заархивированный вариант изображения. Это означает, что отображаемая картинка идентична исходной, но количество цветов ограниченно 256 уникальными цветами. GIF формат позволяет содержать ещё один дополнительный цвет со 100% прозрачностью (бинарная прозрачность). GIF чаще используется, когда изображение содержит большие участки одного цвета. GIF также поддерживает несколько графических слоев, а стало быть разрешает анимацию, принцип которой заключается в показе слоёв с определённым интервалом.
• PNG формат сжимает изображения так же, как GIF, но изображение может иметь до 280 триллионов уникальных цветов (если быть точным – 248 = 281 474 976 710 656.  Как правило, используются чуть более 16 млн. цветов). PNG также поддерживает простую бинарную прозрачность, и полный Alpha-канал, что означает, что каждый пиксел изображения на экране монитора может иметь один из 256 различных уровней прозрачности (или 65 тыс. уровней, если вам действительно это нужно). Файлы в PNG формате получаются примерно с таким же размером, как и у эквивалентного GIF изображения, если предположить, что они имеют одинаковое количество цветов. PNG не поддерживает несколько графических слоев, но предпологается их использование в формат MNG.

PNG в IE.

Microsoft Internet Explorer получил популярность не за, то что такой хороший, а за маркетинговую деятельность Microsoft, в результате которой компания интегрировала браузер во все версии Microsoft Windows. Антиглобалисты поздно спохватились когда IE стал самым используемым браузером в мире. Но, как говорится, поздно пить Боржоми, когда почки отлетели. Пришлось web-девелоперам подстраиваться под прихоти и так называемые “недекларированные фичи” этого браузера.

А теперь, собственно, решение вопроса связанного с прозрачностью в IE. В Internet Explorer 5.5 и 6.0 оказывается есть поддержка прозрачности, но работает она исключительно при использовании так называемых DX-фильтров.

Хитрый javascript-код, осуществляющий поиск картинок в html-коде и применяющий к ним соответствующий фильтр прислал мне мой бывший ученик Василий Жуков (растёт смена), который нашёл решение, оптимизировал его и использует в своих проектах. Спасибо ему за это.

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])
if ((version >= 5.5) && (document.body.filters) && version < 7){
	for(var i=0; i<document.images.length; i++)   {
		var img = document.images[i]
		var imgName = img.src.toUpperCase()
		if (imgName.substring(imgName.length-3, imgName.length) == "PNG") {
			var imgID = "id=\""+img.id+"\""
			var imgClass = "class=\""+img.className+"\""
			var imgTitle = "title=\"" + img.title + "\""
			var imgStyle = img.style.cssText
			var imgStyleNew = "display:inline-block;"
			if (img.align == "left") imgStyleNew = "float:left;" + imgStyleNew
			if (img.align == "right") imgStyleNew = "float:right;" + imgStyleNew
			if (img.parentElement.href) imgStyleNew = "cursor:hand;" + imgStyleNew
			var strNewHTML = ""
			img.outerHTML = strNewHTML
			i = i-1
		}
	}
}

Подключаете     код строкой:

<script defer src="pngfix.js" type="text/javascript"></script>

Где defer означает, что скрипт не будет генерировать какое-либо содержание (например, “document.write”), и браузер может продолжать чтение и вывод html-документа не отвлекаясь на скрипт.

Но это ещё не всё. Данный скрипт ищет в html-коде тэги <img> заключает их в тэги <span> и применяет фильтр уже непосредственно к ним. Но как быть, если вы используете png-картинку в качестве фона блочного тэга и описываете его в css файле? Здесь есть два варианта:

1. Копировать в описание каждого элемента фильтр. Например:

   div#element{
   	height: 100px;
   	width: 200px;
   	background: url(images/element.png);
   	background: expression("none");
   	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/element.png", sizingMethod="scale")
   }
   

   • Ширину и высоту указывать обязательно если вы хотите добавить дополнительный параметр sizingMethod
   • background: url(images/element.png); будет работать для всех.
   • background: expression(“none”); – отключаем любые скрипты применённые к background.
   • Подключаем фильтр и в параметре src указываем адрес картинки.
   • Параметр sizingMethod=”scale” указывает на то, как будет отображаться картинка. В данном случае, scale означает растягивание изображения по размеру элемента.

   Один ньюанс для Wordpress-themes-девелоперов – в src нужно указывать абсолютный путь, например: “/wp-conent/themes/my_theme/images/element.png”. Относительный не работает.

2. Использовать php-скрипт, добавляющий фильтр описаный в первом варианте в css-файл налету. Если найдёте такой скрипт или напишите, дайте знать. ))

Кстати о проектах таких как виртуальные десктопы, серверы хранения файлов, букмарк- и rss-трекеры… В принципе можно уже создавать копьютеры с операционной системой имеющей только интернет-браузер. Могу прогнозировать появление компьютеров в которых первым делом нужно ввести интернет-адресс виртуальной операционной системы. Не удивлюсь если они будут полностью совместимы с девайсами компьютера.

С развитием Web’a до уровня 2.0 произошли изменения, которые не только влияют на общественную жизнь и дальнейшую эволюцию Web, но и развивают самих людей. С повальной модой на блоги и социальные сети, в интернете возникла новая идея: не только воспринимать информацию, но её же создавать. С развитием блогинга резко возросло количество публикаций «на душу населения». Посетители читают, думают, комментируют,  обсуждают, соображают, выдумывают, учатся = развиваются. Авторы пишут, придумывают, отвечают на комментарии, думают, ищут, соображают, учатся = развиваются. Все умнеют. Все кто в этом варится.

Была бы моя воля (или вольность Всевышнего), перед «зачатием» блогинга запустил бы всеобщий (тотальный, глобальный – как хотите так и называйте) IQ-тест. И я бы доказал эволюционный рост умственного развится общества и зависимость его от Web 2.0, так что мне бы сам Дарвин позавидовал.