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

Несколькими такими примерами, найденными на блоге tobypitman.com хочу поделиться в этом обзоре.

К слову, наибольшего вау-эффекта от просмотра можно ожидать только в webkit-браузерах (Chrome и Safari), так как анимация в примерах основана на (проприетарных) методах -webkit-animation-… В Firefox и Opera демки тоже вполне рабочие, но уже без «красивостей».

CSS3 jQuery style menu

Довольно незатейливое меню-закладки. Туториал и демо можно найти тут.

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

А с помощью jQuery пришлось бы писать как-то так.

Dynamic CSS3 Animated Accordian Menu

Код для примера и ссылка на демо на этой странице.

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

Pure CSS Sliding Image Gallery

И, наконец, самый красивый пример CSS-фотогалереи можно увидеть тут. Можно даже сказать, что это упрощённый вариант Galleria, но от этого не теряется привлекательность и применимость этой галереи.

P. S. : Целью поста было показать несколько примеров CSS3-анимации и насколько просто её реализовать без использования JavaScript. Некоторые из примеров уже сейчас вполне работоспособны (хоть и с оговорками) и, в ближайшей перспективе, их можно будет использовать в своих проектах.

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

На комментарии критиков: «Не работает в IE», реагировать не буду. Надоело. Пишите в Microsoft.

* * *

Постовой

В своем блоге Сосновский делится наблюдениями в Adsense.

* * *

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

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

1. Больше, больше эффектов c CSS3!
2. Практические примеры анимации и эффектов в CSS3
3. Баннер-уголок на jQuery

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

Собственно, разрабатывать и писать сам скрипт мне не пришлось, так, как нашёл уже готовое и работающее решение в блоге sohtanaka.com (там же подробное описание подключение скрипта к странице и демо).

+ / −

Плюсы: не нужен установленный в браузере flash.

Минусы (для меня не минусы, но все-таки): нужна библиотека jQuery; уголок не «шевелится», когда на него не наведён курсор. Нужен заметный дизайн, чтобы привлечь внимание.

Вредные советы

Я уже успел использовать в jQuery-баннер в одном из своих проектов, поэтому к написанному выше, добавлю пару своих рекомендаций.

1. Если будете использовать анимируемый уголок из архива, протестируйте его анимацию над разным фоном (фотографиями). Так, как у него есть полупрозрачная тень снизу (формат файла PNG-24), то при анимации через прозрачные участки верхнего уголка возможно просвечивание нижнего рекламного рисунка.

Уверен, что те, кто столкнутся — поймут о чем речь.

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

2. Если нужны другие размеры уголка, то нужно изменить значения width и height. Сначала в CSS: в #pageflip img и #pageflip .msg_block. Это начальное состояние уголка, до наведения. И затем в скрипте установить новые параметры «развернутого состояния» (по молчанию 307 и 319 px) и сбросить старые «неразвёрнутого».

3. Для адептов кода: CSS не пройдет валидацию, пока не удалите строку -ms-interpolation-mode: bicubic. Лично я не заметил разницы с этим параметром и без при анимации в Internet Explorer.

Все. Про уголки больше не буду.

Используйте на пользу!

* * *

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

В тему: плавное увеличение картинки при наведении курсора. SEO-откровения для новичков от Bormaley.

* * *

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

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

1. Как вставить угловой flash-баннер на сайт
2. Как вставить угловой flash-баннер на сайт 2 (кроссбраузерное решение)
3. CSS3-анимация вместо эффектов jQuery

Меня всегда больше интересовали различные визуальные возможности 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.

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

1. Эффект отражения с помощью JavaScript
2. ImageFlow — красивая фотогалерея на JavaScript и PHP
3. CSS3-анимация вместо эффектов jQuery

Можно считать этот пост продолжением предыдущего, так, как мне в почту прилетел с десяток писем от читателей, с просьбой найти способ показывать угловой flash-баннер в Internet Explorer. Поэтому пришлось слегка подкорректировать исходник.

Чтобы не изобретать очередной велосипед, при корректировке я использовал скрипт моих друзей с блога codeisart.ru. Любые адекватные замечания по работе скрипта с целью «как сделать лучше» только приветствуются.

Протестировано в IE6, IE7, IE8 Beta 1 (Beta 2 под руками не оказалось, но есть серьёзные подозрения, что и в нём будет работать), Mozilla 2, Mozilla 3, Opera 9, Safari 3, Google Chrome. Работает.

Обновленный скрипт качаем отсюда. Процесс подключения и настроек никак не изменился и подробно описан в прошлом посте.

* * *

Кстати, теперь меня можно найти и в твиттере.

* * *

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

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

* * *

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

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

1. Как вставить угловой flash-баннер на сайт
2. Баннер-уголок на jQuery
3. Кроссбраузерное выравнивание кнопок-изображений в формах

Возможно, вы ещё не знакомы с FLIR (Facelift Image Replacement), технологией замены стандартных шрифтов на сайте, которая может создать альтернативу технологии sIFR.

А примечательна эта технология тем, что работает на связке CSS, JavaScript, PHP и не использует Flash.

Как работает

При загрузке страницы, JavaScript, установленный на сайте находит теги, помеченные специальными CSS-классами и отсылает запрос на сервер, затем PHP-сценарий, подменяет текст в этих тегах автоматически сгенерированным картинками с нужным нестандартным шрифтом.

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

Установка

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

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

Плюсы

• лёгкая настройка
• не требуется поддержка плагинов в браузере (единственное требование, поддержка PHP GD library (библиотека для работы с графикой) на сервере);
• заменённый текст доступен поисковикам через атрибут alt;
• при отключенном JavaScript, выводится стандартный шрифт, установленный в стилях;
• автоматическое подгонка изображения под размер подменяемого шрифта;
• возможность выбора формата генерируемого изображения (GIF, PNG);
• при выделении и копировании текста и изображений, атрибуты alt копируются как нормальный текст.

Ну и сюрприз для блоггеров: существует плагин для WordPress.

Минусы

• наблюдается некоторая «косячность» работы в Opera, в частности, при копировании текста вместе с изображениями, текст из атрибута alt не копируется. Эту проблему разработчик обещал исправить в последующих билдах;
• проблема при рендеринге некоторых шрифтов, поэтому предварительно отображение следует протестировать локально.

Где использовать

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

* * *

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

Выравнивание изображений свойством vertical-align. Бесплатные инструменты для анализа и оценки сайтов

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



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

1. 7 правил эффективного оформления заголовков на сайте
2. Периодическая таблица шрифтов
3. Таблица соответствия размеров шрифтов в CSS
]]> http://rotorweb.ru/javascript/flir-eshhyo-odna-vozmozhnost-izbavitsya-ot-standartnyx-shriftov-na-sajte.html/feed 9 http://rotorweb.ru/javascript/imageflow-krasivaya-fotogalereya-na-javascript-i-php.html http://rotorweb.ru/javascript/imageflow-krasivaya-fotogalereya-na-javascript-i-php.html#comments Tue, 22 Jul 2008 23:18:34 +0000 rotor http://rotorweb.ru/?p=43

Cимпатичная галерея изображений ImageFlow, которая почему-то не попала в список «32 Flash и Javascript галереи» от dejurka.ru

Не буду долго томить, демоверсию смотрите здесь. Скачать рабочую версию можно отсюда (22 KB).

По заверению разработчика, галерея ImageFlow совместима с IE6+, Opera 6.0+, Firefox 2.0.0.9+, Safari 1.3.2+, Konqueror 3.5.7.

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

В принципе, вся документация про инсталляцию, настройку и использование ImageFlow понятно расписана на двух языках (немецком и английском), поэтому нет смысла переписывать её еще раз. Советую почитать FAQ, там есть полезные советы, например, как изменить цвет фона в скрипте или установить начальную фотографию.

Достоинства

Красивый внешний вид и дополнительная динамика на сайте. Легкая настройка. Поддерживается управление сменой фотографий не только перетаскиванием слайдера мышью, но и колесом прокрутки и кнопками «влево-вправо» на клавиатуре.

Недостатки

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

Где можно использовать

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

Для себя решил, обязательно прикрутить ImageFlow к какому-нибудь своему новому проекту :)

* * *

UPD

Обновленный адрес демо — http://imageflow.finnrudolph.de/

Документация

Скачать можно тут — http://finnrudolph.de/ImageFlow/Download

* * *

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

Как эффективно работать дома? FeedBurner: проверьте свои фиды, чтобы не терять «вес». Юзабилити и безопасность.

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



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

1. Несколько красивых эффектов на JavaScript
2. Эффект отражения с помощью JavaScript
]]> http://rotorweb.ru/javascript/imageflow-krasivaya-fotogalereya-na-javascript-i-php.html/feed 25 http://rotorweb.ru/javascript/skript-dlya-rotacii-teksta.html http://rotorweb.ru/javascript/skript-dlya-rotacii-teksta.html#comments Sun, 08 Jun 2008 12:10:10 +0000 rotor http://rotorweb.ru/?p=25

Простой по реализации, но интересный по постановке задачи. На мой взгляд, интересен тем, что текст находится не в js-массиве, а скрывается в слоях на странице с помощью JavaScript и CSS, тоесть полностью виден поисковыми ботами и доступен для индексации.

Писал не для себя, а в помощь отстающим студентам, поэтому претензии к реализации не принимаются :)

Несколько слов о реализации

Вообще, насколько мог, максимально расписал все в комментах листингов, если кто не разберется — пишите в комментариях к этому посту, объясню.

XHTML:

1 2 3 4 5

<div id="container"><!-- содержимое должно обязательно скрываться между тегами с id = "text + номер по порядку"--> <div id="text1">Tyler gets me a job as a waiter, after that Tyler’s pushing a gun in my mouth and saying, the first step to eternal life is you have to die.</div> <div id="text2">For a long time though, Tyler and I were best friends. People are always asking, did I know about Tyler Durden.</div> <div id="text3">The barrel of the gun pressed against the back of my throat, Tyler says “We really won’t die.”</div> </div>

По сути, содержание межде тегами <div>...</div>, может быть любым, а не только текстовым.

CSS:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<style type="text/css"> /* настройки по своему усмотрению */ body { color: #000; background: #fff; font: normal x-small/1.4em tahoma, verdana, sans-serif; } #container { width: 200px; height: 200px; border: 1px solid #000; }   /* правила ниже непосредственно относятся к скрипту */ #text1, #text2, #text3 { /* если элементов с текстом больше чем 3, их следует добавить сюда через запятую */ margin: 10px; display: none; /* изначально скрываем все блоки, потом они будут показываться с помощью js */ } </style>

JavaScript:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

<script type="text/javascript">   // настройки для скрипта, можно редактировать на свое усмотрение   var elements = 3; //количество div-элементов с текстом var time = 3; //задержка смены текста по времени в секундах   //тело скрипта, желательно без причины не редактировать *)   var currentText = 0; var color = 255; noElement = elements + 1; time = time*1000;   function textRotator () { currentText++; if (currentText == noElement) { currentText = 1; }   if (currentText == 1) { prevText = elements; } else { prevText = currentText - 1; }   var hide = document.getElementById('text'+prevText); hide.style.display = 'none';   var show = document.getElementById('text'+currentText); show.style.display = 'block';   setTimeout('textRotator()', time); }   window.onload = textRotator;   </script>

Работает в IE6+, Opera 9, Mozilla 2+, в остальных не тестил. Страница с рабочим примером тут.

Противопоказания

Работать не будет, если у пользователя в браузере отключена поддержка JavaScript. В этом случае используйте <noscript>...</noscript>, чтобы предупредить его о необходимости включения поддержки скриптов.

Применение

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

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



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

1. Вертикальное направление текста в CSS
]]> http://rotorweb.ru/javascript/skript-dlya-rotacii-teksta.html/feed 17 http://rotorweb.ru/javascript/effekt-otrazheniya-s-pomoshhyu-javascript.html http://rotorweb.ru/javascript/effekt-otrazheniya-s-pomoshhyu-javascript.html#comments Tue, 27 May 2008 08:43:53 +0000 rotor http://rotorweb.ru/?p=9

Путешествуя по сети, наткнулся на довольно интересный сервис, который позволяет создавать модный в эпоху Web 2.0 эффект отражения для изображений (эффект мокрого пола) с помощью JavaScript. В принципе, вся информация, как и собственно сервис, находятся на сайте cow.neondragon.net.

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

Подключение:

Во-первых, качаем сам скрипт отсюда. Весит он всего 5 KB, что конечно же только в плюс.

Затем подключаем .js к нашей страничке. Кто не в курсе:

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

Использование:

Далее, к тегу того изображения, которое мы собираемся «отзеркалить» приписываем класс «reflect»:

<img src="giraffe.jpg" class="reflect" width="100" height="100" alt="Giraffe" />

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

Настройка отражения:

Если Вас не устраивает полученный результат, то подстроить параметры отражения можно двумя способами:

1. Непосредственно в .js-файле можно настроить параметры высоты и прозрачности отражения:

1 2	defaultHeight : 0.5, //высота новой картинки-отражения defaultOpacity: 0.5, //прозрачность отражения

2. C помощью CSS (этот способ более гибкий, так как позволяет применять к разным изображениям разные параметры).

Здесь нужно просто приписать к названию класса нужное значение параметра и цифры (которые соответствуют значению параметра в процентах). Например, чтобы высота отражения составляла 33% от изображения нужно написать:

<img src="giraffe.jpg" class="reflect rheight33" width="100" height="100" alt="Giraffe" />

Также можно настроить и прозрачность (например 30%):

<img src="giraffe.jpg" class="reflect ropacity30" width="100" height="100" alt="Giraffe" />

Страничку с примерами можно посмотреть тут.

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

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



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

1. Несколько красивых эффектов на JavaScript
2. ImageFlow — красивая фотогалерея на JavaScript и PHP
3. Баннер-уголок на jQuery
]]> http://rotorweb.ru/javascript/effekt-otrazheniya-s-pomoshhyu-javascript.html/feed 4