Эффекты с повторяющимся фоном 14 16: Фоны. Знакомство — Тренажёр «Продвинутый HTML и CSS» — HTML Academy

Использование CSS-градиентов — CSS | MDN

CSS-градиенты представлены типом данных <gradient> (en-US), специальным типом <image> (en-US), состоящим из последовательного перехода между двумя и более цветами. Вы можете выбрать один из трёх типов градиентов: линейный (создаётся с помощью функции linear-gradient), круговой (создаётся с помощью radial-gradient) и конический (создаётся с помощью функции conic-gradient (en-US)). Вы можете также создавать повторяющиеся градиенты с помощью функций repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Градиенты могут быть использованы везде, где может быть использован тип <image>, например в качестве фона. Так как градиенты генерируются динамически, они могут избавить от необходимости использовать файлы растровых изображений, которые ранее использовались для достижения похожих эффектов.

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

Линейный градиент создаёт цветную полосу, имеющую вид прямой линии.

Обычный линейный градиент

Чтобы создать самый простой тип градиента, всё, что вам нужно – это указать два цвета. Они называются

.simple-linear {
  background: linear-gradient(blue, pink);
}

Изменение направления

По умолчанию линейные градиенты идут сверху вниз. Вы можете изменить угол поворота путём задания направления.

.horizontal-gradient {
  background: linear-gradient(to right, blue, pink);
}

Диагональные градиенты

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

.diagonal-gradient {
  background: linear-gradient(to bottom right, blue, pink);
}

Использование углов

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

.angled-gradient {
  background: linear-gradient(70deg, blue, pink);
}

При использовании угла 0deg создаётся вертикальный градиент, идущий снизу вверх, 90deg

Все типы CSS-градиентов – это диапазон позиционно-зависимых цветов. Цвета, создаваемые CSS-градиентами, могут варьироваться непрерывно с изменением позиции, создавая плавные цветовые переходы. Возможно также создавать полосы сплошных цветов, и резкие переходы между двумя цветами. Следующее примеры работают во всех градиентных функциях:

Использование более двух цветов

Вам не нужно ограничиваться двумя цветами – вы можете использовать столько, сколько хотите! По умолчанию цвета равномерно распределены по градиенту.

.auto-spaced-linear-gradient {
  background: linear-gradient(red, yellow, blue, orange);
}

Расположение точек остановок цветов

Вам не нужно оставлять ваши точки остановок цветов на их исходных позициях. Чтобы подправить их расположение, вы можете не задавать каждому ничего, или задать одну или две процентные, а для круговых и линейных градиентов – абсолютные значения. Если вы зададите расположение с процентах, 0% будет представлять начальную точку, в то время как 100% будет являться конечной точкой; однако, если необходимо, вы можете использовать значения и вне этого диапазона для достижения желаемого эффекта.

.multicolor-linear {
   background: linear-gradient(to left, lime 28px, red 77%, cyan);
}

Создание резких переходов

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

.striped {
   background: linear-gradient(to bottom left, cyan 50%, palegoldenrod 50%);
}

Подсказки градиента

По умолчанию градиент идёт плавно от одного цвета до другого. Вы можете добавить цветовую подсказку, чтобы переместить значение средней точки перехода в определённую точку градиента. В этом примере мы переместили среднюю точку перехода из отметки 50% на отметку 10%.

.color-hint {
  background: linear-gradient(blue, 10%, pink);
}
.simple-linear {
  background: linear-gradient(blue, pink);
}

Создание цветных линий и полосок

.multiposition-stops {
   background: linear-gradient(to left,
       lime 20%, red 30%, red 45%, cyan 55%, cyan 70%, yellow 80% );
   background: linear-gradient(to left,
       lime 20%, red 30% 45%, cyan 55% 70%, yellow 80% );
}
.multiposition-stop2 {
   background: linear-gradient(to left,
      lime 25%, red 25%, red 50%, cyan 50%, cyan 75%, yellow 75% );
   background: linear-gradient(to left,
      lime 25%, red 25% 50%, cyan 50% 75%, yellow 75% );
}
 

В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.

Во втором примере каждая вторая точка остановки для каждого цвета находится на той же позиции, что и первая точка остановки соседнего цвета, создавая полосатый эффект.

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

Управление переходом градиента

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

.colorhint-gradient {
  background: linear-gradient(to top, black, 20%, cyan);
}
.regular-progression {
  background: linear-gradient(to top, black, cyan);
}

Перекрытие градиентов

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

.layered-image {
  background: linear-gradient(to right, transparent, mistyrose),
      url("https://mdn.mozillademos.org/files/15525/critters.png");
}

Наслаивание градиентов

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

.stacked-linear {
  background:
      linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.  71%),
      linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
      linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
}

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

Обычный круговой градиент

Как и в случае с линейными градиентами, всё, что вам нужно, чтобы создать круговой градиент – это два цвета. По умолчанию центр градиента находится на отметке 50% 50%, градиент становится овальным с учётом соотношения сторон содержащего его блока:

.simple-radial {
  background: radial-gradient(red, blue);
}

Размещение круговых точек остановки

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

. radial-gradient {
  background: radial-gradient(red 10px, yellow 30%, #1e90ff 50%);
}

Расположение центра градиента

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

.radial-gradient {
  background: radial-gradient(at 0% 30%, red 10px, yellow 30%, #1e90ff 50%);
}

Задание размеров кругового градиента

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

Пример: ближайшая сторона для эллипса

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

.radial-ellipse-side {
  background: radial-gradient(ellipse closest-side,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: самый дальний угол для эллипса

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

.radial-ellipse-far {
  background: radial-gradient(ellipse farthest-corner at 90% 90%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Пример: ближайшая сторона для круга

Этот пример использует closest-side, что задаёт размер круга как расстояние между начальной точкой (центром) и ближайшей стороной. Радиус круга – это расстояние между центром градиента и ближайшей стороной. Круг, с учётом позиционирования в точке 25% от левой стороны и 25% от низа, ближе всего к низу, так как расстояние по высоте в этом случае меньше, чем по ширине.

.radial-circle-close {
  background: radial-gradient(circle closest-side at 25% 75%,
      red, yellow 10%, #1e90ff 50%, beige);
}

Наложение круговых градиентов

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

.stacked-radial {
  background:
      radial-gradient(circle at 50% 0,
        rgba(255,0,0,.5),
        rgba(255,0,0,0) 70.71%),
      radial-gradient(circle at 6.7% 75%,
        rgba(0,0,255,.5),
        rgba(0,0,255,0) 70.71%),
      radial-gradient(circle at 93.3% 75%,
        rgba(0,255,0,.5),
        rgba(0,255,0,0) 70.71%) beige;
  border-radius: 50%;
}

CSS-функция conic-gradient() создаёт изображение, состоящее из градиента с переходом цвета, обёрнутым вокруг центральной точки (в отличие от градиента, исходящего кругом от центральной точки). Образцом конического градиента можно назвать круговые диаграммы и цветовые круги, но он также может быть использован для создания шахматной доски (клетки) и других интересных эффектов.

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

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

Обычный конический градиент

Так же, как и в случае с линейными и круговыми градиентами, всё, что вам нужно для создания конического градиента – это два цвета. По умолчанию центр градиента находится в точке 50% 50%, начало градиента направлено вверх:

. simple-conic {
  background: conic-gradient(red, blue);
}

Расположение конического центра

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

.conic-gradient {
  background: conic-gradient(at 0% 30%, red 10%, yellow 30%, #1e90ff 50%);
}

Изменение угла

Вы можете задать угол, в котором направлено начало градиента значением типа <angle>, с предшествующим ему ключевым словом «from».

.conic-gradient {
  background: conic-gradient(from 45deg, red, orange, yellow, green, blue, purple);
}

Функции linear-gradient, radial-gradient и conic-gradient (en-US) не поддерживают автоматически повторяющиеся точки остановки цвета. Однако, для реализации этой функциональности существуют функции repeating-linear-gradient, repeating-radial-gradient (en-US) и repeating-conic-gradient (en-US).

Размер повторяющейся градиентной линии или дуги – это длина от значения первой до значения последней точки остановки цвета. Если первая точка остановки содержит только цвет без указания длины до точки остановки, то используется значение по умолчанию, равное 0. Если последняя точка остановки содержит только цвет без указания длины до точки установки, то используется значение по умолчанию, равное 100%. Если ни то, ни другое не определено, то линия градиента будет равна 100%, что означает, что линейный и конический градиент не будет повторяться, а круговой градиент будет повторяться, только если радиус градиента меньше, чем расстояние между центром градиента и самым дальним углом. Если первая точка остановки определена и имеет значение больше 0, градиент будет повторяться при условии, что размер линии или дуги равен разнице между первой и последней точкой остановки, если эта разница меньше, чем 100% или 360 градусов.

Повторяющиеся линейные градиенты

В этом примере используется repeating-linear-gradient для создания повторяющегося градиента, идущего по прямой линии. Цветовая последовательность начинается заново с каждым повторением градиента. В данном случае градиент имеет длину 10px.

.repeating-linear {
  background: repeating-linear-gradient(-45deg, red, red 5px, blue 5px, blue 10px);
}

Множественные повторяющиеся линейные градиенты

Так же, как и в случае с обычными линейными и круговыми градиентами, вы можете использовать множественные градиенты, один поверх другого. Это имеет смысл, только если градиенты частично прозрачны, что позволяет видеть одни градиенты сквозь прозрачные части других градиентов, этого же можно достичь при условии использования разных размеров фона (background-size), при этом возможно ещё и при разных значениях свойства background-position для каждого градиента. Мы использовали прозрачность.

В данном случае градиентные линии имеют длину 300px, 230px и 300px.

.multi-repeating-linear {
  background:
      repeating-linear-gradient(190deg, rgba(255, 0, 0, 0. 5) 40px,
        rgba(255, 153, 0, 0.5) 80px, rgba(255, 255, 0, 0.5) 120px,
        rgba(0, 255, 0, 0.5) 160px, rgba(0, 0, 255, 0.5) 200px,
        rgba(75, 0, 130, 0.5) 240px, rgba(238, 130, 238, 0.5) 280px,
        rgba(255, 0, 0, 0.5) 300px),
      repeating-linear-gradient(-190deg, rgba(255, 0, 0, 0.5) 30px,
        rgba(255, 153, 0, 0.5) 60px, rgba(255, 255, 0, 0.5) 90px,
        rgba(0, 255, 0, 0.5) 120px, rgba(0, 0, 255, 0.5) 150px,
        rgba(75, 0, 130, 0.5) 180px, rgba(238, 130, 238, 0.5) 210px,
        rgba(255, 0, 0, 0.5) 230px),
      repeating-linear-gradient(23deg, red 50px, orange 100px,
        yellow 150px, green 200px, blue 250px,
        indigo 300px, violet 350px, red 370px);
}

Клетчатый градиент

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

. plaid-gradient {
  background:
      repeating-linear-gradient(90deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(0deg, transparent, transparent 50px,
        rgba(255, 127, 0, 0.25) 50px, rgba(255, 127, 0, 0.25) 56px,
        transparent 56px, transparent 63px,
        rgba(255, 127, 0, 0.25) 63px, rgba(255, 127, 0, 0.25) 69px,
        transparent 69px, transparent 116px,
        rgba(255, 206, 0, 0.25) 116px, rgba(255, 206, 0, 0.25) 166px),
      repeating-linear-gradient(-45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0.25) 10px),
      repeating-linear-gradient(45deg, transparent, transparent 5px,
        rgba(143, 77, 63, 0.25) 5px, rgba(143, 77, 63, 0. 25) 10px);

  background:
      repeating-linear-gradient(90deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(0deg, transparent 0 50px,
        rgba(255, 127, 0, 0.25) 50px 56px,
        transparent 56px 63px,
        rgba(255, 127, 0, 0.25) 63px 69px,
        transparent 69px 116px,
        rgba(255, 206, 0, 0.25) 116px 166px),
      repeating-linear-gradient(-45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px),
      repeating-linear-gradient(45deg, transparent 0 5px,
        rgba(143, 77, 63, 0.25) 5px 10px);
}

Повторяющиеся круговые градиенты

В этом примере для создания кругового градиента, повторяющегося из центральной точки, используется repeating-radial-gradient (en-US). Цветовая последовательность начинаются заново с каждой итерацией повторения градиента.

.repeating-radial {
  background: repeating-radial-gradient(black, black 5px, white 5px, white 10px);
}

Множественные повторяющиеся круговые градиенты

.multi-target {
  background:
      repeating-radial-gradient(ellipse at 80% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 15px, rgba(255,255,255,0.5) 15px,
        rgba(255,255,255,0.5) 30px) top left no-repeat,
      repeating-radial-gradient(ellipse at 20% 50%,rgba(0,0,0,0.5),
        rgba(0,0,0,0.5) 10px, rgba(255,255,255,0.5) 10px,
        rgba(255,255,255,0.5) 20px) top left no-repeat yellow;
  background-size: 200px 200px, 150px 150px;
}

• Градиентные функции: linear-gradient, radial-gradient, conic-gradient (en-US), repeating-linear-gradient, repeating-radial-gradient (en-US), repeating-conic-gradient (en-US)
• Типы данных CSS, связанные с градиентами: <gradient> (en-US), <image> (en-US)
• Свойства CSS, связанные с градиентами: background, background-image
• Галерея шаблонов градиентов CSS, от Lea Verou
• Библиотека градиентов CSS3, от Estelle Weyl
• Генератор градиентов CSS

Применение стилей и цветов — Интерфейсы веб API

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

До сих пор мы видели только методы рисования контекста. Если мы хотим применить цвета к фигуре, то есть два важных свойства, которые мы можем использовать: fillStyle и strokeStyle.

fillStyle = color

Устанавливает стиль для фона фигур.

strokeStyle = color

Устанавливает стиль контура фигуры. 

color может быть цветом, (строка, представленная в CSS <color>), градиентом или паттерном. Градиенты и паттерны мы рассмотрим позже. По умолчанию цвет фона и контура  — чёрный (значение CSS цвета  #000000).

На заметку: Когда вы устанавливаете  значения strokeStyle и/или fillStyle, то новое значение становится стандартным для всех фигур, которые будут нарисованы с этого момента. Когда вам нужен другой цвет, вы должны перезаписать значение в fillStyle или в strokeStyle для каждой фигуры.

Чтобы строка color считалась валидной, она должна соответствовать CSS <color>. Далее приведены примеры того, как можно по-разному задать один и тот же цвет. 

ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";

Пример

В этом примере мы опять воспользуемся двойным циклом, чтобы нарисовать сетку из прямоугольников, каждый из которых имеет свой цвет. Окончательное изображение должно иметь вид, как показано на скриншоте. Здесь не происходит ничего сверхъестественного. Мы используем две переменные i и j для генерации уникального RGB цвета для каждого квадрата и изменяем только красные и зелёные значения. Синий канал представляет собой фиксированное значение. Путём изменения каналов вы можете генерировать всю палитру. Увеличив количество шагов вы можете достигнуть такого вида палитры, какая используется в Photoshop.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i=0;i<6;i++){
    for (var j=0;j<6;j++){
      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
                       Math.floor(255-42.5*j) + ',0)';
      ctx.fillRect(j*25,i*25,25,25);
    }
  }
}

Результат выглядит так:

Пример

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

  function draw() {
    var ctx = document.getElementById('canvas'). getContext('2d');
    for (var i=0;i<6;i++){
      for (var j=0;j<6;j++){
        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                         Math.floor(255-42.5*j) + ')';
        ctx.beginPath();
        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
        ctx.stroke();
      }
    }
  }

Результат выглядит так:

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

globalAlpha = transparencyValue

Для применения, указывается значения прозрачности для всех будущих фигур, что будут нарисованы на canvas. Значение полупрозрачности могут быть между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность). Значение 1.0 (полная непрозрачность) установлено по умолчанию.

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

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

ctx.strokeStyle = "rgba(255,0,0,0.5)";
ctx.fillStyle = "rgba(255,0,0,0.5)";

Функция rgba() похожа на функцию rgb(), но имеет один дополнительный параметр. Последний параметр устанавливает значение прозрачности для конкретного цвета. Действующий диапазон значений находится между 0.0 (полная прозрачность) и 1.0 (полная непрозрачность).

Пример

В данном примере мы нарисуем фон и четыре квадрата с различными цветами.   Сверху изображения будет выведен набор полупрозрачных кругов. Установим свойство globalAlpha значением 0.2, которое будет использовано для всех последующих форм. Каждый шаг цикла рисует круг с большим радиусом. По окончанию получим радиальный градиент. Накладывая ещё больше кругов друг на друга, мы фактически сможем уменьшить прозрачность ранее нарисованных кругов. Увеличив счётчик итераций, при этом рисуя ещё круги, мы сможем добиться исчезновение центра изображения.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  
  ctx.fillStyle = '#FD0';
  ctx.fillRect(0,0,75,75);
  ctx.fillStyle = '#6C0';
  ctx.fillRect(75,0,75,75);
  ctx.fillStyle = '#09F';
  ctx.fillRect(0,75,75,75);
  ctx.fillStyle = '#F30';
  ctx.fillRect(75,75,75,75);
  ctx.fillStyle = '#FFF';

  
  ctx.globalAlpha = 0.2;

  
  for (i=0;i<7;i++){
    ctx.beginPath();
    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
    ctx.fill();
  }
}

Пример использования

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  ctx.fillStyle = 'rgb(255,221,0)';
  ctx.fillRect(0,0,150,37.5);
  ctx.fillStyle = 'rgb(102,204,0)';
  ctx.fillRect(0,37.5,150,37.5);
  ctx.fillStyle = 'rgb(0,153,255)';
  ctx.fillRect(0,75,150,37.5);
  ctx.fillStyle = 'rgb(255,51,0)';
  ctx.fillRect(0,112.5,150,37.5);

  
  for (var i=0;i<10;i++){
    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
    for (var j=0;j<4;j++){
      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
    }
  }
}

Есть несколько свойств, которые позволяют нам стилизовать линии.

lineWidth = value

Устанавливает ширину линий, рисуемых в будущем.

lineCap = type

Устанавливает внешний вид концов линий.

lineJoin = type

Устанавливает внешний вид «углов», где встречаются линии.

miterLimit = value

Устанавливает ограничение на митру, когда две линии соединяются под острым углом, чтобы вы могли контролировать её толщину.

getLineDash()

Возвращает текущий массив тире штриховки, содержащий чётное число неотрицательных чисел.

setLineDash(segments) (en-US)

Устанавливает текущий пунктир линии.

lineDashOffset = value

Указывает, где следует начинать тире массива в строке.

Вы лучше поймёте, что они делают, глядя на приведённые ниже примеры.

Пример

Это свойство задаёт толщину текущей строки. Значения должны быть положительными. По умолчанию для этого значения установлено 1.0 единицы.

Ширина линии — это толщина хода, центрированного по данному пути. Другими словами, область, которая нарисована, простирается до половины ширины линии по обе стороны пути. Поскольку координаты холста не напрямую ссылаются на пиксели, особое внимание следует уделять получению чётких горизонтальных и вертикальных линий.

В приведённом ниже примере 10 прямых линий рисуются с увеличением ширины линий. Линия в крайнем левом углу — 1.0 единицы. Тем не менее, толщина левой и всех других линий нечётной ширины не выглядят чёткими из-за позиционирования пути.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  for (var i = 0; i < 10; i++){
    ctx.lineWidth = 1+i;
    ctx.beginPath();
    ctx.moveTo(5+i*14,5);
    ctx.lineTo(5+i*14,140);
    ctx.stroke();
  }
}

Получение чётких строк требует понимания путей сглаживания. На рисунках ниже представлена сетка координат холста. Квадраты между сетками являются фактическими экранными пикселями. В первом изображении сетки ниже прямоугольник от (2, 1) до (5, 5) заполняется. Вся область между ними (светло-красный) падает на границы пикселей, поэтому полученный заполненный прямоугольник будет иметь чёткие края.

Если вы рассмотрите путь от (3, 1) до (3, 5) с толщиной строки 1.0, вы получите ситуацию во втором изображении. Фактическая заполняемая область, (синяя), распространяется только наполовину в пикселях по обе стороны пути. Приблизительно это означает, что частично затенённые пиксели приводят к заполнению всей области (светло-голубой и синей) цветом, только наполовину темным, чем фактический цвет штриха. Это то, что происходит с линией шириной 1.0 в предыдущем примере кода.

Чтобы исправить это, вы должны быть более точными при создании пути. Зная, что линия шириной 1.0 занимает половину единицы по обе стороны пути, создание пути от (3.5, 1) до (3.5, 5) приведёт к ситуации в третьем изображении — ширина линии 1. 0 закончится верно, точно заполняя вертикальную линию с одним пикселем.

Примечание: Имейте в виду, что в нашем примере с вертикальной линией позиция Y по-прежнему ссылается на целочисленную позицию сетки — иначе мы увидели бы пиксели с половинным охватом в конечных точках (также обратите внимание, что это поведение зависит от текущего стиля lineCap,  значение по умолчанию — butt; вы можете вычислить согласованные штрихи с полупиксельными координатами для линий с нечётной шириной, установив стиль lineCap в square, чтобы внешняя граница вокруг конечной точки линии автоматически расширялась, охватывая весь пиксель в точку).

Также обратите внимание, что затронуты только начальные и конечные  точки пути: если путь закрыт с помощью closePath(), — нет начальной и конечной точки; вместо этого все конечные точки в пути подключены к их прикреплённому предыдущему и следующему сегментам и при текущей настройке стиля lineJoin в значении по умолчанию — miter, с эффектом автоматического расширения внешних границ подключённых сегментов до их точки пересечения — обработанный ход будет точно покрывать полные пиксели с центром в каждой конечной точке, если эти связанные сегменты горизонтальны и/или вертикальны). См. следующие два раздела, демонстрирующие эти дополнительные стили.

Для линий с чётной шириной каждая половина заканчивается как целое количество пикселей, поэтому вам нужен путь, который находится между пикселями (то есть (3,1) — (3,5)), вместо середины пикселей.

Хотя это и необычно, когда изначально работаешь с масштабируемой 2D-графикой, обращая внимание на сетку пикселей и положение путей, но вы убедитесь, что ваши рисунки будут выглядеть правильно, независимо от масштабирования или любых других преобразований. Вертикальная линия ширины 1,0, построенная таким образом, станет чёткой 2-пиксельной линией при увеличении на 2 и появится в правильном положении.

Пример

Свойство lineCap определяет, как выводятся конечные точки каждой строки. Для этого свойства есть три возможных значения: butt, round и square. По умолчанию для этого свойства установлено значение butt.

butt

Концы линий соответствуют крайним точкам.

round

Концы линий округлены.

square

Концы линий описаны квадратом с равной шириной и половиной высоты толщины линии.

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

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

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineCap = ['butt','round','square'];

  
  ctx.strokeStyle = '#09f';
  ctx. beginPath();
  ctx.moveTo(10,10);
  ctx.lineTo(140,10);
  ctx.moveTo(10,140);
  ctx.lineTo(140,140);
  ctx.stroke();

  
  ctx.strokeStyle = 'black';
  for (var i=0;i<lineCap.length;i++){
    ctx.lineWidth = 15;
    ctx.lineCap = lineCap[i];
    ctx.beginPath();
    ctx.moveTo(25+i*50,10);
    ctx.lineTo(25+i*50,140);
    ctx.stroke();
  }
}

Пример

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

Для этого свойства есть три возможных значения: round, bevel и miter. По умолчанию для этого свойства установлено значение miter. Обратите внимание, что настройка lineJoin не действует, если два связанных сегмента имеют одно и то же направление, потому что в этом случае не будет добавлена ​​область соединения.

round

Радиус заполняемой части для скруглённых углов равен половине ширины линии. центр этого радиуса совпадает с концами подключённых сегментов.

bevel

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

miter

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

В приведённом ниже примере показаны три разных пути, демонстрирующие каждый из этих трёх свойств lineJoin; результат — выше. 

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  var lineJoin = ['round','bevel','miter'];
  ctx.lineWidth = 10;
  for (var i=0;i<lineJoin. length;i++){
    ctx.lineJoin = lineJoin[i];
    ctx.beginPath();
    ctx.moveTo(-5,5+i*40);
    ctx.lineTo(35,45+i*40);
    ctx.lineTo(75,5+i*40);
    ctx.lineTo(115,45+i*40);
    ctx.lineTo(155,5+i*40);
    ctx.stroke();
  }
}

Демонстрация свойства

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

Свойство miterLimit определяет, как далеко можно установить внешнюю точку соединения из внутренней точки подключения. Если две линии превышают это значение, вместо этого получается привязка конуса. Обратите внимание, что максимальная длина митра является произведением ширины линии, измеренной в текущей системе координат, значением этого свойства miterLimit (значение по умолчанию 10,0 в HTML <canvas>), поэтому miterLimit может устанавливаться независимо от текущей шкалы дисплея или любых аффинных преобразований путей: она влияет только на эффективно визуализированную форму рёбер линии.

Точнее, предел митры является максимально допустимым отношением длины расширения (в холсте HTML он измеряется между внешним углом соединённых краёв линии и общей конечной точкой соединительных сегментов, указанными на пути), до половины ширины линии. Его можно равнозначно определить как максимально допустимое отношение расстояния между внутренней и внешней точками перехода краёв к общей ширине линии. Затем он равен косекансу с половиной минимального внутреннего угла соединительных сегментов, ниже которого не будет создано ни одного соединения митра, а только скос соединяется:

• miterLimit = max miterLength / lineWidth = 1 / sin ( min θ / 2 )
• Предел митры по умолчанию, равный 10,0, разделит все митры углов, острее примерно 11 градусов.
• Предел митры, равный √2 ≈ 1.4142136 (rounded up) сгладит миты для всех острых углов, поддерживая митры только для тупых или прямых углов.
• Предел митры, равный 1,0, действителен, но отключит все миты.
• Значения ниже 1.0 являются недопустимыми для предела митры.

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

Если вы укажете в этой демонстрации значение miterLimit ниже 4.2, ни один из видимых углов не присоединится к расширению митры, но только с небольшим скосом рядом с синими линиями; с отметкой miterLimit выше 10, большинство углов в этой демонстрации должны соединяться с митрой, удалённой от синих линий, высота которой уменьшается между углами слева направо, потому что они соединяются с растущими углами; с промежуточными значениями углы с левой стороны будут соединяться только с скосом рядом с синими линиями, а углы с правой стороны с удлинителем митры (также с уменьшающейся высотой).

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  ctx.clearRect(0,0,150,150);

  
  ctx.strokeStyle = '#09f';
  ctx.lineWidth   = 2;
  ctx.strokeRect(-5,50,160,50);

  
  ctx.strokeStyle = '#000';
  ctx.lineWidth = 10;

  
  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
  } else {
    alert('Value must be a positive number');
  }

  
  ctx.beginPath();
  ctx.moveTo(0,100);
  for (i=0;i<24;i++){
    var dy = i%2==0 ? 25 : -25 ;
    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
  }
  ctx.stroke();
  return false;
}

Использование штрихов

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

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

var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();

Just like any normal drawing program, we can fill and stroke shapes using linear and radial gradients. We create a CanvasGradient object by using one of the following methods. We can then assign this object to the fillStyle or strokeStyle properties.

createLinearGradient(x1, y1, x2, y2)

Creates a linear gradient object with a starting point of (x1, y1) and an end point of (x2, y2).

createRadialGradient(x1, y1, r1, x2, y2, r2) (en-US)

Creates a radial gradient. The parameters represent two circles, one with its center at (x1, y1) and a radius of r1, and the other with its center at (x2, y2) with a radius of r2.

For example:

var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);

Once we’ve created a CanvasGradient object we can assign colors to it by using the addColorStop() method.

gradient. addColorStop(position, color) (en-US)

Creates a new color stop on the gradient object. The position is a number between 0.0 and 1.0 and defines the relative position of the color in the gradient, and the color argument must be a string representing a CSS <color>, indicating the color the gradient should reach at that offset into the transition.

You can add as many color stops to a gradient as you need. Below is a very simple linear gradient from white to black.

var lineargradient = ctx.createLinearGradient(0,0,150,150);
lineargradient.addColorStop(0, 'white');
lineargradient.addColorStop(1, 'black');

Пример

In this example, we’ll create two different gradients. As you can see here, both the strokeStyle and fillStyle properties can accept a canvasGradient object as valid input.

function draw() {
  var ctx = document. getElementById('canvas').getContext('2d');

  
  var lingrad = ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0, '#00ABEB');
  lingrad.addColorStop(0.5, '#fff');
  lingrad.addColorStop(0.5, '#26C000');
  lingrad.addColorStop(1, '#fff');

  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5, '#000');
  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');

  
  ctx.fillStyle = lingrad;
  ctx.strokeStyle = lingrad2;

  
  ctx.fillRect(10,10,130,130);
  ctx.strokeRect(50,50,50,50);

}

The first is a background gradient. As you can see, we assigned two colors at the same position. You do this to make very sharp color transitions—in this case from white to green. Normally, it doesn’t matter in what order you define the color stops, but in this special case, it does significantly. If you keep the assignments in the order you want them to appear, this won’t be a problem.

In the second gradient, we didn’t assign the starting color (at position 0. 0) since it wasn’t strictly necessary, because it will automatically assume the color of the next color stop. Therefore, assigning the black color at position 0.5 automatically makes the gradient, from the start to this stop, black.

Пример

In this example, we’ll define four different radial gradients. Because we have control over the start and closing points of the gradient, we can achieve more complex effects than we would normally have in the «classic» radial gradients we see in, for instance, Photoshop (that is, a gradient with a single center point where the gradient expands outward in a circular shape).

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
  radgrad.addColorStop(0, '#A7D30C');
  radgrad. addColorStop(0.9, '#019F62');
  radgrad.addColorStop(1, 'rgba(1,159,98,0)');

  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
  radgrad2.addColorStop(0, '#FF5F98');
  radgrad2.addColorStop(0.75, '#FF0188');
  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
  radgrad3.addColorStop(0, '#00C9FF');
  radgrad3.addColorStop(0.8, '#00B5E2');
  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
  radgrad4.addColorStop(0, '#F4F201');
  radgrad4.addColorStop(0.8, '#E4C700');
  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

  
  ctx.fillStyle = radgrad4;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad3;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad2;
  ctx.fillRect(0,0,150,150);
  ctx.fillStyle = radgrad;
  ctx.fillRect(0,0,150,150);
}

In this case, we’ve offset the starting point slightly from the end point to achieve a spherical 3D effect. It’s best to try to avoid letting the inside and outside circles overlap because this results in strange effects which are hard to predict.

The last color stop in each of the four gradients uses a fully transparent color. If you want to have a nice transition from this to the previous color stop, both colors should be equal. This isn’t very obvious from the code because it uses two different CSS color methods as a demonstration, but in the first gradient #019F62 = rgba(1,159,98,1).

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

createPattern(image, type) (en-US)

Создаёт и возвращает новый canvas объект — шаблон (pattern). image — CanvasImageSource (en-US) (то есть HTMLImageElement, другой холст, элемент <video> или подобный  объект. type — строка, указывающая, как использовать image.

Тип указывает, как использовать image для создания шаблона и должен быть одним из следующих значений:

repeat

Повторяет изображение в вертикальном и горизонтальном направлениях.

repeat-x

Повторяет изображение по горизонтали, но не по вертикали.

repeat-y

Повторяет изображение по вертикали, но не по горизонтали.

no-repeat

Не повторяет изображение. Используется только один раз.

Мы используем этот метод, чтобы создать CanvasPattern объект, который очень похож на методы градиента, рассмотренные ранее. Как только мы создали шаблон, мы можем назначить ему свойства fillStyle или strokeStyle. Например:

var img = new Image();
img.src = 'someimage.png';
var ptrn = ctx.createPattern(img,'repeat');

Примечание: По аналогии с методом drawImage(), вы должны убедиться, что изображение, которое вы используете, загружено до вызова этого метода. Иначе шаблон может быть отрисован некорректно.

Пример

In this last example, we’ll create a pattern to assign to the fillStyle property. The only thing worth noting is the use of the image’s onload handler. This is to make sure the image is loaded before it is assigned to the pattern.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  
  var img = new Image();
  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
  img.onload = function(){

    
    var ptrn = ctx.createPattern(img,'repeat');
    ctx.fillStyle = ptrn;
    ctx.fillRect(0,0,150,150);

  }
}

Using shadows involves just four properties:

shadowOffsetX = float (en-US)

Indicates the horizontal distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.

shadowOffsetY = float (en-US)

Indicates the vertical distance the shadow should extend from the object. This value isn’t affected by the transformation matrix. The default is 0.

shadowBlur = float (en-US)

Indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

shadowColor = color (en-US)

A standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

The properties shadowOffsetX and shadowOffsetY indicate how far the shadow should extend from the object in the X and Y directions; these values aren’t affected by the current transformation matrix. Use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. These are both 0 by default.

The shadowBlur property indicates the size of the blurring effect; this value doesn’t correspond to a number of pixels and is not affected by the current transformation matrix. The default value is 0.

The shadowColor property is a standard CSS color value indicating the color of the shadow effect; by default, it is fully-transparent black.

Пример текста с тенью

This example draws a text string with a shadowing effect.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.shadowOffsetX = 2;
  ctx.shadowOffsetY = 2;
  ctx.shadowBlur = 2;
  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

  ctx.font = "20px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText("Sample String", 5, 30);
}

We will look at the font property and fillText method in the next chapter about drawing text.

When using fill (or clip (en-US) and isPointinPath (en-US)) you can optionally provide a fill rule algorithm by which to determine if a point is inside or outside a path and thus if it gets filled or not. This is useful when a path intersetcs itself or is nested.

Two values are possible:

In this example we are using the evenodd rule.

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.beginPath();
  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
  ctx.fill("evenodd");
}

Оценка временных эффектов на рынках стран БРИКС Текст научной статьи по специальности «Экономика и бизнес»

pISSN 2071-4688 eISSN 2311-8709

Инвестиционная деятельность

ОЦЕНКА ВРЕМЕННЫХ ЭФФЕКТОВ НА РЫНКАХ СТРАН БРИКС Сергей Владимирович ВАТРУШКИН

аспирант факультета экономических наук департамента финансов,

Национальный исследовательский университет — Высшая школа экономики, Москва, Российская Федерация

VSV001@ya. ru

orcid.org/0000-0003-1993-2839

SPIN-код: 4237-3091

История статьи:

Получена 07.02.2018 Получена в доработанном виде 05.03.2018 Одобрена 19.03.2018 Доступна онлайн 27.04.2018

УДК 336.761

G02, G11, G14, G15

Ключевые слова:

фондовый рынок, временные эффекты, эффект дня недели, эффект месяца, эффект квартала

Аннотация

Предмет. Определение временных эффектов на рынках ценных бумаг стран БРИКС. В основе лежит проблема извлечения дополнительной прибыли при формировании инвестиционного портфеля ценных бумаг, которая является первоочередной для каждого портфельного менеджера. Поэтому всегда стоит вопрос о возможности использования знаний, полученных в области исследования временных эффектов, для увеличения общей доходности портфеля без изменения его риска. Представление о временных эффектах и устойчивости их существования дает возможность определить форму рыночной эффективности каждого из фондовых рынков. Цели. Выявление временных эффектов на фондовых рынках стран БРИКС, определение эффективности этих рынков и представление практических рекомендаций по увеличению доходности портфеля ценных бумаг. Методология. Использовались подходы регрессионного и эконометрического анализа с использованием программного обеспечения Microsoft Excel и Gretl. Результаты. Выявлены и оценены пять временных эффектов на фондовых рынках стран БРИКС, определена эффективность этих рынков и даны практические рекомендации по увеличению доходности инвестиционного портфеля. Построена уникальная эконометрическая модель. Устойчивость календарных аномалий оценивалась путем рассмотрения не только общей выборки, но и разбивки на пятилетние подпериоды. Выявленные временные эффекты свидетельствуют о неэффективности фондовых рынков и предполагают возможность извлекать дополнительную прибыль, если учитывать их при построении торговой стратегии. Выводы. Для ряда рассматриваемых индексов характерны временные эффекты, что противоречит гипотезе эффективного рынка, согласно которой котировки финансовых активов формируются независимым образом, что не позволяет извлекать сверхприбыль.

© Издательский дом ФИНАНСЫ и КРЕДИТ, 2018

Для цитирования: Ватрушкин С.В. Оценка временных эффектов на рынках стран БРИКС // Финансы и кредит. — 2018. — Т. 24, № 4. — С. 913 — 928. https://doi.org/10.24891/fc. 24.4.913

Введение

Основной гипотезой формирования цен на рынках ценных бумаг является гипотеза эффективного рынка автора Юджина Фама [1], согласно которой существуют три формы рыночной эффективности:

• слабая форма эффективности, если стоимость рыночного актива полностью отражает прошлую информацию, касающуюся данного актива;

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

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

Из приведенной классификации ясно, что на фондовом рынке с сильной формой

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

доходность которой превзойдет доходность финансовые активы зависят от определенного

рынка, так как вся информация уже отражена периода времени. В частности, будут

в ценах. представлены результаты относительно:

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

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

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

Степень изученности эффекта месяца

В данной статье рассматриваются временные эффекты, относимые к так называемому

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

• эффекта смены месяца, согласно которому выявлено, что доходность в последние дни месяца выше, чем в первые дни;

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

• эффекта квартала (предновогоднего ралли), говорящего о неравномерном распределении доходности в зависимости от квартала, если доходность в IV квартале выше, чем во всех предыдущих, то данное явление называют эффектом предновогоднего ралли;

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

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

[2], легшей в основу определения трех форм эффективности рынков, сформулированных упомянутым Ю. Фамой [1], цены формируются аналогично случайному блужданию и учитывают всю имеющуюся на рынке информацию.

В 1980 г. Кеннет Френч [3] впервые вводит понятие эффекта понедельника на фондовом рынке США, изучая индекс Standard & Poor’s 500 за период с 1953 по 1977 г. (6 024 наблюдения). Автор предположил, что доходность индекса, рассчитанная

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

Данное открытие вызвало широкий резонанс, вследствие чего Р. Рогальски [4], Л. Харрис [5], Р. Ариэль [6], Дж. Лаконишок и С. Шмидт [7], Г. Петтенгиль и Б. Джордан [8], К. Лиано и Дж. Линдли [9], С. Киф и М. Роуш [10] проводят дополнительные исследования, в которых подтверждают неравномерность распределения доходностей в зависимости от определенного периода времени (дня, недели, месяца, года).

Более того, аналогичные временные эффекты находят Б. Дж. Яффе и Р. Вестерфилд [11] для фондовых рынков Европы, Р. Аггарвал и П. Риволи [12] для фондовых рынков Азии, Г. Марретт и А. Уортингтон [13] в Австралии, Д. Мбубулу и Ч. Чипета [14] в ЮАР. В России

изучением временных эффектов занимались М. Курашинов [15], К. МакГоуэн и И. Ибрихим [16].

Помимо этого, Дж. Синглтон и Дж. Уингендер [17] подтверждают существование календарных аномалий для долговых инструментов, Дж. Тэтчер и Л. Бленман [18] — для рынков валют, К. Лиано, Г. Хуан и Б. Гуп [19] — для внебиржевых рынков, Э. Джонстон, У. Кракоу и Дж. Макконнелл [20] — для рынков производных инструментов и А. Редман, Н. Манакян, К. Лиано [21] — для рынков реальных активов.

В качестве основных объяснений причин существования временных эффектов приводятся иррациональное поведение индивидуальных инвесторов (Р. Сиас и Л. Старкс [22]), «залипание» фондовых рынков (А. Абрахам и Д. Айкенберри [23]), неравномерное распределение новостного фона (А. Дамодаран [24]), микроэффекты (Г. Петтенгилл, Дж. Венгендер и Р. Кохли

[25]), психо-поведенческие модели действий индивидуальных инвесторов (Г. Петтенгиль

[26]). Также был ряд публикаций, где разбирается возможность извлечения дополнительной прибыли за счет временных эффектов (Е. Чоу, П. Сяо и М. Солт [27], Е. Миллер, Л. Пратер и М. Мазумер [28]).

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

Исследуемые данные

В качестве исследуемых данных берутся значения основных индексов IBOV, ММВБ, РТС, SENSEX, NIFTY, HSI, SHCOMP, T0P40, которые являются главными для бразильской фондовой биржи (BM&FBOVESPA), российской биржи ПАО «Московская Биржа», Бомбейской фондовой биржи (Bombay Stock Exchange Limited), национальной фондовой биржи Индии (National Stock Exchange of India Limited), корпорации бирж и клиринговых

организаций Гонконга (Hong Kong Exchanges and Clearing Limited), Шанхайской фондовой биржи (Shanghai Stock Exchange) и фондовой биржи Йоханнесбурга, Южная Африка (Johannesburg Stock Exchange Limited), соответственно. Таким образом,

рассматриваются все рынки стран БРИКС.

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

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

Методология исследования

В качестве основного метода используется GARCH (1, 1). Это позволяет определять временные эффекты и учитывать автокорреляцию, гетероскедастичность,

свойственные для временных рядов фондовых индексов.

Использование других двух модификаций моделей с условной гетероскедастичностью GRJ-GARCH (или TGARCH) и EGARCH нецелесообразно, что подтверждают в своей работе Е.А. Федорова и Е.В. Гиленко [29], так как коэффициенты, отвечающие за силу воздействия отрицательных значений прошлого ряда, незначимы.

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

Rt =ln ( I//It _1) -100,

где Rt — общая доходность индекса в день t, рассчитанная как натуральный логарифм доходности от закрытия предыдущего до закрытия текущего дня;

It — значение индекса I на момент закрытия в день t;

It — 1 — значение индекса I на момент закрытия в день t — 1.

При рассмотрении эффекта дня недели в качестве независимых переменных выступают значения доходностей в каждый день недели:

Rt= DMo RMo + DTu RTu + DWe RWe + DThRTh +

+ DFrRFr + Ф R(t _i) + £t,

где Dmo . .. Dft — дамми переменная на каждый день недели равная 1, если этот день выпадал на изучаемый день, и 0, если иначе;

Rmo … Rft — коэффициенты регрессии;

Rt — i — доходность индекса предыдущего дня;

Ф — коэффициент учета автокорреляции временного ряда.

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

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

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

R= const+D1R1 + D2 R2+D3 R3+D 4 R4 + D5 R5 + + D 6 R6 + D7 R7+ D8 R8+D9 R9+D-9 R-9 +

+ D-8 R-8 + D-7 R-7+D-6 R-6+D-5 R-5+ + D-4 R- 4+D-3 R-3+D-2 R-2+D-1 R-1+£t,

где Di … D9 — дамми переменная на каждый с 1-го по 9-й торговый день в начале месяца, равная 1, если этот день выпадал на изучаемый день, и 0, если иначе;

D-9 . D-1 — дамми переменная на каждый с -9 по -1 торговый день в конце месяца, равная 1, если этот день выпадал на изучаемый день, и 0, если иначе;

R1 … R-l — коэффициенты регрессии.

Нулевая гипотеза о равенстве коэффициентов вне зависимости от начала или конца месяца. Если она отвергается, то распределение доходностей неравномерно, что говорит о существовании эффекта смены месяца. ,

где Dl кв. … D4 кв. — дамми-переменная равняется 1, если доходность в изучаемый день выпала на определенный квартал года, и 0, если иначе;

Rl кв. … R4 кв. — коэффициенты регрессии.

Нулевая гипотеза о равенстве коэффициентов (постоянная доходность независима от квартала года).

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

Rf-DP1 RP1 + DP2 RP2 + DP3 RP3 + DP4RP4 + + DP 5 RP 5 + DP6 RP 6 + 8t ,

где Dpi … Dp6 — дамми-переменная на каждый из шести периодов внутри квартала, равная 1, если этот день выпадал на изучаемый период, и 0, если иначе;

RP1 . .. RP6 — коэффициенты регрессии.

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

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

Результаты исследования и их интерпретация

Результаты оценки для эффектов дня недели, смены месяца, месяца, квартала (предновогоднего ралли), внутри квартала для максимального периода каждого из индексов представлены в табл. 1. Для индекса IBOV бразильской фондовой биржи

(BM&FBOVESPA) характерен эффект конца недели, обратный эффект смены месяца и эффект января.

В России для индекса ММВБ обнаружен эффект конца недели, обратный эффект смены месяца, эффект предновогоднего ралли, обратный эффект внутри квартала. На индексе РТС относительно индекса ММВБ дополнительно обнаружен эффект февраля, но при этом отсутствует эффект предновогоднего ралли.

В Индии также рассматриваются индексы двух фондовых бирж. Для индекса SENSEX индийской фондовой биржи BSE найдены

эффекты конца недели и смены месяца. На национальной фондовой бирже Индии NSE в качестве объекта изучения был выбран индекс NIFTY, где найден обратный эффект среды, эффекты предновогоднего ралли и внутри квартала.

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

Последней рассматривалась фондовая биржа Йоханнесбурга путем изучения TOP-40. На этом фондовом рынке были найдены все изучаемые временные эффекты, а именно обратные эффекты четверга, смены месяца, эффекты декабря, предновогоднего ралли, обратный эффект внутри квартала.

На основании полученных результатов составлена «дорожная карта» временных эффектов стран БРИКС, которая приведена в табл. 2. Ввиду транзакционных издержек получение сверхдоходности представляется маловероятным, однако использовать полученные выводы при принятии торговых решений при прочих равных необходимо.

На основе представленной информации можно сделать выводы и построить рейтинг эффективности рынков стран БРИКС с учетом предположения о зависимости количества выявленных временных эффектов от степени их эффективности:

• индекс SENSEX индийской фондовой биржи BSE Ltd — 2 временных эффекта;

• индексы IBOV, NIFTY, HSI, SHCOMP, которые являются основными для бразильской фондовой биржи BM&FBOVESPA, национальной фондовой биржи Индии NSE, корпорации бирж и клиринговых организаций HKEx (Гонконг), представляющей интересы Китая, Шанхайской фондовой биржи SSE Ltd — по три временных эффекта;

• индексы РТС и ММВБ Московской биржи — по четыре временных эффекта;

• индекс TOP-40 фондовой биржи Йоханнесбурга — пять временных эффектов.

Заключение

В ходе проведенного исследования была достигнута основная цель: выявлены временные эффекты на фондовых рынках стран БРИКС, а также определены эффективности этих рынков и даны практические рекомендации по увеличению доходности инвестиционного портфеля. В качестве объекта изучения выступили бразильская фондовая биржа

(BM&FBOVESPA), российская биржа ПАО «Московская Биржа», индийская фондовая биржа (BSE Ltd), национальная фондовая биржа Индии (NSE), корпорация бирж и клиринговых организаций Гонконга (HKEx), Шанхайская фондовая биржа (SSE) и фондовая биржа Йоханнесбурга (JSE Limited).

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

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

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

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

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

Таблица 1

Результаты оценки временных эффектов стран БРИКС Table 1

The results of evaluation of time effects of the BRICS countries

Показатель IBOV РТС ММВБ SENSEX NIFTY HSI SHCOM TOP4Q~ _1. Эффект дня недели_

Понедельник -0,03 0,15′» 0,13″ 0,06″ 0,05 0,02 0,07*_0,11′»

Вторник 0,05_0,04 0,06_0,01_0,01 0,06″ 0,04_0,05

Среда_0,22″‘ 0,05 0,03_0,08″ 0,18′» 0,11′» 0,08″ 0,02

Четверг_0,21»’ 0,19»’ 0,16»’ 0,06′ 0,06 0,07»’ -0,07» 0,12»’

Пятница 0,27»’ 0,15»’ 0,2»’_0,12»’ 0,09» 0,15»’ 0,17»’ 0,05

J_0,15»’ 0,1»’ 0,03» 0,1»’ 0,08»’ 0,09»’ 0,07»’ 0,01

_2. Эффект смены месяца_

Const_0,148»’ 0,069 0,045 0,068 0,083′ 0,094»’ -0,034 0,13»’

J_0,281»’ 0,423»’ 0,443»’ 0,221»’ 0,2002» 0,1102′ 0,275»’ 0,434»’

_2_0,197» 0,319» 0,324» 0,092 0,067 0,158»’ 0,216» -0,1506

_3_0,034 0,103 0,047 -0,021 0,006 0,041 0,192» -0,135

_4_-0,025 0,304» 0,274» 0,068 0,085 0,056 0,095 -0,027

_5_0,183» 0,124 0,204 -0,035 -0,025 -0,0502 0,214» -0,092

_6_-0,162» 0,029 0,025 -0,007 -0,029 -0,042 0,113 -0,077

_-0,051 -0,006 -0,066 -0,012 -0,129 -0,063 0,031 -0,025

_8_-0,033 -0,286» -0,327» 0,007 -0,006 -0,094 0,05_-0,066

_9_0,023 0,265′ 0,307» -0,088 -0,064 -0,009 0,023 -0,099

-9_0,028 0,072 0,024 0,052 -0,021 -0,104′ 0,168′ 0,075

-8_0,029 0,082 -0,026 -0,033 -0,008 -0,017 0,106 0,039

-7_0,029 -0,0007 0,038 -0,099 -0,085 -0,004 0,0209 -0,117

-6_-0,024 -0,0206 -0,077 -0,139′ -0,181» -0,074 0,226»’ -0,177»

-5_-0,166» 0,038 0,134 0,0106 0,032 -0,0501 -0,112 -0,172»

-4_-0,1506′ -0,122 -0,105 -0,002 -0,011 -0,053 -0,012 -0,139

-3_0,114 -0,024 0,061 -0,098 -0,127 -0,015 0,176» -0,152

-2_0,076 -0,035 0,117 0,076 0,134 0,005 0,023 -0,1108

-1_0,079 0,121 0,254′ 0,261»’ 0,243 0,189»’ 0,189» -0,084

_3. Эффект месяца_

Январь_0,287»’ 0,161′ 0,186» 0,019 0,007 0,14»’ 0,096 0,07

Февраль 0,253»’ 0,347»’ 0,376»’ 0,066 0,065 0,097» 0,152» 0,078

Март_0,15»’ 0,035 0,013 0,024 0,0601 -0,049 -0,001 0,007

Апрель_0,227»’ 0,102 0,063 0,044 0,015 0,1608» 0,049 0,015

Май_0,228»’ 0,007 0,032 0,087 0,098 0,097» 0,089 0,079

Июнь_0,058 0,148 0,103 0,154»’ 0,153»’ 0,042 0,007 -0,011

Июль_0,152»’ 0,078 0,037 0,058 0,015 0,162»’ 0,0104 0,125»

Август_0,2»’ 0,154′ 0,111 0,081 0,059 -0,011 0,058 0,087

Сентябрь 0,223»’ 0,10005 0,109 0,15»’ 0,158» 0,0405 -0,023 0,126′

Октябрь 0,042 0,202′ 0,235»’ 0,042 0,088 0,205»’ 0,1101′ 0,122»

Ноябрь_0,032 0,071 0,073 0,107» 0,168»’ 0,112»’ 0,127» 0,07

Декабрь 0,169»’ 0,165′ 0,161 0,119» 0,16»’ 0,113»’ 0,137» 0,156»

4. Эффект квартала

I кв. 0,221″» 0,178″»» 0,186″»» 0,036 0,042 0,064″»» 0,071″» 0,054

II кв. 0,17″» 0,094″ 0,0701 0,1″»» 0,094″»» 0,097″»» 0,048 0,027

III кв. 0,191″»» 0,111″» 0,086″ 0,095″»» 0,071″» 0,069″»» 0,015 0,112″»»

IV кв. 0,081″» 0,146″»» 0,157″»» 0,089″»» 0,141″»» 0,141″»» 0,124″»» 0,115″»»

5. Эффект внутри квартала

P 1 0,215″»» 0,334″»» 0,264″»» 0,092″» 0,065 0,223″»» 0,149″»» 0,137″»»

P 2 0,135″»» -0,028 0,02 -0,007 -0,003 0,118″»» -0,016 0,035

P 3 0,184″»» 0,178″»» 0,117″ 0,094″» 0,1103″» 0,119″»» 0,118″»» 0,133″»»

P 4 0,175″»» 0,124″» 0,176″»» 0,078″» 0,086″» 0,037 0,085″» 0,024

P 5 0,164″»» 0,134″» 0,147″ 0,101″»» 0,127″»» 0,011 0,033 0,0404

P 6 0,134″»» 0,094 0,0508 0,131″»» 0,144″»» 0,065″» 0,019 0,1001″»

» — 10-процентная значимость. ЕХ

Эффект дня недели Эффект понедельника (в последние годы не наблюдается). Эффект конца недели Эффект конца недели Эффект конца недели Эффект конца недели

Эффект смены месяца Обратный эффект смены месяца Обратный эффект смены месяца Обратный эффект смены месяца Эффект смены месяца

Эффект месяца Эффект января Не обнаружен Эффект февраля Не обнаружен

Эффекта квартала (предновогоднего ралли) Не обнаружен Эффект предновогоднего ралли Не обнаружен Не обнаружен

Эффект внутри квартала Не обнаружен Обратный эффект внутри квартала Обратный эффект внутри квартала Не обнаружен

Итого… 3 4 4 2

Продолжение таблицы

Показатель NIFTY БИСОМ ТОР40

Эффект дня недели Обратный эффект среды Эффект конца недели Обратный эффект понедельника. Эффект четверга Обратный эффект четверга

Эффект смены месяца Не обнаружен Не обнаружен Обратный эффект смены месяца Обратный эффект смены месяца

Эффект месяца Не обнаружен Не обнаружен Не обнаружен Эффект декабря

Эффекта квартала (предновогоднего ралли) Эффект предновогоднего ралли Эффект предновогоднего ралли Не обнаружен Эффект предновогоднего ралли

Эффект внутри квартала Эффект внутри квартала Обратный эффект внутри квартала Обратный эффект внутри квартала Обратный эффект внутри квартала

Итого… 3 3 3 5

Источник: авторская разработка

Source: Authoring

Рисунок 1

Периоды рассмотрения индексов стран БРИКС (1965 — 2016 гг.) Figure 1

BRICS Index Review Periods (1965-2016)

РФ / Московская Биржа / ММВБ

-1-

1 сен. 1995

Источник: авторская разработка Source: Authoring

Список литературы

1. Fama E.F. The Behavior of Stock-Market Prices. The Journal of Business, 1965, vol. 3S, iss. 1, pp. 34-105. URL: http://citeseerx.ist.psu.edu/viewdoc/download? doi=1G.1.1.365.946S&rep=rep1 &type=pdf

2. Davis M.H.A. Louis Bachelier’s «Theory of Speculation». URL: https://f-origin.hypotoeses.org/wp-content/blogs.dir/l596/files/2G14/12/Mark-Davis-Talk.pdf

3. French K.R. Stock Returns and the Weekend Effect. Journal of Financial Economics, 19SG, vol. S, iss. 1, pp. 55-69. URL: https://doi.org/1G.1G16/G3G4-4G5X(SG)9GG21-5

4. Rogalski R.J. New Findings Regarding Day-of-the-Week Returns over Trading and Non-Trading Periods: A Note. The Journal of Finance, 19S4, vol. 39, iss. 5, pp. 16G3-1614.

URL: https://doi.org/1G.23G7/2327747

5. Harris L. A Transaction Data Study of Weekly and Intradaily Patterns in Stock Returns. Journal of Financial Economics, 19S6, vol. 16, iss. 1, pp. 99-117.

URL: https://doi.org/1G.1G16/G3G4-4G5X(S6)9GG44-9

6. Ariel R.A. A Monthly Effect in Stock Returns. Journal of Financial Economics, 19S7, vol. 1S, iss. 1, pp. 161-174. URL: https://doi.org/1G.1G16/G3G4-4G5X(S7)9GG66-3

7. Lakonishok J., Smidt S. Are Seasonal Anomalies Real? A Ninety Years Perspective. Review of Financial Studies, 19SS, vol. 1, iss. 4, pp. 403-425.

S. Pettengill G.N., Jordan B.D. A Comprehensive Examination of Volume Effects and Seasonality in Daily Security Return. The Journal of Financial Research, 19SS, vol. 11, iss. 1, pp. 57-70. URL: https://doi.org/10.1111/j .1475-6SG3.19SS.tbGGG66.x

9. Liano K., Lindley J.T. An Analysis of the Weekend Effect within the Monthly Effect. Review of Quantitative Finance and Accounting, 1995, vol. 5, iss. 4, pp. 419-426.

1G. Keef S.P., Roush M.L. Day-of-the-Week Effects in the Pre-holiday Returns of the Standard and Poor’s 500 Stock Index. Applied Financial Economics, 2005, vol. 15, iss. 2, pp. 1G7-119. URL: https://doi.org/1G.1GSG/G96G31GG42GGG293164

11. Jaffe J., Westerfield R. The Week-End Effect in Common Stock Returns: The International Evidence. The Journal of Finance, 19S5, vol. 4G, iss. 2, pp. 433-454.

URL: https://doi.org/1G.23G7/2327S94

12. Aggarwal R., Rivoli P. Seasonal and Day-of-the-Week Effects in Four Emerging Stock Markets. The Financial Review, 19S9, vol. 24, iss. 4, pp. 541-550.

13. Marrett G.E., Worthington A. The Day-of-the-Week Effect in the Australian Stock Market: An Empirical Note on the Market, Industry and Small Cap Impacts. International Journal of Business and Management, 2GGS, vol. 3, iss. 1, pp. 3-S. URL: https://research-repository.griffith.edu.au/bitstream/handle/1GG72/22336/5G755_1.pdf;sequence=1

14. Mbululu D., Chipeta C. Day of the Week Effect: Evidence from Nine Economic Sectors of JSE. Investment Analysis Journal, 2012, vol. 41, iss. 75, pp. 55-65.

15. Курашинов М. «Эффект среды», или Национальная черта российского рынка ценных бумаг // Рынок ценных бумаг. 2GG4. № 24. С. 13 — 15.

URL: http://old.rcb.ru/archive/articles.asp?id=4550

16. McGowan C.B. Jr., Ibrihim I. An Analysis of the Day-of-the-Week Effect in the Russian Stock Market. International Business & Economics Research, 2009, vol. 8, iss. 9, pp. 25-30. URL: https://doi.org/10.19030/iber.v8i9.3165

17. Singleton J.C., Wingender J.R. The Nonparallel Weekend Effect in the Stock and Bond Markets. The Journal of Financial Research, 1994, vol. 17, iss. 4, pp. 531-538.

URL: https://doi.org/10.1111/j.1475-6803.1994.tb00163.x

18. Thatcher J.S., Blenman L.P. Synthetic Trades and Calendar Day Patterns: The Case

of the Dollar/Sterling Markets. The Financial Review, 2001, May, vol. 36, iss. 2, pp. 177-200. Available at SSRN: https://ssrn.com/abstract=274386

19. Liano K., Huang G.-C., Gup B.E. A Twist on the Monday Effect in Stock Returns: A Note. Journal of Economics and Business, 1993, vol. 45, iss. 1, pp. 61-67.

URL: https://doi.org/10.1016/0148-6195(93)90006-A

20. Johnston E.T., Kracaw W.A., McConnell J.J. Day-of-the-Week Effects in Financial Futures: An Analysis of GNMA, T-Bond, T-Note, and T-Bill Contracts. The Journal of Financial and Quantitative Analysis, 1991, vol. 26, iss. 1, pp. 23-44. URL: https://doi.org/10.2307/2331241

21. Redman A.L., Manakyan H., Liano K. Real Estate Investment Trusts and Calendar Anomalies. Journal of Real Estate Research, 1997, vol. 14, iss. 1/2, pp. 19-28.

URL: http://pages.jh.edu/jrer/papers/pdf/past/vol14n01/v14p019.pdf

22. Sias R.W., Starks L.T. The Day-of-the-Week Anomaly: The Role of Institutional Investors. Financial Analysts Journal, 1995, vol. 51, iss. 3, pp. 58-67.

Stable URL: http://www.jstor.org/stable/4479847

23. Abraham A., Ikenberry D.L. The Individual Investor and the Weekend Effect. The Journal of Financial and Quantitative Analysis, 1994, vol. 29, iss. 2, pp. 263-277.

URL: https://doi.org/10.2307/2331225

24. Damodaran A. The Weekend Effect in Information Releases: A Study of Earnings and Dividend Announcements. The Review of Financial Studies, 1989, vol. 2, iss. 4, pp. 607-623.

URL: https://doi.org/10.1093/rfs/2.4.607

25. Pettengill G.N., Wingender J.R. Jr., Kohli R. Arbitrage, Institutional Investors, and the Monday Effect. Quarterly Journal of Business and Economics, 2003, vol. 42, iss. 3/4, pp. 49-63.

URL: http://www.academia.edu/21127832/Arbitrage_Institutional_Investors_and_the_Monday_Ef fect

26. Pettengill G.N. An Experimental Study of the ‘Blue Monday’ Hypothesis. The Journal of Socio-Economics, 1993, vol. 22, iss. 3, pp. 241-257.

URL: https://doi.org/10.1016/1053-5357(93)90011-9

27. Chow E.H., Hsiao P., Solt M.E. Trading Returns for the Weekend Effect Using Intraday Data. Journal of Business Finance and Accounting, 1997, vol. 24, iss. 3, pp. 425-444.

28. Miller E.M., Prather L.J., Mazumder M.I. Day-of-the-Week Effects Among Mutual Funds. Quarterly Journal of Business and Economics, 2003, vol. 42, iss. 3/4, pp. 113-128. Stable URL: http://www.jstor.org/stable/23292843

29. Федорова Е.А., Гиленко Е.В. Сравнительный анализ подходов к оценке календарных аномалий на фондовом рынке // Аудит и финансовый анализ. 2008. № 5. С. 184—189. URL: http://www.auditfin.com/fin/2008/5/Fedorova/Fedorova%20.pdf

Информация о конфликте интересов

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

pISSN 2071-4688 eISSN 2311-8709

ASSESSMENT OF TIME EFFECTS IN BRICS MARKETS Sergei V. VATRUSHKIN

Investing

National Research University — Higher School of Economics, Moscow, Russian Federation

[email protected]

orcid.org/0000-0003-1993-2839

Article history:

Received 7 February 2018 Received in revised form 5 March 2018 Accepted 19 March 2018 Available online 27 April 2018

JEL classification: G02, G11, G14, G15

Keywords: stock market, time effects, day-of-the-week effect, month effect, quarter-of-the-year effect

Abstract

Importance This article examines the issues related to the definition of temporary effects in the securities markets of the BRICS countries.

Objectives The article aims to identify temporary effects on the stock markets of BRICS countries, as well as determine the effectiveness of these markets, and provide practical recommendations for increasing the yield of the securities portfolio. Methods For the study, I used the methods of regression and econometric analyses applying Microsoft Excel and Gretl software.

Results The article presents the results of identification and evaluation of five time effects on the stock markets of BRICS countries, as well as determines the efficiency of these markets and gives practical recommendations to increase the yield of the investment portfolio. The revealed temporary effects testify in favor of the inefficiency of the stock markets and assume the possibility to extract additional profit if they are taken into account when building a trade strategy.

Conclusions For a number of the indices considered, temporary effects are typical, which is contrary to the hypothesis of an effective market, according to which the quotations of financial assets get formed in an independent manner, which does not allow to draw an excess profit.

© Publishing house FINANCE and CREDIT, 2018

Please cite this article as: Vatrushkin S.V. Assessment of Time Effects in BRICS Markets. Finance and Credit, 2018, vol. 24, iss. 4, pp. 913-928. https://doi.org/10.24891/fc. 24.4.913

References

1. Fama E.F. The Behavior of Stock-Market Prices. The Journal of Business, 1965, vol. 38, iss. 1, pp. 34-105. URL: http://citeseerx.ist.psu.edu/viewdoc/download?

doi=10.1.1.365.9468&rep=rep1 &type=pdf

2. Davis M.H.A. Louis Bachelier’s «Theory of Speculation». URL: https://f-origin.hypo1heses.org/wp-content/blogs.dir/1596/files/2014/12/Mark-Davis-Talk.pdf

3. French K.R. Stock Returns and the Weekend Effect. Journal of Financial Economics, 1980, vol. 8, iss. 1, pp. 55-69. URL: https://doi.org/10.1016/0304-405X(80)90021-5

4. Rogalski R.J. New Findings Regarding Day-of-the-Week Returns over Trading and Non-Trading Periods: A Note. The Journal of Finance, 1984, vol. 39, iss. 5, pp. 1603-1614.

URL: https://doi.org/10.2307/2327747

5. Harris L. A Transaction Data Study of Weekly and Intradaily Patterns in Stock Returns. Journal of Financial Economics, 1986, vol. 16, iss. 1, pp. 99-117.

URL: https://doi.org/10.1016/0304-405X(86)90044-9

6. Ariel R.A. A Monthly Effect in Stock Returns. Journal of Financial Economics, 1987, vol. 18, iss. 1, pp. 161-174. URL: https://doi.org/10.1016/0304-405X(87)90066-3

7. Lakonishok J., Smidt S. Are Seasonal Anomalies Real? A Ninety Years Perspective. Review of Financial Studies, 1988, vol. 1, iss. 4, pp. 403-425.

8. Pettengill G.N., Jordan B.D. A Comprehensive Examination of Volume Effects and Seasonality in Daily Security Return. The Journal of Financial Research, 1988, vol. 11, iss. 1, pp. 57-70. URL: https://doi.org/10.1111/j .1475-6803.1988.tb00066.x

9. Liano K., Lindley J.T. An Analysis of the Weekend Effect within the Monthly Effect. Review of Quantitative Finance and Accounting, 1995, vol. 5, iss. 4, pp. 419-426.

10. Keef S.P., Roush M.L. Day-of-the-Week Effects in the Pre-holiday Returns of the Standard and Poor’s 500 Stock Index. Applied Financial Economics, 2005, vol. 15, iss. 2, pp. 107-119. URL: https://doi.org/10.1080/0960310042000293164

11. Jaffe J., Westerfield R. The Week-End Effect in Common Stock Returns: The International Evidence. The Journal of Finance, 1985, vol. 40, iss. 2, pp. 433-454.

URL: https://doi.org/10.2307/2327894

12. Aggarwal R., Rivoli P. Seasonal and Day-of-the-Week Effects in Four Emerging Stock Markets. The Financial Review, 1989, vol. 24, iss. 4, pp. 541-550.

13. Marrett G.E., Worthington A. The Day-of-the-Week Effect in the Australian Stock Market: An Empirical Note on the Market, Industry and Small Cap Impacts. International Journal of Business and Management, 2008, vol. 3, iss. 1, pp. 3-8. URL: https://research-repository.griffith.edu.au/bitstream/handle/10072/22336/50755_1.pdf;sequence=1

14. Mbululu D., Chipeta C. Day of the Week Effect: Evidence from Nine Economic Sectors of JSE. Investment Analysis Journal, 2012, vol. 41, iss. 75, pp. 55-65.

15. Kurashinov M. [«Wednesday effect», or The national trait of the Russian securities market]. Rynok tsennykh bumag = Securities Market, 2004, no. 24, pp. 13-15. (In Russ.)

URL: http://old.rcb.ru/archive/articles.asp?id=4550

16. McGowan C.B. Jr., Ibrihim I. An Analysis of the Day-of-the-Week Effect in the Russian Stock Market. International Business & Economics Research, 2009, vol. 8, iss. 9, pp. 25-30.

URL: https://doi.org/10.19030/iber.v8i9.3165

17. Singleton J.C., Wingender J.R. The Nonparallel Weekend Effect in the Stock and Bond Markets. The Journal of Financial Research, 1994, vol. 17, iss. 4, pp. 531-538.

URL: https://doi.org/10.1111/j .1475-6803.1994.tb00163.x

18. Thatcher J.S., Blenman L.P. Synthetic Trades and Calendar Day Patterns: The Case

of the Dollar/Sterling Markets. The Financial Review, 2001, May, vol. 36, iss. 2, pp. 177-200. Available at SSRN: https://ssrn.com/abstract=274386

19. Liano K., Huang G.-C., Gup B.E. A Twist on the Monday Effect in Stock Returns: A Note. Journal of Economics and Business, 1993, vol. 45, iss. 1, pp. 61-67.

URL: https://doi.org/10.1016/0148-6195(93)90006-A

20. Johnston E.T., Kracaw W.A., McConnell J.J. Day-of-the-Week Effects in Financial Futures: An Analysis of GNMA, T-Bond, T-Note, and T-Bill Contracts. The Journal of Financial and Quantitative Analysis, 1991, vol. 26, iss. 1, pp. 23-44. URL: https://doi.org/10.2307/2331241

21. Redman A.L., Manakyan H., Liano K. Real Estate Investment Trusts and Calendar Anomalies. Journal of Real Estate Research, 1997, vol. 14, iss. 1/2, pp. 19-28.

URL: http://pages.jh.edu/jrer/papers/pdf/past/vol14n01/v14p019.pdf

22. Sias R.W., Starks L.T. The Day-of-the-Week Anomaly: The Role of Institutional Investors. Financial Analysts Journal, 1995, vol. 51, iss. 3, pp. 58-67.

Stable URL: http://www.jstor.org/stable/4479847

23. Abraham A., Ikenberry D.L. The Individual Investor and the Weekend Effect. The Journal of Financial and Quantitative Analysis, 1994, vol. 29, iss. 2, pp. 263-277.

URL: https://doi.org/10.2307/2331225

24. Damodaran A. The Weekend Effect in Information Releases: A Study of Earnings and Dividend Announcements. The Review of Financial Studies, 1989, vol. 2, iss. 4, pp. 607-623.

URL: https://doi.org/10.1093/rfs/2A607

25. Pettengill G.N., Wingender J.R. Jr., Kohli R. Arbitrage, Institutional Investors, and the Monday Effect. Quarterly Journal of Business and Economics, 2003, vol. 42, iss. 3/4, pp. 49-63.

URL: http://www.academia.edu/21127832/Arbitrage_Institutional_Investors_and_the_Monday_Ef fect

26. Pettengill G.N. An Experimental Study of the ‘Blue Monday’ Hypothesis. The Journal of Socio-Economics, 1993, vol. 22, iss. 3, pp. 241-257.

URL: https://doi.org/10.1016/1053-5357(93)90011-9

27. Chow E.H., Hsiao P., Solt M.E. Trading Returns for the Weekend Effect Using Intraday Data. Journal of Business Finance and Accounting, 1997, vol. 24, iss. 3, pp. 425-444.

28. Miller E.M., Prather L.J., Mazumder M.I. Day-of-the-Week Effects Among Mutual Funds. Quarterly Journal of Business and Economics, 2003, vol. 42, iss. 3/4, pp. 113-128. Stable URL: http://www.jstor.org/stable/23292843

29. Fedorova E.A., Gilenko E.V. [Comparative analysis of the approaches to estimation of calendar effects in a financial market]. Audit i finansovyi analiz = Audit and Financial Analysis, 2008, no. 5, pp. 184-189. URL: http://www.auditfin.com/fin/2008/5/Fedorova/Fedorova%20.pdf

(In Russ.)

Conflict-of-interest notification

I, the author of this article, bindingly and explicitly declare of the partial and total lack of actual or potential conflict of interest with any other third party whatsoever, which may arise as a result of the publication of this article. This statement relates to the study, data collection and interpretation, writing and preparation of the article, and the decision to submit the manuscript for publication.

17 великолепных текстовых эффектов*

Пусть ваши слова зазвучат по-новому, в своем собственном, неповторимом стиле. Обрести это звучание им помогут текстовые эффекты, созданные в программе Photoshop.

Программа Photoshop вполне заслуженно превозносится как великолепный инструмент для манипуляций с фотографиями и для подготовки иллюстраций. И хотя она совсем не похожа на векторные графические пакеты, можно без преувеличения сказать, что эта невероятно гибкая программа может служить превосходным инструментом для создания логотипов и фирменных стилей. С выходом в свет версии 5.5, с ее новыми средствами для создания и хранения Internet-графики, программа Photoshop полностью вооружилась для того, чтобы стать главным рабочим инструментом Web-дизайнера. Как некая новая изобразительная среда Web всегда с жадностью впитывает новые идеи, уникальные логотипы, экранные заставки. Поэтому мы решили предложить вам подборку кратких обучающих материалов, посвященных созданию в этой программе захватывающих текстовых эффектов. На следующих нескольких страницах мы покажем вам, как сделать текст броским и запоминающимся, чтобы он стал похож на все что угодно — от ультрасовременной неоновой рекламы до старинной деревянной вывески, от льда до пламени. Возможно, вы не сразу найдете практическое применение всем этим эффектам, поэтому мы советуем сохранить этот номер журнала, чтобы когда-нибудь в будущем заглянуть в него еще разок. Никогда ведь не угадаешь: а вдруг понадобится текст, написанный мелом, или металлическая кокарда с тиснением, да мало ли что еще.

Этап первый. Неоновый свет

Этап второй. Школьные мелки

Этап третий. Граффити

Этап четвертый. Тиснение по металлу

Этап пятый. Огненное письмо

Этап шестой. «Придурочные» буквы

Этап седьмой. Оптический эффект

Этап восьмой. Стекло

Этап девятый. Выпиливание по дереву

Этап десятый. Ледяной текст

Этап одиннадцатый. Мощение плиткой

Этап двенадцатый. Перспектива

Этап тринадцатый. Шиферный текст

Этап четырнадцатый. Перфорация

Этап пятнадцатый. Перпендикулярные тени

Этап шестнадцатый. Трехмерный текст

Этап семнадцатый. Рельефные буквы

Этап первый. Неоновый свет

Заставьте свое сообщение сиять

1. Чтобы создать неоновый эффект, мы взяли шрифт со скругленными углами, изначально похожий на неоновую надпись. Кроме того, мы воспользовались опцией Faux bold (она появилась только в Photoshop 5.5), чтобы придать гарнитуре больший вес. (Этот нюанс не очень существенен, так что, если у вас нет последней версии Photoshop, не расстраивайтесь. Просто воспользуйтесь другой гарнитурой со скругленными углами и дайте ее в полужирном начертании.)

2. Чтобы создать эффект, сначала загрузите контур шрифта в качестве выделенной области (щелкните на значке соответствующего слоя, нажав при этом клавишу Command/Ctrl), и в новом канале прочертите вдоль выделенной области контур белого цвета шириной около 6 пикселов. Теперь воспользуйтесь фильтром Gaussian Blur (Размытие по Гауссу) с радиусом примерно 4 пиксела. Не забудьте предварительно отменить все выделение.

3. Чтобы в размытом канале создать эффект неонового свечения, в окне Curves (Кривые) постройте примерно такую зазубренную кривую, как показано на иллюстрации, и примените ее один раз. Загрузите этот канал на новый слой в качестве выделенной области и залейте ее любым цветом на ваш вкус. Чтобы усилить свечение, продублируйте этот слой, снова размойте его при помощи фильтра Blur и наложите его в режиме Overlay (Перекрытие) или Screen (Осветление). Лучше всего этот эффект смотрится на темном фоне.

Этап второй. Школьные мелки

Заставьте зрителя вспомнить свой класс и школьные деньки…

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

2. Первым делом воспользуйтесь фильтром Sketch > Torn Edges (Эскиз > Рваные края). Лично мы установили следующие параметры: Image Balance (Тоновой баланс) = 24, Smoothness (Четкость) = 7 и Contrast (Контраст) = 12. Примените этот фильтр, а затем в небольшом количестве воспользуйтесь эффектом Motion blur (Размытие в движении), чтобы неровности краев были не хаотичными, а имели определенную направленность.

3. Вернитесь в текстовый слой и слегка размойте его фильтром Blur. Внесите в текст монохроматический шум (фильтр Noise с максимальным эффектом), а затем снова воспользуйтесь эффектом Motion Blur с более высоким парметром (16), чтобы на белом тексте появились диагональные черточки. Загрузите канал Torn Edges как выделенную область и воспользуйтесь ею в качестве маски для текстового слоя. Наконец создайте еще один слой для настройки параметра Levels (Уровни) и перетащите указатель точки белого влево, а гамму — вправо, в результате получится эффект самого настоящего мела.

Этап третий. Граффити

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

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

2. В Photoshop есть встроенная текстура, имитирующая кирпичную стену. Выполните команду Filter > Texturizer (Фильтр > Текстура) и выберите вариант Brick (Кирпич). Задайте максимальный масштаб и минимальную рельефность.

3. В заключение создайте новый слой, выберите инструмент Airbrush (Аэрограф) и какой-нибудь подходящий для граффити цвет. Теперь пишите. Если воспользоваться кистью с включенным параметром Wet Edges (Мокрый край), то получится немного другой эффект. Еще можно побаловаться с различными режимами наложения. Например, мы воспользовались режимом Hard Light (Жесткий свет) и добились эффекта не совсем просохшего аэрозоля.

Этап четвертый. Тиснение по металлу

Нанесите на свой логотип штамп с металлическим оттенком.…

1. Как создать металлический эффект, напоминающий эмблему какого-нибудь автомобиля? Подберите для текста достаточно элегантный рукописный шрифт (мы считаем, что таковым является, например, старый шрифт Ford Cortina). В данном случае мы не стали связываться со слоями, а создали текст прямо в альфа-канале.

2. На новом слое (залитом белым цветом) мы воспользовались фильтром Lighting Effects (Эффекты освещения) с точечным источником света (тип Spotlight), расположенным справа вверху. Параметры Metallic и Shiny мы вывели на максимум, а в качестве текстурного канала (параметр Texture Channel) указали альфа-канал с текстом, установив для белого величину 23 (параметр White Height).

3. Нам хотелось, чтобы фон напоминал красный бампер автомобиля. Для этого нужно просто применить к слою команду Hue/Saturation (Цветовой тон/Насыщенность). Выведите на максимум параметр Saturation (Насыщенность), предварительно убедившись, что включен режим Colourize (Тонирование). По умолчанию здесь принят красный цвет — это нам вполне подходит.

4. Воспользовавшись альфа-каналом в качестве выделенной области, скопируем текст из фона и вставим его на новый слой. К этому слою применим эффекты, создающие иллюзию приподнятости изображения над плоскостью. В данном случае мы воспользовались фильтром Bevel and Embossing, включив режим Outer Bevel (Внешняя кромка) и установив параметры Opacity (Непрозрачность) = 100%, Depth (Глубина) = 20 и Blur (Размытие) = 4.

5. После этого мы импортировали в Photoshop изображение (пейзаж с горизонтом), которое будем использовать в качестве отражения в хромированной стали. Это изображение мы разместили под текстом и связали эти два слоя в макетную группу (Clipping Group), нажав клавишу Option/Alt и щелкнув курсором на границе между этими двумя слоями в палитре Слои (курсор при этом меняет свою форму на значок макетной группы). После этого изображение слегка исказили: размыли фильтром Blur и применили фильтр Ocean Waves (Океанские волны).

6. Чтобы смягчить эффект и добавить градиент, свойственный хромированным поверхностям, мы добавили еще один слой, залитый повторяющимися черно-белыми градиентными полосами. Чтобы создать свой собственный градиент, нужно в палитре Gradient Options (Параметры градиента) нажать кнопку Edit (Редактор). Построенный градиент мы наложили в режиме Screen (Осветление) и присоединили к макетной группе, чтобы он влиял только на текст.

Этап пятый. Огненное письмо

Прибавьте жару!…

1. Создайте новый документ с черным фоном. Добавьте новый слой и залейте его 75-процентным серым цветом (H=0, S=0, V=25). Задайте для этого слоя режим Screen (Осветление). Введите свой текст (белого цвета), поместите его на слой и измените режим слоя на Colour Dodge (Осветление основы). Примените к тексту фильтр Gaussian Blur (размытие по Гауссу) с небольшим радиусом, и получится эффект свечения.

2. Продублируйте слой с текстом, залейте его красным цветом (при включенном параметре Preserve Transparency — Сохранить прозрачность), а затем внесите в него сильный шум (фильтр Noise). «Смажьте» текст при помощи фильтра Motion Blur (Размытие в движении), отключив режим Preserve Transparency и установив для параметра Distance (Расстояние) величину примерно 40-50, а затем деформируйте результат с помощью фильтра Wave (Волна) или Ripple (Рябь). Слегка сместите этот слой в ту сторону, куда выполнялось размытие в движении.

3. Продублируйте слой с красным текстом и измените его цвет на желтый при помощи команды Hue/Saturation (Цветовой тон/Насыщенность) с включенным режимом Colourize (Тонирование). Затем немного сместите его так, чтобы получился как можно более натуральный эффект. Попытайтесь изменить режим слоя с исходным размытым текстом на режим Difference (Разница), чтобы создать эффект обгоревших краев, а затем усильте этот эффект при помощи корректирующего слоя Levels Adjustment (Настройка уровней), наложенного поверх него. Замените черный фон на какой-нибудь другой темный цвет или вставьте вместо него изображение.

Этап шестой. «Придурочные» буквы

Скажите так, чтобы запомнилось…

1. Начнем с какого-нибудь бодрого, энергичного шрифта, затем слегка размоем его и чуть-чуть исказим при помощи фильтра Wave (Волна). Повторим эти операции несколько раз, но каждый раз с маленькой амплитудой искажения. Добавим новый слой с эффектом Bevel and Emboss. Установите для эффекта тип Pillow (Подушка), глубину (Depth) = 20, размытие (Blur) = 6, режим подсветки (Highlight) = Difference (Разница) и выберем подходящий угол освещения.

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

3. Откройте окно эффектов для этого слоя (с облачным текстом) и установите величину размытия (параметр Blur) примерно 14. Теперь, нажав клавишу Option (Alt для PC) и щелкнув мышью в палитре Layers (Слои) на границе между двумя слоями с текстом, создайте из них монтажную группу (Clipping group). Таким образом будет замаскирована та часть изображения, которая вышла за границы букв в результате сильного размытия (слой-маска не будет работать так, как нужно). Затем переведите верхний слой в режим Overlay (Перекрытие) — настоящий «дурашливый» эффект создан.

Этап седьмой. Оптический эффект

Взгляните на свой текст через «рыбий глаз».

1. Для этого эффекта очень важно, чтобы документ имел квадратную форму (например 512×512 пикселов), иначе фильтр будет несимметричным. После того как вы создадите такой документ, введите текст. Особенно хорошо смотрится этот эффект, когда весь текст набран заглавными буквами, и еще неплохо было бы подобрать какой-нибудь толстый, приземистый шрифт. Если вам удастся вписать текст в квадратный блок, будет еще лучше. Мы создали два текстовых элемента и отмасштабировали их таким образом, чтобы выровнять относительно друг друга.

2. Сведите документ в один слой и примените фильтр Spherize (Сферизация) из раздела Distort (Деформация) с параметром 100%. Заставить фильтр сильнее исказить изображение невозможно, но если вам это нужно, просто примените этот же фильтр еще раз. Правда, возможно, в промежутках между операциями Spherize придется еще раз масштабировать текст.

3. Проблема этого эффекта заключается в том, что в центре край текста может стать нерезким. Чтобы исправить этот недочет, чуть-чуть размойте текст, а затем примените ко всему изображению команду Levels (Уровни). Сместите регуляторы белой и черной точки навстречу друг другу, чтобы сделать текст более четким. Правда, при этом скруглятся углы, но это легко исправить.

Этап восьмой. Стекло

В прямоугольном окне — протравленный текст.

1. Для этого эффекта понадобится фоновое изображение или текстура. Мы воспользовались изображением CMYK Balloons из каталога Goodies программы Photoshop 5.5. Вставьте текстовый слой, воспользовавшись хорошим, толстым шрифтом. Создайте новый слой, залитый черным цветом, превратите текстовый слой в выделенную область и залейте ее белым. Слегка размойте слой и сохраните это изображение в формате Photoshop (это очень важно!).

2. Спрячьте размытый текст и отдублируйте изображение на фоновом слое. Переместите его на самый верх и примените фильтр Displace (Сдвиг) с параметрами, принятыми по умолчанию. При этом откроется диалоговое окно Open/Save (Открыть/Сохранить). В этом окне нужно будет найти файл PSD, который вы только что сохранили, и открыть его. С помощью этого изображения картинка сместится.

3. Создайте макетную группу (Clipping group) из смещенного изображения и текстового слоя (щелкнув на линии, разделяющей эти слои в палитре Layers при нажатой клавише Option/Alt). Добавьте к тексту немного глянцевого свечения при помощи слоя с эффектом Bevel and Emboss. В диалоговом окне этого эффекта нужно будет установить стиль Inner Bevel, режим Highlight (Свечение) = Difference (Разница) и режим Shadow (Тени) = Overlay (Перекрытие). Добавьте тени от букв и наконец, при необходимости, измените режим наложения смещенного слоя на Screen (Осветление), чтобы осветлить внутреннюю часть стеклянных букв.

Этап девятый. Выпиливание по дереву

Безо всякого резца…

1. Внесите в новый документ побольше шума. Примените к нему фильтр Motion Blur (Размытие в движении) со смещением в горизонтальном направлении на расстояние примерно 20. Увеличьте контраст изображения при помощи инструментов Levels (Уровни) или Curves (Кривые), а затем примените к нему деформирующий фильтр Wave (Волна) с указанными здесь параметрами.

2. Продублируйте этот слой и тонируйте его в желто-коричневый цвет при помощи команды Hue/Saturation (Цветовой тон/Насыщенность) с включенным параметром Colorize (Тонирование). Инвертируйте оставшийся слой и тонируйте его в темно-коричневый цвет. Получается что-то странное. Инвертируйте желто-коричневый слой и наложите его на более темный слой в режиме Difference (Разница) — получится нечто еще более странное!. Добавьте новый корректирующий слой (Adjustment layer) типа Hue/Saturation (Цветовой тон/Насыщенность), чтобы вернуть цветам приятный «деревянистый» оттенок.

3. Создайте текстовый слой и подложите его под предыдущий. Для этого, возможно, придется отдублировать фоновый (деревянный) слой и удалить фон. Создайте монтажную группу (Clipping group) из деревянного и текстового слоев, чтобы маскировать внешнюю часть букв. Примените к слою эффект Bevel and Emboss в стиле Inner Bevel, для которого Highlight (Свечение) будет установлено в режиме Overlay (Перекрытие), а Shadow (Тени) — в режиме Hard Light (Жесткий свет).

Этап десятый. Ледяной текст

Бррр! Это по-настоящему холодный эффект.

1. Создайте текст и отдублируйте текстовый слой. Залейте непрозрачные области этого слоя текстурой с облаками (Clouds), а затем воспользуйтесь фильтром Unsharp Masking, чтобы выделить контуры символов. Примените этот фильтр дважды с указанными здесь параметрами.

2. Затем воспользуйтесь фильтром Stylize > Glowing Edges (Стилизация > Свечение краев) с парметрами Edge Width (Ширина краев) = 1, Edge Brightness (Яркость) = 4 и Smoothness (Смягчение) = 15. Измените режим наложения слоя на Screen (Осветление) или Colour Dodge (Осветление основы).

3. Измените цвет предыдущего слоя на бледно-серый с небольшим сдвигом в сторону голубого. Примените к слою эффект Bevel and Emboss в стиле Inner Bevel, для которого Highlight (Свечение) будет установлено в режиме Overlay (Перекрытие), а Shadow (Тени) — в режиме Colour Burn (Осветление основы). Помимо этого к изображению можно добавить бледные, размытые тени.

Этап одиннадцатый. Мощение плиткой

Сделайте квадратные глаза…

1. Создайте текстовый слой. Для этого эффекта сгодится любой шрифт, любой стиль. Мы собираемся покрыть текст мозаикой и обвести контуры рамкой. Сначала заполним текст шумом. (Программа спросит вас, не нужно ли сначала отрендерить слой. Ответьте на этот вопрос — OK.)

2. Выберите из подменю фильтров Texture (Текстура) фильтр Patchwork (Витраж) и установите для него интересующий вас размер ячеек и толщину границ. Мы установили средний размер ячеек и среднюю толщину.

3. Затем загрузите текст в выделенную область и в новом слое вполните операцию Stroke (Обводка) по внешнему контуру (Outside) с толщиной (Width) 5 пикселов. Внесите в этот слой шум и снова примените фильтр Patchwork, но на этот раз установите меньший размер ячеек. Полученные слои можно тонировать (Colorize) в любой цвет и добавить тени от букв.

Этап двенадцатый. Перспектива

Потянитесь текстом вдаль……

1. Построить текст с перспективой довольно легко, но к этому эффекту можно добавить эффект глубины резко изображаемого пространства (depth of field). Создайте текстовый слой и отрендерите его. Воспользуйтесь инструментом Perspective Transform (Слой > Трансформирование > Перспектива), чтобы внести в текст искажения, обусловленные законами перспективы. Для этого нажмите клавиши Command-T, а затем, нажав клавиши Command-Control-Shift, передвиньте выделяющую рамку. На PC этой операции соответствуют клавиши Ctrl-T и Ctrl-Alt.

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

3. Применив к тексту эффекты освещения (Lighting Effects), ему можно придать некоторый объем. Воспользуйтесь одним или несколькими точечными (spot) источниками света и установите в поле Texture Channel (Текстурный канал) один из цветовых каналов. Результирующий рельеф, как и текст, тоже будет не в фокусе.

Этап тринадцатый. Шиферный текст

Создайте холодный каменный эффект.

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

2. Примените функцию Image > Adjust > Posterize (Изображение > Коррекция > Постеризовать) с параметром 10 уровней. В результате будет создан эффект слоистой, хлопьевидной поверхности, похожей на кусок шифера. Однако нам необходимо вернуться и внести в фильтр Clouds (Облака) немного хаотичности.

3. Выберите команду Filter > Fade Posterize (Фильтр > Ослабить постеризацию). Измените степень непрозрачности (Opacity) примерно до 40% и установите режим наложения Multiply (Умножение). Скопируйте слой и вставьте его в канал.

4. Создайте новый слой, залитый белым цветом. Примените к нему фильтр Lighting Effects (Эффекты освещения) с источником света типа Omni, расположенным в верхней части страницы. При необходимости его можно увеличить или уменьшить в размере. В поле Texture channel укажите только что созданный вами альфа-канал с уровнем белого примерно 25.

5. Введите текст на слое, расположенном под текстурой, и создайте макетную группу (Clipping group) таким образом, чтобы шифер маскировался текстом. Постройте тени от букв и, если сочтете нужным, сделайте буквы выпуклыми — примените к слою эффект Emboss. Мы пользовались подушкообразным эффектом (Pillow emboss), чтобы создать кромку по контуру букв.

6. Небольшое тонирование в серо-голубой цвет придаст текстуре сходство с поверхностью камня. Это можно сделать либо при помощи команды Hue/Saturation (Цветовой тон/Насыщенность), либо просто с помощью варианта Colour Fill (Заливка цветом) в меню Layer > Effects (Слой > Эффект), которым мы уже пользовались. Чтобы сделать текст еще более текстурированным, можно также поэкспериментировать с режимами наложения слоя, в котором мы применяли фильтр Облака.

Этап четырнадцатый. Перфорация

Пусть у текста будет зазубренный край…

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

2. Перейдите в палитру Paths (Контуры) и выберите команду Make Work Path (Образовать рабочий контур). На экране появится диалоговое окно, в котором можно ввести величину допустимого отклонения, то есть точности при преобразовании границы выделенной области в контур. Нам нужна была хорошая аппроксимация, поэтому мы ввели значение 0,5 пиксела (хотя это зависит от разрешения документа) и нажали кнопку OK.

3. За несколько секунд текст превратится в векторный контур. Создайте свою собственную кисть. Для этого нужно из меню палитры Brushes (Кисти) выбрать команду New Brush (Новая кисть). Установите следующие параметры кисти: Diameter (Диаметр) = 8, Hardness (Жесткость) = 100 и Spacing (Интервалы) = 180.

4. Создайте для текста слой-маску, затем снова выделите контур и, выбрав новую, только что созданную кисть, выполните команду Stroke Path (Обвести контур) из меню палитры контуров. В открывшемся диалоговом окне нужно будет указать инструмент Paintbrush (Кисть). В результате вокруг текста образуется такой вот перфорированный край.

5. Чтобы усилить этот эффект, проведем внутри буквы кромку и зальем текст другим цветом. Для этого загрузите нормальный текст в качестве выделенной области и выберите команду Select > Modify > Contract (Выделение > Модификация > Сжать) с параметром 8 пикселов.

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

Этап пятнадцатый. Перпендикулярные тени

Что-то маячит там, на горизонте…

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

2. Воспользуйтесь инструментом Free Transform (Свободное трансформирование). Постройте с его помощью зеркальное отражение текста, а затем при нажатой клавише Command/Ctrl сдвиньте в сторону нижнюю часть получившегося рисунка. Возникает отраженная версия текста. Обратите внимание, что этим же методом можно строить отражения.

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

Этап шестнадцатый. Трехмерный текст

Придайте тексту глубину!

1. Это очень простой 3D-трюк, не требующий никакого трейсинга. Отрендерите текстовый слой и воспользуйтесь инструментом Free Transform (Свободное трансформирование), чтобы внести в текст искажения, задающие перспективу. Создайте дубликат этого слоя.

2. Объедините один из этих слоев с фоном, чтобы в нем не было прозрачных пикселов. Примените к слою фильтр Motion Blur (Размытие в движении) с большим сдвигом и под углом ровно 90°. Второй текст залейте каким-нибудь другим цветом (не черным) и переместите его вверх, чтобы перекрыть нижний смазанный текст.

3. На слое с размытым текстом воспользуйтесь инструментом Curves (Кривые), чтобы «уплотнить» вытянутый текст, сделать его более однородным. Сделайте кривую максимально крутой, чтобы как можно больше затемнить размытую часть. Еще раз воспользуйтесь командой Curves или Levels, чтобы привести в порядок края.

Этап семнадцатый. Рельефные буквы

Такая приятная шероховатость……

1. Для этого эффекта следует использовать какой-нибудь веселенький, кругленький шрифт, поскольку острые углы здесь не работают. Мы взяли шрифт Cooper Black и дали текст черным цветом.

2. Затем к слою с отрендеренным текстом нужно применить фильтр Sketch > Reticulation (Эскиз > Ретикуляция) с принятыми по умолчанию параметрами. (Вообще, параметры, принятые по умолчанию, — довольно неплохая стартовая площадка и для других эффектов. Поэкспериментируйте с разными фильтрами и посмотрите, чего можно добиться с их помощью.)

3. В заключение примените фильтр Sketch > Plaster (Эскиз > Гипс). Здесь мы установили следующие параметры Image Balance (Тоновой баланс) = 11, Smoothness (Смягчение) = 1 и Light Direction (Свет) = Top Left (Слева сверху). Добавьте немного объема за счет теней (при помощи эффекта слоя) и — voila! — перед вами грубый, шершавый, комковатый текст. Чтобы придать ему еще более отвратительный вид, добавьте заливку цветом в режиме Difference (Разница).

КомпьюАрт 4’2000

Специализированное научно-практическое издания для ветеринарных врачей и студентов ветеринарных ВУЗов.

Выпуски журнала по годам

 
фон-повтор: повтор-х;
фон-повтор: повтор-у;
фон-повтор: повторять;
фон-повтор: пробел;
фон-повтор: круглый;
фон-повтор: без повторения;


background-repeat: повторить пробел;
фон-повтор: повторение повторения;
фон-повтор: круглое пространство;
фон-повтор: без повторения раунда;


фон-повтор: наследовать;
фон-повтор: начальный;
фон-повтор: не задано;
  

  

  
 без повтора
    
 
  
  
 повторить
    
 
  
  
 repeat-x
    
 
  
  
 repeat-y
    
 
  
  
 пробел
    
 
  
  
 раунд
    
 
  
  
 repeat-x, repeat-y (несколько изображений)
    
 
  
  

 
ол,
li {
  маржа: 0;
  отступ: 0;
}
li {
  нижнее поле: 12 пикселей;
}
div {
    background-image: url (https: // mdn.mozillademos.org/files/12005/starsolid.gif);
    ширина: 160 пикселей;
    высота: 70 пикселей;
}


.один {
  фон-повтор: без повторения;
}
.два {
  фон-повтор: повторять;
}
.три {
  фон-повтор: повтор-х;
}
.four {
  фон-повтор: повтор-у;
}
.пять {
  фон-повтор: пробел;
}
.шесть {
  фон-повтор: круглый;
}


.Семь {
  background-image: url (https://mdn.mozillademos.org/files/12005/starsolid.gif),
                     URL (https://developer.mozilla.org/static/img/favicon32.png);
  фон-повтор: повтор-х,
                     повторять-у;
  высота: 144 пикселя;
}