Tag Archives: CSS

Как да накараме един блок да се разпъва според два елемента на куп

от Гонзо
лиценз CC BY-NC-SA

За пример ще използвам блок „Обложка“ от новия редактор на WordPress (известен като Гутенберг), който представлява картинка, върху която има текст и/или друго съдържание. Такъв блок може да играе ролята на рекламен банер или заглавие на секция.

Това е обложка

И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.

В момента Гутенберг поставя изображението като фон на блока и му дава минимална височина. Обаче така пропорциите на блока нямат връзка с пропорциите на изображението и е трудно да го направите винаги да е да кажем квадратен или в пропорция 4 към 3. Освен това поставяйки изображението като фон в атрибут style, губим възможността да се се възползваме от отзивчивите изображения и ще караме потребителя да зарежда едно и също (голямо) изображение независимо от размера на екрана му.

<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim" style="background-image:url(https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart.jpg)">
  <div class="wp-block-cover__inner-container">
    <p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
    <p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
    <div class="wp-block-button aligncenter">
      <a class="wp-block-button__link" href="#">Цъкнете тук!</a>
    </div>
  </div>
</div>

За да постигнем желания ефект, ще поставим изображението като елемент img и ще разположим съдържанието върху него. Сигурно първото, което ви хрумва е да използвате абсолютно позициониране, но това не е добър вариант, защото тогава съдържанието няма да разпъва блока. Как иначе да сложим два елемента един връз друг? Със CSS Grid естествено. CSS Grid ни позволява да поставим повече от един елемент в дадена клетка на решетката и ние ще се възползваме от тази възможност:

<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim uses-css-grid">
  <img src="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg" aria-hidden="true" class="wp-image-2499" srcset="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg 1024w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-300x200.jpg 300w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-768x513.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">
  <div class="wp-block-cover__inner-container">
    <p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
    <p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
    <div class="wp-block-button aligncenter">
      <a class="wp-block-button__link" href="#">Цъкнете тук!</a>
    </div>
  </div>
</div>
.wp-block-cover.uses-css-grid > * {
   grid-column: 1;
   grid-row: 1;
   min-width: 100%;
   min-height: 100%;
 }
 
.wp-block-cover.uses-css-grid > img {
   border: none !important;
   object-fit: cover;
 }
 
.wp-block-cover.uses-css-grid .wp-block-cover__inner-container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 3em;
   box-sizing: border-box;
 }

Горният CSS освен, че поставя картинката и текстовото съдържание в единствената клетка от решетката, дефинирана върху блока, се грижи текстовото съдържание да е центрирано вертикално в блока, и картинката винаги да го запълва. Ето и крайния резултат:

Това е обложка

И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.

Ето го още веднъж, но този път с увеличен шрифт, за да демонстрирам как съдържанието също разпъва блока:

Това е обложка

И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.

Флекс в неделя сутрин: заглавие с линии от ляво и дясно

от Гонзо
лиценз CC BY-NC-SA

Не знам дали ще има и други публикации, че да се превърне това в рубрика, но ми хареса идеята да си поиграя с флекса в неделя сутрин. И така, искаме на направим заглавка, която има от ляво и от дясно линии до края на блока със съдържание и искаме да го направим с минимален брой елементи. С флексбокс става с точно един елемент. С помощта на двата псевдоелемента ще нарисуваме линиите, а флексбокс ни е нужен, за да подравним нещата. Тайната е в това, че ако флекс контейнера съдържа текст, около него се създава анонимен елемент, който да служи като флекс елемент, и така не ни е необходим допълнителен елемент около текста. Най-добре да ви покажа кода:

HTML:

<h1>Флекс в неделя сутрин</h1>

CSS:

h1 {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
}

h1:before, h1:after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 1px solid currentColor;
}

h1:before {
  margin-right: .5em;
}

h1:after {
  margin-left: .5em;
}

Резултата:

Флекс

Ако има нещо неясно, питайте!

SVG filters and CSS animations don’t play together well in WebKit

от Гонзо
лиценз CC BY-NC-SA

There is one particular day in my life that went into reading everything I could find about applying SVG filters on HTML content in Webkit/Blink and pulling my hair why didn’t my code work. See, I had an element with a SVG filter applied as a URI reference and the filter didn’t appear in Chrome and Opera. I tryed embedding the filter definition into the HTML – didn’t work, I tryed recreating the filter with the filter functions available in CSS – could’t create the same effect, but filters did work. Thet I noticed that the filters shows up while the JavaScript is loading, and after disabling JS throu DevTools the filter was there. And after toggling every single piece of JavaScript on the website on and off I managet to pinpoint the cause of my trobbles – a function that applied a class to the body that triggered an animation on a element that is siblink to the one with the SVG filter applied. Then I remembered reading about Chrome not using the GPU for SVG filters applied with URI, but using it for the shortcut functions in CSS. And then I knew – when applying the animation, Chrome rendered the whole container with the GPU and the SVG filter disappeard. And I did try to use 2d functions for the animation, but Chrome still used the GPU and broke the filter. So, if you ever try to use complex SVG filters together with CSS animation, be prepared for trouble!