Верстка \ HTML&CSS

Как создать переключатель таблиц стилей CSS, ориентированный на время

От автора: сегодня переключение стилей CSS (изменение дизайна), в зависимости от времени суток на вебсайтах, стали очень популярны. Таблицы стилей CSS дают веб-дизайнеру возможность минимальными усилиями менять внешний вид и ощущение от вебсайта. На некоторых сайтах применяется переключатель стилей типа «день»/«ночь», автоматически меняющий тему сайта в зависимости от времени суток.

Читать далее

Верстка \ HTML&CSS

Освежаем в памяти CSS: рамки

От автора: конечно, вы знакомы с рамками. Есть ли в них нечто новое для внедрения? Бьюсь об заклад, в этой статье найдется весьма многое, о чем вы и не знали!

Для создания скругленных углов можно применять не только CSS3, но и «старикана» CSS можно заставить показать произвольные фигуры. Верно, что в прошлом до открытия этих техник при демонстрации кругов или стрелок-указателей можно было прибегнуть к применению абсолютно позиционированных фоновых изображений. К счастью – по мере того, как мы с радостью все больше отдаляемся от Photoshop’а – это уже не тот случай.

Читать далее

Верстка \ HTML&CSS

jPaginator версии CSS3

От автора: jPaginator – это стильный плагин jQuery от Реми Элазара (Remy Elazare), сочетающий при простом пользовательском интерфейсе нумерацию страниц и прокрутку. Реми недавно спросил меня, не хотел бы я применить его для чего-нибудь на Webdesigntuts+ и я решил, что он стал бы отличным кандидатом для создания нового стиля.

Читать далее

Javascript & Ajax \ Javascript

Вертикальное навигационное меню Ормана Кларка

От автора: следующее в серии кодированных Орманом Кларком (Orman Clark) PSD – его потрясающее Вертикальное навигационное меню. Мы воссоздадим его с помощью CSS3 и jQuery, используя минимально возможное количество изображений.

Читать далее

Верстка \ HTML&CSS

Позиционирование в CSS

От автора: одним из наиболее полезных инструментов в CSS, на мой взгляд, является позиционирование элементов документа. Под термином «позиционирование» понимается возможность расположить элемент (блок, картинку и др.) в абсолютно любом месте документа.

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

Читать далее

Верстка \ HTML&CSS

отражение, свечение и размытие в CSS

От автора: отражения способны добавить объектам интересную размерность, ссужая их оттенком реализма и наделяя внутри окружающей среды некоторым контекстом. Давайте рассмотрим достижение эффекта отражения с помощью CSS, а также для сравнения исследуем свечение и кроссбраузерное размытие..

Читать далее

Верстка \ HTML&CSS

OOCSS

От автора: Вы когда-нибудь слышали выражение (Билла Гейтса, 1996г., прим. переводчика) «контент – это король»? Будучи веб-разработчиком и, следовательно, занимаясь делом, часто связанным с созданием содержимого, наверняка слышали. Это – слишком частоупотребимое, но верное утверждение относительно того, что привлекает на сайт посетителей.

Читать далее

Верстка \ HTML&CSS

флеш-уголок для сайта

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

Читать далее

Верстка \ HTML&CSS

переходы css3

От автора: вам когда-нибудь хотелось оживить цвет элемента (например, шрифта) при проведении над ним мышью? Можно подумать, что это легко делается с помощью jQuery, но он совсем не поддерживает анимацию цвета, если только не применяется плагин или jQuery UI (пользовательский интерфейс jQuery). Вам нужен быстрый и легкий способ добавлять элементу простую анимацию цвета, и тут в дело вступают переходы CSS. Они являются частью проекта спецификации CSS3 и обеспечивают средство анимации изменений свойств CSS, а не немедленный эффект этих изменений. Благодаря чему мы сможем делать на своих сайтах, плавный переход цвета в CSS.

Читать далее

Верстка \ HTML&CSS

закругленные углы css

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

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

Читать далее