Təmiz CSS-da 8 faydalı imkan: 8) Pinterest tərzində imageboard

Təmiz CSS-da 8 faydalı imkan: 8) Pinterest tərzində imageboard

Code-News
13.03.2019 PAYLAŞIM
TECHNOTE @technote TECHNOTE logo icon

Bənzər xəbər


#Step IT Academy tərəfindən təqdim olunur  




    CSS texnologiyasında 8 faydalı həllər barədə olan məqalə seriyasının son hissəsini paylaşırıq.

Öncəki hissələr:

1) «Yapışqan» footer
2) İmage zoom on hover
3) Daimi Night Mode
4) Custom bullet-lar
5) Parallaks-şəkillər
6) Şəkilin kəsilmə animasiyası
7) Rəng qarışımı rejimləri


8. Pinterest tərzində imageboard

    CSS Grid və Flexbox vasitəsi ilə müxtəlif adaptiv səhifədə elemetləri vertikal sıra ilə yerləşdirə biləcəyiniz maketlər yaratmaq olar.  Lakin onlar Pinterest tərzində imageboard yaratmaq istədikdə demək olar ki, faydasızdırlar.  Qeyd edək ki, bu tərzi xüsusi edən odur ki, burada hər bir vertikal elementin yerləşməsi ondan öncəki elementin hündürlüyündən asılıdır.

    Belə bir dizayna nail olmaq üçün ən effektiv vasitə CSS-in sütunlar üçün olan imkanlarıdır. Adətən onlar mətni qəzetlərə bənzər tərzdə bir neçə köşəyə bölmək üçün istifadə olunur.
İşə düşməsi üçün elementləri div-ə salmalıyıq və column-width ilə column-gap istifadə etməliyik. Sonra isə elementlərin iki sütuna bölünməsinin qarşısını almaq üçün column-break-inside təyin etməliyik:

Yuxarıdaki nümunədə:not() istifadə olunub.




    Bu məqalə "Təmiz CSS-da 8 faydalı imkan" barədə olan məqalələr seriyasının son hissəsi idi. Ümid edirik ki, bu məqalələr işinizdə sizə köməkçi olur. Əgər bənzər tərzdə paylaşımları CodeNews-da tez-tez görmək istəyirsinizsə, şərh bölməsində bunu qeyd etməkdən çəkinməyin. 

Qeyd: Şərhlərdə nalayiq ifadələr işlətmək, reklam xarakterli mətn paylaşmaq qadağandır.

Şərh yoxdur

Şərh yazmaq üçün daxil olun


DAHA ÇOX


2020-ci ildə məlumatların vizualizasiyası üçün aktual olacaq Top-8 JavaScript ki..

JavaScript-də məlumatları daha gözəl şəkildə təqdim etmək lazımdır?


Microsoft bu il olmuş qeyri adi fişinq kiberhücumlarından danışdı

Bir neçə müddət bundan öncə isə Microsoft şirkəti kiberhücumlar və malware-lar üzrə trendləri əks et..


Microsoft Windows-da 0-day boşluğu da daxil olmaqla 7 kritik sistem boşluğu arad..

Microsoft şirkəti bu ay təqdim etmiş olduğu yenilənmələr ilə öz sistemlərində 36 boşluğu aradan qald..


Microsoft Teams platformasının Linux versiyası təqdim edildi

Microsoft şirkəti Microsoft Teams platformasının Linux versiyasını təqdim edib.


OpenBSD-də 4 ciddi sistem boşluğu aşkar edilib

OpenBSD-də 4 ciddi sistem boşluğu aşkar edilərək aradan qaldrılıb.


Sadə tətbiqlərin müxtəlif proqramlaşdırma dillərindəki test nəticələri təqdim ed..

Assembler x86_64-də HeavyThing adlı azad kitabxananı reallaşdırmış müəllif Jeff Marrison “Assembler-..

×