• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

CSS: filter nur für einen bestimmten Bereich

K

KtmnjjpfjsFvzG

New member
Moin,

ich möchte einen css-filter nur für einen bestimmten Bereich eines divs anwenden (z.B. obere 100px).

Mit filter:grayscale(1); wird alles grau - ich möchte aber nur einen Teil grau machen!

Weiß hier jemand, wie das geht?

Danke schonmal!

mfg, K.
 
Nein, ich suche nicht nach einem Gradient, sondern nach einer möglichkeit, einen CSS-Filter nur auf einen Teil des Elements anzuwenden.

z.B. habe ich ein div, in dem sich bunter Text befindet.
Jetzt gebe ich dem div die Eigenschaft "filter: grayscale(1);". Jetzt ist der ganze Text grau.
Ich möchte aber nur die oberen 100px des divs grau einfärben.
Ich suche also nach einer Möglichkeit, den Wirkungsbereich des Filters einzugrenzen, so dass der restliche Text bunt bleibt.
 
filter: grayscale(1); ist ein IE-Parameter. Der IE ist das wohl schlechteste Medium um CSS zu testen :D

Eine weitere, und die wohl einzige Möglichkeit diesen Effekt zu erzeugen -sofern Du auf Javascript verzichten möchtest- wäre, dass Du den Div, der alles enthält mit einem positiven z-Index belegst, dann einen weiteren Div einbaust der deine farbliche Abstufung enthält welcher mit einem negativen z-Index belegt wird.

Code: 
html body {
    margin: 0;
    padding: 0;
}

#aussen {
    position: relative;
    top: 20px;
    left: 20px;
    width: 500px;
    border: 1px solid #000;
    z-index: 5000;
}

#content {
    position: relative;
    top: 0;
    z-index: -5000;
    margin-top: -55px;
}

#content p {
    margin: 5px;
    padding: 5px;
}

#inlayer {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background: #dbdbdb;
    z-index: -50000;
}

HTML: 
<html>
<body>

<div id="aussen">
<div id="inlayer"></div>

<div id="content">
<p>Nein, ich suche nicht nach einem Gradient, sondern nach einer möglichkeit, einen CSS-Filter nur auf einen Teil des
Elements anzuwenden.</p>

<p>z.B. habe ich ein div, in dem sich bunter Text befindet.
Jetzt gebe ich dem div die Eigenschaft "filter: grayscale(1);". Jetzt ist der ganze Text grau.
Ich möchte aber nur die oberen 100px des divs grau einfärben.
Ich suche also nach einer Möglichkeit, den Wirkungsbereich des Filters einzugrenzen, so dass der restliche Text bunt bleibt.
</p>
</div>
</div>
</body>
</html>

Das wäre die umständliche Methode. Gradient oder JAvascript könnten da einfacher sein!
 
filter: grayscale(1); kommt hierher: Filter Effects 1.0

Ich möchte in etwa soetwas erreichen: Edit this Fiddle - jsFiddle

Das Problem hast du ja schon angesprochen: Hier lege ich 2 Bilder übereinander, schneide sie passend zu und nutze den Filter für eins der beiden Bilder, so dass es so aussieht, als würde er nur die Hälfte filtern.

Das geht eben nur mit Bildern, bei <div>s mit verschachtelten Inhalt klappt das nicht mehr, also muss es irgendwie möglich sein, den Filter nur auf einen Bereich anzuwenden... Ich wäre auch mit einer JS-Lösung zufrieden, aber da man damit keinen Zugriff auf die Farbinformationen etc. hat, komm ich da vermutlich nicht weiter... :S
 
KtmnjjpfjsFvzG schrieb:
Das geht eben nur mit Bildern, bei <div>s mit verschachtelten Inhalt klappt das nicht mehr
Zum Vergrößern anklicken....

Aber ich sehe bei deinem Beispiel keine verschachtelten Div's ^^

Aber ich weiß was Du meinst...

Ist die Position des abgegrauten Div immer unterschiedlich oder fest? Vielleicht bringt dich das Schlagwort "opacity" auf eine Idee? Weil: in deinem Beispiel hast Du grayscale nur für webkit-Browser definiert. Weiß grade nicht ob die anderen Browser (-o-, -moz- -ie-) diese Methode mit ihrem Präfix kennen. Aber ich habe es nochmal gemacht, ohne Bilder, nur mit Farben. Vielleicht hilft dir das weiter?

CSS
Code: 
#img1 {
    position:relative;
    left: 0;
    top: 0;
    width: 400px;
    height: 250px;
    background: #FFFFFF;
    border: 1px solid #000;
    background:#fff;
}

#img1 p {
    position: absolute;
    top: 0;
    margin: 0px 5px;
}

#img2 {
    position:relative;
    left: 0px;
    top: 0px;
    width:400px;
    height:60px;
    border: 1px solid #000;
    background: gray;
    opacity: 0.2;
}

HTML
HTML: 
<div id="img1">
<div id="img2"></div>
<p>irgendein inhalt</p>

</div>

Bedenke: alles was im Div "img2" liegt und nicht "durchlässig" werden soll musst du hinterher gesondert ansprechen und mit opacity: 1.0; formatieren. Außerdem bringt das nur wirklich Erfolg wenn Du eine Hintergrundgrafik im img1-Div oder dahinter hast. Sonst sieht man nix ;)

So sähe es aus wenn...
soundnichtandersman.JPG
 
NB: warum machst du den Text überhaupt grau, wenn du ihn doch lieber SW hättest? Bei einem Bild hätte ich das irgendwie halbwegs noch verstanden, aber bei Text...?
Aber auch bei einem <div> könnte man das gleiche machen, wie bei den <img>s... man muss nur mit den Dimensionen der <div>s aufpassen und overflow: hidden verwenden...
 
kkapsner schrieb:
Aber auch bei einem <div> könnte man das gleiche machen, wie bei den <img>s... man muss nur mit den Dimensionen der <div>s aufpassen und overflow: hidden verwenden...
Zum Vergrößern anklicken....
Glaube ich nicht, soweit ich das verstanden habe, hat er ein div mit beliebigem inhalt, also ein paar bilder, text, weitere divs mit irgendwas anderem. wenn man davon eine ecke (da ist ein stück text mit einem stück bild und einem stück eines anderen divs enthalten) sw haben will wird das nichts.
 
@dertypdernixkan: Das bringt mir leider nicht wirklich viel, ich möchte ja kein halbtransparentes Grau über dem Inhalt haben, sondern diesen seöbst in Graustufen anzeigen... Außerdem ist es mir wichtig, dass das ganze nicht nur mit grayscale(), sondern auch mit anderen Filtern, z.B. sepia(). Ja, das ganze wird bis jetzt nur von Webkit-Browsern unterstützt, aber das wird sich ja noch ändern, ich möchte das ja noch nicht jetzt veröffentlichen.

@kkapsner & @hesst: Genau, das <div> kann beliebigen Inhalt haben. Rein theoretisch wäre es mit clip:rect() und einigen Spielereien sicherlich möglich, das von den Bildern auch hier anzuwenden, aber dazu müsste ich per JS immer eine exakte Kopie des DOM-Elements mit sämtlichen Child-Nodes erstellen. Das wird bei interaktivem Inhalt aber zum Problem, wenn z.B. ein Link halb im einen und halb im anderen div angezeigt wird und beim hovern unterstrichen werden soll, ist immer nur die passende Hälfte unterstrichen etc.
 
@hesst: wie KtmnjjpfjsFvzG schon geschrieben hat, entweder man macht das mit clip oder einem Wrapper-DIV. Welche Hürde siehst du da?

@KtmnjjpfjsFvzG: Ich glaube nicht, dass sich das, was du machen willst, über HTML/CSS/JS sauber machen lässt. Warum willst du das denn eigentlich machen?
 
kkapsner schrieb:
entweder man macht das mit clip
Zum Vergrößern anklicken....
wie?

kkapsner schrieb:
oder einem Wrapper-DIV.
Zum Vergrößern anklicken....
was willst du denn wrappen?

kkapsner schrieb:
Ich glaube nicht, dass sich das, was du machen willst, über HTML/CSS/JS sauber machen lässt.
Zum Vergrößern anklicken....
hä? was denn nu?

du hast das

Code: 
[FONT=Courier New]
    +---div---------------------------+
    |                                 |
    |     TEXT TEXT TEXT TEXT TEXT    |
    |     TEXT +--Bild------+ +-div-+ |
    |     TEXT |            | | TEXT| |
    |     TEXT |            | | TEXT| |
    |     TEXT |            | | TEXT| |
    |     TEXT |            | | TEXT| |
    |     TEXT |            | | TEXT| |
    |     TEXT |            | | TEXT| |
    |          +------------+ +-----+ |
    |     TEXT TEXT TEXT TEXT TEXT    |
    |     TEXT TEXT TEXT TEXT TEXT    |
    |     TEXT TEXT TEXT TEXT TEXT    |
    +---div---------------------------+
    
    und willst den oberen rechten ausschnitt sw haben oder den text dort unterstrichen
    
    ------------+
                |
    EXT TEXT    |
    --+ +-div-+ |
      | | TEXT| |
      | | TEXT| |
      | | TEXT| |
      | | TEXT| |
      
    wie willst du das machen?
[/FONT]
 
Um nur eine Ecke anders zu gestalten, muss man den Inhalt vier mal einbetten. Einmal so, wie es in der Ecke aussehen soll und drei mal "normal".
Jetzt wrappe ich diese vier <div>s in weitere <div>s, die die Größe meiner vier Quadranten haben und overflow: hidden. Die inneren <div>s positioniere ich in den Wrappern so, dass der gewünschte Abschnitt sichtbar ist und zu guter Letzt positioniere ich die Wrapper so, dass es aussieht, es wäre ein großes Ganzes... nicht elegant oder benutzerfreundlich oder wartungsfreundlich oder oder oder... aber es erfüllt die Designvorgabe.

Per clip muss ich den Inhalt auch vier mal einbinden, aber ohne Wrapper - einfach die <div>s absolut an der gleichen Stelle mit gleicher Größe positionieren und mit clip immer den richtigen Quadrant anzeigen.

Aber da der Inhalt sich dynamisch auch noch ändern soll (mit hover und und und) wird das Ganze mit HTML/CSS unmöglich und mit JS extrem auswändig: man müsste alle Ereignisse in allen Quadranten synchronisieren und die Pseudoselektoren von CSS "simulieren". Deswegen bin ich der Meinung, dass man das nicht sauber lösen kann.

Ich finde die Designidee auch nicht so wahnsinnig toll... vielleicht würde mich ein Beispielbild, wie das mal aussehen soll, überzeugen.

PS: Ich merke gerade, dass man das Ganze auch mit "nur" drei mal eingebettetem Inhalt lösen kann - zwei Quadranten lassen sich zusammenfassen.
 
kkapsner schrieb:
Um nur eine Ecke anders zu gestalten, muss man den Inhalt vier mal einbetten. Einmal so, wie es in der Ecke aussehen soll und drei mal "normal".
Zum Vergrößern anklicken....
und das soll aber allgemeingültig "funzen", also ein belibiger bereich eines zur laufzeit mit einer entsprechenden klasse versehenen elementes. und wenn du dann noch einen halben buchstaben erwischst, ist es mit reinem div-geschiebe auch aus.
beim clipping hättest du den inhalt je nach ausschnitt n-fach, je nachdem, ob dich seo interessiert, ist duplicate content auch wieder zu beachten.

kkapsner schrieb:
Ich finde die Designidee auch nicht so wahnsinnig toll...
Zum Vergrößern anklicken....
keine ahnung wozu das gut sein soll, dass es technisch nicht mit geht, ist meiner meinung nach ein manko. genau wie es meiner meinung nach einfach eine möglichkeit geben sollte zu definieren, dass der inhalt des elementes als n mal m matrix dargestellt wird.

kkapsner schrieb:
Ich merke gerade, dass man das Ganze auch mit "nur" drei mal eingebettetem Inhalt lösen kann - zwei Quadranten lassen sich zusammenfassen.
Zum Vergrößern anklicken....
das holt die kuh jetzt auch nicht wieder vom Eis
 
Auch mit nur 2, wenn du einfach das original-div im Hintergrund lässt, das brauchst du garnicht per clip zu verändern, die passende Area wird ja durch das Vordergrund-div verdeckt.

Ist aber trotzdem, wie du schon gesagt hast, alles so aufwändig, dass es nicht sauber geht geschweige denn sich lohnt. Schade ^^

//Edit: SEO-Mäßig könnte man ja die Kopie erst clientseitig per JS anfertigen. Trotzdem ist das einfach suboptimal^^
 
hesst schrieb:
und das soll aber allgemeingültig "funzen", also ein belibiger bereich eines zur laufzeit mit einer entsprechenden klasse versehenen elementes. und wenn du dann noch einen halben buchstaben erwischst, ist es mit reinem div-geschiebe auch aus.
Zum Vergrößern anklicken....
Wenn das alles sauber ausgerechnen wird, sind auch "halbe Buchstaben" kein Problem... die eine Hälfte wird im eine <div> angezeigt und die andere im anderen - der Rest der "beiden" Buchstaben wird durch das overflow: hidden nicht angezeigt.
hesst schrieb:
beim clipping hättest du den inhalt je nach ausschnitt n-fach, je nachdem, ob dich seo interessiert, ist duplicate content auch wieder zu beachten.
Zum Vergrößern anklicken....
Ich weiß - die Lösung ist nicht schön... aber rein theoretisch funktioniert's...

hesst schrieb:
keine ahnung wozu das gut sein soll, dass es technisch nicht mit geht, ist meiner meinung nach ein manko. genau wie es meiner meinung nach einfach eine möglichkeit geben sollte zu definieren, dass der inhalt des elementes als n mal m matrix dargestellt wird.
Zum Vergrößern anklicken....
Eine Matrix würde ich ja über eine <table> realisieren - das ist für mich tabellarischer Inhalt. Aber du hast Recht, dass CSS noch nicht so wirklich komplett ausgereift ist.

KtmnjjpfjsFvzG schrieb:
Auch mit nur 2, wenn du einfach das original-div im Hintergrund lässt, das brauchst du garnicht per clip zu verändern, die passende Area wird ja durch das Vordergrund-div verdeckt.
Zum Vergrößern anklicken....
Dann muss dein <div> aber einen nichttransparenten Hintergrund haben - ich hatte irgendwie einen transparenten Hintergrund angenommen...
 
kkapsner schrieb:
Wenn das alles sauber ausgerechnen wird, sind auch "halbe Buchstaben" kein Problem... die eine Hälfte wird im eine <div> angezeigt und die andere im anderen - der Rest der "beiden" Buchstaben wird durch das overflow: hidden nicht angezeigt.
Zum Vergrößern anklicken....
dann hast du aber gleich wieder eine weitere einschränkung overflow auf hidden zu setzen, oder du musst das in ein zusätzliches div wrappen, wie du das machen wolltest, ok.

kkapsner schrieb:
Ich weiß - die Lösung ist nicht schön... aber rein theoretisch funktioniert's...
Zum Vergrößern anklicken....
statisch, für ein bestimmtes div mit bekanntem inhalt, ja

kkapsner schrieb:
Eine Matrix würde ich ja über eine <table> realisieren - das ist für mich tabellarischer Inhalt.
Zum Vergrößern anklicken....
was ist denn tabellarischer Inhalt? wenn etwas in 2 spalten dargestellt werden soll, ist das für mich auch tabellarischer Inhalt. nach gängiger meinung nicht. da legt html die struktur fest, css bestimmt die darstellung. das wäre ja auch ok, wenn es denn so wäre, aber gerade so ist es meiner meinung nach nicht, da man um etwas mit css darstellen zu können meist auch immer an der struktur ändern muss.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben