Как создать свой сайт. Основы самостоятельного сайтостроения

Премиум. Секреты работы с CMS WordPress. Выбор статей для вывода.

Андрей Кудлай — Wed, 23 May 2012 07:32:25 +0000

От автора: мы продолжаем цикл уроков, посвященных работе с CMS WordPress. В этом уроке мы научимся отбирать необходимые нам статьи для их вывода на сайте. По умолчанию все статьи в WP отбираются и выводятся в обратном хронологическом порядке, т.е. первой будет показана самая «свежая» статья, за ней – чуть более старая и так далее независимо от категории статьи. Мы научимся сами определять вывод статей, указывая какую статью показывать, а какую нет.

Из этого урока Вы узнаете:

1. Функция query_posts(), как одна из основ WordPress.

2. Что такое произвольные поля и для чего их можно использовать?

3. Как получить вывод статей только по произвольному полю?

4. Каким образом можно выводить статьи только определенной категории или даже нескольких категорий.

5. Как исключить статьи рубрики из вывода?

6. Что такое метки в WordPress и почему они используются далеко не в полной мере?

7. Как можно отбирать статьи для вывода по меткам?

План урока:

1. Выбор статей для вывода.

Детали учебника

Сложность: Легкая

Урок: Видео (.mp4)

Время: 00:30:51

Размер архива: 57 Mb

Автор: Андрей Кудлай

Зовут меня Андрей Кудлай. Родом я из Украины, живу в Днепропетровске. Веб-программированию учился сам. Неплохо знаю HTML, CSS, PHP. Немного разбираюсь в JavaScript’e – в свободное время как раз занимаюсь его изучением.

Итак, приступим!

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

Кроссбраузерные отражения, свечения и размытия CSS.

Андрей Кудлай — Fri, 18 May 2012 05:00:09 +0000

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

Детали учебника

Сложность: Средняя

Примерное время выполнения: 30 мин.

Совместимость: современные браузеры, IE7+

Предпосылки

Изучение данного материала предполагает, что:

– Вы знаете HTML;

– Вы знакомы с селекторами CSS и CSS2;

– Если хотите в точности воспроизвести образец, то должны знать, как работает тень блока box-shadow. Она в этом учебнике не является ключевой, так что вам придется постигать ее самим. Если понадобится объяснение, предлагаю вам взглянуть на статью CSS3 vs. Photoshop : закругленные углы и тени блока.

Box-reflect vs. «Свой метод»

Box-reflect – свойство CSS, как раз предназначенное для этой цели: создания отражений. Мы не станем применять box-reflect и mask-image, потому что:

– На момент написания этой статьи оба свойства поддерживаются только webkit (Chrome и Safari).

– Реализация кишит ошибками, если не сказать более.

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

Сейчас, в век Chrome 17, webkit сделал ту же ошибку. Рисунки маски, ключ к -webkit-box-reflect, делают некий вид динамического снэпшота внутри граничного блока, вставляют его снизу и меняют непрозрачность. Я постарался восстановить демо-образец с помощью -webkit-box-reflect:

Я его не закончил, но проблема ясна. У отображаемого элемента (будем называть его ETBR – Element to be Reflected) есть border-radius и box-shadow. Тень блока видна внутри, а не снаружи граничного блока.

В моем собственном методе матрица видоизменяется, вставленная тень блока и непрозрачность заменят box-reflect и mask-image. Ограничения:

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

– Встроенная тень блока не влияет на текст отображаемого элемента (ETBR). Это происходит, если цвет текста не такой же, как фоновый цвет поверхности.

Поиграть с образцом | Полноэкранное изображение

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

Выбор…

Кстати говоря, о матрицах и отражениях…

«Выбираете синюю таблетку – я показываю, как воссоздать демо-образец шаг за шагом. Выбираете красную – покажу, как сделать отражения чего угодно и расскажу, где можно купить отражающие тени по очень привлекательной цене»

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

Дополнительно: подготовка

Демо-образец начинается с шаблона HTML5…

index.html



    
        
        
        CSS3 Reflections

…и этого файла CSS.

style.css

html {
    height: 100%;
}
body {
    text-align: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    height: 100%;
}
p {
    line-height: 1.2;
}

И, конечно, в таблицу стилей добавим ссылку:


    
    
    CSS reflections!

2D, но 3D

Демо-образец двухмерный. Ни единого 3D-элемента. Мы об этом знаем, но наша цель – заставить их считать, что мы это создали, а затем сфотографировали фронтальный вид.

Если мы хотим заставить их поверить, что это 3D, то должны определить, как объекты располагаются и вращаются в трехмерном пространстве. У демо-образца есть горизонт. Верхние 10% – это черное «небо», прочие 90% – фальшивая трехмерная плоскость. Отображаемый элемент и плоскость перпендикулярны друг другу (под углом 90°), отражение должно быть параллельно отображаемому элементу.

Шаг 1: дополнительный Плоскость и отображаемый элемент

HTML:


    
        reflection

Отражаемый элемент (ETBR) – потомок плоскости. Таким образом, он остается в одном и том же положении видимым с плоскости, а свечение остается на плоскости.

body {
    text-align: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    background-color: #000;
    height: 100%;
}
p {
    line-height: 1.2;
}
#plane {
    left: 0;
    top: 10%;
    width: 100%;
    bottom: 0;
    min-width: 1080px;
    min-height: 600px;
    position: absolute;
    overflow: hidden;
    overflow-x: visible;
}

Примечание:

– У плоскости есть минимальная ширина min-width и минимальная высота min-height, поэтому отражаемый элемент всегда виден.

– Переполнение overflow-y установлено на hidden, поэтому свечение отражаемого элемента остается на плоскости. (Небо должно быть непроглядно черным.)

– У плоскости нет фонового цвета, она получает свою окраску от свечения, что совершенно бессмысленно, но смотрится лучше всего.

Шаг 2: разметка отражения

Определите место отражаемого объекта (ETBR), скопируйте его, вставьте внутрь самого себя и переименуйте в refl:

reflectionreflection

Теперь внутри css создайте селектор объекта. Добавьте к селектору #refl, чтобы наши стили применялись к обоим элементам:

#ETBR, #refl {

}

По существу, CSS и HTML отражения должны быть такими же, как CSS и HTML отражаемого элемента ETBR. Мы разместим, зеркалируем и приукрасим отражение, начиная с шага 5. А сейчас мы скроем отражение.

#ETBR, #refl {

}
#refl {
    display: none;
}

Internet Explorer – это всегда Internet Explorer, так что нам придется добавить немного условного HTML:



    
        
        
        CSS3 Reflections
        
        
        

        

        
        
    
    
    
      
        
            reflectionreflection

Вы можете спросить «почему?», просто немного потерпите. Так как вы нетерпеливы, первый раздел Поиграть с образцом будет совершенно черным. Хотите увидеть влияние плоскости? Измените размер.

Поиграть с образцом | Полноэкранное изображение

Шаг 3: дополнительный Основные стили

Здесь объяснения не нужны:

#ETBR, #refl {
    color: #004;

    font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 200px;
    background-color: #FFE;
    font-weight: bold;
    padding: 30px;
    display: inline-block;
}
#refl {
    display: none;
}

Ну хорошо, немного объясню. Сочетание text-align: center; и display: inline-block; располагает элемент по центру, но это – не поиски Святого Грааля; встраиваемые элементы не могут содержать элементы блоков. Я применил это, потому что не хотел добавлять к образцу тысячи «плавающих» контейнеров. Хотя в общем, это – то, что нужно.

Поиграть с образцом | Полноэкранное изображение

Шаг 4: дополнительный Закругленные углы и свечение

Свечение состоит из трех теней: большой растянутой тени (которая выглядит больше похожей на отражение света на поверхности), настоящего свечения (белой тени с более коротким диапазоном размытия) и черной вставленной тени (которая дает возможность отражаемому элементу ETBR выглядеть, как будто он светится). Как я уже говорил, я не собираюсь объяснять, как работает тень блока box-shadow, а уж радиус угла border-radius сейчас уже говорит сам за себя.

#ETBR, #refl {
    color: #004;

    font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 200px;
    background-color: #FFE;
    font-weight: bold;
    padding: 30px;
    display: inline-block;

    box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    border-radius: 30px;
}

Поиграть с образцом | Полноэкранное изображение

Шаг 5: размещаем отражение

Отобразите селектор #refl, чтобы отражение стало видимым. Так как отражения «ненастоящие», наше отражение не станет частью тракта обработки документов; оно должно «плавать». Очевидный выбор – установить абсолютное позиционирование, это значит, элемент размещается относительно своего родительского элемента. Так как у родительского элемента отражения не существует, он будет расположен относительно тэга body.

Гораздо легче установить отражение относительно реального текста, который тоже является родителем отражения (совпадение?). Чтобы сделать это, сначала нужно «установить» ETBR:

#ETBR, #refl {
    color: #004;

    font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 200px;
    background-color: #FFE;
    font-weight: bold;
    padding: 30px;
    display: inline-block;

    box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    border-radius: 30px;

    position: relative;
}

Таким образом местоположение в действительности не меняется, но он теперь расположен. Теперь:

#refl {
    position: absolute;

    top: 100%;
    left: 0;
}

Верх отражения относителен высоты и расположения отражаемого элемента (ETBR). 0% дает нам тот же верх, 200% дает зазор, равный высоте ETBR, а 100% ставит верх отражения в низ отражаемого элемента ETBR. Левое значение то же самое, но принимает процентное отношение ширины.

Поиграть с образцом | Полноэкранное изображение

Шаг 6: современное зеркалирование, размытие и прозрачность

Эти свойства есть почти у каждого часто используемого браузера, от IE6 до Google Chrome. Однако их реализация отличается. Современные браузеры очень прямолинейны, для каждой характеристики свойств: transform, blur и opacity. Еще мы применим box-shadow, но сначала зеркалирование.

Зеркалирование

#refl {
    position: absolute;

    top: 100%;
    left: 0;

    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
}

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

Каждый дизайнер должен знать, что масштабирование на -1 по оси Y – то же самое, что зеркалирование. Масштабирование по оси Y – это умножение расстояния между верхом (и низом) и центром. Если по оси Y масштабировать в 2, расстояние между верхом и центром дважды увеличится. Если масштабировать на -1, расстояние останется прежним, но верх будет там, где был низ, а низ – где был верх. Поздравляю, вы теперь знаете, как зеркалировать!

Размытие

Очень скоро все современные браузеры будут поддерживать фильтры -webkit-filter или фильтры SVG. FF, Opera и IE10 уже поддерживают последнее, Safari и Chrome пока только создают напряжение перед их выпуском. Одним из фильтров SVG является старое доброе Гауссово размытие (Gaussian Blur). Он развивается неторопливо, но это что-то…

Создайте файл «filter.svg» в той же папке, где style.css. Его содержимое:

Все как обычно, кроме правил с 6 по 8. Фильтр с названием «blur» (можете назвать его как хотите) размывает 2 px по горизонтали и 3 px по вертикали. А теперь обратно к таблице стилей!

#refl {
    position: absolute;

    top: 100%;
    left: 0;

    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);

    filter: url(filter.svg#blur); /* FF, IE10 & Opera */
    -webkit-filter: blur(2px);
}

filter.svg#blur означает элемент ‘blur’ in filter.svg. Если бы ID фильтра было ‘anything’, url был бы filter.svg#anything. Радиус размытия определяется в файле SVG. Браузеры Webkit определяют это все в одном правиле.

Прозрачность

Прозрачность гораздо дольше находится в употреблении, так что нам нужно определить всего одно свойство:

#refl {
    position: absolute;

    top: 100%;
    left: 0;

    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);

    filter: url(filter.svg#blur); /* FF, IE10 & Opera */
    -webkit-filter: blur(2px);

    opacity: .25;
}

Я не могу вложить файл SVG в ссылку «Поиграть с образцом». (Должен держать образец в подчинении, поэтому не могу смешивать семантику и презентацию. Это сильно осложнило бы все…) Но сейчас я не возмещаю размытие SVG…

Поиграть с образцом | Полноэкранное изображение

Оно неполное. Когда на третий день Apple создал отражение, оно должно было стать менее отражательным. Оно должно быть менее четким, чем дальше оно от поверхности. Пусть там будет тьма!

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

#refl {
    position: absolute;

    top: 100%;
    left: 0;

    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);

    filter: url(filter.svg#blur); /* FF, Opera + IE10*/
    -webkit-filter: blur(2px); /* webkit */

    opacity: .25;

    box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px; /* first shadow is old */
}

Офсет Y второй тени равен 50 px, но элемент всегда зеркалируется после применения тени. Тень не движется вниз, она движется вверх.

Смотрите здесь:

Поиграть с образцом | Полноэкранное изображение

Отлично! Теперь рассмотрите это с помощью IE8 (или поверьте мне на слово): это в основном две копии отражаемого элемента ETBR одна над другой, незеркалированные, непрозрачные и не размытые.

Шаг 7: устаревшие фильтры

В начале работы мы добавили несколько условных комментариев; три группы.

– Современные браузеры и IE10, которые не поддерживают старые фильтры IE (IE10 прекратил сопровождение), но поддерживают новые.

– IE8 и ниже, старые IE, поддерживают устаревшие фильтры и не поддерживают новые.

– IE9, понемногу поддерживающий оба вида.

Если бы IE9 не поддерживал новых фильтров, было бы гораздо проще. (Не поймите меня неверно, я счастлив, что Internet Explorer старается измениться. Но было бы легче…) А чтобы еще все усложнить, существуют различия между устаревшими фильтрами в IE9 и IE8. Хватит жаловаться, давайте что-нибудь с этим сделаем. Добавьте для каждой группы по селектору #refl и сдвиньте свойство непрозрачности на modern.

#refl {
    position: absolute;

    top: 100%;
    left: 0;

    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);

    filter: url(filter.svg#blur); /* FF, Opera + IE10*/
    -webkit-filter: blur(2px); /* webkit */

    box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
}
.modern #refl {
    opacity: .25;
}
.ie9 #refl {

}
.oldie #refl {

}

Устаревшим фильтрам не нравится непрозрачность CSS2. И, если говорить о них, то мы собирается употребить следующие:

– DXImageTransform.Microsoft.BasicImage дает нам возможность зеркалировать изображение и меняет его непрозрачность

– DXImageTransform.Microsoft.MotionBlur и DXImageTransform.Microsoft.MotionBlur просто замечательные.

– DXImageTransform.Microsoft.Gradient в качестве заменителя второй тени блока.

Зеркалирование

У первого фильтра, BasicImage, на самом деле имеется свойство «mirror»! ДА-ДА! К сожалению, при установке этого свойства на 1 контент зеркалируется по горизонтали, а не вертикали. Но это не означает его бесполезность для нас. Разворот элемента на 180° и зеркалирование его по горизонтали – то же самое, что зеркалирование его по вертикали. И оно возможно:

.oldie #refl {
    filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2);
}

Этот разворот не измеряется в градусах: 0 – это 0°, 1 – это 90°, 2 – 180°, а 3 – это 270°. Этого требуют только браузеры-»старички». IE9 поддерживает -ms-transform.

Непрозрачность

Непрозрачность можно определять в том же фильтре…

.ie9 #refl {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25);"
}
.oldie #refl {
    filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2,  opacity=.35);
}

IE9 (и IE8, но я считаю, что Internet Explorer уже получил достаточно внимания) поддерживает -ms-filter. Значение его – одна большая строка. Она создает понимание со стороны других браузеров (Firefox из-за Internet Explorer’а ходит по пятницам к психиатру).

Размытие

…но нам нужен новый фильтр для размытия. Множественные фильтры, если хотите, чтобы оно хорошо смотрелось. Никаких запятых, никаких filter:s между фильтрами, только промежуток или новая строка. -ms-filter больше не понимает новых строк…

.ie9 #refl {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
    filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

Если один раз сделать размытие с радиусом в 6 px, выглядит это так, будто кто-то сделал 4 копии отражения и сдвинул одну на 6 px вверх, одну на 6 px вниз, одну на 6 px влево и одну на 6 px вправо. Если хотите похвастать перед кем-нибудь в пабе, то должны знать название: размытие блока (Box Blur). При добавлении повторов (делая размытие размытого) Box Blur выглядит, как обычное размытие. Второй повтор – это размытие движения motion blur, потому что оно хорошо смотрится.

Поиграть с образцом | Полноэкранное изображение

На этот раз неверно получились не одна, а две вещи:

1. Размытие сдвинуло отражение на несколько пикселей вверх и вправо в IE9, но в IE8 сдвинуло отражение вниз. Почему? Остается тайной.

2. В IE7 и IE8 отражение везде одинаково прозрачное.

Сначала вторая проблема: так как браузеры-»старички» не поддерживают тень блока box-shadow, мы применим в качестве замены устаревшему альфа-градиенту. Это, насколько я знаю, первые значения типа RGBA в CSS, но если в спецификациях w3c что-либо вообще тогда было сказано о значениях rgba, Internet Explorer все прослушал. Вместо 6 шестнадцатеричных разрядов они использовали 8. Два первых представляют alpha; устаревшие градиенты принимают ARGB вместо RGBA, что, должен заметить, звучит гораздо лучше:

.ie9 #refl {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
    progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

Градиент тоже нужно размыть, так что этим займемся в первую очередь. Градиенты устаревших фильтров по умолчанию вертикальные. startColorstr – цвет градиента вверху, а startColorstr – цвет внизу, но он зеркалирован! #99000000 – то же, что rgba(0, 0, 0, 153). Помните: чем выше мы устанавливаем непрозрачность градиента, тем ниже становится непрозрачность отражения.

Расположение – всего лишь дело метода проб и ошибок. Так как у отражения уже имеется местоположение, установленное в процентном отношении, мы не можем настроить в пикселях с помощью свойств left и top. Вместо того мы применим поле:

.ie9 #refl {
    margin-top: 20px;
    margin-left: -10px;

    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
    margin-top: -20px;
    margin-left: -7px;

    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
    progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

Поиграть с образцом | Полноэкранное изображение

Шаг 8: финальные штрихи

Мы изменим две вещи до того, как начнем тратить время на что-нибудь получше, типа просмотра чихающих панд на youtube.

– Расположим отражение по ту сторону отражаемого элемента (ETBR) (в z-пространстве), так как размытое отражение лежит над ETBR и над свечением.

– Сдвинем ETBR вниз. Верх ETBR идеально выравнивается по горизонту, что смотрится очень странно.

Решения проблемы:

– Обычно мы бы установили z-index отражаемого элемента (ETBR) и отражение соответственно на 2 и 1. Но так как за отражением в образце нет других элементов (в z-пространстве), мы можем просто установить z-index отражения на -1.

– Вверху поверхности добавьте отступ. Так как ETBR является потомком поверхности, он сдвинется вниз.

Вот файл CSS.

html {
    height: 100%;
}
body {
    text-align: center;
    line-height: 1;
    margin: 0;
    padding: 0;
    background-color: #000;
    height: 100%;
}
p {
    line-height: 1.2;
}
#plane {
    padding-top: 5%;

    left: 0;
    top: 10%;
    width: 100%;
    bottom: 0;
    min-width: 1080px;
    min-height: 600px;
    position: absolute;
    overflow: hidden;
    overflow-x: visible;
}
#ETBR, #refl {
    color: #004;

    font-family: Impact, 'Arial Black', Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 200px;
    background-color: #FFE;
    font-weight: bold;
    padding: 30px;
    display: inline-block;

    box-shadow: rgba(255,255,240,.2) 0 0 200px 100px, rgba(255,255,240,.3) 0 0 40px, inset rgba(0,0,0,.8) 0 0 20px;
    border-radius: 30px;

    position: relative;
}
#refl {
    position: absolute;
    z-index: -1;

    top: 100%;
    left: 0;

    -moz-transform: scaleY(-1);
    -webkit-transform: scaleY(-1);
    -ms-transform: scaleY(-1);

    filter: url(filter.svg#blur); /* FF, Opera + IE10*/
    -webkit-filter: blur(2px); /* webkit */

    box-shadow: inset rgba(0,0,0,.8) 0 0 20px, inset #000 0 50px 100px;
}
.modern #refl {
    opacity: .25;
}
.ie9 #refl {
    margin-top: 20px;
    margin-left: -10px;

    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(opacity=.25) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false') progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0) progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');"
}
.oldie #refl {
    margin-top: -20px;
    margin-left: -7px;

    filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr=#99000000, endColorstr=#00000000)
    progid:DXImageTransform.Microsoft.BasicImage(mirror=1, rotation=2, opacity=.35)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false')
    progid:DXImageTransform.Microsoft.MotionBlur(strength=15, direction=0)
    progid:DXImageTransform.Microsoft.Blur(PixelRadius='3', MakeShadow='false');
}

index.html



    
        
        
        CSS3 Reflections
        
        
        

        

        
        
    
    
    
      
        
            reflectionreflection

filter.svg

Заключение

Вот и все! Вот последний образец, без размытия фильтра SVG.

Поиграть с образцом | Полноэкранное изображение

Вот дополнительно чистый CSS (кроме звездочек на фоне) Мак Дока (Mac Dock), применяющего ту же технику.

Надеюсь, вам понравился этот учебник, и вы узнали что-то новое. Не стесняйтесь задавать в комментариях любые вопросы!

Автор: Bob de Ruiter

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Премиум. Курс по CSS3. Выпуск 2.

Андрей Кудлай — Wed, 16 May 2012 10:30:56 +0000

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

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

Из этого урока Вы узнаете:

1. Как задавать прозрачность для блока, и с какими трудностями при этом сталкиваемся.

2. Как обходить трудности в указании прозрачности.

3. Новые форматы задания прозрачных цветов, их отличия и способы задания.

4. Как создавать градиенты не используя изображения.

5. Как заставить градиент «идти» под наклоном, то есть, например, от правого нижнего угла к левому верхнему.

6. Как оставить градиент в нужном месте элемента, затем продолжить основной фон, и закончить элемент опять градиентом

7. Старый и новый синтаксис задания градиентов для webkit (google chrome, Safari) браузеров

План урока:

1. Изучаем свойство opacity

2. Изучаем форматы rgba, rgb

3. Изучаем форматы hsl, hsla

4. Изучаем background-image: linear-gradient

5. Изучаем background-image: repeating-linear-gradient

Результат урока:

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

Детали учебника

Сложность: Средняя

Урок: Видео версия (.mp4)

Время: 01:08:06

Размер архива: 207 Mb

Автор: Андрей Бернацкий

Один из авторов проекта «Основы Самостоятельного Сайтостроения». Адрес в сети — WebForMyself.com

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

Бернацкий Андрей свободно владеет такими техниками как: HTML, CSS, JavaScript, jQuery, AJAX, PHP&MySQL.

Итак, приступим!

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

Увеличиваем рейтинг сайта через наращивание ссылочной массы. Часть 2.

Андрей Кудлай — Mon, 14 May 2012 07:15:34 +0000

От автора: После несколько более долгого перерыва чем планировалось, я продолжу серию статей на тему «Монетизация сайтов с помощью ссылочных бирж». Этого времени я думаю вполне хватило, чтобы сделать все рекомендации из прошлой статьи «Увеличиваем рейтинг сайта через наращивание ссылочной массы». Прежде всего хотел поинтересоваться результатами, которых вы добились, возникли ли трудности или какие-то вопросы? Как всегда вы можете их задать в комментариях.

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

Скептикам хочу сообщить, что во время последнего АП тИЦ (13.04.2012) параметры сайта, который продвигался ТОЛЬКО способами, описанными в моих статьях, вырос на тИЦ +20. Это вполне неплохие результаты для продвижения сайта без материальных затрат. Буду рад, если у вас будут такие же или еще лучше результаты – сообщайте об этом!

А теперь без лишних слов продолжим рассматривать методы наращивания ссылочной массы.

Автор: Соколов Кирилл

По образованию – магистр культурологии (специализация: информационные технологии). Лауреат Национальной интернет-премии Tibo. Опыт работы в разработке сайтов «от» и «до» с 2000 года. В настоящее время работаю Project Manager в компании AtStar.

Сайт:

Спроси Доктора – Сервис медицинских онлайн-консультаций, каталог медцентров.

4. Регистрация в каталогах

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

Попытка добавить ссылку (url) на свой сайт в каталоги поисковиков не гарантирует того, что ваш проект обязательно в них примут. Ориентировочно, после подачи заявки на регистрацию в DMOZ (содержимое этого DMOZ дублируется в поисковике Гугл) нужно ждать от 2 до 10 месяцев, а может получится, что и до полутора лет. При регистрации в ЯндексКаталога — от 1 месяца до года. Многое зависит не только от качества вашего ресурса, но и от того, насколько правильно вы введете информацию при регистрации. Так что рекомендую тщательно изучить правила добавления в различные каталоги поисковых систем.

Из-за сложностей при добавлении в каталоги поисковых систем следует не забывать о других, в которых более мягкие условия для добавления. Список популярных каталогов можно найти как в соответствующем разделе Яндекс.Каталога тут, либо используя поиск, задав запрос «каталог сайтов».

Для регистрации в большом количестве каталогов (несколько тысяч каталогов) можно использовать специализированные интернет-сервисы, которые позволяют автоматизировать процесс регистрации в каталогах, а также предоставляют обширную базу каталогов сайтов различной тематики. Один из первых и наиболее популярных таких сервисов является 1PS.ru.

Регистрация в 1PS.ru

После регистрации вам будет предложено добавить новую заявку на регистрацию в каталоги. Вполне подойдет тарифный план «Профи», который позволит всего за 100 рублей добавить сайт по более чем 5 тысячам каталогов (в демо режиме бесплатно ваш сайт можно добавить в 50 каталогов). Вам понадобится лишь заполнить форму для каталогов (название вашего сайта, описание, ключевые слова, рубрики и т.п.) и приступить к постепенной отсылки данных по каталогам. Ниже привожу скриншот, как на 1 странице мы простым кликом можем добавить за 1 раз в 5-7-10 каталогов одновременно.

Важный моменты при добавлении вашего сайта в каталоги:

1. Не следует стремиться добавить ваш сайт во все 5 000 каталогов. Подберите либо общие каталоги, или только те, которые подходят под вашу категорию. К примеру: не стоит добавлять сайт об автомобилях в каталог, посвященный медицинской тематике.

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

3. Регистрируйтесь в каталогах с не нулевыми параметрами тИЦ и PR. Я обычно применяю минимальную планку требований к каталогам тИЦ 10, PR 2.

4. Не добавляйте ваш сайт более чем ~300 каталогов в неделю. Связанно это с тем, что поисковые системы могут наложить на ваш сайт санкции за то, что он может принять резко увеличивавшуюся ссылочную массу за поисковый спам.

Еще очень важный момент по работе с 1PS.ru и подобным сервисам: поскольку многие каталоги требуют за размещение вашего сайта обратную ссылку – вам потребуется у себя на сайте разместить довольно большое количество внешних ссылок, что может негативно сказаться на параметрах вашего сайта. Решить эту проблему можно поместив страницу с обратными ссылками в какую-либо директорию на вашем сайте ( например /linkz/index.php) и закрыть этот раздел для индексацией поисковых систем через файл robots.txt (который нужно разместить в корне вашего сайта). в файле robots.txt нужно прописать в одну строку следующее Disallow: /linkz/

Конечно, с одной стороны это несколько некрасивый поступок к владельцам каталогов, с другой стороны вы не «загрязняете» ваш сайт лишними внешними ссылками

5. Регистрация на трастовых сайтах.

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

Существует достаточное количество авторитетных в глазах поисковых систем сайтов, регистрируясь на которых дается возможность оставить ссылку на сайт в своем профиле. К ним относятся:

– Социальные сети

– Системы интернет-блогов

– Интернет-СМИ

– Форумы и т.п.

Плюсами этого метода являются: прямые ссылки с высоким тИЦ и PR, они вечные и бесплатные. Для начала наращивания ссылочной массы ссылками из профилей скачайте список трастовых сайтов и начните регистрироваться на этих сайта, оставляя ссылки в профилях.

Общие рекомендации для размещения ссылок с профилей сайтов:

1. Оцените параметры тИЦ и PR сайта, а надо ли оно вам? Если вы боретесь не за трафик, то вряд ли стоит тратить драгоценных 5 минут и нервы на регистрации ради Тиц10 PR1, хотя если форум тематический , то будет не лишним.

2. Заполняйте так же следующие поля: О себе, Подпись, Хобби, Увлечения, все поля где текст может быть многострочным. Зачем? Это шанс сделать ваш профиль равным Тиц=1, если вы напишите тематический текст, то страница будет выглядеть как тематическая статья. Да, тут надо поработать. Но зато эффект от профиля будет ощутимее, и даже не важно что форум про Собак, а ваш сайт о рецептах блюд. Постарайтесь в описаниях связать эти 2 темы. Вроде того, что я очень люблю готовить и узнавать новые рецепты, и у меня есть собака, которая также неравнодушно относится к тому, чтобы вкусно поесть )). В дополнительные поля если есть возможность также вставляйте ссылки на другие страницы. Есть шанс, что они превратятся в ссылки.

3. Заполнив профиль, зайдите на форум и оставьте несколько хороших сообщений в горячих темах, и посмотрите как выглядят ссылки на ваши профили, все ли dofollow, где светятся подписи, работают ли в них ссылки.

4. На форумах дается возможность указать подпись к нашим сообщениям. Этим следует обязательно воспользуемся, поскольку в подписи можно проставить ссылку с анкором. В основном это BB код.

5. Ожидайте, когда ссылку с профиля проиндексирует поисковая система. Этот процесс можно ускорить используя аддурилки Яндекса (линк) и Google (линк).

6. Социальные закладки и соцсети

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

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

Для того чтобы использовать ссылки с социальных закладок для продвижения по ключевым словам, необходимо соблюдать несколько правил:

1. Прописать ключевые слова в заголовке закладки

2. Повторить ключевые слова в описании 1-3 раза

3. Прописать ключевые слова в метках (тегах)

Чтобы получить реальный трафик необходимо проявить немного фантазии и смекалки:

1. Заголовок должен привлекать внимание и вызывать интерес.

2. Описание должно убедить тех, кто не перешел на ваш сайт по заголовку. Опишите самые интересные, полезные или выгодные аспекты вашего сайта для посетителей.

3. Не поленитесь в подборе меток. Для того чтобы вас было легко найти необходимо добавить, как минимум, 5 меток (тегов).

Помимо соцзакладок важным источником обратных ссылок (правда в большей части для привлечения трафика, а не наращивания тИЦ и PR) играют социальные сети. Наименее простым способом взаимодействия с соцсетями является размещение кнопок «Share», благодаря которым пользователи могут поделиться ссылкой со своими друзьями по соцсети. Разместить блок «Share» (поделиться) можно весьма просто, настроив и разместив код кнопок наиболее популярных соцсетей можно с помощью сервиса от Яндекса. Настроить внешний вид блока можно на специальной странице http://api.yandex.ru/share/.

7. Обмен/покупка статей (пресс-релизов).

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

1. Потребуется время для поиска сайтов, которые согласятся на размещение ваших статей. (далее будет ссылка на файл с базой сайтов, которых можно бесплатно разместить статьи)

2. Очень важным фактором для достижения положительных результатов является качество текста. Если у вас не получается грамотно составить статью, то лучше обратитесь к своим знакомым (конечно если среди них есть журналисты, филологи или другие гуманитарии, пусть даже и студенты), либо можно обратиться к профессиональным копирайтерам. Вероятность того, что неграмотный и логически запутанный пресс-релиз или статья будет опубликована ничтожно мала.

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

Итак, где можно бесплатно разместить статьи со ссылками?

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

2. Вступайте в переписку со знакомыми веб-мастерами, либо с сайтами схожей тематики с предложением обменяться статьями – вы пишите какую-либо статью для их сайта, а в ответ они должны предоставить вам свою статью. Конечно же эти статьи должны содержать ссылки на сайты, которые участвуют в обмене статьями.

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

Ниже приведу список наиболее популярных биржи статей, с которыми у меня есть опыт положительной работы, поэтому если вы их не использовали для продвижения своего сайта – смело регистрируйтесь и пользуйтесь.

– Sape.ru – биржа ссылок, статей.

– Miralinks.ru – биржа статей.

– Liex.ru – биржа статей.

– Mainlink.ru – биржа ссылок и объявлений (лаконичный аналог статьи).

Более подробную информацию по работе с биржами статей, а также о том как используя их можно эффективно монетезировать сайт ждите в следующей статье «Монетизация сайта с помощью бирж статей и объявлений«.

Заключение

В данной статье мы завершили рассматривать основные методы наращивания ссылочной массы и увеличение трастовости сайта. Конечно, тематика этой статьи несколько сдвинулась в сторону поисковой оптимизации/раскрутке сайта. Но следует не забывать, что тематика серии данных статей была «Монетизация сайта» через продажу ссылок, цена которых (а соответственно и ваш заработок) во многом определяется параметрами тИЦ и PR вашего сайта. Работы конечно предстоит немало, чтобы прогнать ваш сайт по каталогам сайтов, зарегистрироваться на трастовых сайтах, разместить ссылки на сервисах соцзакладок и обменяться статьями. Надеюсь, что стимула в работе вам предаст тот факт, что вам не пришлось потратить много времени, читая обрывочные статьи и самим вручную собирать базы трастовых сайтов, интернет-СМИ для пресс-релизов, а также списки соцзакладок.

И напоследок, из рубрики «юмор»

Премиум. Отправка писем с вложением с помощью скриптов PHP.

Андрей Кудлай — Wed, 09 May 2012 06:58:37 +0000

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

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

Из этого урока Вы узнаете:

1. Как правильно отправлять письма с помощью скриптов PHP.

2. Как отправлять письма с одним вложением.

3. Как отправлять письма с несколькими вложениями.

4. Как отправлять письма с внедренными изображениями.

5. Как осуществлять отправку писем с вложениями с помощью внешних библиотек.

План урока:

1. Формат обычного письма.

2. Кодирование заголовков.

3. Формат письма с вложением.

4. Кодирование письма.

5. Использование библиотек.

Результат урока:

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

Детали учебника

Раздел: PHP

Сложность: Средняя

Урок: Видео (.mp4)

Время: 01:12:54

Размер архива: 96 Mb

Автор: Алексей Опанасенко

Алексей Опанасенко живёт на севере Украины в древнем городе Чернигове. Типичный вебмастер самоучка – занялся самообучением, бросил работу в офисе и стал работать в Сети. Сейчас занимается веб разработками на заказ и своими личными проектами. В очередной раз доказывает, что научиться делать сайты с нуля и без учителей МОЖНО.

Сайт: http://neverlex.com – «Заметки вебмастера самоучки»

Итак, приступим!

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

Премиум. Создание административной части для флеш-галереи. Работа с XML. Часть3.

Андрей Кудлай — Wed, 02 May 2012 07:17:09 +0000

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

Также мы реализуем последний пункт меню, посредством которого будет происходить удаление картинок из галереи. Приступим…

Из этого урока Вы узнаете:

1. Как добавлять данные в файл XML.

2. Как работать с методом addChild() класса SimpleXMLElement.

3. Как сохранять объекты как файл XML.

План урока:

1. Копирование загруженных файлов.

2. Добавление записи в файл XML.

3. Реализуем удаление.

Результат урока:

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

Детали учебника

Раздел: PHP

Сложность: Средняя

Урок: Видео+текстовая версии (.mp4;.pdf)

Время: 01:16:47

Размер архива: 158 Mb

Автор: Андрей Кудлай

Итак, приступим!

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

Практическое применение виджета slider библиотеки jQuery UI.

Андрей Кудлай — Mon, 30 Apr 2012 09:34:05 +0000

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

В уроке мы реализуем виджет сортировки по цене с горизонтальной полосой прокрутки, а также создадим небольшую простенькую фотогалерею на основе указанного виджета библиотеки jQuery UI.

Детали учебника

Тема: jQuery

Сложность: Средняя

Урок: Видео (.mp4)

Время: 01:38:51

Размер архива: 156 Mb

Автор: Виктор Гавриленко

Меня зовут Виктор Гавриленко, по образованию я инженер электромеханик. Еще учась в институте, начал увлекаться компьютерными технологиями и программированием, на протяжении двух лет усиленно занимаюсь разработкой интернет сайтов и веб-программированием. Увлекаюсь написанием небольших скриптов на языке PHP, в связке базами данных MySQL, SQLite, неплохо знаю такие движки как WordPress, Drupal, Joomla.

1. Создание виджета сортировки по цене.

1.1. Создаем html разметку.

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

Теперь нам необходимо создать форму и два текстовых поля: первое для минимальной цены, второе для максимальной цены. При этом заключим форму в контейнер div с идентификатором id=’options’(для удобства, как бы с имитируем то, что обычно такие текстовые поля находятся в сайдбарах интернет магазинов).

Итак между тегами body вставляем следующий код:


	Цена:
	
		
		От:
			
		
		
		До:

Как видите стандартная форма, только я не создавал кнопку submit (отправки формы). Так отправлять данные мы не будем, потому что нам главное научиться добавлять слайдер, а отправка формы то уже стандартные вещи, которые все известны.

Далее необходимо создать пустой контейнер div в котором у нас будет располагаться слайдер. Добавим этот контейнер после закрывающего тега формы:

1.2. Создаем и подключаем файл стилей.

Далее давайте создадим таблицу стилей и немного приукрасим нашу форму. Я создал файл style.css в папке css, с таким содержимым:

#price,#price2 {
	border:1px solid #074776;
	padding:5px;
	width:80px;
}
#options {
	width:300px;
	padding:10px;
	border:1px solid #074776;
}
#slider_price {
	margin-top:10px;
}

Далее осталось просто подключить данный файл между тегами head:

Давайте посмотрим предварительные результаты нашей работы в браузере:

1.3. Скачиваем и подключаем библиотеки jQuery и jQuery UI.

Теперь переходим к кодированию на javascript.

Первым делом скачиваем библиотеку jquery и подключаем к нашему скрипту (напомню, что скачать библиотеку можно с официального сайта http://jquery.com) :

Далее необходимо скачать и подключить библиотеку jquery UI. С помощью этой библиотеки мы и реализуем слайдер для изменения цен. А точнее мы используем стандартный виджет библиотеки jquery UI – slider, который позволяет реализовывать различные слайдеры для сайтов. Напомню, что скачать библиотеку можно на официальном сайте http://jqueryui.com, перейдя по ссылке Download. Далее выбрать режим скачивания, то есть либо Вы скачиваете полную версию библиотеки с полным набором виджетов функций и эффектов, либо скачиваете только то, что Вам нужно (галочками отмечаете требуемые компоненты библиотеки). Я предпочитаю лишнего не качать, поэтому для скачивания я выбрал только виджет slider, полный набор эффектов и, конечно же, ядро библиотеки. Далее напомню, что Вы можете перед скачиванием выбрать цветовую схему отображаемых элементов библиотеки, для этого либо выбрать из выпадающего списка конкретный стандартный стиль, либо же можно сгенерировать цветовой стиль самому, перейдя по ссылке design a custom theme.

Итак, подключаем библиотеку:

И теперь, последнее, что нам необходимо подключить — это файл со стилями для нашей библиотеки, поэтому подключаем и его:

1.4. Кодируем на javascript.

После того как все необходимые библиотеки подключены, давайте вернемся на официальный сайт библиотеки jquery UI. Далее перейдем в раздел Demos & Documentation, затем кликаем мышью по виджету — slider. И как Вы видите, справа в колонке нам представлены для выбора различные варианты использования виджета, а в центре показано как будет отображаться на экране выбранный виджет.

Посмотрите на пример Range slider, как видите – это и есть тот слайдер, который мы хотим реализовать. Ниже под примером есть ссылка View Sourcе, нажав на которую мы сможем посмотреть как данный пример сделан (то есть посмотреть исходный код примера).

Если внимательно посмотреть, то можно увидеть, что исходный код состоит из двух частей: первая часть это обычная html разметка, которая у нас уже выполнена, а вторая — это код на javascript, который нам и нужно скопировать и вставить себе в файл.

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

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

Смотрите, вначале выбирается элемент с идентификатором slider-range и к нему применяется виджет slider. В нашем же случае, слайдер будет в блоке с идентификатором slider_price, который как Вы помните, мы создали под формой. Поэтому изменяем селектор выбора с #slider-range на #slider_price. Далее обратите внимание, что в примере минимальная и максимальная цена записываются в одно текстовое поле, а нам необходимо что бы минимальная цена записывалась в первое текстовое поле, а максимальная — во второе. Поэтому, необходимо внести небольшие изменения в код.

Далее я приведу уже исправленный код, который необходимо вставить в наш скрипт (а ниже поясню все изменения).

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

Итак, вначале, мы выбираем блок с идентификатором slider_price и применяем к нему виджет slider, с такими параметрами:

– range: true — если установлено в true, то между минимальным и максимальным значением на слайдере подсвечивается область, тем самым показывает нам, что выбран диапазон значений;
- min: 0 — минимальное значение на слайдере;
- max: 500 — максимальное значение на слайдере;
- values: [ 75, 300 ] – значения по умолчанию, которые будут установлены изначально на слайдере (то есть ползунки будут установлены в значения 75 и 300);
- slide: – в этом параметре можно описать функцию которая выполнится, когда пользователь начнет двигать ползунки. В нашем случае мы описываем функцию, которая считывает значения ползунков и передает их в значение атрибута value текстовых полей минимума и максимума.

Функция работает следующим образом: в начале с помощью jquery производим выборку по идентификатору «#price» текстового поля, затем вызываем метод val() и параметром передаем ему считанное значение с левого (минимального значения) ползунка на слайдере.

Напомню, что метод val(), если вызван без параметров, позволяет получить значение атрибута value выбранного элемента, если же передать ему какое то значение, то мы не получим значение а наоборот запишем это значение в атрибут value.

Считываем значение с ползунка следующим образом: производим выборку по идентификатору «#slider_price» блока div в котором находится слайдер, затем обращаемся к слайдеру и вызываем у него метод values, с индексом (номером) ползунка. Так как нас интересует в данный момент левый ползунок (минимального значения), то указываем его индекс 0.

Для текстового поля максимального значения все действия аналогичны только указываем индекс ползунка 1.

Далее записываем значения ползунков в момент загрузки страницы, для этого производим выборку по идентификатору «#price» поля минимального значения цены, далее вызываем метод val(), и параметром передаем ему значение, считанное с ползунка минимального значения. Это значение можно получить выбрав по идентификатору «#slider_price» блок в котором находится слайдер, затем обратится к его методу «values» (обратите внимание как записан метод — в скобках и в кавычках пишем имя метода, как параметр) и как и раньше передаем индекс (номер) ползунка. Для текстового поля максимального значения цены действия аналогичны.

Как Вы уже поняли метод slider( «values», 0 ) – возвращает значение ползунка с индексом 0, если же передать третьим параметром какое ни буть значение (slider( «values», 0 , 400)), то метод установит значение ползунка в то значение, которое передано третьим параметром (то есть значение ползунка будет 400).

Перейдем в браузер и посмотрим, что у нас получилось.

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

Если добавить к свойствам вызова слайдера свойство: orientation: «vertical», то слайдер будет располагаться вертикально:

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

Для текстового поля минимального значение эта возможность реализуется с помощью в таких строк кода:

$('#price').change(function() {
			var val = $(this).val();
			$('#slider_price').slider("values",0,val);
		});

Здесь все просто: вначале производим выборку по идентификатору ‘#price’, затем вызываем обработчик события change (он сработает когда пользователь изменит значение тестового поля) и в обработчике описываем функцию, которая получает с помощью метода val() значение текстового поля и затем с помощью метода слайдера slider(«values»,0,val) изменяет значения ползунка (тем самым, передвигая ползунок на указанное значение).

Для текстового поля максимального значения все аналогично:

$('#price2').change(function() {
			var val1 = $(this).val();
			$('#slider_price').slider("values",1,val1);
		});

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

Итак, давайте еще раз посмотрим на результат нашей работы, смотрите, как быстро и просто, используя виджет slider, мы с Вами создали очень удобную сортировку по цене, которая пригодится для любого интернет магазина.

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

2. Создание фотогалереи.

2.1. Создаем html разметку.

Теперь давайте посмотрим (на официальном сайте jquery UI раздел Demos&Documentation пункт slider) на еще один очень интересный пример реализации виджета слайдер – это Simple scrollbar.

Как вы видите с помощью этого виджета можно реализовать, как бы скроллер каких то объектов, к примеру картинок. Можно поместить в каждую ячейку по картинке и с помощью ползунка прокрутки листать изображения.

Давайте реализуем этот пример, то есть сделаем маленькую очень простую галерею картинок. Для этого, что бы не терять время скопируем из файла price.html весь код кроме кода расположенного между script и body и сохраним под именем slider.html (вот его код):

Далее, я заготовил папку с изображениями images, в ней 10 изображений маленького размера и 10 этих же изображений, но большого размера, которые имеют такие же имена, но располагаются в папке big. Скопируем папку в корень нашего скрипта.

Теперь откроем исходный код примера реализации Simple scrollbar, давайте начнем его рассматривать снизу. Как Вы видите, внизу у нас идет обычная html разметка. Давайте скопируем этот участок кода (он содержится между тегами body). Затем внесем в него некоторые изменения, а именно добавим стиль style=»width:800px» в блок div с классом class=»scroll-pane», вставим картинки в каждую ячейку будущей галереи, и добавим блок div с классом class=»results», в котором будут отображаться увеличенные изображения (в момент загрузки будет отображено первое изображение).

Итак, в итоге получился вот такой код html разметки:

2.2. Пишем логическую часть фотогалереи.

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

Здесь, конечно, все сложнее, чем в нашем первом примере, но это на первый взгляд. Смотрите, вначале производим выборку по классу $( «.scroll-bar» ) пустого блока div, в котором будет располагаться слайдер (полоса прокрутки). Затем сравниваем по ширине два блока первый с классом scroll-content, второй с классом scroll-pane. Блок с классом scroll-content изначально намного шире блока scroll-pane, так как в нем располагаются изображения и если посмотреть стили этого блока (в исходном коде, мы чуть позже добавим их к скрипту), то можно увидеть, что там выставлена огромная ширина width: 2440px. Поэтому выполнится условие if и при движении ползунка слайдера, наш блок с классом scroll-content будет получать отрицательный левый отступ пропорционально движению ползунка, тем самым смещаясь влево. Далее описывается функция sizeScrollbar(), которая рассчитывает длину ползунка сладера в зависимости от ширины блока с классом scroll-content (тоесть размер ползунка пропорционален контенту который он перемещает — чем больше контент тем меньше ползунок).

И последнее перед просмотром в браузере давайте скопируем из исходного кода стили и вставим в наш файл, только я их немного подкорректировал в соответствии с нашим примером (немного изменил ширину блока с изображениями и добавил стилей для изображений ), вот смотрите:

Теперь давайте перейдем в браузер и посмотрим на результат нашей работы:

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

Вот код, который необходимо добавить, перед, или после, кода слайдера (а ниже я приведу описание его работы):

$('.scroll-content-item img').each(function () {
		$(this).click(function() {
			var url = $(this).attr('src');
			var path = 'images/big/' + url.substring(url.indexOf('/') + 1);
			$('.results').html('' ).hide();
			$('.results').fadeIn(1000);
		});
	});

Для начала сделаем выборку всех изображений в блоке с классом scroll-content-item, затем применим метод each. Этот метод позволяет нам создавать циклы, для последовательно прохода по каждому элементу выборки. Так как изображений у нас десять, а значит и в выборку попадет десять элементов, поэтому с помощью метода each мы можем работать с каждым элементом выборки. Внутри этого метода описываем функцию, которая будет отрабатывать для каждого элемента выборки. Далее для каждого элемента выборки вызываем обработчик события click. Этот обработчик сработает, когда по элементу кликнуть мышью, и как только это произойдет – выполнится функция, которая описана в обработчике. В этой функции мы получаем значение атрибута src, для изображения, с помощью метода attr() (в скобках указываем имя атрибута, значение которого хотим получить). То есть в переменную url запишется строка images/1.jpg (для первой картинки).

Далее формируем переменную path в которой будет хранится путь к изображению большого размера. Делаем это следующим образом: вначале вырезаем имя файла с помощью методов substring() и indexOf(), а затем прибавляем строку ‘images/big/’. И в конце производим выборку блока с классом results, вставляем в этот блок новую картинку (при помощи метода html()) с адресом, записанным в переменной path, далее мгновенно скрываем этот блок (при помощи метода hide()). Затем показываем блок, используя анимацию при помощи метода fadeIn(), со скоростью в 1 секунду(1000 миллисекунд).

Давайте перейдем в браузер и посмотрим:

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

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

Итак, вначале как обычно код, а затем пояснения:

$('.results').toggle(
	//первый клик
	function() {
		$('.results img').css({
							'z-index':'100',
							'position':'absolute',
							'border':'10px solid #ffffff'

							});
		$('.results img').animate({
							'width':'800px',
							'height':'500px',
							'marginLeft':'-240px',
							'marginTop':'100px'

							});

	},
	//второй клик
	function() {
		$('.results img').css({
							'border':'0'

							});
		$('.results img').animate({
							'width':'320px',
							'height':'200px',
							'marginLeft':'0px',
							'marginTop':'0px'

							});

	});

Первым делом производим выборку блока с классом results и применяем к нему метод toggle(). Этот метод позволяет реализовать своего рода переключатель, то есть в этом методе мы описываем две функции: первая выполнится при первом клике мыши, вторая – при втором клике мыши.

Итак, функция для первого клика: производим выборку изображений в блоке с классом results и с помощью метода css() (метод позволяет задать выбранному элементу произвольные css-стили) зададим несколько правил css-стилей, а именно рамку, позицию и свойство z-index то есть вынесем изображение на первый план. Далее к этому блоку применяем метод animate() (данная функция предназначена для создания пользовательской анимации, то есть она принимает параметрами css правила, и если они отличны от существующих правил элемента, то происходит анимированное изменение этих правил, к примеру, если ширина элемента 100 пикселей и мы передаем методу animate() ширину в 200 пикселей то ширина элемента плавно увеличится до 200 пикселей) и передаем новые правила css-стилей, а именно исходные ширину и высоту изображения, а также верхний и левый отступы, чтобы изображение не смещалось в сторону, и при увеличении располагалось по центру.

Далее аналогично описываем функцию для второго клика, только при этом меняем правила css-стилей, которые передаем в методы css() и animate().

Итак, переходим в браузер и посмотрим, что у нас получилось:

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

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

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

Удачного Вам кодирования и до новых встреч!

Создаем навигационную панель-липучку с помощью Waypoints от jQuery.

Андрей Кудлай — Fri, 27 Apr 2012 14:28:35 +0000

От автора: в этом учебнике мы создадим панель навигации, которая при прокрутке всегда остается с вами — а еще отполируем ее одним-двумя хитрыми приемами «до блеска».

«Ленточки нравятся всем», говорит Крис Койер (Chris Coyier) при обсуждении преимуществ псевдоэлементов :before и :after. Я видел, как эти стилизованные, с треугольными краями ленты так и бросаются в глаза по всему Интернету (один из видных примеров – страница Facebook’а Introducing Timeline) и, хотя они обладают некоторой привлекательностью, должен заметить, что мне не очень нравится создаваемый ими объемный эффект.

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

Что мы сделаем

В этом учебнике мы применим один из новых элементов HTML5, тэг nav, в качестве контейнера для горизонтального списка ссылок. Я вкратце объясню, как сделать его привлекательным с помощью CSS.

Гораздо важнее то, что вы познакомитесь с основами плагина jQuery под названием Waypoints, который обеспечит улучшение функциональности: когда пользователь делает прокрутку вниз, панель навигации «прилипает» к верху демонстрационного окна, а также меняется, обозначая текущий раздел. Как дополнительный штрих, мы применим другой плагин, ScrollTo, чтобы гарантировать легкую прокрутку и удобное расположение при щелчках пользователя на ссылки навигации.

Шаг 1: Блок

Уверен, что вы уже знакомы с различными новыми элементами, представленными в HTML5. В этом примере мы воспользуемся двумя из них:

. Начнем со следующего:



  
    
    
  
  
    
      A reasonably large heading.
      
      Lorem ipsum ...

Мы собираемся назначить своей навигационной панели точную ширину. Сделайте ее на 28px шире основного div-a и задайте отрицательный левый отступ. Еще давайте с помощью border-*-radius сделаем слегка закругленные верхние края, а также небольшой произвольный отступ.

nav {
  position: relative;
  width: 928px;
  padding: 2em;
  margin-left: -14px;
  border-top-left-radius: 14px 7px;
  border-top-right-radius: 14px 7px;
}

Далее нам нужно добавить внутрь навигационной панели неупорядоченный список ссылок и установить его элементы на display: inline-block для того, чтобы выстроить их все в одну линию. Маркеры нам не нужны, поэтому внесем сюда еще list-style: none.


  
    Section 1
    Section 2
    ...some more list items...

nav li {
  display: inline-block;
  list-style: none;
}

К этому моменту у вас должно получиться нечто такое:

Шаг 2: Края

Теперь, если бы CSS позволил нам применить множественные псевдоэлементы (напр. ::after::after), можно было бы легко выполнить закругленные края панели навигации семантически «чистым» способом. Но мы не можем этого сделать, поэтому в конец nav’а нам понадобится добавить два несемантических div’а. Назначьте им классы nav-left и nav-right (или назвали бы их с фантазией, типа Кастор и Поллукс (Castor and Pollux). Они в 14px шириной и 14px высотой и позиционированы абсолютно (absolute) в 14px от нижнего края nav’а.

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

Маленькие «тени», дополняющие ленту панели навигации, выглядят созданными с помощью псевдоэлементов ::after. Их ширина и высота, как и радиусы углов, также установлены в процентах.

/* swap ‘left’ with ‘right’ for the other two */

.nav-left {
  position: absolute;
  left: 0;  bottom: -14px;
  width: 14px;  height: 14px;
  background: #848a6a;
  border-bottom-left-radius: 100% 50%;
}

.nav-left::after {
  content: '';
  position: absolute;
  right: 0;
  width: 66%;  height: 66%;
  background: #000;
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
}

И здесь мы уже закончили!

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

Шаг 3: Скрипт

Для достижения эффекта «плавающего» заголовка мы воспользуемся плагином jQuery под названием Waypoints от Калеба Тротона (Caleb Troughton). Его единственная задача – запускать события, когда пользователь прокручивает до определенного элемента. Как вы увидите, он чрезвычайно прост, однако предполагает большую гибкость — на домашней странице можно взглянуть на несколько примеров.

Подключите на свою страницу jQuery и Waypoints и давайте начнем!

Первое, что вам понадобится сделать – это объявить вейпойнт (букв. промежуточная точка маршрута – прим. переводчика), вызвав для элемента метод .waypoint(). Конечно, сам по себе он ничего не делает — вам придется назначить событию функцию обработчика. Проще всего это сделать, передав эту функцию как параметр для .waypoint().

Попробуйте сделать это сейчас: добавьте в свой скрипт следующее и посмотрите, как выскочит сообщение, когда прокрутка будет происходить мимо панели навигации.

$(function() {                     // When the page has loaded,
  $('nav').waypoint(               // create a waypoint
    function() {
      alert("Waypoint reached.");
    }
  )
});

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

...

Создайте в CSS следующее правило.

.sticky {
  position: fixed;
  top: 0;
}

Все уже подготовлено к самому приятному! Измените содержимое своего скрипта на следующее:

$(function() {

  // Do our DOM lookups beforehand
  var nav_container = $(".nav-container");
  var nav = $("nav");

  nav_container.waypoint({
    handler: function(event, direction) {
        nav.toggleClass('sticky', direction=='down');
    }
  });

});

Ага, какого черта, откуда все это взялось, задаете вы правомерный вопрос. Возможно, вы догадались, что мы прикрепляем вейпойнт к nav-container; только теперь делаем это по-другому. Вместо прямой передачи функции обработчика к .waypoint(), мы заключаем его в объект. Само по себе это роли не играет: оба способа – это полностью надежные методы. Передаваемый нами объект, однако, может содержать несколько прочих значений опции — так что применение его сейчас позже приводит к более последовательному коду.

Назначенная нами функция обработчика получает два параметра: первый – это стандартный объект jQuery event, который нам здесь неинтересен. Второй – особый Waypoints’а: это строка, чье значение равно ‘down’ либо ‘up’, в зависимости от направления, в котором пользователь делал прокрутку в момент достижения вейпойнта.

Сейчас знать, куда движется пользователь, очень важно, просто оттого, что это позволяет нам осуществить в каждом из направлений разную модель поведения. В теле функции обработчика мы применяем сравнительно малоизвестный вариант метода jQuery .toggleClass(), который ведет к удобной стенографии: в этом синтаксисе второй параметр определяет, будет ли класс добавлен к нужному элементу или удален из него. Когда пользователь делает прокрутку вниз, выражение direction===’down’ вычисляется до true, и так наша навигационная панель получает класс sticky и «прилипает» к верху демонстрационного окна. Как только пользователь снова прокручивает вверх, класс удаляется из панели навигации, которая возвращается на свое место. Сейчас попробуйте это сделать.

Здорово, а? Однако, если вы медленно прокрутите мимо только что созданного вейпойнта, то, возможно, заметите, что при движении контент слегка «подпрыгивает» из-за того, что навигационная панель удаляется из «течения» контента. Помимо очень неряшливого вида, такое поведение, возможно, закрывает часть содержимого и ухудшает юзабилити. К счастью, все поддается простой починке — добавление следующего кода в функцию обработчика убирает «прыжки».

if (direction == 'down')
  nav_container.css({ 'height':nav.outerHeight() });
else
  nav_container.css({ 'height':'auto' });

Происходящее здесь весьма очевидно: мы используем nav-container в качестве «заполнителя», как упоминалось выше. При прокрутке вниз мы растягиваем его высоту, а содержимое ниже остается на месте. Хотя здесь есть подвох – для его нормальной работы любые вертикальные поля, которые вы можете пожелать вокруг панели навигации, нужно применять к nav-container, а не к nav.

Вот так вот! У нас получилась красивая фиксированная навигационная панель, как на многих других сайтах. Представление закончено, ребята…

…или нет? Ну, вы, может быть, захотите увидеть еще парочку приемов, которые приведут вас в авангард масс. Если это ваш случай, то читаем дальше.

Шаг 4: Вертикальные смещения

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

nav.waypoint( {
  handler: …,
  offset: 50
} )

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

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

Первое, что приходит в голову – добавление пространства над элементом-»липучкой». Это легко сделать с помощью переменной offset: для создания сверху офсета в 15px добавьте offset:15px в опции .waypoint(), и измените top:0px на top:15px в правиле CSS .sticky.

Если того требует дизайн проекта, то хорошо выйдет, если создать над панелью навигации небольшой градиент. Это легко выполнимо путем добавления внутрь nav еще одного div’а и небольшого количества CSS:

.sticky .nav-above {
  position: absolute;
  top:-15px;
  left:1em;
  right:1em;
  height:15px;
  background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  /* add cross-browser gradient code as needed */
}

В минималистских дизайнах этот лакомый визуальный кусочек будет отлично работать.

Шаг 5: Функции офсета

Калеб предусмотрительно добавил в Waypoints способность генерировать офсет вейпойнта динамически, как тут:

nav.waypoint( {
  handler: …,
  offset: function() {
    return —(nav.outerHeight()+50);
  }
} )

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

Примечание: такие процедурно генерируемые офсеты (а также те, которые определяются в процентном соотношении) пересчитываются каждый раз при изменении размера окна, добавляются новые вейпойнты или модифицируются опции вейпойнта. Если делать что-нибудь еще, что может повлиять на расположение вейпойнтов (такое, как изменение DOM’а или разметки страницы),обязательно впоследствии вызывайте $.waypoints(‘refresh’) для тех позиций, которые нужно пересчитать.

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

var top_spacing = 15;
var waypoint_offset = 50;

nav_container.waypoint({

  handler: function(event, direction) {

    if (direction == 'down') {

      nav_container.css({ 'height' : nav.outerHeight() });
      nav.addClass("sticky")
         .stop()
         .css("top", -nav.outerHeight())
         .animate({"top" : top_spacing});

    } else {

      nav_container.css({ 'height' : 'auto' });
      nav.removeClass("sticky")
         .stop()
         .css("top", nav.outerHeight() + waypoint_offset)
         .animate({"top" : ""});

    }

  },

  offset: function() {
    return —(nav.outerHeight() + waypoint_offset);
  }

});

Не слишком-то плохо! Довольно стандартная раскладка jQuery: как только мы добавляем или удаляем класс sticky в nav, то подменяем вертикальное расположение элемента с помощью .css(), а затем как следует анимируем .animate() его. .stop() служит для предотвращения возможных ошибок путем очистки очереди события jQuery.

Здесь, однако, имеется небольшой побочный эффект — так как код при фиксировании эффективно контролирует вертикальную позицию элемента навигации, вы могли бы выпустить top:15px из своего CSS. Если вы участвуете в большом проекте, где над дизайном и сценарием внешнего интерфейса работают отдельные люди, это может вызвать проблему, так как следы подобного хака легко теряются. Просто чтобы вы знали – существуют такие плагины, как великолепный jQuery.Rule Эриела Флеслера (Ariel Flesler), которые можно применять для покрытия разрыва между скриптами и таблицами стилей. Вам нужно самому решить, нужно ли вам что-то подобное.

Скорее всего, еще подобного эффекта можно достичь с помощью @keyframes из CSS, но они гораздо меньше поддерживаются (и требуется множество префиксов производителей) и менее гибкие, и анимация подъема верх может оказаться большим разочарованием. Так как мы не сходим с пути прогрессивного улучшения, то у нас отсутствуют причины не придерживаться солидной функциональности jQuery.

Шаг 6: Выделение и гладкая прокрутка

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

$(function() {
  …
  // copy from here…

  var sections = $('section');
  var navigation_links = $('nav a');

  sections.waypoint({
    handler: function(event, direction) {
      // handler code
    },
    offset: '35%'
  });

  // …to here
});

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

Однако код, который мы собираемся использовать в функции своего обработчика, не очень говорит за себя. Вот он:

var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();

var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("selected");
active_link.addClass("selected");

Во-первых, нам нужно знать, какой раздел в данный момент просматривается. Если прокрутить вниз, то раздел, к которому принадлежит вейпойнт – тот же, который активируется. Прокрутка вверх мимо вейпойнта, тем не менее, означает, что в поле зрения оказался предыдущий раздел — так что для его выбора мы применим .prev(). Затем удаляем класс selected из всех ссылок навигационной панели до его применения заново к тому классу, чей атрибут href соответствует id текущего активного раздела.

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

На каком-то этапе вы, может быть, заметили, что щелчок по ссылкам панели навигации помещает верх раздела на самую верхушку демонстрационного окна браузера. Весьма неожиданно, когда ничто не заслоняет эту часть экрана; теперь, когда у нас там находится навигационная панель, она становится сильным раздражителем. Вот где приходит на помощь ScrollTo от Эриела Флеслера (Ariel Flesler). Включите его в свою страницу, а затем вставьте следующий код:

navigation_links.click( function(event) {

  $.scrollTo(
    $(this).attr("href"),
    {
      duration: 200,
      offset: { 'left':0, 'top':-0.15*$(window).height() }
    }
  );

});

(конечно, этот код ставится над последней фигурной скобкой!)

Хотя существуют лучшие способы привязать функцию к событиям щелчка, мы собираемся придерживаться самого простого: .click(). Метод .scrollTo() вызывается способом, очень похожим на .waypoint(). Он принимает два параметра — цель прокрутки и объект, содержащие различные опции, которые в данном случае говорят сами за себя. Атрибут href нажатой ссылки отлично работает в качестве адресата прокрутки, а выражение, использованное как верхний офсет, размещает цель на 15% от высоты демонстрационного окна.

Заключение

Похоже, мы закончили. Я представил вам удобный небольшой плагин Waypoints, мы пробежались по нескольким случаям его применения, который должны были дать вам представление о множестве вещей, которые можно сделать с его помощью. Мы также выполнили более интуитивное поведение прокрутки, подходящее к навигации. Добавьте в смесь немного Ajax’а и окажетесь на пути к созданию некоего плавного, создающего эффект присутствия, впечатления от Сети, за которым будущее… ну, скорее всего это станет на какое-то время модной тенденцией, а затем будет общеупотребительным, заставляющим ветеранов Сети ностальгировать о прошлом. Эй, мир так устроен!

Что касается ленточек, их основной недостаток вот в чем: они просто иллюзия. Края ленты на самом деле не загибаются за края контейнера; они просто таковыми кажутся, что становится вполне ясно, когда лента проходит над элементом, выступающим за край страницы.

По причине того, как работает z-index, похоже, простых путей разрешения этого конфликта не существует, кроме избегания его. Однако с помощью воображения, а также знания основ jQuery можно спроектировать для этих элементов способ сдвигаться с пути ленты по мере ее приближения. Хотя этот прием сильно выходит за грань этого учебника; надеюсь, что рано или поздно смогу показать вам его в виде небольшой подсказки, здесь или на Nettuts+. Оставайтесь на связи!

Автор: Adam Avramov

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Премиум. Создание административной части для флеш-галереи. Работа с XML. Часть2.

Андрей Кудлай — Wed, 25 Apr 2012 12:26:11 +0000

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

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

Из этого урока Вы узнаете:

1. Как правильно загружать новые файлы в каталог, не боясь перезаписать прежние.

2. Как читать содержимое каталога и получать массив файлов в каталоге.

3. Как создать простейший загрузчик файлов.

План урока:

1. Создаем форму добавления нового фото.

2. Пишем функцию генерирования имени картинок.

3. Обработчик формы. Определяем переменные.

4. Обработчик формы. Проверяем тип загруженных файлов.

5. Обработчик формы. Проверяем размеры загруженных картинок.

6. Обработчик формы. Получаем необходимые переменные.

Результат урока:

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

Детали учебника

Раздел: PHP

Сложность: Средняя

Урок: Видео+текстовая версии (.mp4;.pdf)

Время: 01:29:47

Размер архива: 176 Mb

Автор: Андрей Кудлай

Итак, приступим!

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

50 креативных портфолио сайтов.

Андрей Кудлай — Mon, 23 Apr 2012 18:32:37 +0000

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

Для вдохновения взгляните на эти портфолио сайты. Они различные для разработчиков (для них, как правило, дизайны очень точные), для дизайнеров (красочные и яркие) и фотографов.

LP – Creative Designer