Логотипы на CSS

Большинство маленьких компаний или некоммерческих сайтов не имеют своих логотипов, а в шапку сайта нужно что-то вставлять. Обычно логотипы рисуются в графических редакторах и на сайте размещаются картинкой, но можно их сделать и на CSS.

Логотип, оформленный на CSS проще редактировать и на него можно наложить не только ховер эффекты, но и анимацию.

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

Вариант 1:

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

Вариант 2:

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

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

Вариант 3:

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

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

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

Вариант 4:

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

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

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

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

Ваш комментарий отправлен!

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

  • Алексей:

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

    Ответить
      • Алексей:

        А при увеличении сзади что бы синего квадратика не возникало ?₽ или это на тел так … хз

        Ответить
        • Alexander:

          Я не вижу там квадртаика….

          Ответить
  • Adf:

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

    Ответить
    • Alexander:

      Их рисовать нужно 🙂
      На 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;}

    Ответить
    • Alexander:
      <div id="logo.png">

      Ошибка, нужно

      <div id="logo">

      А в CSS лишнее: top left no-repeat;, это относится к бекграунду, а не к картинке img.

      Ответить
      • Наталья:

        Спасибо! переделала, но картинка не подгружается. Вместо логотипа пустая "рамка".

        Ответить
        • Alexander:

          А можно поглядеть что и где вы делаете?

          Ответить