Hoe maak ik een horizontale banner met ‘omgeslagen’ uiteinden?

Status
Niet open voor verdere reacties.
Hoi Laurens,
Dan kijk je hoe ze het bij Het Scholfje gedaan hebben. :D

Je gaat naar de broncode en ziet:
HTML: 
<div class="page">
    <a class="bookmark" id="het-scholfje" href="/#het-sc[B][/B]holfje">Het Scholfje</a>
    <div class="banner">
        <h1>Het Scholfje</h1>
        <h2>Huisje aan de bosrand</h2>
    </div>
    <div class="banner-triangle l"></div>
    <div class="banner-triangle r"></div>
    <div class="content">
        <img class="center" src="/photos/het-scholfje-cropped.jpg" alt="" />
        <p>Huisje huren op Terschelling? Het Scholfje (...)</p>
        <p>Terschelling is mooi in alle seizoenen. Het eiland (...)</p>
        <p>We wensen je een fijne tijd (...)</p>
    </div>
</div>
Die "banner-triangle's" zullen het zijn: de driehoekjes links en rechts die onderaan de banners hangen.
In het stylesheet zie je welke eigenschappen ze hebben:
Code: 
.banner-triangle {
  width: 0;
  height: 0;
  border: 0 solid transparent;
  border-width: 12px 0 0 15px;
  margin: 0 -35px;
  float: left;
}
.banner-triangle.r {
  border-width: 12px 15px 0 0;
  float: right;
}
En daar zit het geheim van de smid. De driehoekjes zijn gemaakt door een <div> (een rechthoek) te maken met een hoogte en een breedte van ... nul; er zijn alleen stukjes border!
Deze slimme techniek (er hoeven geen images gebruikt te worden voor de driehoekjes) heet "css slants", en hoe het precies werkt is beschreven door Lasse Reichstein Nielsen:
Leuk om de truc weer eens te zien; je komt komt 'm niet zo vaak in het wild tegen. :)

Andere oplossing zou zijn: wel met een img werken, en dat in een <div> hangen met de hoogte van de driehoekjes.

omslagrandje.png

Met vriendelijke groet,
CSShunter
____________
PS: Omdat in Het Scholfje een serie "banners" met een verschillende kleur gebruikt worden, moeten de kleuren van de driehoekjes apart opgegeven worden; dat kan door elke "banner" een eigen id te geven en daar de kleur aan vast te maken. Maar hier is het gedaan door met css telkens te bepalen wat de volgende is:
Code: 
.page .banner-triangle { border-top-color: #6e99c1; }
.page+.page .banner-triangle { border-top-color: #74a59b; }
.page+.page+.page .banner-triangle { border-top-color: #6fa574; }
.page+.page+.page+.page .banner-triangle { border-top-color: #98ae78; }
.page+.page+.page+.page+.page .banner-triangle { border-top-color: #c5a455; }
.page+.page+.page+.page+.page+.page .banner-triangle { border-top-color: #c55757; }
.page+.page+.page+.page+.page+.page+.page .banner-triangle { border-top-color: #8b80b9; }
.page+.page+.page+.page+.page+.page+.page+.page .banner-triangle { border-top-color: #86628a; }
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan