Андрей Федоров

codepen.io/aliencash/pen/kXJPYW

codepen.io/aliencash/pen/XKEKyd

div {
  height: 100vh;
  width: 100vw;
}

При этом нужно обнулить стили. Погуглите reset.css.

<div>
  <div>Нечетный</div>
  <div>Четный</div>
</div>

div div {
  width: 200px;
  height: 200px;
}
div div:nth-child(even) {
  background-color: red;
}
div div:nth-child(odd) {
  background-color: green;
}

Принцип ясен?

codepen.io/aliencash/pen/EyQyWy

В зависимости от того ТЕКСТ кнопки или ФОН кнопки -
color: rgba(0,255,0,.3);
или
backgrоund-color: rgba(255,255,255,.3);

меняя последний .3 от 0.0 до 1.0 параметр можно регулировать степень прозрачности.

Это прогрессивный jpg. Погуглите. Тут не надо ничего выдумывать.

На css будет работать только в webkit браузерах. Точнее там где поддерживаются @keyframes
codepen.io/aliencash/pen/EymLAk?editors=1100

Логика тут такая:
Поисковый робот G попытался зайти на вашу проиндексированную страницу. Ваш сервер ответил - страница не изменялась. Робот пошел дальше.
Код GA при этом не запустился, так как робот и сервер обменялись только HTTP заголовками.
Кеш браузера тут так же не срабатывает, т.к. 304ый ответ - это ответ сервера, а до клиента (браузера) дело так и не доходит.

Если речь о посетителе сайта:
Он заходит на страницу. Сервер отдает код 200, т.к. для получения 304 ответа нужен особый запрос, чего браузеры не делают. Часть данных загружается из кеша браузера. Часть берется с сервера. Код GA не кешируется, т.к. у вас просто нет возможности настроить его кеширование, если он не расположен у вас на сервере. GA отрабатывает нормально.

https://jsfiddle.net/tzdv2t6g/1/
Только тут еще transform вносит свои глюки.