Akkordeon mit CSS anpassen

[the_dot]

Hallo liebe Community,

ich wollte gern auf meiner Website ähnlich wie als Teaser, nur mit einem Verlauf von halb-transparenten auf vollfarbigen Hintergrund, als Voransicht einfügen.

Heisst wenn der User zum Bsp. dann auf das "+" klickt, würde der Artikel voll angezeigt werden.

Frage: Gibt es dazu ein Plugin? Kann ich das im CSS formatieren? oder gibt es andere Möglichkeiten.

Dankeschön

[folkfreund]

Nicht ganz verstanden... Soll das Akkordion gar nicht zuklappen sondern der Inhalt verdeckt werden?
Den Hintergrund eines elements kannst du per CSS mit einem Gradienten füllen - Hilfe gibt's z.B. hier: https://www.colorzilla.com/gradient-editor/

In deinem Fall muss aber - wenn ich das richtig verstanden habe - ein Element vor dem eigentlichen Inhalt liegen, dessen Hintergrund den Verlauf bekommt.

Zeig doch bitte mal ein Beispiel

[the_dot]

Dank dir für deine schnelle Antwort. Das Bild gibt ja nach unten einen Verlauf, der den Text unkenntlich macht. Wenn ich jetzt auf weiterlesen klicken würde (respektive "+"), sollte das dann einfach wie im Akkordeon aufklappen.

screen.jpg

[folkfreund]

Ich kann noch nicht erkennen wo da das Akkordion ist.
Poste mal einen Ausschnitt aus deinem Seitenquelltext, oder noch besser einen Link zu deiner Seite.

[the_dot]

Es muss nicht zwangsläufig ein Akkordeon Menü sein. Wahrscheinlich hab ich das nur aus meiner Sicht falsch dargestellt.

Im Grunde genommen könnte man es sicher auch als Teaser beschreiben, der durch den transparenten Verlauf nach unten ausgegraut wird.

Vielleicht heisst das auch ganz anders was ich gern hätte. Mir persönlich hätte es am meisten Sinn gemacht das Akkordeon via CSS so zu gestalten wie ich es gern hätte.

Aber ich glaube das wird nicht funktionieren und eventuell lässt es sich aber auch ganz anders lösen.

[Kahmoon]

Ich kann noch nicht erkennen wo da das Akkordion ist.

Der Bereich ab dem der Text transparent wird. Aber ja..das Bild ist nicht so günstig . Er möchte dass das Akkordeon oben hin leicht transparent ist wenn zugeklappt. Contao Core ist ja nur ganz oder gar nicht sichtbar.

[the_dot]

Der Bereich ab dem der Text transparent wird. Aber ja..das Bild ist nicht so günstig

Hey Frank dank dir für deine Unterstützung und ja, genau so sollte es sein.

Wobei wie schon oben beschrieben, ist das Akkordeon zwar von der Funktion das richtige, aber glaube nicht dafür gedacht so wie ich es gern möchte. Bzw. wird es sich nur anhand von CSS nicht so hin basteln lassen.

[Googlebug]

Kann ich das im CSS formatieren?

Ich denke ja. Man könnte mit position:absolute eine div mit transparentem Verlauf darüber legen und bei "klick" auf height:0 oder ähnlichem animieren, womit der Bericht frei gelegt wird.

[the_dot]

Ich denke ja. Man könnte mit position:absolute eine div mit transparentem Verlauf darüber legen und bei "klick" auf height:0 oder ähnlichem animieren, womit der Bericht frei gelegt wird.

Heisst dann aber schlussfolgernd für mich im muss ein neues Template für das Akkorden erstellen, mit den von dir beschriebenen Attributen und dann sollte das funktionieren.

Ich würde euch dann meine Erfahrungsberichte diesbzgl. präsentieren (wenns dann geht) !!!

Danke erstmal an alle für die Hilfe

[Googlebug]

Heisst dann aber schlussfolgernd für mich im muss ein neues Template für das Akkorden erstellen, mit den von dir beschriebenen Attributen und dann sollte das funktionieren.

Ich würde euch dann meine Erfahrungsberichte diesbzgl. präsentieren (wenns dann geht) !!!

Danke erstmal an alle für die Hilfe

Kommt immer auf das an was man erreichen will und was man als Grundlage hat. Daher kann ich das so pauschal nicht beantworten. Mit einem Link und einer Beschreibung wo was hin soll könnte man mehr dazu sagen.