“Почтовая марка”
С помощью радиального градиента можно добиться например такого эффекта:
Вот так выглядит если закомментить изображение:
А вот ещё эксперимент:
Добавляйте ссылочки на песочницы, пожалуйста.
А зачем использована функция calc?
Ок. Буду сохранять.
Я обычно экспериментирую, делаю скриншот и затираю код - в том же окне уже другой эксперимент делаю. Пробовал с GitHub’ом работать, но “что-то не особо пошло”.
Чисто захотел попробовать с Calc отцентрировать изображение
А margin-right? Разве для центровки не нужно писать отступы с обеих сторон?
Github изучайте, попробуйте спросить у пользователя @Sergey_Orlov, он добавляет ссылки на код через Github Gist.
P.S. Сообщение всё же подкорректируйте. Эксперименты лучше подкреплять “живым” кодом.
Спасибо за рекомендацию. Я понимаю что GitHub ресурс перспективный, мне при регистрации даже удалось выполнить действия их экспресс-обучалки 
, но явно в ней тоже надо изрядно “потыкать”, чтобы прийти к обдуманным действиям. 
Так формула реализует эту центровку. Смотрите (100% - 360px)/2;
360px - это ширина родительского контейнера.
Если из 100% ширины браузера вычесть ширину родительского контейнера - останется правый и левый внешний отступы (их сумма). И это значение делится на 2 - пополам. Полученный результат можно прописать любому из этих отступов, а второй по определению будет таким же.
Быстрее будет прописать правило margin: 30px auto; вместо двух написанных правил, но мне сам инструмент калькуляции понравился, опробовал его.
Второй отступ, поскольку не задан, равен нулю. Но центровка сохраняется, это интересно.
Да, с CALC можно получить хорошие результаты с позиционированием с ложными колонками и float блоками, причём сохранив “резиновость”.
А учитывая, что можно считать и в EM единицах, интересно будет как-нибудь опробовать калькулятор при расчёте “вертикального ритма”.
Мне на англоязычном ресурсе вскользь попадалось что он и с логическими операциями работает. Будет вдвойне интересно, если доступна работа с переменными.
Вот другой вариант, уже с сохранённым кодом. Здесь я получше рассчитал.
JS Bin on jsbin.com
Ссылка на картинку активна до 16.03.2017 года
Картинку можно добавлять через созданный репозиторий на Github или просто перекодировать ее в base-64 к примеру (не лучший вариант, но для песочницы сойдет).
Как я говорил, с Github на данный момент не дружу.
А как произвести подобную перекодировку?
“Тетрадная клетка”
Несколько пересмотрел код. Вместо создания дополнительного “плавающего” блока изменил вид свойства background. Так намного удобней
.stripe {
width: 770px;
background:
repeating-linear-gradient(90deg, rgba(96, 109, 188, 0.3), rgba(96, 109, 188, 0.3) 2px, transparent 2px, transparent 17px),
linear-gradient(to right, transparent, transparent 85px, red 85px, red 87px, transparent 87px),
repeating-linear-gradient(rgba(96, 109, 188, 0.3), rgba(96, 109, 188, 0.3) 2px, transparent 2px, transparent 17px);
}
Спасибо
А вы часом не в курсе что я “учудил” (нажал) в jsbin.com, что он мне прописал коды для разных движков.
А то я даже не заметил, что я сделал
Честно, не знаю, этой песочницей не пользуюсь. Включили добавление префиксов каким-то образом.