Все варианты используют Google Fonts и адаптивны (уменьшаются при ширине экрана менее 600 точек).
Вариант 1:
Используется шрифт Russo One
|
1 2 3 4 |
<a href="/" class="logotype1"> <div><b>BEST</b>компания</div> <span>создание логотипов</span> </a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
@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
В данном варианте просто красивая тень, которая смотрится на светлом фоне
|
1 2 3 |
<a href="/" class="logotype2">BESTкомпания <span>создание логотипов</span> </a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
@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
В этом варианте текст без особенных стилей, но интересным ховер-эффектом
Применим только на темных фонах.
|
1 2 3 4 |
<a href="/" class="logotype3"> <b>BEST</b>компания <div>создание логотипов</div> </a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
@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; } } |
Вариант 4:
Используется шрифт Russo One
|
1 2 3 4 |
<a href="/" class="logotype4"> <b>BEST</b>компания <div>создание логотипов</div> </a> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
@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; } } |
Данная заметка является дополняемой, и как появится что-то интересное, она будет дополнена.
Опечатка в примере css logotype4 в строке 29 : двойной # стоит
Спасибо, поправил
Ребят помогите понять как в 1 примере логотипа вместо полукруга, сделать иконку telegram, из Awesome <i class="fab fa-telegram" style="font-size: 35px;padding-right: 10px;"> и что бы она уцвеличивалась, а текст чуть левее был... помогите родные мои
Как то [url="https://codepen.io/atuin/pen/GRqWNWj"]так[/url]
А при увеличении сзади что бы синего квадратика не возникало ?₽ или это на тел так ... хз
Я не вижу там квадртаика....
Нужно сделать логотип но я не разбираюсь логотип по типу dropbox можно эпл подскажите код буду благодарен
Их рисовать нужно 🙂
На CSS можно помудрить, на SVG или фотошопить.
как вставить на сайт логотип-картинку?
где тут ошибка?
в 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;}
[code]<div id="logo.png">[/code]
Ошибка, нужно
[code]<div id="logo">[/code]
А в CSS лишнее: [i]top left no-repeat;[/i], это относится к бекграунду, а не к картинке [i]img[/i].
Спасибо! переделала, но картинка не подгружается. Вместо логотипа пустая "рамка".
А можно поглядеть что и где вы делаете?