Як зробити логотип в css

Приблизно так буде виглядати пропонований мною варіант вирішення поставленого завдання. Від слів до справи.

Приклад. HTML-код, який буде використовуватися для того, щоб зробити логотип

У наведеному прикладі я не використовував заборона обтікання HTML-елемента logo. щоб уникнути зайвих відступів в деяких браузерах. Тому нам знадобиться, як мінімум, поставити висоту HTML-елемента header.

Так як header може містити і інші HTML-елементи, позиціонуємо logo по лівому боці батька. Оскільки як logo ми використовуємо HTML-тег H1. що дозволяє надати ваги містить їм тексту в очах пошукових систем, буде не зайвим прибрати деякі його властивості, наприклад - відступи (margin і padding).

Оскільки HTML-елемент посилання a не має властивості блоку, нам доведеться його поставити (display: block). Знаходження всередині HTML-елемента logo дозволяє не турбуватися про позиціонування посилання, але нам знадобиться задати розміри області, яку буде займати наш логотип. Використовуючи CSS-властивість background. ми прописуємо не повторюється (no-repeat) і розташовану в центрі (50% 50%) фонову картинку. Це дозволяє зробити область посилання трохи більше по відношенню до розмірів самого логотипу і не піклуватися про його центруванні. Останнім, але не менш важливим, штрихом стане зрушення міститься на засланні тексту за межі вікна браузера, для чого ми використовуємо CSS-властивість text-indent задає відступ текст. Також буде не зайвим поставити нульовий розмір шрифту, що дозволить уникнути деяких проблем.