Время чувственности

В конце прошлого года, где-то в середине ноября, мне прислали макет для печати на прозрачной пленке:

Эти часы накатывались на стеклянную витрину, на время какой-то акции одного популярного магазина женского белья.
Слоган меня поразил, как своей режущей взгляд и слух угловатостью, так и своей ТаймсНьюРомансностью. Но это не мое дело, раз макет утвердили, значит им так нравится. Единственное что я поправил перед печатью, не согласовывая с клиентом, это слетевший абрис в цифре 11.
Оригинальный слоган этой акции : Time to be Sexy. И я бы его не трогал, если честно…
Макет мне достался в кривых (там было 6 или 7 вариантов этих часов). И пока файлик риповался-печатался, я немножко оживил часы:

See the Pen Clock by kapu (@kapu) on CodePen.0

Анимация SVG на примере человечка

Я открыл Иллюстратор, и без каких-либо заморочек, нарисовал в нем человечка.
chel
Рисунок на уровне дошкольника, ну да и ладно 😉
Экспортировал в SVG отдельно туловище с головой, и отдельно левую руку. То есть, у меня получилось два SVG файла.
Оба элемента я прописал непосредственно в HTML. Каждому элементу присвоил свой ID («chubrik» для туловища, и «ruka» для руки). Для того, чтобы рука не находилась где-то под туловищем, необходимо обозначить позицию для обоих элементов:

svg {
position: absolute;
}

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

#ruka{
  transform-origin: left left;
}

Объявил правило, по которому будут происходить метаморфозы:

@keyframes move {
  0% { transform: rotate(-3deg) ; }
  25% { transform: rotate(0deg) ; }
  50% { transform: rotate(3deg) ; }
  75% { transform: rotate(0deg) ; }
  100% { transform: rotate(-3deg) ; }
  }

И вызвал это правило для нашей руки, указав характер и длительность анимации:

#ruka{
  transform-origin: left left;
  animation: move 1.5s linear infinite;
}

Итог:

See the Pen hello by kapu (@kapu) on CodePen.0

Лазерная гравировка на кожзаме

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

Я не буду рассказывать про настройку мощности, фокуса, скорости луча лазера, все станки разные, и каждый оператор по опыту знает, в каком режиме работать с материалом.

Ради этой заметки, я испоганил обложку своего старого ежедневника. Справедливости ради, стоит отметить, что гравировка выполнялась на «китайце», с мощностью луча 500 мвт. Выходное разрешение у которого 300 dpi.

К делу! Возьмем изображение и поглядим на него внимательно:oULM60d7jMQ

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

— Почему? — спросите вы.

— Слишком толстые линии, — отвечу я.

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

IMG-20160902-WA0002

 

— А что же делать?

— В любом доступном редакторе упростить изображение до его контуров. Вот так:

oULM60d7jMQ2

Итог:

IMG-20160902-WA0001

 

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

 

Иконка vk.com для вордпресса

Добавил ссылки на социальные сети в футер блога. В корне темы есть svg файл, с иконками практически всех социальных сетей, на удивление даже codepen.io там оказался. Все ссылки которые я ввел, были подхвачены css скриптом темы, и установлены соответственные иконки автоматически (что удобно). Но там нет иконки Вконтакте =(
Вот так выглядело меню социальных ссылок, до моего вмешательства:
socOld
Что же делать? Не оставлять же вот так, как есть, люди не поймут с первого раза что это ссылка в вк, нужно внести ясность в происходящее… Так что делать? Дополнять/изменять svg файл? Искать у сапорта вк официальный логотипчик? Нет =) все проще =)
У кого нет этой иконки, делайте следующее:
1. Откройте style.css вашей темы,
2. Ctrl+F и ищите facebook, найдете сразу все правила для класса .social-navigation,
3. Добавляем правило для vk.com (просто заглавная буква В шрифтом Ариал Блэк):

.social-navigation a[href*="dropbox.com"]:before {
	content: "\f225";
}
 
.social-navigation a[href*="facebook.com"]:before {
	content: "\f203";
}
 
.social-navigation a[href*="vk.com"]:before {
	content: "B";
	font-weight: bold;
	font-family: Arial Black;
}

И вуаля, итог: soc

Кривой угол 90 градусов

В ходе работы над визуальным макетом пленочного раздела калькулятора, обнаружилась интересная задачка: необходимо загнуть уголок у пленки, но не нарисовать загнутый уголок в фотошопе, а именно загнуть его в пространстве!
Хватило бы и нарисованного уголочка, если бы в дурную голову не влетела гениальная мысль — когда пользователь выберет прикатку пленки на листовой материал, макет должен повернуться боком, показывая толщину и структуру материала! А когда макет поворачивается боком, с нарисованным уголочком… зрелище весьма ужасное…

Для реализации загнутого уголка, используются исключительно возможности CSS3, в частности — 3D трансформация.
Уголок реализован как квадрат, одна половинка которого — абсолютно прозрачна, а вторая — и есть наш уголок.
После получаса игры с градусами наклона, и кручения в руках транспортира, в мою голову все равно не уложилось — почему при угле поворота по оси Z на 90 градусов, остается зазор, между уголком и плоскостью-родителем?

See the Pen QNJvaM by kapu (@kapu) on CodePen.0

Ну и на закуску ищущим готовое решение загнутого уголка в 3D средствами CSS, вот код моего макета со всеми тенями.

See the Pen NNoLgE by kapu (@kapu) on CodePen.0


На вопрос, почему квадрат-уголок повернут именно на 206 градусов по оси X и на 24 градуса по оси Y отвечу — для приближения сего макета к реальности. Если нажать кнопочку «прозрачная пленка» — картинка на уголке будет выглядеть именно так, как она должна выглядеть, если отогнуть уголок у прозрачной пленки в реальной жизни.