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

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


10 лучших биткоин-обменников — где выгоднее обмен криптовалюты на Киви

Здравствуйте. Сегодня мы поговорим о биткоин-обменниках, а именно — на каких сайтах можно безболезненно и выгодно обменивать криптовалюту (что это такое?) по максимально выгодным для себя ценам. Для чего нужно производить обмен bitkoin?

Дело в том, что многие биткоин-кошельки (читайте статью «Регистрация биткоин-кошелька и его использование») созданы зарубежными интернет-предпринимателями и не дают возможности выводить криптовалюту, например, на популярные в рунете электронные деньги Яндекса, Киви или Вебмани.

Где обменять биткоины

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

Подробнее
 

Интерактивное сравнение изображений

Проблема

Иногда перед вами встает задача показать визуальные различия между двумя изображениями, обычно в качестве иллюстрации «было — стало». Например, для того чтобы продемонстрировать в портфолио результаты обработки фотографии, показать эффект определенных процедур на веб-сайте салона красоты или проиллюстрировать видимые последствия катастрофического события в какой-то географической области. Самое распространенное решение — просто поместить два изображения рядом друг с другом. Однако при этом человеческий глаз замечает только очевидные различия и упускает мелочи. Это не страшно, если детали не так важны или же различия действительно очень значительные, но во всех остальных случаях нам требуется более удобный способ сравнения. С точки зрения удобства использования у данной проблемы есть несколько решений. Одно из наиболее распространенных — показывать оба изображения в одном и том же месте, быстро сменяя одно другим, используя для этого анимированное изображение в формате GIF или анимацию CSS. Это намного лучше, чем выводить изображения подле друг друга, но пользователю приходится потратить время на то, чтобы заметить все различия, так как ему нужно просмотреть несколько итераций, каждый раз фиксируя взгляд на новой области изображения. В некоторых вариациях пользователь всего лишь двигает указатель мыши, вместо того чтобы перетаскивать полосу. Преимущество такого подхода в том, что его проще заметить и использовать, но создаваемое мельтешение может раздражать.

Пример интерактивного виджета для сравнения изображений.
Намного более удобное для пользователя решение — так называемый слайдер сравнения изображений. Этот элемент управления содержит оба изображения, одно поверх другого, и позволяет пользователю перетаскивать разделитель, открывая одно или второе. Разумеется, такого элемента управления в HTML в действительности не существует. Его приходится имитировать средствами имеющихся элементов, и в Сети можно найти массу вариантов реализации, чаще всего требующих каркасов JavaScript и большого количества JS-кода. Существует ли более простой способ добавления на страницу подобного элемента управления? Да, причем целых два!

Подробнее
 

Определение размера содержимого

Проблема

Как мы все знаем, если мы не устанавливаем конкретное значение  height для элемента, то его высота автоматически корректируется в зависимости от размера содержимого (подробнее о размерах элементов читайте здесь) . А что, если нам бы хотелось наблюдать схожее поведение атрибута  width ? Например, предположим, что мы оформляем иллюстрации с помощью HTML5, используя примерно такую разметку:
HTML
<p>Some text […]</p>
<figure>
<img src="adamcatlace.jpg" />
<figcaption>
The great Sir Adam Catlace was named after
Countess Ada Lovelace, the first programmer.
</figcaption>
</figure>
<p>More text […].</p>
Также предположим, что мы применяем какую-то простейшую стилизацию, скажем, создаем рамку вокруг иллюстраций. По умолчанию результат выглядит как на рисунке. Но мы хотим, чтобы ширина иллюстраций была равна ширине содержащихся в них изображений (которые могут быть абсолютно разными), а также чтобы они выравнивались по центру по горизонтали. Текущий вариант визуализации далек от желаемого результата: строки текста намного длиннее изображения.

Как же сделать так, чтобы ширина иллюстрации определялась шириной содержащегося в ней изображения, а не шириной родительского элемента?  За время своей карьеры вы наверняка успели составить собственный список CSS-стилей, которые приводят к такому поведению свойства  width, чаще всего в качестве побочного эффекта: если мы сделаем элемент  <figure> плавающим, то это даст нам нужную ширину, но кардинальным образом изменит макет иллюстрации, что нам, скорее всего, совершенно не нужно; установка свойства  display: inline-block для иллюстрации позволяет определять ее размер в зависимости от ее содержимого, но не так, как нам бы этого хотелось. Помимо этого, даже если бы способ вычисления ширины соответствовал нашим ожиданиям, было бы чрезвычайно сложно в таких условиях выравнивать иллюстрацию по центру.

Нам понадобилось бы применить  textalign: center к ее родительскому элементу и  text-align: left к любым другим возможным потомкам этого родительского элемента ( p,  ul,  ol,  dl, ...); в качестве последнего средства разработчики часто прибегают к установке фиксированного значения width или  max-width для иллюстраций и применению  max-width: 100% к  figure > img . Однако это приводит к неэффективному расходованию доступного пространства, может давать уродливые результаты для слишком маленьких иллюстраций, а также не адаптивно. Существует ли достойное решение этой проблемы на чистом CSS или же нам следует сдаться и приступить к кодированию сценария, динамически устанавливающего ширину иллюстраций?

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