# 188: Raziskovanje prekrivajočega se vzorca glave - CSS-triki

Anonim

Snook je objavil članek z naslovom "Prekrivanje glave z mrežo CSS", kjer preučuje vzorec oblikovanja glave, za katerega menim, da presega trende in je že od nekdaj priljubljen. Ideja je, da je glava prevelika in da se glavno področje vsebine prikrade vanjo ter prekriva ozadje glave. V tem je le nekaj prijetno in tolažilnega.

Mislim, da gre isto mesto, kamor gre Snook:

V preteklosti sem to počel z negativnimi maržami. Glava ima višino, ki na dno doda kup oblazinjenja, nato pa telo dobi margin-top: -50pxali karkoli že zahteva dizajn.

Potem pa se odloči, da bo to storil z mrežo CSS! Zanimivo. Zakaj? No, v to bomo šli. Mreža se preprosto počuti (in dejansko je) trdnejša. Mreža je lahko tudi bolj prilagodljiva. Na primer, max-heightin autorobovi so odlični pri centriranju, a kaj, če želite neravne žlebove na robovih? Tam bi bilo težko in enostavno z Gridom. Ethan Marcotte je zapisal:

Namesto da bi privzeto max-widthprišel kot omejitev, lahko uporabim prazen prostor okoli svojega oblikovanja in ga obravnavam kot orodje za postavitev.

V tem videu poskušam spremeniti Snookovo idejo in jo na koncu primerjati z mojim končnim rezultatom.

  • Snookov
  • Moja (za estetiko očisti drobni post-video)