Простая анимация для сайта средствами CSS
22.07.09 Секреты верстки сайтов
Самые красивые и яркие анимационные ролики для веб-сайтов создаются, конечно же, с помощью технологий Adobe Flash и Microsoft Silverlight. Но далеко не всем веб-сайтам нужны дорогостоящие и трудоемкие анимационные шапки, а меню на flash еще и очень плохо индексируются. Уже никого не удивляют акционные баннеры, иконки или графические меню, которые могут слегка меняться при наведении на них указателя мыши.
Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая анимация, реагирующая на действия пользователя, создается с помощью JavaScript или CSS. В этом уроке мы рассмотрим второй способ, т.к. анимация с помощью каскадных стилей имеет ряд преимуществ перед скриптовой анимацией.
Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:
Многие графические элементы на этом сайте, включая меню, меняют цвет или форму при наведении на них указателя мышки. Получается достаточно весело, оригинально и в то же время не утомительно. Рассмотрим подробнее, как это сделано, на примере пункта меню «english».
Бесплатно скачать коды урока интерактивной CSS-анимации
В раскрутке блога сегодня помогают:
Для того, чтобы правильно оценить стоимость и значимость ссылки, нужно правильно посчитать количество внешних ссылок на этой странице. Это позволит сэкономить немного денег на покупке ссылок или продать статью на бирже контента подороже.
Для того, чтобы правильно оценить стоимость и значимость ссылки, нужно правильно посчитать количество внешних ссылок на этой странице. Это позволит сэкономить немного денег на покупке ссылок или продать статью на бирже контента подороже.
Метки: css, flash, html, JavaScript, Silverlight, анимация, браузер, верстка, иконка, класс, код, создание, стиль
С чего начать изучение веб-дизайна
28.02.09 Веб-дизайн
Пролог
Хотел бы рассказать небольшую историю, которая подойдет как эпиграф к этой статье. Года два назад я искал DVD диск на раскладках. Нужен был сборник дизайнерских программ, в котором, помимо Adobe Photoshop, Adobe Flash, Adobe Dreamweaver и Adobe Illustrator, были бы и CorelDraw, и несколько программ для создания иконок и скриншотов… Лень было искать и скачивать все по отдельности из интернета, а затем записывать на диск.
Объяснив продавцу, что мне нужен диск для веб-дизайнера, я получил несколько сборников DVD. Списки программ в описании дисков повторяли друг друга, наклейки только были разные. Составляли сборники далекие от веб-дизайна люди, потому ничего подходящего не было. Отдав продавцу диски и сказав «спасибо», я собирался уходить, но парень меня остановил. Вероятно, он подумал, что я просто компостирую ему мозги и решил вывести меня на чистую воду. Он спросил, что именно меня не устраивает во всех его дисках. На что я ему терпеливо объяснил, что на каждом диске есть только часть нужных мне программ, а «на этом нет даже Фотошопа».
И тут парень засиял. С чувством собственного достоинства и с высоты своего дизайнерского опыта, он мне объяснил, что профессионалы сайты делают в Дримвивере. А остальные программы нужны для понторезов вроде меня. Он был так счастлив от переполнявших его знаний, что мне даже жаль было его прерывать и сообщать, что HTML-верстка сайта в Dreamweaver’е – это всего лишь один из этапов разработки сайта, далеко не первый и не последний.
Меня еще пару дней мучили угрызения совести, что я парню настроение испортил. Впрочем, может это подтолкнет его заняться самообразованием, а не продажей дисков на раскладке. По крайней мере, я свой вклад в его карьеру сделал, дальше уже ему решать.
Но вернемся к теме статьи. Итак, с чего начать изучение дизайна для веб, какие программы должен знать веб-дизайнер, что лучше учить углублено, стоит ли идти на курсы. Обо всем по порядку.
Метки: flash, html, Photoshop, Silverlight, web дизайн, дизайн, урок, флэш
Silverlight 2: альтернатива Flash от Microsoft
12.01.09 Веб-дизайн
Microsoft Silverlight 2.0 является конкурентом мощной и популярной технологии Adobe Flash. Компания Microsoft, по словам ее бывшего директора Била Гейтса, недооценила возможности интернета с точки зрения заработка денег. И теперь ей приходится догонять лидеров очень денежной сферы по продаже программного обеспечения. А сделать это будет не так чтоб просто – лидерам ведь тоже деньги нужны и останавливаться они не собираются.
Долгое время Flash был единственным решением для создания качественной сложной анимации. Флэшевые баннеры практически вытеснили своих gif-конкурентов, а скриптовая анимация была как раз тем исключением, которое только подтверждает правило. Гениальная разработка компании Macromedia приступила к завоеванию интернета еще во времена диал-апа, когда скорость загрузки сайта была гораздо важнее мигающей после загрузки анимации.
Метки: Adobe, flash, Microsoft, Silverlight, анимация
