Lecaw

Учимся создавать Web-сайты

Логотипы для сайтов с помощью CSS3: Gmail

August 16, 2013
CSS
553hits

Сегодня я хочу показать вам, как создать логотип для сайта Gmail, используя только CSS3.

 ДЕМО

 

Это очень простой логотип для сайта, который довольно легко создать. Откройте ваш любимый редактор кода и скопируйте туда следующий HTML код и сохраните его под именем logo-gmail.html.

<html>
	<head>
		<title>Gmail CSS Logo</title>
		<style type='text/css'>
		</style>
	</head>
	<body>
		<span class='gmail-logo'>
			<span class='gmail-box'> </span>
		</span><!-- End .gmail-logo -->
	</body>
</html>

Добавьте следующие CSS стили в элемент style, чтобы сбросить CSS свойства по умолчанию.

.gmail-logo,
.gmail-logo *,
.gmail-logo *:before,
.gmail-logo *:after {
	margin:0;
	padding:0;
	background:transparent;
	border:0;
	outline:0;
	display:block;
	font:normal normal 0/0 serif;
	}

В следующем CSS коде создадим красный фон логотипа Gmail.

.gmail-logo {
	margin:110px auto;
	background:rgb(201, 44, 25);
	width:600px;
	height:400px;
	border-top:4px solid rgb(201, 44, 25);
	border-bottom:4px solid rgb(201, 44, 25);
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	}

Далее перейдем к созданию белого блока в красном фоне.

.gmail-logo .gmail-box {
	overflow:hidden;
	float:left;
	width:440px;
	height:400px;
	margin:0 0 0 80px;
	background:white;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	}

Для того чтобы создать красную букву "M", мы сначала создадим блок с красной рамкой.

.gmail-logo .gmail-box:before {
	position:relative;
	content:'';
	z-index:1;
	background:white;
	float:left;
	width:320px;
	height:320px;
	border:100px solid rgb(201, 44, 25);
	margin:-310px 0 0 -40px;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	-moz-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	}

Затем скроем не нужную часть нашей буквы.

.gmail-logo .gmail-box {
	overflow:hidden;
	}

Создадим две тонкие линии как в конверте.

.gmail-logo .gmail-box:after {
	content:'';
	float:left;
	width:360px;
	height:360px;
	border:2px solid rgb(201, 44, 25);
	margin:10px 0 0 40px;
	-o-transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	}

Добавим градиент:

.gmail-logo:after {
	content:'';
	position:relative;
	z-index:2;
	content:'';
	float:left;
	margin-top:-404px;
	width:600px;
	height:408px;
	display:block;
	background:
		-moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, 
		/* rgba(255, 255, 255, 0.3) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, 
		/* rgba(255, 255, 255, 0.2) 30%, */
		rgba(255, 255, 255, 0.1) 100%);
	background:-webkit-gradient(
		linear, left top, left bottom, color-stop(0%, 
		rgba(255, 255, 255, 0.3)), 
		/* color-stop(30%, rgba(255, 255, 255, 0.2)), */
		color-stop(100%, rgba(255, 255, 255, 0.1)));
	}

 ДЕМО

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(2 голосов)

Оставить комментарий