Логотипы на CSS

Все варианты используют Google Fonts и адаптивны (уменьшаются при ширине экрана менее 600 точек).

Вариант 1:

Используется шрифт Russo One

<a href="/" class="logotype1">						
	<div><b>BEST</b>компания</div>
	<span>создание логотипов</span>
</a>

<div><b>BEST</b>компания</div>

<span>создание логотипов</span>

</a>

@import url(https://fonts.googleapis.com/css?family=Russo+One);		
.logotype1,
.logotype1:hover,
.logotype1 div {
	position:relative;
	display:inline-block;
	font-size:36px;
	color:#337AB7;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.2);
	font-family: 'Russo One', sans-serif;
	font-weight: 300;
	text-decoration:none;
	margin:20px 0 20px 26px;
	line-height:16px;
}
.logotype1 div {
	display:block;
}
.logotype1 b {
	letter-spacing:1px;
	font-size:44px;
	color:#1C84D0;
	-webkit-text-stroke: 1px #BDE1FF;
	text-shadow: 2px 4px 3px rgba(0,0,0,0.3);
	font-weight: 600;
	background: #FFF;
}
.logotype1 span {
	text-shadow: 1px 2px 1px rgba(0,0,0,0.2);
	display:block;
	float:right;
	font-size:20px;
	color:#579EE6;
	line-height:6px;
}
.logotype1:before {
	position:absolute;
	top:-12px;
	left:0;
	content: "";
	border:8px solid #BDE1FF;
	width:66px;
	height:66px;
	border-radius:100%;
	transition: all 0.3s ease;
	z-index:-1; 
	box-sizing: content-box;  
}
.logotype1:hover:before {
	transform: scale(1.1);
	border:8px solid #1C84D0;
}
@media (max-width:600px) {
	.logotype1,
	.logotype1:hover,
	.logotype1 div {
		font-size:26px;
		line-height:6px;
		margin:20px 0 20px 20px;
	}
	.logotype1 b {
		font-size:34px;
	}
	.logotype1 span {
		font-size:16px;
		line-height:4px;
	}
	.logotype1:before {
		top:-9px;
		border:6px solid #BDE1FF;
		width:52px;
		height:52px;
	}
	.logotype1:hover:before {
		border:6px solid #1C84D0;
	}
}

@import url(https://fonts.googleapis.com/css?family=Russo+One);

.logotype1,

.logotype1:hover,

.logotype1 div {

position:relative;

display:inline-block;

font-size:36px;

color:#337AB7;

text-shadow: 2px 4px 3px rgba(0,0,0,0.2);

font-family: 'Russo One', sans-serif;

font-weight: 300;

text-decoration:none;

margin:20px 0 20px 26px;

line-height:16px;

}

.logotype1 div {

display:block;

}

.logotype1 b {

letter-spacing:1px;

font-size:44px;

color:#1C84D0;

-webkit-text-stroke: 1px #BDE1FF;

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

font-weight: 600;

background: #FFF;

}

.logotype1 span {

text-shadow: 1px 2px 1px rgba(0,0,0,0.2);

display:block;

float:right;

font-size:20px;

color:#579EE6;

line-height:6px;

}

.logotype1:before {

position:absolute;

top:-12px;

left:0;

content: "";

border:8px solid #BDE1FF;

width:66px;

height:66px;

border-radius:100%;

transition: all 0.3s ease;

z-index:-1;

box-sizing: content-box;

}

.logotype1:hover:before {

transform: scale(1.1);

border:8px solid #1C84D0;

}

@media (max-width:600px) {

.logotype1,

.logotype1:hover,

.logotype1 div {

font-size:26px;

line-height:6px;

margin:20px 0 20px 20px;

}

.logotype1 b {

font-size:34px;

}

.logotype1 span {

font-size:16px;

line-height:4px;

}

.logotype1:before {

top:-9px;

border:6px solid #BDE1FF;

width:52px;

height:52px;

}

.logotype1:hover:before {

border:6px solid #1C84D0;

}

Вариант 2:

Используется шрифт Russo One

В данном варианте просто красивая тень, которая смотрится на светлом фоне

BESTкомпания создание логотипов

<a href="/" class="logotype2">BESTкомпания
	<span>создание логотипов</span>
</a>

<a href="/" class="logotype2">BESTкомпания

<span>создание логотипов</span>

</a>

@import url(https://fonts.googleapis.com/css?family=Russo+One);	
.logotype2, 
.logotype2:hover {
	text-align:center;
	letter-spacing:1px;
	display:inline-block;
	color: #fff;
	font-size: 50px;
	line-height:50px;
	font-family: 'Russo One', sans-serif;
	text-decoration:none;
	text-shadow: 0 1px 0 #ccc, 
	0 2px 0 #c9c9c9,
	0 3px 0 #bbb,
	0 4px 0 #b9b9b9,
	0 5px 0 #aaa,
	0 6px 1px rgba(0,0,0,.1),
	0 0 5px rgba(0,0,0,.1),
	0 1px 3px rgba(0,0,0,.3),
	0 3px 5px rgba(0,0,0,.2),
	0 5px 10px rgba(0,0,0,.25),
	0 10px 10px rgba(0,0,0,.2),
	0 20px 20px rgba(0,0,0,.15);
}
.logotype2 span {
	display:block;
	font-size: 24px;
	transition: all 0.3s ease;
	letter-spacing:2px;
	line-height:32px;
}
.logotype2:hover span {
	font-size: 26px;
}
@media (max-width:600px) {
	.logotype2, 
	.logotype2:hover {
		font-size: 36px;
		line-height:40px;
	}
	.logotype2 span {
		font-size:18px;
		letter-spacing:2px;
		line-height:26px;
	}
	.logotype2:hover span {
		font-size: 20px;
	}
}

@import url(https://fonts.googleapis.com/css?family=Russo+One);

.logotype2,

.logotype2:hover {

text-align:center;

letter-spacing:1px;

display:inline-block;

color: #fff;

font-size: 50px;

line-height:50px;

font-family: 'Russo One', sans-serif;

text-decoration:none;

text-shadow: 0 1px 0 #ccc,

0 2px 0 #c9c9c9,

0 3px 0 #bbb,

0 4px 0 #b9b9b9,

0 5px 0 #aaa,

0 6px 1px rgba(0,0,0,.1),

0 0 5px rgba(0,0,0,.1),

0 1px 3px rgba(0,0,0,.3),

0 3px 5px rgba(0,0,0,.2),

0 5px 10px rgba(0,0,0,.25),

0 10px 10px rgba(0,0,0,.2),

0 20px 20px rgba(0,0,0,.15);

}

.logotype2 span {

display:block;

font-size: 24px;

transition: all 0.3s ease;

letter-spacing:2px;

line-height:32px;

}

.logotype2:hover span {

font-size: 26px;

}

@media (max-width:600px) {

.logotype2,

.logotype2:hover {

font-size: 36px;

line-height:40px;

}

.logotype2 span {

font-size:18px;

letter-spacing:2px;

line-height:26px;

}

.logotype2:hover span {

font-size: 20px;

}

Вариант 3:

Используется шрифт Roboto

В этом варианте текст без особенных стилей, но интересным ховер-эффектом

Применим только на темных фонах.

BESTкомпания

создание логотипов

<a href="/" class="logotype3">						
	<b>BEST</b>компания
	<div>создание логотипов</div>
</a>

<b>BEST</b>компания

<div>создание логотипов</div>

</a>

@import url(https://fonts.googleapis.com/css?family=Roboto);	
.logotype3, .logotype3:hover {
	display: inline-block;
	font-size: 50px;
	line-height :50px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-decoration:none;
}
.logotype3 b {
	color: #BDE1FF;
	font-size: 56px;
}
.logotype3 div {
	font-size: 24px;
	line-height:20px;
	text-align:left;
	color: #FFF;
}
.logotype3:hover {
	animation: blur1 1s ease-out;
}
.logotype3:hover b {
	animation: blur2 1s ease-out;
}
@keyframes blur1 {
	from {
		text-shadow:0px 0px 10px #fff,
		0px 0px 10px #fff, 
		0px 0px 25px #fff,
		0px 0px 25px #fff,
		0px 0px 25px #fff,
		0px 0px 25px #fff,
		0px 0px 25px #fff,
		0px 0px 25px #fff,
		0px 0px 50px #fff,
		0px 0px 50px #fff;
	}
}
@keyframes blur2 {
	from {
		color: #337AB7 ;
	}
}
@media (max-width:600px) {
	.logotype3, .logotype3:hover {
		font-size: 40px;
		line-height: 40px;
	}
	.logotype3 b {
		font-size: 48px;
	}
	.logotype3 div {
		font-size: 18px;
	}
}

@import url(https://fonts.googleapis.com/css?family=Roboto);

.logotype3, .logotype3:hover {

display: inline-block;

font-size: 50px;

line-height :50px;

color: #FFF;

font-family: 'Roboto', sans-serif;

text-decoration:none;

}

.logotype3 b {

color: #BDE1FF;

font-size: 56px;

}

.logotype3 div {

font-size: 24px;

line-height:20px;

text-align:left;

color: #FFF;

}

.logotype3:hover {

animation: blur1 1s ease-out;

}

.logotype3:hover b {

animation: blur2 1s ease-out;

}

@keyframes blur1 {

from {

text-shadow:0px 0px 10px #fff,

0px 0px 10px #fff,

0px 0px 25px #fff,

0px 0px 50px #fff,

0px 0px 50px #fff;

}

@keyframes blur2 {

from {

color: #337AB7 ;

}

@media (max-width:600px) {

.logotype3, .logotype3:hover {

font-size: 40px;

line-height: 40px;

}

.logotype3 b {

font-size: 48px;

}

.logotype3 div {

font-size: 18px;

}

Вариант 4:

Используется шрифт Russo One

BESTкомпания

создание логотипов

<a href="/" class="logotype4">						
	<b>BEST</b>компания
	<div>создание логотипов</div>
</a>

<b>BEST</b>компания

<div>создание логотипов</div>

</a>

@import url(https://fonts.googleapis.com/css?family=Russo+One);	
.logotype4 {
	position: relative;
	color: #337AB7;
	letter-spacing: 3px;
	display: inline-block;
	line-height: 50px;
	font-size: 54px;
	font-family: 'Russo One', sans-serif;
	font-variant: small-caps;
	transition: color 0.3s ease-in-out;
	text-shadow: 1px 1px #fffcf5, 3px 3px;
	margin-bottom: 20px;
}
.logotype4 b {
	font-variant: normal;
}
.logotype4 div {
	position: absolute;
	font-size: 24px;
	text-shadow: 1px 1px #fffcf5;
	transition: all 0.3s ease-in-out;
	letter-spacing: 0;
	left: 0;
	white-space: nowrap;
	transform: translateX(0);
}
.logotype4:hover {
	color: #2d6b9f;
}
.logotype4:hover div {
	left: 100%;
	transform: translateX(-100%);
}
@media (max-width:600px) {
	.logotype4, .logotype4:hover {
		font-size: 32px;
		line-height: 32px;
	}
	.logotype4 b {
		font-size: 32px;
	}
	.logotype4 div {
		font-size: 18px;
	}
}

@import url(https://fonts.googleapis.com/css?family=Russo+One);

.logotype4 {

position: relative;

color: #337AB7;

letter-spacing: 3px;

display: inline-block;

line-height: 50px;

font-size: 54px;

font-family: 'Russo One', sans-serif;

font-variant: small-caps;

transition: color 0.3s ease-in-out;

text-shadow: 1px 1px #fffcf5, 3px 3px;

margin-bottom: 20px;

}

.logotype4 b {

font-variant: normal;

}

.logotype4 div {

position: absolute;

font-size: 24px;

text-shadow: 1px 1px #fffcf5;

transition: all 0.3s ease-in-out;

letter-spacing: 0;

left: 0;

white-space: nowrap;

transform: translateX(0);

}

.logotype4:hover {

color: #2d6b9f;

}

.logotype4:hover div {

left: 100%;

transform: translateX(-100%);

}

@media (max-width:600px) {

.logotype4, .logotype4:hover {

font-size: 32px;

line-height: 32px;

}

.logotype4 b {

font-size: 32px;

}

.logotype4 div {

font-size: 18px;

}

Данная заметка является дополняемой, и как появится что-то интересное, она будет дополнена.

Александр: 09.11.2023 в 22:39

Опечатка в примере css logotype4 в строке 29 : двойной # стоит

Ответить
- Alexander: 13.11.2023 в 09:42
  
  Спасибо, поправил
  
  Ответить
Алексей: 25.10.2020 в 17:57

Ребят помогите понять как в 1 примере логотипа вместо полукруга, сделать иконку telegram, из Awesome <i class="fab fa-telegram" style="font-size: 35px;padding-right: 10px;"> и что бы она уцвеличивалась, а текст чуть левее был... помогите родные мои

Ответить
- Alexander: 26.10.2020 в 07:30
  
  Как то так
  
  Ответить
  - Алексей: 26.10.2020 в 14:49
    
    А при увеличении сзади что бы синего квадратика не возникало ?₽ или это на тел так ... хз
    
    Ответить
    - Alexander: 26.10.2020 в 18:39
      
      Я не вижу там квадртаика....
      
      Ответить
Adf: 05.10.2019 в 12:56

Нужно сделать логотип но я не разбираюсь логотип по типу dropbox можно эпл подскажите код буду благодарен

Ответить
- Alexander: 07.10.2019 в 09:16
  
  Их рисовать нужно 🙂
  На CSS можно помудрить, на SVG или фотошопить.
  
  Ответить
Наталья: 08.09.2019 в 23:07

как вставить на сайт логотип-картинку?
где тут ошибка?

в html

<div id="logo.png">
<a href="/"><img src="/images/logo.png" height="75" width="796" /></a>
</div>

в css
div#logo { width:796; height:75px; top left no-repeat;}

Ответить
- Alexander: 09.09.2019 в 06:38
  <div id="logo.png">
  
  Ошибка, нужно
  
  <div id="logo">
  
  А в CSS лишнее: top left no-repeat;, это относится к бекграунду, а не к картинке img.
  Ответить
  - Наталья: 10.09.2019 в 22:36
    
    Спасибо! переделала, но картинка не подгружается. Вместо логотипа пустая "рамка".
    
    Ответить
    - Alexander: 10.09.2019 в 23:32
      
      А можно поглядеть что и где вы делаете?
      
      Ответить

Вариант 1:

Вариант 2:

Вариант 3:

Вариант 4:

Смотрите также:

Добавить комментарий:

Комментарии: