Škrtnutí textu pomocí značky s

Tato značka slouží pro škrtání obsahu. Používá se stejně jako značky <h1>, <span>, <div>, což znamená, že je  párová. Musí mít začátek <s> a konec </s>. Zdrojový kód:

<s>Toto je přeškrtnutý text pomocí značky  &lt;s&gt; v CSS.</s>

Pro správné vypsání jsem pochopitelně musel výpis fráze „<s>“ zaentinovat (aby se podruhé neprovedl, nýbrž vypsal.

Živá ukázka

Zdrojový kód

Proč používat značku <s> a ne značku <del>?

Jak jste si jistě všimli, na předchozí ukázce je pouze základní zápis značky <s>. Ano, samozřejmě uznávám, že existuje i značka <del>, která je také párová. Značka <del> byla vyvinuta předevšim pro nahrazování již neplatného textu. Chci tím říci, že značkou <del> škrtáme již neplatný obsah, informaci. Nyní se ale budeme věnovat především značce <s>.

<del>Neplatné sdělení</del>. <p>Platné sdělení</p>

Živá ukázka

Stylování značky <s>

Značka <s> jde pochopitelně velmi dobře stylovat pomocí (většinou) externího CSS.

→ Šikmé přeškrtnutí pomocí CSS

Ano, i to je možné. Tuto variantu asi často vídáte na různých nákupních serverech. Přeškrtnutí už ale nebude tak jednoduhé (= podpora ve starších prohlížečích). I tak se dá do CSS zapsat:

s {
    position: relative;
    text-decoration: none;
}
 
s:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    border-top: 1px solid #000;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);

}
A HTML tedy bude vypadat následovně:

<p><s>Neplatné sdělení</s></p>
<p>Platné sdělení</p>

Živá ukázka

Zdrojový kód

CSS jsme vlastně druhým zápisem s before deklarovali „nasměrování“ přeškrtnutí na text, a pomocí prvního zápisu, aby se text neotáčel spolu s přeškrtnutím.

→ Cenové přeškrtnutí (jako u e-shopu)

Přeškrtnutí starých cen a nahrazení novými je velmi lehké. Pokud bychom chtěli mít starou cenu červeně přeškrtnutou a novou cenu tučně zelenou, stačí si pohrát barvami: 

HTML: 

<p>Dříve: <s>250,- Kč s DPH</s></p>
<p>Nyní:  <span>180,- Kč s DPH</span></p>

CSS:

s {
    position: relative;
    text-decoration: none;
    background
}
 
s:before {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    top: 50%;
    border-top: 2px solid red;
    -webkit-transform:rotate(-5deg);
    -moz-transform:rotate(-5deg);
    -ms-transform:rotate(-5deg);
    -o-transform:rotate(-5deg);
    transform:rotate(-5deg);
}
 
span {
    color: green;
    font-weight: bold;
}

Živá ukázka

Zdrojový kód

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.