10378525-10-2011
103785
25-10-2011
Во втором уроке от Line25 мы научимся верстать шаблон сайта на основании psd файла, сделанного в фотошопе. Сначала мы создадим папку с необходимыми для шаблона изображениями. Потом создадим файл index. Потом мы создадим базовую HTML структуру шаблона и затем постепенно будем ее наполнять управляющими блоками для различных частей и элементов сайта. После этого мы создадим файл style. А уже после этого мы с помощью этого файла будем редактировать внешний вид сайта, до тех пока он не будет выглядеть в точности, как и задумывалось изначально.
Слайдер представляет собой великолепный инструмент для ротации и представления картинок на сайте. То есть, это небольшой блок, как правило вверху страницы или в сайдбаре, где посредством меняющихся картинок посетителя знакомят с самыми интересными материалами на сайте. Демонстрация картинок может сопровождаться небольшим сопроводительным текстом. Также у слайдера есть небольшая навигация в виде управляющих стрелок, динамических маркеров и предпрсмотров картинок. Размер слайдера также может регулироваться от совсем маленького до полноразмерного экрана.
Сегодняшняя подборка посвящена технологии jQuery. JQuery — это JavaScript библиотека, отвечающая за взаимодействие JavaScript, HTML и CSS на сайте. С помощью этой технологии можно обращаться к любому объекту, работать с событиями, осуществлять различные визуальные эффекты. Собственно сама библиотека находится на внешнем сайте в библиотеке кодов Google. А подключается она соответствующей записью в коде сайта в теге head. Во всех приведенных ниже мануалах есть live demo и инструкция, а также возможность скачать и установить подготовленный набор файлов.
В сегодняшней подборке мануалов по CSS3 можно узнать, как сделать меню в стиле Apple, закругленные углы и очередную красивую кнопку. Очень впечатляет 3d анимация для объекта и возможности ротации картинок. Среди оформительских приемов — симпатичное темное меню навигации и всплывающие подсказки. Есть несколько мануалов для анимированных меню. Хорош урок о том, как сделать простейшее лого. Гурманов порадует анимированный колокольчик и вращающиеся иконки. Особенно мне нравятся кнопки включить/выключить. В общем, успехов вам в освоении всех этих новшеств.
В сегодняшней подборке ссылки на следующие CSS3 уроки с примерами: как сделать анимированное меню средствами CSS, создаем цветовой круг, делаем стильную форму поиска. Оказывается бэкграунд в виде ретро полосок тоже можно сделать на CSS. Мне понравилась техника создания оформительских флажков и кнопок с эффектом пузырьков. Далее следует интерфейс плейера и минималистическое меню с выдвигающимися элементами. Хорошо смотрятся объемные кнопки и скругленные углы у картинок. Впечатляет постер из геометрических фигур, сделанных исключительно на CSS3.
В этой подборке я собрала отличные уроки, которые мне очень нравятся, с примерами того, какие вещи можно сделать с помощью CSS3 технологий. Это и контактная форма, и тени у объектов, и 3D текст. А также простейшее раскрывающееся меню, симпатичные кнопки, необычные градиенты для текста, оригинально оформленная поисковая строка, кастомная админ панель, стильные кнопки навигации, поворот текста, паттерны для фона, выпадающее меню, постраничный навигатор и треугольник.
Нет, определенно прогресс движется по спирали. Это нам очень наглядно продемонстрировали авторитетные специалисты из Yourinspirationweb, которые отметили любопытную тенденцию перерождения ретро стиля на новом уровне. Необычайно широкое распространение HTML5 и CSS3 дало импульс для развития стиля ретро в исполнении новейших технологий. Давайте посмотрим на сегодняшний облик так хорошо знакомых дизайнерских элементов в стиле ретро и на то, какое место они занимают в современном дизайне.
Прошлый год заметно сместил акценты веб-дизайна в сторону использования веб-технологий. То, что раньше можно было сделать исключительно с помощью графики, сегодня реализуется на основе CSS3 технологий. Плюс ко всему веб-дизайн обогатился огромным количеством невероятных эффектов, так впечатляющих пользователя. Давайте вспомним 20 самых любопытных вещей, которые стали возможны с помощью CSS3 технологий.