Иногда хочется привлечь внимание пользователя к кнопке. Чтобы он ее увидел и захотел нажать, будть то "Добавить в корзину", "Купить", "Заказать" и т.д. Здесь мы будем собирать наиболее интересные решения, которые мы разработали сами или где-то подсмотрели и кастомизировали под себя.

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

У многих начинающих разработчиков возникают сложности при добавлении текста поверх изображения, причем текст должен быть еще и читаем. Для читаемости можно размещать тексты в определенных местах изображения или использовать затемнение/засветление, наложение фона. В этом материале рассмотрим только универсальные решения, которые подойдут под любой текст, под любое изображение и под любой размер экрана.

Представляем Вашему вниманию несколько вариантов оформления ссылок внутри текста.

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

Отличие состоит лишь в том, что почти во всех вариантах, к ссылке применяется inline-block, т. е. если ссылка не уместится в 1 строку, она вся перенесется на следующую.