# 188: Päällekkäisen otsikkokuvion tutkiminen - CSS-temppuja

Anonim

Snook julkaisi artikkelin "Päällekkäinen otsikko CSS-ruudukolla", jossa hän tarkastelee otsikkomallia, joka mielestäni ylittää trendit ja on ollut suosittu ikuisesti. Ajatuksena on, että otsikko on ylimitoitettu ja pääsisältöalue hiipii siihen ja menee päällekkäin otsikon taustan kanssa. Siinä on vain jotain mukavaa ja lohduttavaa.

Mieleni menee samaan paikkaan, jota Snook tekee:

Historiallisesti olen tehnyt tämän negatiivisilla marginaaleilla. Otsikossa on korkeus, joka lisää joukon pehmusteita pohjaan ja sitten runko saa margin-top: -50pxtai mitä tahansa muotoilu vaatii.

Mutta sitten hän päättää tehdä sen CSS-verkon kanssa! Mielenkiintoista. Miksi? No, siihen me pääsemme. Ruudukko voi vain tuntea itsensä tukevammaksi. Ruudukko voi olla myös joustavampi. Esimerkiksi max-heightja automarginaalit mittava keskitys, mutta mitä jos haluat epätasainen kourut reunoilla? Se olisi vaikeaa siellä ja helppoa Gridin kanssa. Ethan Marcotte kirjoitti:

Sen sijaan, että yksinkertaisesti max-widtholisin rajoituksena, voin käyttää tyhjää tilaa suunnitteluni ympärillä ja käsitellä sitä asettelutyökaluna.

Yritän kääntää Snookin ajatuksen tässä videossa ja verrata sitä lopulta lopputulokseeni.

  • Snook
  • Kaivos (siivoin tahran jälkeisen videon estetiikkaa varten)