Отправляет email-рассылки с помощью сервиса Sendsay

Как создать сайт

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 213 RSS
←   Июль 2017   →
 1
 2
 3
 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
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://webdiz.com.ua
Открыта: 01-06-2016

Автор
webguru

Статистика

213 подписчиков
0 за неделю
←   Все выпуски   →

Как создать сайт


Форекс аналитика — принципы фундаментального анализа Forex


Здравствуйте. Этот материал – четвертый по счету о торговле на валютном рынке Forex. Ранее мы познакомились с особенностями графического анализа (изучили стратегии и тренды) и анализа Форекс основанном на индикаторах (научились торговать по паттернам, в равноудаленном канале, по трендовым индикаторам и осцилляторам).

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

Подробнее

Как сделать анимацию вдоль окружности

Проблема

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

Другой, очень забавный пример можно найти на популярном российском веб-сайте  habrahabr.ru. В соответствии с лучшими практиками оформления страниц для ошибки 404 эта страница содержит навигационное меню, позволяющее перейти к некоторым основным разделам веб-сайта. Каждый элемент меню представлен в виде планеты, вращающейся по окружности, а текст наверху гласит: «Слетайте на другие наши планеты». Разумеется, в данном случае логично перемещать планеты по окружности и не вращать их дополнительно вокруг своей оси, иначе текст станет невозможно прочитать.



Это лишь пара из множества подобных примеров. Но как реализовать такой эффект с помощью анимации CSS?
Мы будем работать над очень простым примером аватара, движущегося по окружности, — что-то вроде упрощенной версии упомянутого выше эффекта из Google+. Разметка выглядит так:

HTML
<div class="path">
<img src="lea.jpg" class="avatar" />
</div>

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


Если вы сомневаетесь в своем умении создавать круглые фигуры с помощью CSS, то обратитесь к секрету Гибкие эллисы.

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

@keyframes spin {
to { transform: rotate(1turn); }
}
.avatar {
animation: spin 3s infinite linear;
transform-origin: 50% 150px; /* 150px = path radius */
}

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



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


Подробнее
 

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


Проблема

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

Итак давайте разбираться.

Подробнее
В избранное