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

 

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

Шаг 1. HTML

На примере мы покажем разметку одного контейнера с текстом который будет отображаться у нас первым.

В разметке мы сразу указываем позицию, вернее на сколько должна двигаться наша лента по оси x, а также градиентную заливку для нашей ленты.

Шаг 2. CSS

Теперь нам необходимо задать классы для P, нам необходима позиция текста на странице, все это у нас будет благодаря следующим стилям:

Нумерация у нас будет обваливаться следующим значением:

В конце нам необходимо придать внешний вид лентам:

Адаптивность у нас достигается благодаря вот таким небольшим значениям:

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

Вот и все. Готово!