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

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

CSS, CSS3, Internet Explorer, Верстка Скрыть

Очередная вкусняшка в CSS3 — свойство box-shadow, благодаря которому мы можем настроить отбрасываемую и внутреннюю тень для блочных элементов, не прибегаю к гуглению и поиску “1000 и 1 способ отбросить тень”. Я не буду вдаваться в подробности кроссбраузерности данного атрибута, лишь попытаюсь показать как этим пользоваться.
(далее…)

CSS, CSS3 Скрыть

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

Поскольку технологии не стоят на месте и консорциум w3c “призвал” разработчиков уже сейчас начать использование HTML5, для IE, который тупо игнорирует применение стилей к новым тегам HTML5 появился “хороший” хак – минискрипт HTML5 shiv.

Для того, чтобы приучить Internet Explorer понимать новый HTML5 необходимо всего лишь подключить на странице скрипт:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

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

<!--[if IE]>
<script>
  document.createElement('header');
  document.createElement('nav');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('footer');
</script>
<![endif]-->

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

Internet Explorer, JavaScript Скрыть

В дебрях интернет можно встретить множество разнообразных меню – от простых списков и до различного рода сложноструктурированных flash-меню. Быстрыми темпами сокращается количество браузеров не соблюдающие стандарты w3c (да-да, Я про IE6), браузеры становятся более безопасными, тем самым всё меньшее количество пользователей отключают JavaScript в своих браузерах. Благодаря этому, чуть ли не каждый веб-разработчик старается “нашпиговать” своё меню JavaScript’овыми анимациями, а некоторые даже забывают, что данное можно было реализовать на чистом HTML+CSS, не нагружаю страницу лишним программным кодом. В этом посте хочу описать процесс создания меню аля “Вкладки”, без JavaScripta на чистом HTML+CSS. Вот такой результат получился к концу данной публикации:

(далее…)

CSS, Верстка, меню Скрыть

В связи с тем, что меню с использованием JavaScript требуют большего описания процесса создания, я решил прекратить серию статей “Меню для сайта” и публиковать каждую менюшку в отдельном посте.
В этом посте на базе предыдущех покажу как создать красивую менюшку добавив эффекты с помощью замечательной библиотеки jQuery.

(далее…)

CSS, jQuery, меню Скрыть

Это вторая часть из серии постов на тему “Меню для сайта”. Первую часть можно почитать здесь. В этой части пойдет речь о сложных горизонтальных меню, то есть когда один элемент меню имеет свои подменю. Примером такого меню может быть стандартное меню, которое используется в окнах операционных систем Windows (Файл, Правка, Вид…).
(далее…)

CSS, Верстка, меню Скрыть

Современные сайты пестрят обилием различного рода навигационных панелей, меню. Если поискать в сети, то можно найти онлайн сервисы по созданию меню на любой вкус, но этим постом мне хотелось бы начать серию публикаций и показать как можно сделать меню “своими руками”, используя современные методы CSS и JavaScript. В этой части покажу примеры простых горизонтальных и вертикальных меню.
(далее…)

CSS, Верстка, меню Скрыть