Navigation & Button Schräg ( / / ) per CSS Classe [Referenzbild liegt bei]

Shopware 5 Programmierung
1

Liebes Forum,

ich kenne mich mit der Programmierung nicht so aus, habe was gelesen was von Transformation o.ä

Ich möchte gerne meine Navigation und die Tabs z.b Zubehör, Produkteigenschaften auch so haben wie die Navigation bei @scharfemedia‍ (Bild Unten).

Es gibt z.b für Buttons die “CSS Klassen” (Bild II) nun die Frage:

  1. Wie bekomme ich die Navigation und die Tabs so hin wie auf dem Bild I?
  2. Wie geht solch Schräge über die CSS Klassen?

Da ich davon leider keine Ahnung habe, könnte mir jemand solch ein Code fertig machen?

Schönes wochenende euch.

950×166 16.4 KB

 

2

Evtl. so für die Li-Elemente im Menü - und den anderen Buttons etc.?
https://css-tricks.com/examples/ShapesOfCSS/#parallelogram

Edit: Eher nur ein Ansatz - habs grad on-the-fly mal mit dem Menü-Tabs gemacht - dann wird die schrift aber auf gekippt.

3

Hallo @sonic‍, 

Danke für den Tipp aber leider kann ich damit nichts anfangen, da ich nicht weiß Was und Wo ich das einsetzen muss.

Das Parallelogram wäre wie dieses hier perfekt, nur wo? bzw. was ist eine CSS Klasse?

#parallelogram {
	width: 150px;
	height: 100px;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);
	background: red;
}

 

4

Hallo,

bei deiner, im Beispiel erwähnten Seite, wird es ja nur “quick and dirty” über ein Bild und entsprechende span - Elemente gelöst. Das so zu Shopware zu “übertragen”, wäre nicht wirklich sehr hübsch.

Du könntest zum Beispiel eine individuelle CSS-Klasse dem Element, wo der Effekt angewendet werden soll, vergeben und dieser :before - und :after - Elemente zuweisen und für dessen Inhalt das Parallelogram oder ein Bild nutzen, um den “Schrägstrich” - Effekt umzusetzen. 

Grüße

Sebastian

5

Hallo @sschreier‍,

vielen Dank und wie mach ich das genau ?  Undecided

 

6

Hallo,

also eine exakte Bauanleitung wird dir hier keiner kostenlos bereitstellen, du verdienst ja schließlich mit deinem Shop (und dem Effekt) später auch mal Geld.

Aber genug Ansätze sind doch hier schon erwähnt worden, wie man es umsetzen kann. Hilfe zur Selbsthilfe sozusagen.

Es gibt von Shopware ja auch sehr gut Anleitungen, wie man Anpassungen am eigenen Shop selbst vornehmen kann, siehe: Frontend Guides .

Grüße

Sebastian

7

Dies stimmt nicht, ich verdiene mit meinem „Shop“ kein Geld, dies soll eine Informationsseite für Kinder Förderprogramm werden.

Aber als leihe verstehe ich kein Wort, wenn sich ein Experte mit Fachwörtern um sich wirft, ich lerne gut und schnell aber wenn man sagen kann z.b:

 

Die Datei XY Zeile XY dann den Wert so und so dann wäre es hilfreicher :confused:

8

Wenn es ne reine Informationsseite wird dann brauchst du ja eh nur das standardtheme und die blogfunktion im Prinzip.

den warenkorb und checkout kannst du ja komplett ausblenden.

 

9

@Sarah_Tier‍ Skew ist keine gute Idee, der Text würde ja mitverschoben werden. Auch der Einsatz von zusätzlichen Wrappern ist altbackend. Besser wäre ein Verlauf direkt auf das betreffende Element. z.B.

background: linear-gradient(-256deg,rgba(0,0,0,0) 4.9%, rgba(0,0,0,1) 5%, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 95.1%);

bzw. was ist eine CSS Klasse?

volkshochschule css - Google Search;