Небольшие компании и некоммерческие сайты часто не имеют своих логотипов, а в шапку сайта нужно что-то вставлять. Простой текст с названием компании выглядит не привлекательно. Обычно логотип рисуют в графических редакторах и на сайте размещаются картинкой или svg, но можно их сделать и на CSS. Логотип, оформленный на CSS проще редактировать и на него можно наложить не только ховер эффекты, но и анимацию.
Во всех примерах имеются сторонние шрифты подключенные в css через Google Fonts.
Пример 1
- Пример
- HTML
- CSS
<a href="##" class="logotype1">
<div><b>PRO</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:#53737e;
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:#53737e;
-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:#53737e;
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 #53737e;
}
@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 #53737e;
}
}Пример 2
- Пример
- HTML
- CSS
<a href="##" class="logotype2">PROводник
<span>создание сайтов</span>
</a>@import url(https://fonts.googleapis.com/css?family=Russo+One);
.logotype2,
.logotype2:hover {
margin: 20px 0 20px 26px;
text-align:center;
letter-spacing:1px;
display:inline-block;
color: #53737e;
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
- Пример
- HTML
- CSS
<div class="logotypepad3">
<a href="##" class="logotype3">
<b>PRO</b>водник
<div>разработка сайтов</div>
</a>
</div>@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed);
.logotypepad3 {
background: #3a3b3f;
padding: 30px 0;
width: 100%;
text-align: center;
}
.logotype3, .logotype3:hover {
display: inline-block;
font-size: 50px;
line-height :50px;
color: #FFF;
font-family: 'Roboto Condensed', sans-serif;
text-decoration:none;
}
.logotype3 b {
color: #a7e7fd;
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;
}
}Пример 4
- Пример
- HTML
- CSS
<a href="##" class="logotype4">
<b>PRO</b>водник
<div>разработка сайтов</div>
</a>@import url(https://fonts.googleapis.com/css?family=Russo+One);
.logotype4 {
margin: 20px 0 40px 26px;
position: relative;
color: #53737e;
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;
}
.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;
}
}