Создаем иконки Google Plus с помощью CSS

Google известен своими красочными логотипами (красный, голубой, зеленый и желтый цвета в тренде (; ).

Поэтому сегодня попытаемся воссоздать несколько иконок этого замечательного сервиса с помощью CSS кода.

Сначала создадим элемент DIV с фиксированным размером. CSS код, расположенный ниже, как раз для первой иконки. А для воссоздания бэкграунда воспользуемся онлайн-редактором colorzilla gradient editor (очень хороший инструмент, позволяющий сэкономить кучу времени).

.icon {

width: 80px;

float: left;

margin-right: 30px;

-moz-box-shadow: 1px 1px 2px #999;

-webkit-box-shadow: 1px 1px 2px #999;

box-shadow: 1px 1px 2px #999;

-webkit-border-radius: 7px;

-moz-border-radius: 7px;

border-radius: 7px;

}

.colorblock {

width: 20px;

height: 12px;

float: left;

}

.r { /* red gradient */ }

.b { /* blue gradient */ }

.g { /* green gradient */ }

.y { /* yellow gradient */ }

.red {

-webkit-border-radius: 7px 0 0 0;

-moz-border-radius: 7px 0 0 0;

border-radius: 7px 0 0 0;

}

.yellow {

-webkit-border-radius: 0 7px 0 0;

-moz-border-radius: 0 7px 0 0;

border-radius: 0 7px 0 0;

}

.text {

text-shadow: 1px 1px 1px #a3a3a3;

clear: both;

width: 80px;

font-size: 48px;

padding: 0 0 18px 0;

color: #fff;

text-align: center;

-webkit-border-radius: 0 0 7px 7px;

-moz-border-radius: 0 0 7px 7px;

border-radius: 0 0 7px 7px;

/* radial gradient background */

}

.littleplus {

font-size: 28px;

font-weight: bold;

position: relative;

top: -4px;

}

Первая иконка — иконка “g+” с цветными блоками на верху. Для разнообразия сделана еще одна такая же, но с бэкграундом и несколько вариаций иконок с плюсом.