Отправляет 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 за неделю
←   Все выпуски   →

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


Payza — регистрация, создание кошелька

Здравствуйте! . Вам наверняка надоели скучные платежные системы, полностью переведенные на русский язык (как например ОкПей или Пейпел), и хочется попробовать чего-нибудь «импортного», необычного, не так ли?

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

Подробнее
 

Как создать цветовой фон

Проблема

Добавление цветового тона к изображению в оттенках серого (или к изображению, преобразованному в оттенки серого) — популярный и элегантный способ придания визуального единообразия группе фотографий, выполненных в совершенно непохожих стилях. Часто этот эффект применяется статически и убирается по событию  :hover и/или при других вариантах взаимодействия с изображением. Традиционно мы создаем две версии изображения в графическом редакторе и добавляем немного простого CSS-кода, задача которого — подменять одну версию другой. Этот подход работает, но он раздувает исходный код и требует дополнительных HTTP-запросов, а сопровождать такой веб-сайт — это настоящая головная боль. Представьте, что было принято решение изменить цвет, использующийся для создания этого эффекта. Вам придется перебрать все изображения и создать для каждого новую монохромную версию! Другие подходы включают наложение полупрозрачного цвета поверх изображения или изменение степени непрозрачности изображения и наложение его на подложку сплошного цвета. Однако это не настоящий тон: в таком решении не только цвета изображения не преобразуются в оттенки целевого цвета, но и существенно снижается контрастность.

Этот эффект используется для оформления фотографий лекторов. Полноцветное изображение оказывается при наведении указателя мыши и переводе фокуса на выбранный элемент
Также существуют сценарии, превращающие изображения в элемент  <canvas> и применяющие тон средствами JavaScript. При этом действительно получается реальное тонированное изображение, но решение работает очень медленно и накладывает множество ограничений. Согласитесь, было бы намного проще и удобнее применять цветовые тона к изображениям прямо в коде CSS?

Подробнее
 

Как сделать эффект матированного стекла

Проблема

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

Разметка выглядит так:
HTML
<main>
<blockquote>
"The only way to get rid of a temptation[…]"
<footer>—
<cite>
Oscar Wilde,
The Picture of Dorian Gray
</cite>
</footer>
</blockquote>
</main>
Здесь мы используем термин подложка» для обозначения той части страницы, которая находится под элементом и которая проглядывает сквозь его полупрозрачный фон.
А CSS-код выглядит так (для краткости все незначительные детали опущены):
body {
background: url("tiger.jpg") 0 / cover fixed;
}
main {
background: hsla(0,0%,100%,.3);
}


Как вы видите, текст прочитать очень сложно, так как изображение яркое и содержит множество деталей, а фоновый цвет непрозрачен только на 25%. Разумеется, мы могли бы улучшить читабельность, увеличив параметр альфа-канала в определении фонового цвета, но тогда эффект будет не таким интересным. В традиционном печатном дизайне эту проблему часто решают путем размывания фрагмента фотографии, находящегося прямо под текстовым контейнером. Размытые фоны не такие шумные, и, следовательно, текст поверх них читается намного проще. Поскольку эффект размытия дорогостоящ в терминах вычислительных ресурсов, в прошлом эту технику невозможно было использовать на веб-сайтах и в дизайне пользовательских интерфейсов. Однако графические процессоры непрерывно совершенствуются, а аппаратное ускорение становится доступным все в большем количестве разнообразных сценариев, поэтому сегодня мы сталкиваемся с эффектом размытия в оформлении интерфейсов довольно часто. За последние несколько лет нам довелось повстречать эту технику в новых версиях как Microsoft Windows, так и Apple iOS и Mac OS X.


Увеличение значения альфа-канала для фонового цвета решает проблему читабельности, но дизайн при этом теряет изюминку


В последние годы полупрозрачные пользовательские интерфейсы с размытой подложкой встречаются все чаще, так как нагрузка на системные ресурсы, которую оказывает эффект размытия, перестала быть чрезмерно дорогой (слева -  фрагмент интерфейса из Apple
iOS 8.1; справа - фрагмент интерфейса из Apple OS X Yosemite).

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

 

Подробнее
 

 

Skrill (бывший Moneybookers) — как использовать Скрилл для платежей

Здравствуйте! Сегодня я хочу продолжить тему обзоров систем электронных платежей и рассмотреть одну из самых демократичных и не зажравшихся (в плане комиссионных) международных платежных систем — Скрилл. Эта компания по какой-то причине произвела ребрендинг и стала называться Skrill, но многие ее по-прежнему знают под старым брендом Moneybookers.

Skrill как принимать платежи через Скрил

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

Подробнее
 

Как сделать тень с одной стороны

Проблема

Один из наиболее часто задаваемых вопросов относительно свойства  box-shadow, которые я получаю на веб-сайтах с вопросами и ответами, — как создать тень только с одной стороны (или, реже, только с двух). Быстрый поиск по  http://stackoverflow.com возвращает около тысячи результатов по данному запросу. И ничего удивительного, ведь отображение тени только с одной стороны создает более утонченный, но настолько же реалистичный эффект. Часто потерявшие надежду разработчики даже отправляют сообщения в список рассылки рабочей группы CSS, запрашивая создание новых свойств вроде  box-shadow-bottom,которые могли бы обеспечить такой результат. Однако подобные эффекты уже возможны при умном использовании старого доброго свойства  box-shadow, которое мы все знаем и любим.

Как сделать тень с одной стороны

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