Dotaz: Stylování SPANu/H1 v html / CSS

[Johny z Podoli]

Potřebuji vytvořit <span> nebo <h1> který bude vypadat jako na screenshotu "výpis dostupných turnusů". Bohužel se mi to stále nedaří. OBRÁZEK

Chtěl bych nějaké jednoduché řešení, tedy né tisíc vnořených spanů a podobně. Napadlo mě z obrázku vyříznout levé a pravé zkosení, pak H1 nastavit výšku a přes pseudotřídu before a after vložit zkosení, pak nastavit jen barvu pozadí. Funguje to, jenže když přidám ještě "width" prvku, tak vložení přes after je někde jinde než má být a celý prvek se rozpadne.

Nemáte prosím někdo nápad jak toto přes CSS vyřešit?

---

---

Odpovědi

[Filip Jirsák]

Zeptejte se spíš v diskusním fóru na Jak psát web, tohle už je programování dost vzdálené. Na Jak psát web najdete mnohem víc lidí, kteří se tvorbou webu zabývají.

[Luboš Doležel (Doli)]

Existují v zásadě dvě možnosti, jak to udělat.

---

Obrázek na pozadí

Prostě tu křivou plochu nakreslíš tak jak ji chceš a umístíš ji jako obrázek na pozadí. CSS pak bude vypadat takto:

.křivej_nadpis {
  display: block;
  padding: 0;
  width: šířka obrázku;
  height: výška obrázku;
  background: barva top left no-repeat url(obrázek);
}

---

Vyrobit křivé okraje podobně, jako se dělají rámečky

Tady je to trošku složitější, ale umožňuje to vytvořit křivý box s proměnlivou velikostí. Podle toho, jak moc to chceš mít proměnné, budeš potřebovat přidat divy. S ohledem na vyhledávače je rozumné divy přidat pomocí javascriptu, ale není to nutné.

HTML:

<h2 class="křivej_nadpis">nadpis
  <div class="ramecek levy"></div>
  <div class="ramecek pravy"></div>
  <div class="ramecek horni"></div>
  <div class="ramecek spodni"></div>
</h2>

CSS:

.křivej_nadpis {
  display: block;
  padding: A B C D;
  position: relative;
  background: libovolné pozadí nadpisu;
}

.křivej_nadpis .ramecek {
  position: absolute;
  padding: 0px;
  margin: 0px;
  background; transparent top left;
}

.křivej_nadpis .ramecek.horni { /* žádná mezera před 3. tečkou */
  top: 0px;
  left: 0px;
  width: 100%;
  height: A;
  background-image: url(horní okraj obrázku);
  z-index: dle potřeby a obrázků;
}

.křivej_nadpis .ramecek.pravy {
  top: 0px;
  right: 0px;
  width: B;
  height: 100%;
  background-image: url(pravý okraj obrázku);
  z-index: dle potřeby a obrázků;
}

.křivej_nadpis .ramecek.spodni {
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: C;
  background-image: url(spodní okraj obrázku);
  z-index: dle potřeby a obrázků;
}

.křivej_nadpis .ramecek.levy {
  top: 0px;
  left: 0px;
  width: D;
  height: 100%;
  background-image: url(levý okraj obrázku);
  z-index: dle potřeby a obrázků;
}

V podstatě je to velmi jednoduché. Do nadpisu jsou přidané čtyři divy, které jsou prázdné a absolutně pozicované vrámci stylovaného nadpisu. Každý z těch čtyř divů překryje jednu hranu nadpisu a přilehlé rohy. Padding nadpisu se pak postará o to, aby obsah nebyl překrytý.

Jediné co, tak to potřebuje jednobarevné okolní pozadí.

---

Rámečky podruhé – vnořené divy, pozadí a padding

Podobnou technikou je použití paddingu místo absolutního pozicování. Ozdobné divy jsou vnořené a obsah (text nadpisu) je v tom nejvnitřnějším.

<h2 class="křivej_nadpis">
  <div class="ramecek levy">
    <div class="ramecek pravy">
      <div class="ramecek horni">
        <div class="ramecek spodni">
          nadpis
        </div>
      </div>
    </div>
  </div>
</h2>

V CSS je pak jen potřeba nastavit vhodný padding a obrázek na pozadí.

.křivej_nadpis {
  padding: 0px;
  background: transparent;
  position: relative; /* aby margin sousedů nekecal do umístění obsahu */
}

.křivej_nadpis .ramecek {
  display: block;
  padding: 0px;
  margin: 0px;
  background: transparent;
}

.křivej_nadpis .ramecek.horni {
  padding-top: A;
  background: transparent top center no-repeat url(horní okraj);
}

.křivej_nadpis .ramecek.pravy {
  padding-right: B;
  background: transparent center right no-repeat url(pravý okraj);
}

.křivej_nadpis .ramecek.spodni {
  padding-bottom: C;
  background: transparent bottom center no-repeat url(spodní okraj);
}

.křivej_nadpis .ramecek.levy {
  padding-left: D;
  background: transparent center left no-repeat url(levý okraj);
}

Je to bezproblémová technika a lze vykouzlit i skutečně průhledné okraje. Na druhou stranu je trošku těžší umístit jednotlivá pozadí do jednoho obrázku, aby se ušetřily HTTP requesty.

---

Všechny tři techniky fungují v IE6,7,8 a všech ostatních prohlížečích.