Верстка \ HTML&CSS

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

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

Продолжить чтение

Верстка \ HTML&CSS

переходы css3

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

Продолжить чтение

Верстка \ HTML&CSS

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

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

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

Продолжить чтение

Верстка \ HTML&CSS

создание слайдшоу

От автора: из этого исчерпывающего учебника по веб-разработке вы узнаете, как создать удобный и доступный виджет слайдшоу для своего сайта с помощью HTML, CSS и JavaScript (jQuery). В процессе создания вы увидите в действии концепцию Progressive Enhancement (прогрессивное улучшение).

Продолжить чтение

Верстка \ HTML&CSS

создание сайта портфолио

От автора: Лауреат премии awwward, уникальный сайт-портфолио Пола Дж. Нобла (Paul J Noble) привлек внимание множества людей, и в том числе не только клиентов. Сегодня в своем учебнике он продолжит объяснять раздел дизайна и продемонстрирует его кодирование.

Продолжить чтение

Верстка \ CSS 3

CSS3-анимация

От автора: модулю CSS ‘Animations’ от консорциума W3C не сразу удалось завоевать популярность. При своей ограниченной поддержке браузерами не утверждаю, что он является одним из самых широко используемых свойств CSS3. Он сто лет доступен в браузерах, основанных на Webkit – в Chrome’е начиная со второй версии и в Safari с версии 4, но не имеет поддержки в Opera, IE и Firefox…до сих пор. Недавно, впрочем, вышел Firefox 5, а вместе с ним появилась и поддержка модуля анимации. Поговаривают, что следующим будет Opera. Когда глобальная поддержка свойства оценивается уже примерно в 25%, самое время немного с ним поразвлечься!

Продолжить чтение

Верстка \ HTML&CSS

техника кодирования

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

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

Продолжить чтение

Верстка \ HTML&CSS

теги dl dt dd

От автора: Многие дизайнеры прошлого любили создавать веб-дизайн, используя таблицу и, когда дело доходило до исправления ошибок, это становилось их ахиллесовой пятой. Теперь, однако, когда дело доходит до построения списка данных на веб-странице, например, списка данных профиля, многие вместо этого пользуются таблицей HTML.

Фактически, используя тэги HTML dl, dt, dd, вы экономите на написании кода и добавляете своему контенту больше семантического значения. Тогда как таблицу лучше всего использовать для табличных данных, и не следует использовать для списка данных, в веб-форме или веб-разметке.

Продолжить чтение

Верстка \ HTML5

разметка сайта

От автора: В первой части этой статьи — Создаем разметку сайта без изображений с помощью HTML5/CSS3 – часть 1 мы закончили объяснять все элементы HTML5, используемые в коде нашей демо-страницы index.html и сегодня обсудим свойства CSS, применяемые для того, чтобы сделать ее красивой.

Продолжить чтение

Верстка \ HTML5

разметка сайта

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

Продолжить чтение