rotorweb.ru » Креатив

Подборка впечатляющих 3D flash-галерей

rotor — Mon, 04 Jan 2010 02:26:26 +0000

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

Основной акцент в подборке сделан на нестандартную подачу, тридэшность, крутящесть и прочие fun-штуки, которые в JavaScript-исполнении просто заставили бы ваш браузер надолго «задуматься» (специальный тест-драйв не проводил, но различные экспериментальные js-образцы на это намекают, что очень жаль).

Думаю, что многие из этих flash-фотогалерей могут отлично вписаться в дизайн промо или имиджевого сайта, там где самое (единственное) место для flash.

3D Grid Photo Gallery

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

Посмотреть демо и скачать можно здесь.

3D Curve Photo Gallery

Реактивная карусель с эффектом головокружения. Спрятана на том же сайте на этой странице.

PostcardViewer

Небрежная сетка подойдёт для создания чего-нибудь молодежного и не очень строгого.

Демо | Скачать

TiltViewer

Похожа на предыдущую, но всё упорядочено и добавлен эффект вращениея плоскости.

Демо | Скачать

Polaroid Gallery v. 1.01

Вполне себе обычная галерея, много раз встречалась подобная реализация на js. Попала в этот список из-за того, что поддерживает фотки с flickr и очень легка в настройке.

Демо/Скачать.

Flickr Widget

Наверняка многие «крутили» 3D облако тегов от Roy Tanсk, но не все знают, что есть похожий виджет, который использует фотографии с flickr. Всё, что вам нужно — это ввести адрес своего фида на этой странице и получить код.

Демо можно посмотреть, например, здесь.

Cu3er

Не совсем фотогалерея, скорее слайд-шоу, но штука очень впечатляющая. Лучше смотрите сами. Там же есть и расширенная инструкция по эксплуатации.

В статью намеренно не попали платные галереи и такие же инструменты для самостоятельного создания своих галерей (как этот) ввиду непопулярности платных сервисов в наших сетевых широтах :)

Если вас заинтересует нечто подобное на JavaScript, то могу поделиться в одном из следующих постов — в закладках полно подобных скриптов для 3D галерей и слайд-шоу.

* * *

Интересное в сети:

18 Методов и инструментов cжатия CSS.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Идеи для визиток: из онлайна в реальность

rotor — Fri, 06 Nov 2009 00:47:15 +0000

Какими должны быть визитки у веб-дизайнера? Этим вопросом я озадачился недавно, когда рисовал свои собственные. Такими же, как у всех? Или обязательно чтобы побольше красок и графики? Дизайнерские же, креатив должен взрывать.

Наверное, для дизайнера это самая сложная часть работы — создавать что-то для себя. Потому что есть тысячи вариантов, из которых нужно выбрать лишь один. И всегда кажется, что этот один не тот, не самый удачный.

Основными требованиями к визиткам были прямая ассоциация с вебом, или чтобы человек не задавал лишних вопросов, получая визитку в руки (в случае, если он не совсем в теме).

Модный нынче hand-made, зелёные завитушки и гранжевый стиль сразу же были отставлены в сторону, так как это идеи перенесённые из жизни на экран, а хотелось наоборот. Минимализм тоже не прошёл отборочный тур.

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

А решение, как обычно, лежало на поверхности долгое время, мозолило глаза — такое модное, всем знакомое (кто же его не крутил просто так, играя?) и часто используемое на блогах анимированное 3D-облако тегов. Просто, и раскрыло тему на 100%.

А дальше уже никому не интересные технические моменты и рождение формы посредством иллюстратора.

Результат:

Уже проверено. Работает.

* * *

Интересное в блогах:

Редизайн Байнета — новый социально-сетевой проект для дизайнеров. Инвестируем в блог или как потратить 100$. Всё крутится и летает на CSS3.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Опасная доступность usability

rotor — Wed, 20 May 2009 19:38:54 +0000

За последние несколько лет слово «юзабилити» (usability (анг.) — удобство использования) стало сверхпопулярным среди веб-дизайнеров, проектировщиков интерфейсов, блоггеров, сеошников, маркетологов и просто людей, интересующихся развитием интернет-технологий.

Хотите быть популярными среди вебмастеров? Почаще используйте в разговоре слово «юзабилити» :) Шутка с долей правды.

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

Сейчас в интернете достаточно информации (статьи, подкасты, скринкасты, вебинары, книги, отчёты об исследованиях и др.), чтобы заниматься самообразованием на эту тему, но как показывает жизнь, не все могут её правильно воспринимать, фильтровать, и тем более применять. На практике я столкнулся с двумя видами (классификация (диагноз?) моя, условная) «специалистов», которые могут разбавить работу над проектами неприятными моментами.

Юзабилити-«специалист»

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

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

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

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

Юзабилити — это командная работа.

Клиент-юзабилист

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

Почему-то, у меня получалось так, что эти представления не попадали в задокументированном виде в ТЗ, и выявлялись лишь на этапах утверждения макетов. Позиция-тест со стороны «продвинутого» заказчика: «Ты делай, я потом скорректирую».

Здесь ситуация тоже непростая. Мне недавно попался клиент, который пытался максимум информации вместить на экран до «линии сгиба». В основном это было требование убрать все «лишние и ненужные» отступы между блоками на странице.

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

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

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

Дизайнерам и разработчикам, желаю с достоинством отстаивать своё мнение и знания в холиварах с заказчиком.

Нехэппи энд

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

User Experience Russia — сообщество юзабилити специалистов (вебинары, обсуждения, библиотека).
Usability.by — сообщество специалистов по юзабилити, проектированию пользовательских интерфейсов и user experience Беларуси.
Хроники Юзабилити — блог о юзабилити и дизайне интерфейсов.
Эти пользовательские интерфейсы — блог на Хабре.
О юзабилити веб интерфейсов — блог Ярослава Бирзул.
Amazing Development — блог про юзабилити, проектирование интерфейсов и user experience.
и многие другие, которые я почему-то не дописал в этом список...

Удачи вам на пути самообразования.

* * *

Помучайте инфа :)

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

* * *

Сканер блогов

Ещё не участвуете в денежном конкурсе для веб-разработчиков? Есть шансы!

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Несколько красивых эффектов на JavaScript

rotor — Wed, 08 Apr 2009 22:54:08 +0000

Меня всегда больше интересовали различные визуальные возможности JavaScript, чем его «прямые обязанности». И в очередной раз, находя в сети эксперимент со зрительными js-эффектами, я старался его протестировать, применить в своих работах, или положить в закладки, до лучших времён.

Поэтому, поделюсь с вами некоторыми, еще не особо засвечеными интересными разработками с сайта piksite.com.

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

3D-карусель

Сейчас популярны различные 3D-эффекты, поэтому, фотогалерея Сarousel.us может прийтись по вкусу тем, кто хочет эффектно представить свои фото в Web. Живую демку можно посмотреть здесь. И пусть вас не пугает «дикая» скорость при движении мыши, её можно легко регулировать в настройках (файл config.php, параметры base и speed).

Скачать, посмотреть список доступных настроек и инструкцию по подключению, можно на этой странице.

mRotate

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

Скачать, настройки и установка здесь.

mParallax

В реализации, или внешнем виде эффекта mParallax, я лично не открыл для себя ничего нового, но от этого он не стал менее интересным. Если кто не в курсе, такой эффект состоит в том, что есть несколько слоёв с фоном, которые движутся с разными скоростями и в разных направлениях, в зависимости от ваших движений мышью. Как тут. При наличии фантазии, можно сделать что-нибудь очень даже интересное, например, как в шапке сайта dezignus.com.

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

Настройка, установка, скачать — всё здесь.

Думаю, что при наличии интересных идей для реализации, эти JavaScript-эффекты найдут себе достойное место на сайтах и в портфолио многих Web-дизайнеров.

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

* * *

Сканер блогов:

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

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Периодическая таблица шрифтов

rotor — Thu, 12 Mar 2009 09:34:23 +0000

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

Для каждого шрифта указаны семейство, имя создателя и год разработки. Авторство, насколько я понял, принадлежит squidspot.com.

Периодическая таблица шрифтов (1,6 MB, картинка кликабельна).

Как думаете, можно найти практическое применение этой табличке?

* * *

Сканер блогов:

Акция «Социалки в обмен на постовые» от Bormaley. Отлично подойдёт для людей, которым некогда заниматься раскруткой своих проектов.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Real Web Starz

rotor — Wed, 12 Nov 2008 00:20:58 +0000

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

Джеффри Зельдман, Дэн Седерходьм, Келли Гото, Дэйв Ши, Эрик Мейер, Молли Хольцшлаг, Энди Бадд и ещё два десятка имён и фамилий. Вам знакомы?

Тогда спешу поделиться с вами ссылкой на интересный проект happywebbies.com от студии nGenWorks, который покажет этих веб-джедаев с другой стороны.

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

Громких улыбок!

* * *

Сканер блогов:

Симпатичное меню с выпадающими кнопками на moootools. Ай, Лебедев! Секреты в портфолио.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Нет похожих статей.

3D в веб-дизайне

rotor — Sun, 09 Nov 2008 21:45:37 +0000

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

Насколько удачны эти подходы к дизайну, судить вам. Я же хочу поделиться несколькими ссылками из закладок на довольно интересные примеры сайтов в 3D-стиле.

Для наглядности и некоторой классификации, сгруппирую их по общим признакам.

3D элементы

Этот пункт скорее нужен для полноты описания, чем для реальных примеров. Сейчас с псевдо 3D элементами можно столкнуться практически на каждом сайте: вебдванольные объёмные кнопки, иконки, стикеры (плюс блики, тени и отражения) всё ещё популярны и нескоро уступят место другим модным тенденциям. Здесь я даже обойдусь без ссылок на примеры, почти:

Чистый стиль Web 2.0 на сайтe apple.com.

Подобные сайты вы без труда можете найти в любой из CSS-галерей.

Но все эти блики, тени и наложения лишь слегка имитируют трёхмерность на страницах, не особо влияя на наше представление о плоском пространстве в мониторе.

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

Банка с живительным цитрусовым напитком с сайта citrus-seo.com.

Тридэшная птичка-колибри с сайта colibri-cms.cz.

На мой взгляд, современно и довольно интересно.

3D навигация

Особенно смелые экспериментаторы уходят гораздо дальше простой псевдотрёхмерности и объёмных рисунков. Достаточно вспомнить про плагин wp-cumulus или посмотреть меню Neumont University:

Внешний вид плагина wp-cumulus для WordPress.

Навигационное меню на сайте neumont.edu.

Простое анимированное масштабирование элементов и изменение z-index, добавляет интересные эффекты и оживляет сайт.

3D дизайн

К 3D дизайну я отнесу сайты с интересными приёмами в макетах, нестандартными направлениями плоскостей, иллюзии трёхмерности... В общем, смотрите сами:

Сайт basilgloo.com.

Нестандартный дизайн acko.net.

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

3D madness

На что только не способно человеческое воображение и умелое использование flash-технологий. Несколько примеров совершенно нетипичных сайтов, которые используют трёхмерность в своём дизайне. Совершенно разные и в чём-то даже безумно красивые.

3D трансформации сайта bestiario.org.

Весёлые зверушки(?) на дереве ecodazoo.com.

Город будущего от plazmalab.com.

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

На этом все. Надеюсь, примеры выше вдохновят вас на создание чего-то подобного, красивого и нестандартного.

* * *

Сканер блогов:

Плюсы в сокращении с работы. Как подтолкнуть посетителя к регистрации? Обзор CMS Made Simple. Антикризисное письмо :)

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Устаревшие приёмы в веб-дизайне

Масштабируемые изображения

rotor — Mon, 27 Oct 2008 00:12:46 +0000

Хочется вернуться к одному из интересных приёмов CSS-верстки, но тем не менее так редко используемому — эластичной вёрстке. Точнее к тому, что в ней часто не дорабатывают, чтобы она стала действительно эластичной.

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

Для тех, кто не в курсе что такое эластичная вёрстка ссылки: раз, два.

Варианты масштабирования изображений с помощью CSS

Остановлюсь на тех вариантах, которые смог вспомнить в течение первых 15 минут или подсмотреть на западных сайтах. Варианты того, о чём буду писать, можно сразу посмотреть на демо-странице. Зажимаем Ctrl на клавиатуре и крутим туда-сюда колесо мыши, а также делаем ресайз окна браузера, чтобы увидеть результат.

Для тестирования не подойдут Opera 9 и Moziila Firefox 3, как и другие браузеры, в которых реализован полноценный pixel zoom. В них эти примеры отлично работают, но увеличение изображений по отношению к другим элементам в них происходит без наших усилий и доработок в вёрстке. Просто увеличивается вся страница сразу.

Способов динамически менять размеры изображений на веб-страницах всего два: через % или через em. Различие между ними в том, что при использовании процентов размер считается по отношению к родительскому контейнеру (в моём примере это окно браузера), а при использовании em – относительно размеров используемого шрифта.

Думаю, что HTML и CSS код для использования вы можете подсмотреть на той же демо-странице, я же остановлюсь только на плюсах, минусах и особенностях, присущих каждому подходу.

Используем тег img

На странице-примере это пункты 2 и 3.

Заметил одну интересную особенность, о которой не знал раньше. Если браузеру указать только один размер изображения (высоту или ширину) в относительных размерах, то он пропорционально высчитает второй. Отображение картинки будет без искажений, которые легко получить, если задать оба размера вручную, один из которых скорее всего испортит пропорции.

Если всё-таки видны искажения и автоматическая подгонка размеров не даст хорошего результата, можно попробовать сохранить картинку в Photoshop, но с разрешением большим чем 72 pixels/inch, стандартное для мониторов. Иногда помогает.

А чтобы не запутаться в цифрах при расчётах перевода px в em и наоборот, пользуйтесь em calculator.

Используем тег img, внутри тега div

Примеры номер 4 и 5. Лишние участки обрезаются с помощью overflow:hidden.

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

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

Ещё одна трудность связана с тем, что невозможно высчитать размер высоты div в процентах. Для этого нужно точно знать размер родителя, а в условиях динамического содержимого это практически нереальная задача. Поэтому лучше задавать для div абсолютную высоту картинки в px или примерные размеры в em.

Вставляем изображение в div фоном

Примеры 6, 7. Несколько лучший вариант, чем предыдущий.

Проблема с высотой div остаётся и здесь, но зато легко решается вопрос с размытым фоном. Можно использовать свойство background-position, чтобы контролировать положение главного объекта на фотографии.

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

Общее

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

Лично мне нравится вариант номер 2 для изображений в тексте и номера 6, 7 для фоновых украшений при различных вёрстках.

Напоследок пример того, как подход номер 2 может работать на эластичной странице вживую. На 22" мониторе при максимальном увеличении страница смотрится также хорошо как на 15".

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

* * *

Сканер блогов:

Ещё не читали про склоки на хабре? Вот официальная позиция TurboMilk. Переменные в CSS. Полезные ссылки на заметку SEO'шнику.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Смена дизайна по временам года

rotor — Thu, 04 Sep 2008 17:53:12 +0000

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

Сделано это спомощью простого PHP-скрипта, который меняет стилевые листы по сезонам года. Кто не догадался — их, соответственно четыре (весна, лето, осень, зима). Два варианта вы уже могли увидеть, на очереди ещё пара.

Такой переключатель можно добавить в любой блог или сайт на PHP (для примера я возьму WordPress).

Предыстория

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

Я встречал различные реализации: смена времени суток, часов, шапки сайта в зависимости от погоды, просто замена цветовой гаммы или всего дизайна сразу. Случайно или по желанию/клику пользователя.

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

Пусть лучше этим займётся PHP.

Реализация

Для начала, сделайте бэкап вашей темы, чтобы была возможность всё исправить, если что-то не получилось. Защита от дурака — дело рук самого дурака ©

Затем подготовьте и протестируйте четыре стилевых листа, соответсвенно по одному для каждой поры года (winterStyle.css, springStyle.css, summerStyle.css, autumnStyle.css).

Если это небольшие изменения, то написание стилей не займёт много времени. Я нарисовал всего лишь по две картинки и заменил цвета ссылок.

По возможности, протестируйте сайт локально, поочерёдно подключая стилевые листы. Затем залейте их в ту же директорию, где находится ваша WordPress-тема.

Дальше, если бы я был true-программистом, я бы посоветовал использовать такую функцию (PHP):

function seasonStyle() {
	$seasons = array(0 => 'winter', 1 => 'spring', 2 => 'summer', 3 => 'autumn');
	return $seasons[ floor(date('n') / 3) % 4 ];
}

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

function seasonStyle() {
    $date_time_array = getdate(time());
    $month = $date_time_array['mon'];
    switch($month) {
        case 1: case 2: case 12:
            $thisMonth = 'winter';
            break;
        case 3: case 4: case 5:
            $thisMonth = 'spring';
            break;
        case 6: case 7: case 8:
            $thisMonth = 'summer';
            break;
        case 9: case 10: case 11:
            $thisMonth = 'autumn';
            break;
        default:
            $thisMonth = 'summer';
    }
    return $thisMonth;
}

После копирования этого примера, проверьте правильность написания одинарных кавычек, они должны быть «прямого» вида.

Затем нужно скопировать эту функцию в файл functions.php мeжду , который находится в вашей теме.

И последнее, что нужно сделать — вызвать функцию в файле header.php в строке подключения стилевого листа (XHTML):

Чтобы проверить, всё ли работает, конечно, глупо ждать пока придёт следующий сезон года. Поэтому, временно закомментируйте две первые строки в функции seasonStyle () таким образом /* . . . */ и для проверки впишите вместо них (PHP):

$month = rand(1,12);   //случайное значение переменной для проверки работы скрипта

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

Важно: если что-то не работает, проверьте правильность указания пути к CSS-файлам!

После небольшой доработки скрипта, можете менять дизайн не только по временам года, но, при желании, и каждый месяц :)

Лучшие примеры того, что можно сделать с сайтом с помощью замены стилевого листа, смотрите на csszengarden.com.

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

* * *

Сканируем веб:

Подробное тестирование браузера Google Chrome.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Отчёт по эксперименту с CSS-галереями

rotor — Fri, 15 Aug 2008 11:04:14 +0000

Итак, прошло почти две недели с моего небольшого эксперимента с CSS-галереями. Можно подвести небольшие итоги и высказаться о последствиях.

Общие впечатления

Сразу скажу, что во многие галереи я просто не попал, но на сегодняшний момент и не получил отказа, возможно заявка ещё на рассмотрении.

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

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

Ещё один момент: больше шансов попасть в галерею имеют «навороченные» графикой дизайны. Чем больше у вас количества цветов на странице и меньше пустого пространства, естественно разбавленного хорошим вкусом, тем больше шансов оказаться на страницах CSS-галерей.

Время жизни добавленного дизайна на главной странице зависит от активности заполнения CSS-галереи новыми примерами работ. Хотя и со вторых, и с третьих страниц, куда отодвигаются «старые» примеры, люди продолжают идти.

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

Немного циферок

За прошедшие две недели посещаемость блога выросла, в среднем, с 70 до 150 посетителей в сутки. Хотя наблюдались скачки и до 400. В общем-то неплохо, для не особо популярного и известного проекта.

Приятно видеть, что с этих сайтов идут до 20% русскоязычных пользователй. Интересуются, значит, красотой и идеями.

Количество RSS-подписчиков тоже увеличилось на 22 человека, что не может не радовать. Постараюсь их не разочаровать в будущем качеством постов.

Теперь немного о переходах и поставщиках трафика (уники):

welovewp.com — 191.
cssnature.org — 178.
cssbased.com — 150.
csscookie.com — 68.
my3w.org — 48.
cssloggia.com — 27.
najdizajn.com — 15.
Остальные (ещё около 15 галерей) — до 10 каждая.

Вроде бы всё. Теперь буду ждать апа PR (у большинства галерей PR4), чтобы зафиксировать результаты беклинков.

Разведка закончена

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

P.S.: Приятно, что нигде не получал меньше «тройки» по пятибальной :)

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи: