Forum - Farbfilter über Gifs oder Bilder legen

Hallöchen :)

Ich bin am rumtüfteln und Internet durchsuchen und werde bald Wahnsinnig.

Habe auch gute Seiten gefunden. Mir geht es zum einen um die mit dem Weichzeichnen, Blur und Co. sowie möchte ich auch normale Farben nutzen. So das die Gif im Hintergrund natürlich dennoch alles zeigt, was man eben sehen möchte.

Die im Code denke ich mal dass es auch die sind, die ich normal in die CSS eintrage richtig?

Wollte dann versuchen dazu einen HTML Code zu schreiben, den ich dann in der Iconbar als [Filter]...[/Filter] ersetzen kann, aber das was ich versucht habe hat nicht geklappt.
Dazu habe ich leider noch keine Seite gefunden, die das mal gut erklärt, wie man das was man haben möchte in CSS oder HTML umsetzen kann.

Habe dann

<img style="blur:2px;filter:2px;" src=".....">
 

versucht, aber da zeigt er mir nicht mal mehr die Gif an.

Ich weiß leider nicht worauf ich achten muss um das so hinzubekommen. Kann mir da jemand vielleicht weiter helfen?

Vielen Dank schon mal im Voraus

LG Tanja

PS: Die Seiten die ich gefunden hatte:
CSS Filter und Filter Effekte

.blur {
  filter: blur(4px);
}
 
.brightness {
  filter: brightness(0.30);
}
 
.contrast {
  filter: contrast(180%);
}
 
.grayscale {
  filter: grayscale(100%);
}
 
.huerotate {
  filter: hue-rotate(180deg);
}
 
.invert {
  filter: invert(100%);
}
 
.opacity {
  filter: opacity(50%);
}
 
.saturate {
  filter: saturate(7);
}
 
.sepia {
  filter: sepia(100%);
}
 
.shadow {
  filter: drop-shadow(8px 8px 10px green);
}
 

Hallo Tanja,

ich dachte ich helfe dir mal kurz, denn am besten du löst es rein über das CSS und gibst deinem Bildcode eine Class-Bezeichnung.
Sprich im CSS z. B.:

.fotofilter {
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
}
 

und anschließend Ersetze:

[fotofilter] ... [/fotofilter]
 

Mit:

<img class="fotofilter" src="...">
 

Ansonsten müsste auch das hier funktionieren.

Ersetze:

[fotofilter] ... [/fotofilter]
 

Mit:

<span style="filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);"><img src="..."></span>
 

Die Reihenfolge hier vielleicht noch auf 0 setzen.

Ich hoffe ich hab es einigermaßen klar erklärt. Dazu kannst du im CSS auch jeden Filter einsetzen, den du möchtest. In meinem Fall eben das Bild in Grau anzeigen lassen.

Ganz liebe Grüße

@bienchen

Vielen Lieben Dank für deine schnelle Antwort und Hilfe natürlich.

Ich hab jetzt eine Weile rum probiert und ich weiß nicht wieso das nicht funktioniert. :(

Im CSS habe ich damit ich das schneller finde /*Farbfilter*/ geschrieben und dann den Fotofilter von dir mit grayscale gesetzt und gespeichert. Anschließend wie gehabt [fotofilter]... und beide Varianten ausprobiert.

Die Gif habe ich mit [img] gesetzt als Original und dann einmal [img] mit Farbfilter und dann einmal mit [Rahmen] und die Gif und beides zeigt er mir nicht an.

Hier mal beide Bilder.



Ich bin ja sonst nicht doof was das angeht, aber ich weiß nicht wieso das so ist.
Habe sogar Reihenfolge auf 0 gesetzt und auch mit 100 Probiert.

Irgendwie sehe ich nicht was ich daran falsch gemacht habe. bei der "Überschrift im CSS" habe ich /*Farbfilter*/ auch wieder weggelassen und das dann probiert, aber die Bilder zeigt er dennoch nicht an.

Und ich weiß einfach nicht wieso

Vielleicht magst du mir da noch mal kurz helfen?

Hallo Tanja,

nicht verzagen.

Wenn du den Code so verwendest, ist das doppelt gemoppelt., Du setzt nur den Bildlink zwischen deinen Fotofilter-Code.

Wenn du den -Code verwenden möchtest, sieht der Code in der Iconbar so aus:

<span style="filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);">...</span>
 

Vielleicht versuchst du es mal so und sollte das immernoch nicht klappen, schauen wir weiter.

@Blackbox84

So, vielen Dank noch Mal @bienchen

Jetzt habe ich das mit deinem unteren Code noch mal versucht und eingefügt. Jetzt klappt das. Allerdings habe ich wenn ich nur [img] vorne weg setze ein dunkleres Bild als mit [Rahmen]

Mitglieder haben sich das gewünscht mit dem Filter für ihre Profile und Signaturen und da nutzen sie ja zumindest die Rahmen meistens mit.

Hat das einen bestimmten Grund?



Ansonsten freue ich mich, dass es geklappt hat, dann kann ich mit den anderen weiter machen und da ein bisschen rum basteln.

Frage vor ab dazu. Kann ich das mit den Farben dann genauso machen?

.fotofilter {
filter: grayscale(100%); 
-webkit-filter: grayscale(100%); 
-moz-filter: grayscale(100%);
}
 

daraus dann:

.fotofilter1 {
filter: weiß(100%); 
-webkit-filter: weiß(100%); 
-moz-filter: weiß(100%);
}
 

machen und dann die 100% Angaben anpassen?

Ich frag lieber doch vorher nach, nicht dass ich das Testforum kaputt mache

Auf jeden Fall vielen lieben Dank für die Hilfe, das hat mir sehr geholfen. Freu mich wahnsinnig darüber

PS: die "> am Bildende sind weg. hatte vergessen das mit </span> zu tauschen

Deswegen müsstest du den Code in der Iconbar abändern. Ich weiß nicht welchen du nun genommen hast :D

Vermutlich den:

<img class="fotofilter" src="...">
 

Benutze den hier:

<span class="fotofilter">...</span>
 

Dann müsstest du eigentlich einen Rahmen einsetzen können.

Grundsätzlich kannst du alles mögliche mit Filtern machen. Hier ist auch eine Seite auf welcher ein paar sind und an denen man auch noch etwas rumhantieren kann.

Foto Filter

Wenn du mehrere Filter einbauen möchtest, musst du lediglich die Class ändern. Sprich:

.fotofilter {
...
}
 

.fotofilter2 {
...
}
 

usw. und das auch in deinem HTML so einbinden.

Ich hoffe das hilft dir und ich hab mich einigermaßen verständlich ausgedrückt.

@Blackbox84

Also als es ging habe ich ich deinen letzten genommen und den statt die anderen beiden.

<span style="filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);">...</span>
 
 
 

Als ich den eingesetzt habe in die Iconbar hatte das auch funktioniert. Mit den anderen beiden davor ging es nicht. Da hatte mir das ja mit dem kleinen Kästchen angezeigt und dem "> dahinter.

Und bei dem von deinem letzten Post davor, da ist der Filter unterschiedlich ob man nun nur IMG benutzt oder Rahmen. schon witzig ^^

Aber ob nun heller oder dunkler, das können die ja da selbst entscheiden. Wenn ich die Filter fertig habe, mach ich eh eine Vorschau dazu und schreibe das einfach mit der [img] benutzung dazu, dass es dann dunkler wird, als wenn man mit Rahmen arbeitet.

Und die Seite die du verlinkt hast, die kenne ich gar nicht, aber da schau ich dann gleich rein, wenn ich die normalen Filter erstellt habe zwecks Farben. Und wenn ich was habe frage ich hier einfach wieder.

Noch mal 10000 Dank für deine Hilfe. Das macht mich jetzt Happy und kann den Wunsch erfüllen.

Alles super hast du gut erklärt. Dankeschön
@bienchen

Lieben Gruß
Tanja