Сайт скидок по купонам в Петербурге!

Купоны на скидку в Петербурге!

Скидки на популярные развлечения и акции известных заведений и мест в СПб, суши, боулинг, фитнес - все на сайте www.PiterKupon.ru

Тратьте свои деньги с умом, пользуясь скидками от "Питер Купон"

Расскажите своим друзьям и получите реальные ДЕНЬГИ!

Зарабатывайте сами и дайте заработать друзьям.

Сайт Наноплит СПб

Новый сайт разработала веб студия "Пантеон" для компании "Наноплит СПб", которая занимается производством и укладкой тротуарной плитки в Санкт-Петербурге и Ленинградской области. Кроме того фирма занимается производством и монтажем железобетонны заборов, а также производством пенобетона.

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

Новая разработка Panteon WebStudio

Обновился сайт компании "Вермонд"! Фирма занимается производством и монтажом изделий из стекла в Санкт-Петербурге и ЛО. Среди продукции компании: Офисные перегородки, Цельностеклянные офисные перегородки, Перегородки из аллюминиевого профиля, Стеклянные двери, Стеклянные козырьки, Стеклянные входные группы, Душевые кабины и прочие изделия из стекла...

Посетите сайт компании для подробной информации:

http://www.vermondd.ru

Сайт разработан Panteon WebStudio

modChrome пример стандартного модуля

Пример стандартного модуля modChrome в Joomla! 1.5

Самый простой пример модуля который выводит содержимое модуля с заголовком или без, в зависимости от выбранной опции в админ. панели. Заголовок заключен в <h3>
К данному шаблону можно добавить свои собственные тэги и блоки по желанию

<?php
/**
 * @copyright Panteon WebStudio   Copyright (C) 2009 - 2011  All rights reserved.
 */

// no direct access
defined('_JEXEC') or die('Restricted access');

function modChrome_modcus($module, &$params, &$attribs)
{
?>
<?php if ($module->showtitle != 0):  ?>

<h3><?php echo $module->title; ?></h3>

<?php endif; ?>

<?php echo $module->content; ?>

<?php
}
?>

разработка корпоративного сайта под ключ

20 лучших веб шрифтов

Сейчас самое время повышать уровень дизайна своих работ с помощью веб-шрифтов

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

Свобода использования веб-шрифтов вне безопасного списка на всех ведущих ОС стала возможной, по большому счету, благодаря трем основным, почти одновременным технологическим факторам: широко распространенной поддержке правила @font-face в браузерах; появлению таких «шрифтохранилищ» как Typekit и Fontdeck; создание нового формата шрифтов — архивированного файла шрифта WOFF.

Спонсор перевода: Студия Айкен*

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

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

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



По этой причине почти каждый из двадцати ниже представленных шрифтов имеет свой платный вариант. Также представлены бесплатные версии из так называемого «шрифтохранилища» Typekit.

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

20. Avenir

Семейство: Sans serif
Дизайнер: Адриан Фрутигер (Adrian Frutiger)
Скачать или купить: Fonts.com
Дизайн Avenir’a разработан на основе вездесущего шрифта Futura (который был задуман как «Die Schrift für die Neue Zeit» — «Шрифт Нового времени»). Однако, по словам дизайнера Адриана Фрутигера, в шрифте Avenir заключено гораздо больше человечности. Несмотря на свою популярность в корпоративных кругах, его округлые геометрические формы и тонкая индивидуальность придадут дружественную улыбку даже самому серьезному содержимому.
Несколько лет спустя Акира Кобаяши завершила Avenir Next, шрифт, который стал усовершенствованной версией оригинала (в новую версию добавили курсив и капитель.)

19. FF Kava

Семейство: Sans serif
Дизайнер: Янон Кафисатз (Yanone Kaffeesatz)
Скачать или купить: FontShop
Бесплатная версия шрифта вышла в свет во времена, когда поддержка браузерами правила @font-face была широко распространена, чем и заслужила свою популярность среди дизайнеров. В результате чего молодой немецкий дизайнер Янон попал в поле зрения одного из самых крупных в мире производителей цифровых шрифтов — компании FontShop FSI, что позже привело к рождению профессиональной версии данного шрифта.

18. Times New Roman

Семейство: Serif (cистемный шрифт)

Дизайнер: Виктор Лардент (Victor Lardent), Стэнли Морисон (Stanley Morison)
Каждый, кто создает списки на подобие нашего, не забудет об этом шрифте. Вероятно, самый распространенный шрифт. Разработан дизайнерами Стенли Морисоном и Виктором Лардентом.

17. Bree

Семейство: Sans serif
Дизайнер: Жозе Скаглионе (José Scaglione), Вероника Буриан (Veronika Burian)
Скачать или купить: Typekit, Fontdeck
Полон индивидуальности, наглый и неряшливый, шрифт Bree может показаться годным лишь для заголовков, т.к. впервые мы увидели его на логотипе компании TypeTogether. Однако практика показывает, что Bree выглядит довольно изящно и в меньших своих размерах.
Bree является одним из немногих шрифтов, которые появились на свет в результате коллективной работы двух человек: Жозе Скаглионе и Вероники Буриан, студентов факультета Полиграфического Дизайна Британского Университета Reading. Который, в свою очередь, считается одним из лучших учебных заведений мира, подготавливающий талантливых полиграфических дизайнеров.

16. FF Trixie

Семейство: Печатная машинка
Дизайнер: Эрик ванн Блокланд (Erik van Blokland)
Скачать или купить: FontShop
Trixie — один из первых машинописных шрифтов. Станет незаменим в написании заголовков для грустных событий (аварий, стихийных бедствий и т.п). Автору удалось передать эстетику печати на машинке, что с уверенностью можно назвать достижением.

15. Centro Sans pro

Семейство: Serif
Дизайнер: Панос Василио (Panos Vassiliou)
Скачать или купить: Fontdeck
Большое количество супер-семейств позволяет дизайнерам создавать смешанные виды шрифтов, где serif переплетается с sans serif. Это делается для улучшения читабельности и внешнего вида букв, одновременно. Шрифт Centro Sans pro и является одним из представителей таких супер-семейств.

14. Fedra Sans

Семейство: Sans serif
Дизайнер: Питер Бильяк (Peter Bil'ak)
Скачать или купить: Typotheque
Еще один представитель супер-семейств, который начал свой путь в качестве корпоративного шрифта немецкой страховой компании Bayerische Rück. Разработанный в библиотеке шрифтов Typotheque с целью исправно служить людям, как на экране так и на бумаге.
Стоит заметить, что данный проект приостанавливался и запускался несколько раз: то заказчик решит отменить его, то начнет колебаться, то и вовсе украдут оборудование из офиса разработчика. Но благодаря дизайнеру Питеру Бильяку удалось не только закончить, но и значительно улучшить проект. В результате чего получился во многом универсальный шрифт.

13. Museo Slab

Семейство: Slab serif
Дизайнер: Жос Буйвенга (Jos Buivenga)
Скачать или купить: Typekit, Fontdeck, Font Squirrel
Оригинальная версия Museo крайне популярна среди дизайнеров и является на половину бесплатной. Шрифт принадлежит к формату Opentype. Имеет поддержку большого количества языков.

12. Clarendon URW

Семейство: Slab serif
Дизайнер: Роберт Бисли (Robert Besle), Герман Эйденбенз (Hermann Eidenbenz)
Скачать или купить: Typekit, Fontdeck, Font Squirrel
Классический британский шрифт с засечками (slab serif), без которого не обойдется ни один подобный список. Усовершенствованный Германом Эйденбенцом, он включает в себя несколько типов плотности и начертаний.

11. Proxima Nova

Семейство: Sans serif
Дизайнер: Марк Симонсон (Mark Simonson)
Скачать или купить: Typekit, Fontdeck
Невероятно гибкий и читабельный шрифт, является улучшенной версией Proxima Sans, используется во множествах сценариев. Имеет множество начертаний, что увеличивает количество шрифтов данного семейства до сорока двух.

10. FF Unit Slab

Семейство: Slab serif
Дизайнер: Эрик Спайкерман (Erik Spiekermann), Кристиан Шварц (Christian Schwartz), Крис Соверсби (Kris Sowersby)
Скачать или купить: FontShop
Шрифт успел полюбиться многим, не исключая меня. Может произвести кардинально противоположные впечатления на пользователя в различных своих плотностях. Что и делает его в каком-то роде уникальным шрифтом.

09. Calluna

Семейство: Serif
Дизайнер: Жос Буйвенга (Jos Buivenga)
Скачать или купить: Typekit, Fontdeck, Font Squirrel
Появился на свет в качестве эксперимента над ранней версией Museo Slab и Calluna и стал первым серьезным шрифтом в карьере дизайнера Жоса Буйвенги.
Как и другие шрифты Жоса, он наделен многими свойствами Opentype формата и имеет бесплатную версию, доступную для пользователей.

08. Ronnia Condensed

Семейство: Sans Serif
Дизайнер: Жозе Скаглионе (José Scaglione), Вероника Буриан (Veronika Burian)
Скачать или купить: Typekit
Самое подходящее слово для его описания — это универсальность. Лучше всего смотрится в заголовках. Используется в различных целях, поэтому вы можете увидеть его, как в заголовках новостей, так и в корпоративных отчетах предприятий.

07. Droid Sans

Семейство: Sans Serif
Дизайнер: Стив Маттесон (Steve Matteson)
Скачать или купить: Typekit, FontsLive, Webtype
Семейство шрифтов Droid было разработано дизайнером Стивом Маттесоном осенью 2006 года. Главной задачей дизайнера было создание читабельного и качественного шрифта, в первую очередь, для мобильных телефонов. Позже шрифты этого семейства были оптимизированы под использование в меню различного софта, браузеров и т.п.

06. FF Tisa

Семейство: Serif
Дизайнер: Митя Миклавчич (Mitja Miklavcic)
Митя Маклавчич создал шрифт для удовлетворения технологических и эстетических требований современных журналов. Он поставил перед собой цель разработать более мягкую и динамичную версиию шрифта. Благодаря невысокому контрасту своих очертаний Tisa великолепно читается даже в самых малых размерах, будь то на страницах книг, или, напечатанный лазерным принтером с низким разрешением.

05. FF DIN

Семейство: Sans serif
Дизайнер: Альберт-Ян Пул (Albert-Jan Pool)
Скачать или купить: Typekit, FontShop
Современный шрифт, разработанный голландским дизайнером. Аббревиатура «DIN», в переводе с немецкого означает «Немецкий Институт Нормирования». Изначально использовался как текст на дорожных знаках и номерах квартир. Но вот уже на протяжении многих лет его сугубо деловые геометрические формы украшают немецкий веб-дизайн. В 1995 году был обновлен Альбертом-Яном Пулом, обновление включило в себя больше стилистических вариантов, а также новый формат DIN Rounded.

04. Helvetica

Семейство: Sans Serif
Дизайнер: Макс Миедингер (Max Miedinger), Эдуард Хоффман (Eduard Hoffmann)
Скачать или купить: Fonts.com
Кажется, невозможно обсуждать предмет типографии без упоминания Helvetica. Шрифт заслужил статус легенды благодаря тому, что его использует чуть ли не каждый дизайнер в мире. Его имя и стиль известны общественности.
Helvetica был разработан, чтобы создать конкуренцию шрифту Akzidenz-Grotesk, и его первоначальным названием было — Die Neue Haas Grotesk. Шрифт олицетворяет Швейцарский стиль графического дизайна из далеких 1950-ых. Но его широкое применение во всех формах дизайна привело к тому, что он в некоторой степени «приелся», поэтому и было разработано еще несколько его под-форм, таких как Arial. Тем не менее, он остается современной классикой.

03. Alternate Gothic No.1

Семейство: Sans serif
Дизайнер: Морис Фуллер Бентон (Morris Fuller Benton)
Скачать или купить: Fontdeck
Фантастический шрифт для написания заголовков. Alternate Gothic и его варианты остаются чрезвычайно популярным выбором для тех, кто нуждается в нелицеприятном, почти наглом шрифте. Четкий при относительно малых размерах. Являясь частицей американского индустриализма, выглядит великолепно и в цифровую эпоху.
Стал чрезвычайно популярен после того как Студия дизайна «The League of Moveable Type» создала его обновленную версию с открытыми исходниками.

02. FF Meta Serif

Семейство: Serif
Дизайнер:: Кристиан Шварц (Christian Schwartz), Эрик Спайкерман (Erik Spiekermann), Крис Соверсби (Kris Sowersby)
Скачать или купить: Typekit, FontShop
Эрик Шпикерман описывает свое семейство Meta как «приближенное к классике», и при этом откровенно скромничает, потому что шрифт Meta действительно является классикой, особенно версия без засечек. Это авторитетный шрифт, который великолепно работает с различными сценариями.

01. Georgia

Семейство: Serif
Дизайнер: Мэтью Картер (Matthew Carter)
Скачать или купить: Typekit, FontShop
Что? Системный шрифт во главе рейтинга? Как бы в это не было сложно поверить — Georgia является любимцем людей, работающих в сети. Возможно ответ кроется в том, что он был разработан в большей мере для «экрана» нежели для печати, а может быть, потому, что сумел воплотить в себе бесконечную красоту и понятность благодаря своей простоте.
Чрезвычайно четкий при малых размерах и величественный в своем курсивном варианте, Georgia подтверждает свою ценность, несмотря на изобилие альтернатив, и напоминает, что иногда, лучшие инструменты находятся прямо у нас под носом.

Впервые эта подборка была опубликована в .net Issue 208

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

P.S. Для кого интересны только кириллические веб-шрифты, посмотрите вот эту подборку: lyncis.info/en/post/274

CSS3 градиенты

Демо тут

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

Основная идея метода заключается в следующем (CSS3 Images spec) — если несколько градиентов имеют одинаковые позиции происходит резкий переход цвета. Например, градиент для горизонтальных полос будет таким:

background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: -o-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);

Почему мы используем « transparent», а не фактический цвет? Для гибкости. А «background-color» служит для нескольких целей: он устанавливает цвет для полосы и служит основным цветом в браузерах, не поддерживающих свойства градиент. Для контроля размера можно использовать «background-size»:

-webkit-background-size: 50px 50px;
-moz-background-size: 50px 50px;
background-size: 50px 50px;

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

background-color: white;
background-image: 
    -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5))),
    -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, rgba(200, 0, 0, .5)), to(rgba(200, 0, 0, .5)));
background-image:
    -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image:
    -o-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    -o-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));
background-image: 
    linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)),
    linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5));

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

background-image:
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #555), color-stop(.25, transparent), to(transparent)),
    -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #555)),
    -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #555));
background-image:
    -moz-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    -moz-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    -moz-linear-gradient(45deg, transparent 75%, #555 75%),
    -moz-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: 
    -o-linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    -o-linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    -o-linear-gradient(45deg, transparent 75%, #555 75%),
    -o-linear-gradient(-45deg, transparent 75%, #555 75%);
background-image: 
    linear-gradient(45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(-45deg, #555 25%, transparent 25%, transparent),
    linear-gradient(45deg, transparent 75%, #555 75%),
    linear-gradient(-45deg, transparent 75%, #555 75%);

Если вы знаете другие интересные решения, созданные с помощью CSS3 без использования картинок, напишите о них в комментариях. Спасибо.

CSS3 - кроссбраузерное использование border-radius, box-shadow и градиентов

Продолжая цикл статей «CSS3 сейчас!» (Первая статья — CSS Transitions), хотелось бы рассказать об анимации средствами CSS3, а конкретно — @keyframe и animate. Так же, в статье мы затронем свойства opacity и цветовую модель rgba(), кроссбраузерное использование border-radius, box-shadow и градиентов.

Keyframe

В настоящий момент поддержка такой анимации существует только в браузерах на базе WebKit — Chrome и Safari. Но тема настолько интересна, что стоит её рассмотреть — ведь будущее не за горами, и скоро вслед за Хромом подтянутся и другие браузеры.

Первум пунктом в создании CSS анимации идёт создание keyframe'ов (ключевых кадров). Вообще, Keyframe представляет собой набор правил, которые будут применяться в течение анимации. можно провести грубое сравнение keyframes с функциями — сначала мы объявляем ключевые кадры, и затем вызываем эту анимацию в любом месте CSS.

Сделаем пример простейшей анимации — при наведении на мячик он начинает прыгать.
Мячик:

#ball {
 width: 60px;
 height: 60px;
 border-radius: 30px;
 background: #f00;
 position: absolute;
 bottom: 0;
 }

Теперь создадим ключевые кадры:

@-webkit-keyframes bounce {
 0% { bottom: 0; }
 50% { bottom: 100px; }
 100% { bottom: 0; }
 }

Сначала мы задаем имя нашей анимации — в примере это будет «bounce». Затем мы описываем ключевые кадры анимации:
0% { bottom: 0; } — в начале мячик находится на исходной позиции;
50% { bottom: 100px; } — в середине анимации мячик достигает максимальной высоты;
100% { bottom: 0; } — к концу анимации мячик падает на исходное место.

Создаем анимацию:

#ball:hover {
 -webkit-animation: bounce 1s infinite ease;
 }

Этим кодом мы задаем анимацию при наведении курсора на мяч. Порядок следующий: <название нашего keyframe> <время анимации> <количество итераций> <временная функция>.

Готово! Наш мячик скачет, аки колобок! А теперь посмотрите на этот пример. Комбинация box-shadow и keyframes даёт нам замечательный эффект подсветки формы для акцентирования внимания. Его можно использовать, например, при проверке форм для подсветки ошибочных полей.
Код пульсирующей формы:

@-webkit-keyframes pulse {
 0% {
 -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
 }
 50% {
 -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.9);
 }
 100% {
 -webkit-box-shadow: 0 0 20px rgba(200, 50, 50, 0.2);
 }
}

form input[type="text"]:focus {
 -webkit-animation: pulse 1.5s infinite ease-in-out;
}

В коде заметен обещанный rgba(). Как многим уже стало ясно, это цветовая модель RGB + альфа-канал, что позволяет нам задавать полупрозрачность там, где это требуется.

Opacity

А вот это свойство уже можно использовать на всю катушку — оно работает во всех браузерах, кроме нашего любимого. Правда, для IE есть следующий фикс:
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
Вот пример полупрозрачной кроссбраузерной кнопки:

.foo {
 opacity: 0.5;
 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
}

Для тех, кто еще не знает — есть замечательная вещь CSS3Pie — она позволяет нам использовать закругленные углы, тень и градиенты уже сейчас и абсолютно кроссбраузерно: IE 6-8, Chrome, Safari, Mozilla, Opera! Пример кроссбраузерного использования всех этих свойств:

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url(/PIE.htc);

CSS3 transition-свойства

CSS3 и HTML5 развиваются всё быстрее и быстрее, браузеры начинают поддерживать всё больше новых фишек и плюшек. В связи с этим, мне хотелось бы заглянуть в наш будущий рай верстальщиков и сделать цикл обзорных статей по новым плюшкам и фишкам этих технологий.
В этом цикле мне хотелось бы рассмотреть такие свойства CSS3, как transition, animate, opacity и модель rgba().

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

Часто можно услышать от многих веб-дизайнеров слова «Я уже не могу дождаться, когда же можно будет использовать CSS3...». А между тем, использовать его можно уже сегодня. Да, использование CSS3 для критичных моментов сайта сейчас невозможно. Но использовать его для добавления мелких, некритичных для проекта деталей вполне реально, можно и нужно.


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

В данной статье мы рассмотрим CSS-свойство transition.
Все примеры приведены для движка webkit. Чуть ниже мы рассмотрим кроссбраузерность этих методов.

Transition

W3C даёт следующее определение transitions:

CSS Transitions allow property changes in CSS values to occur
smoothly over a specified duration.

CSS Transitions позволяют назначать изменения свойств CSS плавно и в течение некоторого времени.

Давайте начнем с самого простого примера — добавим плавный переход фона ссылки.
Тестовая страничка
Классическая реализация:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

При наведении мышки на ссылку фон поменяет свой цвет со светло-синего на тёмно-синий, а цвет шрифта — с черного на белый. Обычная ситуация.
Теперь добавим плавную смену фона, используя CSS transitions:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition-property: background;
 -webkit-transition-duration: 0.5s;
 -webkit-transition-timing-function: ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Теперь наш фон плавно меняет цвет в течение полусекунды! Как и с прочими свойствами CSS, мы можем объединить все transition-свойства в одно:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: background 0.5s ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Теперь добавим плавное изменение цвета шрифта:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: background 0.5s ease, color 0.3s ease;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

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

-webkit-transition: background 0.5s ease;
-webkit-transition: color 0.3s ease;

на

-webkit-transition: all 0.5s ease;

Теперь Transition-эффект будет применяться ко всем изменяющимся при событии свойстам и с одинаковыми параметрами — 0.5 секунд, ease-эффект.

Так же, мы можем добавить задержку для эффекта:

a.foo {
 padding: 5px 10px;
 background: #69f;
 color: #000;
 -webkit-transition: all 0.5s ease;
 -webkit-transition-delay: 0.5s;
 }
a.foo:hover {
 background: #33f;
 color: #fff;
 }

Теперь наша анимация будет работать через полсекунды после наведения мышки.

Применять свойство transition можно к чему угодно — фону, цвету, длине, размеру шрифта и т.д. В основном это свойства, задающие цвет или свойства, которые могут быть выражены в единицах длины (px, em, ex) или в процентах. В качестве события мы так же можем использовать псевдоклассы :focus и :active. Вообще — использовать transition можно с любыми селекторами.

Итоговая сводная таблица:

transition-property	Свойство, к которому применяем анимацию	Практически любое свойство CSS: color, background, width, font-size и т.д.
transition-duration	Длительность анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.
transition-timing-function	Временная функция, используемая для анимации	ease, linear, ease-in-out, ease-in, ease-out, cubic-bezier
transition-delay	Задержка анимации	Время в секундах: 0.5s — полсекунды, 60s — одна минута и т.д.

Браузеры

Chrome, Safari, Opera 10.5+, Firefox 4+
В тексте статьи использовались правила с префиксом только для WebKit-браузеров. Не забывайте добавлять в ваших проектах префиксы вендоров -moz- и -o-. На страничке-примере можно подсмотреть кроссбраузерный код (без IE, само собой).

Страничка с примером: Клац.

Если статья найдет своих заинтересованных читателей, в следующем посте мы рассмотрим keyframe-анимацию, свойство opacity и модель rgba(). Спасибо за внимание!

Хаки CSS

В этой статье я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

Я создал css файлик, который в теле документа будет отображать или скрывать div`ы, соответствующие браузеру, таким образом можно легко отследить, все ли ок с хаком.

.browser { position: absolute; top: px; right: px; z-index: 2; padding: 10px }
.browser div { display: none }

/* Все вменяемые браузеры */

*:lang(ru) #lightMOD { display: block } /* Хитрый селектор ≈ все современные браузеры ≈ не IE6 или IE7 */
html>/**/body #lightMOD { display: block } /* Вживленный комментарий ≈ все современные браузеры ≈ не IE6 или IE7 */

/* IE */

* html #lightIE6 { display: block } /* Лояльность разбора ≈ будет работать в IE6 и в режиме quirks в IE7 */
*+html #lightIE7 { display: block }

body div.stopper {
   width: 100%;
   max-width: 1100px;
   min-width: 900px;
   *width: expression(document.body.clientWidth > 1100? "1100px": document.body.clientWidth < 900? "900px": "100%"); /* оверрайд одного свойства ≈ в данном случае это эмуляция min- и max-width */
}

/* FireFox */

@-moz-document url-prefix() {
  
   /* для всех FireFox, вобщем-то можно и без этого уже, просто писать стиль, благодаря обрамлению, обрабатываемому только FF */
   #lightFF, x:-moz-any-link { display: block }
  
   /* главное ≈ ошибиться в регистре, работает только для ID */
   #lightFF2[id=lightff2] { display: block }
  
   /* Firefox 3 имеет новый селектор :default. Алярм, без обрамления IE поймет эту конструкцию */
   #lightFF3, x:-moz-any-link, x:default { display: block }
  
}

/* Opera 9.5 */

/* not после @media не обрабатывается ничем, кроме Opera 9.5 ≈ видимо так писать либо нельзя, либо не все еще ввели поддержку такого формирования, использовать с умом, не писать внутри потенциально кривых вещей, неровен час через ~полгода еще кто-то это сможет обрабатывать */
@media not all and (-webkit-min-device-pixel-ratio) {
  
   #lightO95 { display: block }
  
}

/* Opera 9.2 */

/* Opera эту конструкцию не поддерживает, но Opera 9.2 по неизвестным причинам все равно обрабатывает ≈ тоже рекомендуется быть внимательным */
@media all and (scan: progressive) {
  
   #lightO92 { display: block }
  
}

/* Safari */

/* Первая конструкция ≈ против Opera 9.5, которая понимает вторую, а вторая ≈ против Opera 9.2, которая понимает первую. Верх извратства :) Вобщем-то безопасная конструкция, т. к. 9.2 уже не будет эволюционировать и явно не сможет обработать :first-of-type, а -webkit- ≈ проприетарное свойство и обрабатывается Opera 9.2 скорее по ошибке, что следует из отсутсвия поддержки в 9.5 */
/* Safari понимает обе, поэтому хак работает */
@media all and (-webkit-min-device-pixel-ratio:0) {
  
   body:first-of-type #lightSF3 { display: block }
   /* вместо :first-of-type можно еще использовать :nth-of-type(1) ≈ он для Safari 3.1 */
  
}

Код я более-менее подсветил...

Хаков для IE8 пока либо нет, либо он действительно будет хорош ;) в чем, правда, лично я сомневаюсь... MS собираются вводить свойства -ms- (одно из них -ms-box-model я уже даже воочию видел). Вобщем-то путь верный ≈ такие "грабли" самые безопасные.

Посмотреть в действии можно на http://www.dis.dj/css/ (справа висит блок с выводом, какие хаки подействовали).

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

Все хаки можно разделить на несколько категорий:
1. Хаки в чистом виде ≈ использование лояльностей в обработке CSS правил парсерами браузеров (например ≈ *width для IE)
2. Намереные дополнения CSS, которые другой браузер не поймет чисто в принципе (особенно здесь рулит Mozilla со свойствами -moz- и офигенной штукой @-moz-document, которая позволяет не боясь ничего писать правила только под Mozilla)
3. Особенности поддержки браузерами нововведений CSS3 и иже с ними. Что касается IE6 ≈ он и часть CSS2 не понимает (дочерний селектор E>F например)

Первая группа хаков ведет к невалидному CSS и вобщем-то безопасна к применению. Кривой код обрабатывать нужды нет, поэтому вменяемые браузеры как пропускали такие вещи, так и будут. По крайней мере, раз уж сами MS не обрабатывают большинство хаков в режиме стандартов даже 7го IE, то можно не опасаться за их (хаков) будущее.

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

Третья группа ≈ самый коварный и нежелательный пункт. Конструкции CSS Media Query ≈ это официальный CSS3, который рано или поздно будут поддерживать все браузеры. Различные хитрые селекторы тоже официально рекомендованы. Поэтому может настать момент, когда хак под один браузер будет интерпретироваться другими тоже. Яркий пример ≈ Opera и Safari. Оба имеют частичную поддержку и отличаются в мелочах, правда благодаря которым стало возможно разделить правила для них. Иногда в этот вариант полу-хаков намеренно вводятся ошибки или неточности синтаксиса (как в случае с Opera 9.5). Это, конечно, убережет, в какой-то мере, от новых версий, но все равно не очешь хороший путь.

Личное мнение автора: хаки ≈ зло, чем их меньше ≈ тем лучше. Использовать надо только для IE6 когда надо реализовать то, что все умеют, а он нет (прозрачность, min-max-width и т. д.).

Аудит сайта, перед раскруткой и продвижением!

Позволим себе небольшое лирическое отступление, весьма важное для понимания цели SEO-аудита...

Перед взлетом и посадкой пилоты самолета попунктно проходят "карту контрольной проверки" - check list. Убедиться в технической исправности всех систем и штатном положении всех переключателей, указателей, рукояток и прочих органов управления жизненно необходимо. До начала девяностых годов прошлого века карты контрольной проверки были обычными распечатками, бумажками. Сами понимаете, пилоты были вольны игнорировать их - точнее, проходить по памяти. Но после чудовищной катастрофы рейса 255 авиакомпании Northwest Airlines (16 августа 1987 года в аэропорту Детройта) чеклисты по рекомендации Международной Авиационной Комиссии стали встраивать в компьютерные системы управления. Пилотам стало намного сложнее обойти их сознательно, а ошибка типа "отвлекся и забыл" теперь практически исключена. Что же произошло? Пассажирский лайнер N312RC McDonnell Douglas MD-82 (эта модель до сих пор летает, всего было произведено почти 1200 таких воздушных судов) разбился при попытке взлететь. Несмотря на исправность двигателей, самолет из-за нехватки подъемной силы не смог набрать высоту. Он задел крылом опору линии электропередач, загорелся и рухнул. Погибло 156 человек, включая двух случайных жертв на земле. Чудом выжил единственный пассажир - четырехлетняя девочка (ее родители и шестилетний брат погибли).

Причиной катастрофы стала ошибка пилотов. КВС Джон Маус и второй пилот Дэвид Доддс пропустили один из этапов взлетного чеклиста и не проверили состояние закрылков и предкрылков. Эти элементы механизации крыла предназначены для улучшения несущей способности крыла при полёте на малых скоростях и увеличения допустимого угла атаки. Из-за невнимательности пилотов, находившихся в стрессовой ситуации, крылья рейса 255 не были переведены в нужную (взлетную) конфигурацию: у него не было шанса нормально взлететь.

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

Чеклист SEO-аудита

• Уникальность контента. Интересно, что эту проверку нужно проводить даже в том случае, если вы знаете, что писали контент самостоятельно. Изначально оригинальные тексты могут быть "утянуты" другими сайтами. При этом, к сожалению, не факт, что поисковая система присвоит вашему сайту статус первоисточника. Методики и инструменты проверки контента на оригинальность, а также способы защиты текста от копирования были приведены в выпуске нашей рассылки #6. Нужно обратить внимание не только на заимствования на чужих сайтах, но и на повторах внутри контента сайта. Желательно, чтобы один и тот же текст не повторялся на сайте несколько раз. Также стоит понимать, что дублирование материалов сайта в блогах, на форумах и в социальных сетях - это все-таки дублирование. Для каждого такого канала стоит писать оригинальные материалы, а не размножать одну и ту же статью или новость без изменений.
• Обновление контента. Крайне желательно, чтобы сайт имел хотя бы один регулярно пополняемый раздел (новости, статьи и так далее). Обновление контента - увеличение количества страниц с оригинальными текстами - дает поисковым система понять, что сайт "жив" и развивается. Важно это и с маркетинговой точки зрения: в подавляющем большинстве случаев актуальные новости помогают посетителям сделать выбор в пользу именно этого предложения.
• Чистка спама. Если на сайте есть гостевая книга, форум или какие-то средства для комментирования, регулярно проводите чистку спама. Поисковые системы негативно реагируют на замусоренные форумы и гостевые книги.
• Битые ссылки. При перемещении документов, удалении страниц или изменении URL через CMS (например, были адреса типа /news, а стали транслитовые /novosti) могут возникнуть "битые ссылки" - причем как внутренние (в контенте сайта), так и внешние (если исчезла или изменила адрес страница, на которую ссылаются другие сайты). Нужно следить за тем, чтобы все ссылки работали и перенаправляли пользователей и роботов поисковых систем на соответствующие страницы, а не на страницу 404. Например, если URL были изменены на SEF (search engines friendly), то при обращении к странице по старому URL должен происходить редирект с кодом 301 на ту же страницу с новым URL.
• Теги Title. HTML-тег Title определяет заголовок окна браузера.
• Если речь идет об оптимизации страниц под поисковые запросы, необходимо соблюсти следующие правила:
  - Максимальная, учитываемая Яндексом, длина тега Title - 62 слова.
  - Начинать тег лучше с основного ключевого слова.
  - Title виден посетителю сайта в заголовке окна, к тому же он используется поисковой системой при составлении сниппета сайта в результатах поиска (а от привлекательности сниппета зависит кликабельность и, в конечном итоге, посещаемость). Очевидно, что Title должен быть удобочитаемым, а не представлять собой мешанину ключевых слов.
  - Не используйте в теге Title (и в теге Description) кавычки - это может спровоцировать проблемы с индексацией.
  - Самое главное правило - уникальность. Теги Title на всех страницах сайта должны быть уникальными. Склейка и выпадение страниц из индекса из-за одинаковых тайтлов - весьма распространенное явление. То же самое, кстати, относится и к метатегам Keywords и Description. Не стоит клонировать их - если на сайте немного страниц, сделать их уникальными легко и вручную, а если страниц тысячи, то это обычно страницы товаров, уникализировать теги и метатеги которых можно автоматически, с помощью CMS.
• Оптимизация контента. Основное правило такое: если страница продвигается по какому-либо запросу, прямое вхождение этого запроса (то есть именно в продвигаемой форме) должно быть в тексте страницы. Для низкочастотных запросов достаточно одного вхождения, а для средне- и высокочастотных лучше ориентироваться на цифру, которую показывает Система SeoPult в столбце "Рек." (рекомендуемое количество) на вкладке "Страницы" проекта. Но его не следует превышать, можно даже сделать меньше вхождений. Вообще следует стремиться к естественности - текст "для людей" лучше воспринимается современными алгоритмами поисковых систем, чем хитрые попытки проспамить контент.
  - По оптимальному объему текста на продвигаемых страницах скажем так: смотрите на конкурентов, которые уже заняли ТОП.
  - Желательно "разбавлять" длинные куски текста - делить их заголовками (теги <H1...H6>), вставлять иллюстрации, таблицы и так далее.
• Внутренняя перелинковка. Алгоритм Google PageRank и его аналоги в других поисковых системах учитывают не только внешние, но и внутренние ссылки.
  - На этапе перелинковки желательно обратить внимание на то, какие URL используются - относительные или абсолютные. Желательно применение первых (сокращенного вида, типа /news/2011-10-10.html), а не вторых (http://www.yoursite.ru/news/2011-10-10.html).
• Проверка количества страниц в индексах "Яндекса" и Google. Соотношение фактического количества страниц сайта (эти данные предоставляются CMS) и количества страниц, попавших в активный индекс поисковой системы, является индикатором проблем с оптимизацией сайта. Если в индексе примерно столько же страниц, сколько открыто для индексации на сайте, все в порядке. Если же многие страницы исключены, стоит обязательно разобраться, почему.
  - Количество страниц в основном индексе "Яндекса" проверяется с помощью "Яндекс.Вебмастера": http://webmaster.yandex.ru/check.xml. Розовым прямоугольником выделена искомая цифра.
• Индекс Google устроен чуть-чуть сложнее: он делится на основной и дополнительный (Supplemental, "сопли"). Поиск осуществляется по обоим, но страницы из дополнительного индекса заметно менее "авторитетны" и будут показываться только в случае, если поисковый запрос найден только на них.
  Чтобы посмотреть общий индекс (основной + дополнительный), необходимо задать запрос вида site:www.yoursite.ru/. При этом после первого результата лучше ткнуть мышкой на вторую или третью страницу, а затем вернуться на первую - тогда цифра станет более точной. Основной индекс показывается по запросу вида site:www.yoursite.ru/*:
  Еще раз перечислим "сигналы опасности":
  - в индексе намного меньше страниц, чем открыто для индексации на сайте;
  - один из индексов заметно меньше другого;
  - в индексе больше страниц, чем фактически есть на сайте (следовательно, в нем есть дубли и мусор);
  - в индексе присутствуют нежелательные страницы (например, результаты внутренних поисков и сортировок, страницы логина в систему управления контентом и так далее). Все, что не нужно индексировать, должно быть закрыто с помощью файла robots.txt.
• Присутствие аффилиатов. До того, как поисковые системы - и в особенности "Яндекс" - начали эффективно и безжалостно бороться с аффилированными сайтами, они были хорошим подспорьем в борьбе за внимание целевой аудитории. Теперь же наличие дополнительного сайта со схожим контентом, контактными данными и так далее может привести либо к понижению в результатах поиска, либо к склейке - в этом случае по каким-то запросам будет показан только один из связанных сайтов, а второго в выдаче все равно не будет. Итак, дополнительные сайты необходимо закрыть или, по крайней мере, склеить с помощью редиректа с кодом 301 с дополнительного сайта на основной. Но иногда - пусть и достаточно редко - поисковая система помечает как аффилированные независимые сайты. Для проверки на аффилированность можно использовать запрос вида yoursite1.ru | yoursite2.ru. Если сайты не связаны, первым результатом будет страница первого сайта, вторым - второго (или наоборот, но обязательно оба). Если связаны - будут результаты только с одного из сайтов.
• Русскоязычные или незначащие URL. Если CMS выдает адреса страниц на русском языке (как в "Википедии", вида http://ru.wikipedia.org/wiki/%D0%...) или непонятные, вроде /?=18.php, стоит перейти к ЧПУ ("человекупонятные URL", SEF URL's - search engines friendly). Оптимальный вариант для поискового продвижения - транслит с включением ключевых слов, по которым продвигается страница. Его хорошо понимают поисковики: например, страница с URL вида /pylesosy/pylesos-philips-fc-9170.html будет более релевантна запросу "пылесос Philips FC 9170".
• Поисковый спам. Тег Keywords не предназначен для включения в него всего семантического ядра сайта на всех страницах. Огромные "простыни" текста с десятками вхождений ключевых слов - устаревший метод продвижения, который теперь приводит к пессимизации сайта. Нельзя размещать скрытый и уменьшенный текст с ключевиками. Эти и все прочие методики поискового спама использовать нельзя! Убедитесь, что ваш сайт не провоцирует поисковые системы на применение санкций.
• Следуйте правилам оптимизационной верстки.
  - Заголовки разных уровней - от <H1> до <H6> - нужно использовать с умом: допускается только один <H1>. Чем логичнее структура заголовков документа, тем лучше он воспринимается поисковой системой.
  - Keywords - по объему не ограничен, но следует писать в него только слова, по которым продвигается страница, а не все подряд.
  - Description - краткое описание страницы с включением основного поискового запроса. Должно подходить на роль сниппета, быть привлекательным, информативным и кликабельным.
  - Ключевые слова можно выделить тегами смыслового акцентирования(<strong>, <b>, <i>).
  - Картинки и иллюстрации стоит снабжать описаниями с ключевыми словами в тегах Alt и Title - это поможет как увеличить релевантность страницы запросу, так и вывести эти изображения в выдачу поисковых систем (см. выпуск нашей рассылки #26).
  - Теги должны быть открыты и закрыты корректно.
• Присутствие в "Яндекс.Каталоге" и DMOZ. Попытайтесь добавить сайт в эти основные каталоги - это очень полезно для поискового продвижения.
• Скорость работы, надежность и настройки сервера.
• Отсутствие стороннего контента. Допускается интеграция видеороликов с Youtube и Rutube, но не "хотлинкинг" изображений с других сайтов. Все иллюстрации и, желательно, прочие материалы, нужно разместить на том же домене, что и сайт. Это поднимает вопрос заимствования изображений (поисковые системы в последнее время легко распознают копии) - конечно, всегда лучше использовать оригинальные материалы.

Выводы

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

Высота блока div. проблемы в css

http://www.master-web.info/equal-height-columns-cross-browser-css/

Решение проблемы с высотой блока в css