Метка «градиент»

Приветствую, друзья.

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

Что имеем:

Рассмотрим треугольник с вершинами в точках A,B и C. Точки пересечения перпендикуляров, опущенных из вершин ABC, с противоположными сторонами треугольника назовем A", B" и C":
Алгоритм трехточечного градиента

Задача:

Необходимо в каждой точке внутри треугольника(назовем такую точку O), определить проценты близости этой точки к каждой вершине(A,B,C) треугольника. Проценты в сумме должны дать значение 100.
Алгоритм трехточечного градиента

Читать полностью »

А давайте я вам расскажу про градиенты!
скрин финального результата

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

Зачем?

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

Вот два изображенья — вот и вот: *

[два изображенья]

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

Здесь уместно припомнить, что веборазработчики постепенно выучились употреблять градиенты в качестве фоновых рисунков: для этой цели им верно служит свойство «background: linear-gradient();», описываемое в стандарте «CSS Image Values and Replaced Content Module Level 3». И если сейчас перейти к стандарту по гиперссылке, то станет видно, что он достиг уж статуса «Candidate Recommendation», и что датируется он семнадцатым апреля 2012 года. В честь первой годовщины этого дня позвольте поговорить о том, что градиентная отрисовка текста всё ещё распространена в Сети куда менее, чем градиентная отрисовка фона.

Почему это так? Да потому, что единственным широко известным средством для градиентной раскраски текста служит нам нестандартный CSS-код «-webkit-background-clip: text», который обрезает любой фон (в том числе градиентный) по границе текста — и который употребляется обыкновенно в сочетании с CSS-кодом «-webkit-text-fill-color: transparent», обеспечивающим прозрачность букв самогó текста, так что фон через него проглядывает. Этот код работает с весны 2008 года, но, к сожалению, только во браузерах на основе WebKit, число которых хотя и возросло недавно (благодаря Опере, отступившейся от собственного движка), но ими одними плоды мирового браузеростроения не исчерпываются. Ни в Firefox, ни в Internet Explorer этот код не заработает.

Можно ли преодолеть этот тупик и достичь кросс-платформенности текста, отрисовываемого цветовым градиентом? Да, это возможно; но для этого придётся вместо CSS прибегнуть ко джаваскрипту.

Читать полностью »

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

Во многих случаях можно сэкономить ещё больше, используя градиенты. Даже с учётом того, что пока практически все браузеры поддерживают свойство linear-gradient только с префиксами, суммарный объем кода CSS, необходимый для создания фона, в несколько раз меньше размера нескольких PNG с фрагментами, и, что ещё важнее — вообще не требует лишних запросов к серверу. Так, Эрик Мейер недавно привёл пример реализации первых двух фонов из оригинальной статьи Уокера на чистом CSS. Для простых цветных полосок (вверху) понадобилось 2.66 Кб кода CSS (с префиксами, без минификации и компрессии). В будущем, когда все популярные браузеры избавятся от префиксов, будет достаточно 0.59 Кб кода. В оригинальном примере изображения весили около 6 Кб + 3 запроса к серверу. Второй пример с занавесом (внизу) впечатляет ещё больше. Даже с префиксами получается примерно десятикратный выигрыш.
Читать полностью »