Blessed, cursed and the nature of the beast

[Tenno Seremel]

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

Хочу чтобы вы запилили фемслеш инцест по Нарнии. Можно (нужно) даже драмы накрутить, Люси, как-никак, избранная Христом львом, а Сьюзен…

// Аватарку выбрал рандом, я не при чём

EDIT: В продолжении упорина. Рогом Сьюзен можно призвать в Нарнию, но сама Сьюзен в итоге…
EDIT: А можно ещё Сьюзен новой колдуньей сделать… но лучше не злой

Comments

[Sky Butterfly]

Стикер/фразу "Рандом бдит" пора на быструю кнопку.

[Tenno Seremel]

Sky Butterfly, да, нужно придумать хорошую картинку для этого; или, возможно, в традиционном виде текст с облачком + «что-то»

[Sky Butterfly]

Tenno Seremel, говорящие картинки уже расходятся по дайри (с лёгкой руки Спринг в УД), стоит придумать что-то новое.)

[Tenno Seremel]

Sky Butterfly, печать?

[Sky Butterfly]

Tenno Seremel, я тоже о ней подумала. А через CSS можно накладывать маску на картинку, чтобы красить её в другой цвет? Чтобы к разным фонам подходила.

[Tenno Seremel]

Sky Butterfly, если ты просто перекрасить хочешь, то в CSS есть свойство filter. Интересующие тебя функции будут hue-rotate(), brightness(), возможно ещё grayscale(), invert() или saturate(). Можно указывать несколько через пробел, там есть примеры.

// В совсем уж старых браузерах не будет работать.

[Sky Butterfly]

Tenno Seremel, т.е просто написать color: black/white и прочее не выйдет?

[Tenno Seremel]

Sky Butterfly, не-а. Там же разные цвета, откуда ему знать что ты имеешь в виду? Просто чуть больше написать надо, не страшно. Если у тебя картинка монотонная, то style="filter: hue-rotate(угол_поворота);" должно хватить.

hue-rotate()

Applies a hue rotation on the input image. The value of angle defines the number of degrees around the color circle the input samples will be adjusted. A value of 0deg leaves the input unchanged. The lacuna value for interpolation is 0. Though there is no maximum value, the effect of values above 360deg wraps around.

Просто color'ом можно «иконки» из веб-шрифтов (потому что они, по сути, буквы) и некоторые SVG (если они используют currentColor, кажется; нам этот всё равно вряд ли светит использовать здесь, да и картинки обычно растровые).

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

[Sky Butterfly]

Tenno Seremel, текст в окружности, и то и другое в насыщенном виде. Текст можно чуть наклонить.

[Tenno Seremel]

Sky Butterfly, наклонять можно через transform: rotate(). Если может кто примерно набросать что должно быть, я могу попробовать накидать CSS, ну или сказать, что потребуется таки картинка. Не обязательно детально и хорошо. Главное чтобы была понятна идея.

rotate()

The rotate() CSS function defines a transformation that rotates an element around a fixed point on the 2D plane, without deforming it.

The fixed point that the element rotates around — mentioned above — is also known as the transform origin. This defaults to the center of the element, but you can set your own custom transform origin using the transform-origin property.

Syntax

The amount of rotation created by rotate() is specified by an angle. If positive, the movement will be clockwise; if negative, it will be counter-clockwise.

rotate(a)

[Sky Butterfly]

Tenno Seremel, я представила чтото вроде такого. Даже редактор на тапок скачала.

[Tenno Seremel]

Sky Butterfly,

Попытка 1.

<span style="color:#333;display:inline-block;border-radius:50%;box-sizing:border-box;width:5em;height:5em;padding:1.3em 1em 0 1em;border:2px solid;border-top-width:4px;border-right-width:4px;text-align:center;font-size:42px;line-height:100%;"><span style="display:inline-block;-webkit-transform:rotate(-25deg);transform:rotate(-25deg);">Рандом
бдит!</span></span>

Рандом
бдит!

Не идеально ровно, но шрифты это такая штука… Там вообще сложно поравнять и оставить код универсальным. Здесь цвет можно поменять изменив color. Размеры круга задаются фиксированно (но он зависит от размера шрифта), поэтому если слова будут длиннее, то они будут вылазить за пределы круга. Тут либо увеличивать размеры, либо писать меньше текста. Ещё можно сделать, чтобы автоматически скрывало всё, что не влезает в круг (тогда визуально текст будет обрезаться в «рандомных» местах).

[Sky Butterfly]

Tenno Seremel, у меня с границей какие-то чудеса: в хроме на компе неровная, а в другом браузере на том же же движке и в хроме с телефона нормальная.
Если текст сдвинуть в процентах, то вроде всё в порядке.

<span style="display: inline-block; border-radius: 50%; box-sizing: border-box; width: 5em; height: 5em; padding: 1.3em 1em 0px; border-width: 4px 4px 2px 2px; border-style: solid; border-color: #333333; border-image: initial; text-align: center; font-size: 42px; line-height: 100%; color: #333333"><span style="display: inline-block; transform: rotate(-25deg); position: relative; left: -12%">Рандом
бдит!</span></span>

Рандом
бдит!

[Sky Butterfly]

Не поняла. Я границу не трогала. Как она выровнялась?

[Tenno Seremel]

Sky Butterfly, откуда копируешь текст? У тебя там border-image появился, у меня его в коде нет, и стили иначе написаны.

[Tenno Seremel]

У тебя там border-width:4px; 4px 2px 2px;

[Sky Butterfly]

Tenno Seremel, да у тебя же! Просто потом просмотр кода в браузере открыла процент подобрать.

[Sky Butterfly]

У тебя там border-width:4px; 4px 2px 2px;

Tenno Seremel, оставила только первые 4px. Ничего не изменилось. Откуда они вообще вылезли?

[Tenno Seremel]

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

[Tenno Seremel]

Небольшой апдейт (см. выше). Теперь в стилях круга цвет не прописан, поэтому он берётся из текущего, т.е. где первый color прописан. Что б 2 раза не писать в разных местах.

[Sky Butterfly]

Tenno Seremel, так, эти точку с запятой поставил сам дайри. Это я вставила код без этих знаков, сохранила, снова открыла редактировать и они появились.
А зачем 4 числа? Я хотела одинаковую толщину, просто набросок вышел неровный. Надо было сразу сказать.

[Tenno Seremel]

Sky Butterfly, я же тут же вставляю У тебя там не визуальный редактор какой-нибудь? (O.o) Иначе прям даже не знаю…

А зачем 4 числа? Я хотела одинаковую толщину, просто набросок вышел неровный. Надо было сразу сказать.

Ну так на картинке толщина разная была) А так, да, можно одно число.

[Sky Butterfly]

Tenno Seremel, это я так код на дайри проверяю - гоняю туда сюда. А то кто знает, что он ещё съест. А то так бы я Dreamweaver пользовалась.
Я ставлю в этом коде границу 4, убираю про верх и право - и круг превращается в овал. Моя логика даёт сбой.

[Tenno Seremel]

Sky Butterfly, код то покажи) Возможно у тебя ширина/высота где-то удалилась или ещё что-нибудь такое.

[Sky Butterfly]

Tenno Seremel, я нашла. Дайри абсолютно самопроизвольно меняет ширину с 5 единиц на 3.

[Sky Butterfly]

<span style="color:#333;display:inline-block;border-radius:50%;box-sizing:border-box;width:5em;height:5em;padding:1.3em 1em 0 1em;border: 4px solid;text-align:center;font-size:42px;line-height:100%;"><span style="display:inline-block;-webkit-transform:rotate(-25deg);transform:rotate(-25deg); position:relative; left:-8%;">Рандом
бдит!</span></span>

Рандом
бдит!

[Tenno Seremel]

Sky Butterfly, МАГИЯ

Можно попробовать пинуть техподдержку… Хотя им там бы вообще их CSS парсер переписать бы немного, а то вечно ботва какая-то вылазит

[Sky Butterfly]

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

[Tenno Seremel]

Sky Butterfly, подобная же фигня ещё со свойством line-height происходит на дайриках. Оно должно позволять ставить просто число (без единиц измерения), но… не принимает

[Sky Butterfly]

Tenno Seremel, я начала ещё больше сочувствовать верстальщикам на ФБ. Дизайн картинками - наше всё на Дайри.