CSS „Preisschild” machen?

2 Antworten

regex9
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer, HTML, CSS
22.01.2018, 18:03

Dann hast du wohl nicht richtig geschaut.

Rechtsklick auf das Element > Element untersuchen und im Webinspektor findest du die Styles auf dem Element (div mit id=price). Ich habe diese einmal grob herauskopiert: https://jsfiddle.net/xL2qror9/. Die richtige Schriftart wird im Fiddle daher z.B. noch nicht geladen.
Willibergi
22.01.2018, 18:12

Such mal den div der Klasse ._price-wrapper. Dort ist der Preis in einem div .price enthalten:

<div class="_price-wrapper">
	<div class="price" data-cents="99">39,</div>
</div>

Dort wird mit den Pseudo-Klassen ::before und ::after gearbeitet. Alles nach dem Komma, sprich der Strich (ein CSS-transform-Objekt) und die weitere Zahl sind im CSS festgelegt. Schau Dir das ganze mal im Inspector-Modus (Strg + Shift + I) an. Darin kannst Du auch die entsprechenden Elemente anklicken und sie Dir im HTML-Code mit den geltenden CSS-Definitionen anzeigen lassen.

Das SCSS, das den Style erzeugt:

.price {
    display: inline-block;
    position: relative;
    font-family: $font-family-main-before-load;
    font-size: 4rem;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1;
    color: $gray-darkest;
    transform: scaleY(.9) skewX(-8deg);

    &::before,
    &::after {
        position: absolute;
    }

    &::before {
        content: '';
        display: block;
        right: -.25em;
        top: .55em;
        width: .375em;
        height: .15em;
        background: $gray-darkest;
        transform: skewX(-5deg);
    }

    &::after {
        content: attr(data-cents);
        top: .17em;
        right: -.75em;
        font-size: .5em;
        letter-spacing: 0;
        transform: scaleY(.9);
    }

}

Lies Dich rein und probiere es, selbst mal nachzubauen. Das wird Dir beim Verständnis am Besten helfen.

LG