Настраиваем компонент баннер в Joomla. CSS3 стили для html-баннера текст на фоне изображения

Полдня провозился с настройками html-баннера (текста на фоне картинки). В перспективе это должно существенно упростить перенастройку текста на рекламных баннерах. Поскольку баннеры я намерен показывать на посадочных страницах контекстной рекламы, то текст на них должен легко редактироваться. Хороший резон, чтобы наложить html на картинку. Но под разные размеры экранов приходится подстраиваться, используя @media only screen and (min-width:420px)

CSS3 Animations When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
Animated Headlines
CSS3 @media Rule The @media rule is used to define different style rules for different media types/devices.

In CSS2 this was called media types, while in CSS3 it is called media queries. Media queries look at the capability of the device, and can be used to check many things, such as:

width and height of the viewport
width and height of the device
orientation (is the tablet/phone in landscape or portrait mode?)
resolution
and much more

Работающий, но неудовлетворительный вариант быстро перестраиваемого баннера¶

На странице редактирования баннера Banner:edit -> Details -> Custom Code вставляем html код:

In [ ]:

<div class="b1">
<a href="/jm_34_2/index.php/4-about-your-home-page"  >
<p class="pb11">
Сервис С-Традо = Онлайн консультанты + Техподдержка разработчика + Консультанты центра обучения. 

</p>
</a>
</div>

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

Здесь мы задаем наследование высоты баннера, чтобы блок ссылки (a) был того же размера, что и содержащий его div с фоновым изображением:

Первая часть кода¶

In [ ]:

.b1 {
  height: 150px;  
  background-image: url('/jm_34_2/images/headers/raindrops.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  
}
.b1 a {  height: inherit; }

Выше минимальный набор кода, а для того, чтобы учесть размер экрана приходится исползовать CSS3... Оказалось, что вот этот подход с max-width "барахлит", потому пришлось заменить этот код на правильный (в конце поста)

In [ ]:

.b1 a .pb11 {  height: inherit;
  text-align: center;
  text-shadow:initial;
  font-size: 28px;
  line-height: 34px;
  padding-top: 20px;
   
}
@media only screen and (max-width:800px) {
    .b1 a .pb11  {
        font-size: 24px;
        line-height: 28px;
        padding-top: 5px;
    }
}

@media only screen and (max-width: 400px) {
    .b1 a .pb11  {
        font-size: 16px;
        line-height: 20px;
        padding-top: 0px;
    }
}

Не следует забывать про то, что шаблон страницы "резиновый" (текучий), поэтому надо предусмотреть уменьшение шрифта текста при уменьшении размера экрана. См. ссылку CSS3 @media Rule в начале поста.

И вот правильный код (вторая часть), но он работает только для этого набора слов.¶

In [ ]:

.b1 a .pb11 {  height: inherit;
  text-align: center;
  text-shadow:initial;
  
  font-size: 8px;
  line-height: 10px;
  padding-top: 0px; 
}
@media only screen and (min-width:420px) {
    .b1 a .pb11  {
        font-size: 16px;
        line-height: 28px;
        padding-top: 0px;
    }
}
@media only screen and (min-width:520px) {
    .b1 a .pb11  {
        font-size: 24px;
        line-height: 28px;
        padding-top: 5px;
    }
}

@media only screen and (min-width: 800px) {
    .b1 a .pb11  {
        font-size: 28px;
        line-height: 34px;
        padding-top: 20px;
    }
}

Посты чуть ниже также могут вас заинтересовать