# 060: Прилагођено заглавље форума, 2. део (брзи медијски упити) - ЦСС-трикови

Anonim

Ницкова илустрација имала је три различита слоја за главе. То су само мало различите варијације. Могли бисмо да заменимо слике са анимацијом или са ЈаваСцриптом или слично, али постојање увек активне анимације (или чак оне која покреће свако учитавање странице) вероватно би било неугодно за тешке кориснике форума. Уместо тога, направићемо од њега ускршње јаје, односно малу особину коју можда нећете приметити уколико случајно случајно не налетите на њу.

Оно што ћемо урадити је заменити слике када се прозор прегледача промени кроз упите @медиа. Уместо само неколико упита @медиа који би променили главе неколико пута, направићемо срање од @медиа упита који их мењају на сваких неколико пиксела. Суштински усмеравајући дух Арлеија МцБлаина „Ларк Куериес“.

Сасс петљу користимо за стварање многих потребних @медиа упита. Коначно:

@for $i from 25 through 125 ( @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-2.png.webp); ) ) @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-3.png.webp); ) ) )

Оно што је лепо у вези са овим је то што те додатне слике не учитавамо уколико се страници не смањи величина, па не учитавамо додатне ствари само за ускршње јаје.