Пример верстки логотипа

[borus]

Здравствуйте.

 

Давно не брал я в руки шашек Посоветуйте, пожалуйста примером, как правильно и лаконично сверстать то, что видно на картинке:

Строка красным будет картинка, а коричневым - должна быть текстом, который центрируется относительно картинки плюс поле ссылки должно занимать всю картинку и весь текст.

Либо быть может вы посоветуете, какие стили либо даже изменения структуры нужны прямо на боевом примере.

[Q4Dizzy]

Я думаю, что и текст и картинка должны быть единой ссылкой. Так как пользователь чаще всего наводится именно на изображение. Эффект отключения подчёркивания можно оставить

[antonKar]

  On 3/22/2015 at 5:33 PM, borus said:

как правильно и лаконично сверстать то, что видно на картинке

Народная мудрость вспоминается про кота, которому заняться нечем 

[afdw]

http://jsfiddle.net/zon87qzk/

Не дочитал. http://jsfiddle.net/au7ytLxd/ . А зачем картинкой делать текст?

Edited March 22, 2015 by afdw

[antonKar]

  On 3/22/2015 at 8:03 PM, afdw said:

А зачем картинкой делать текст?

Если текст является частью логотипа, то должен быть картинкой. Обсуждалось всё это уже не раз

[afdw]

  On 3/23/2015 at 2:08 AM, antonKar said:

 

  On 3/22/2015 at 8:03 PM, afdw said:

А зачем картинкой делать текст?

Если текст является частью логотипа, то должен быть картинкой. Обсуждалось всё это уже не раз

 

Так почему не использовать SVG?

[antonKar]

  On 3/23/2015 at 6:57 AM, afdw said:

Так почему не использовать SVG?

А кто сказал, что SVG нельзя? Если он картинкой, которую можно без проблем сохранить и открыть с рандомного компа, то можно.

[Zverushka]

Я думаю вторую строку необязательно делать картинкой, это же вроде пояснения, что это за магазин и их официальный логотип скорее всего будет без этой строчки. То есть с виду это поясняющий текст, а не часть логотипа.

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

[afdw]

  On 3/23/2015 at 8:09 AM, Zverushka said:

Я думаю вторую строку необязательно делать картинкой, это же вроде пояснения, что это за магазин и их официальный логотип скорее всего будет без этой строчки. То есть с виду это поясняющий текст, а не часть логотипа.

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

Шрифт можно перевести в path.