Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 21
  1. #1
    KtmnjjpfjsFvzG ist offline Foren As
    registriert
    05-12-2012
    Beiträge
    77

    Question CSS: filter nur für einen bestimmten Bereich

    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.

  2. #2
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

    AW: CSS: filter nur für einen bestimmten Bereich

    Also so wie ich dich verstanden habe suchst Du nach Gradient... oder?

    Ultimate CSS Gradient Generator - ColorZilla.com <--- sollte dir weiterhelfen ^^

  3. #3
    KtmnjjpfjsFvzG ist offline Foren As
    registriert
    05-12-2012
    Beiträge
    77

    AW: CSS: filter nur für einen bestimmten Bereich

    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.

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: CSS: filter nur für einen bestimmten Bereich

    Zitat Zitat von KtmnjjpfjsFvzG Beitrag anzeigen
    Nein, ich suche nicht nach einem Gradient, sondern nach einer möglichkeit, einen CSS-Filter nur auf einen Teil des Elements anzuwenden.
    das wird es nicht geben.

  5. #5
    KtmnjjpfjsFvzG ist offline Foren As
    registriert
    05-12-2012
    Beiträge
    77

    AW: CSS: filter nur für einen bestimmten Bereich

    Schade...

  6. #6
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

    AW: CSS: filter nur für einen bestimmten Bereich

    filter: grayscale(1); ist ein IE-Parameter. Der IE ist das wohl schlechteste Medium um CSS zu testen

    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-Code:
    <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!

  7. #7
    KtmnjjpfjsFvzG ist offline Foren As
    registriert
    05-12-2012
    Beiträge
    77

    AW: CSS: filter nur für einen bestimmten Bereich

    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

  8. #8
    dertypdernixkan ist offline Tripel-As
    registriert
    31-05-2013
    Beiträge
    194

    Wink AW: CSS: filter nur für einen bestimmten Bereich

    Zitat Zitat von KtmnjjpfjsFvzG Beitrag anzeigen
    Das geht eben nur mit Bildern, bei <div>s mit verschachtelten Inhalt klappt das nicht mehr
    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-Code:
    <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

  9. #9
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.714

    AW: CSS: filter nur für einen bestimmten Bereich

    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...

  10. #10
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: CSS: filter nur für einen bestimmten Bereich

    Zitat Zitat von kkapsner Beitrag anzeigen
    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...
    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.

  11. #11
    KtmnjjpfjsFvzG ist offline Foren As
    registriert
    05-12-2012
    Beiträge
    77

    AW: CSS: filter nur für einen bestimmten Bereich

    @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.

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.714

    AW: CSS: filter nur für einen bestimmten Bereich

    @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?

  13. #13
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: CSS: filter nur für einen bestimmten Bereich

    Zitat Zitat von kkapsner Beitrag anzeigen
    entweder man macht das mit clip
    wie?

    Zitat Zitat von kkapsner Beitrag anzeigen
    oder einem Wrapper-DIV.
    was willst du denn wrappen?

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ich glaube nicht, dass sich das, was du machen willst, über HTML/CSS/JS sauber machen lässt.
    hä? was denn nu?

    du hast das

    Code:
    
        +---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?
    

  14. #14
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.714

    AW: CSS: filter nur für einen bestimmten Bereich

    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.

  15. #15
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.667

    AW: CSS: filter nur für einen bestimmten Bereich

    Zitat Zitat von kkapsner Beitrag anzeigen
    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".
    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.

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ich finde die Designidee auch nicht so wahnsinnig toll...
    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.

    Zitat Zitat von kkapsner Beitrag anzeigen
    Ich merke gerade, dass man das Ganze auch mit "nur" drei mal eingebettetem Inhalt lösen kann - zwei Quadranten lassen sich zusammenfassen.
    das holt die kuh jetzt auch nicht wieder vom Eis

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Bestimmten Bereich mitscrollende div
    Von memes im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 10-05-2012, 00:10
  2. Mausklick in bestimmten Bereich simulieren?
    Von Bahula2 im Forum JavaScript
    Antworten: 17
    Letzter Beitrag: 04-10-2011, 18:19
  3. Antworten: 10
    Letzter Beitrag: 13-10-2009, 14:15
  4. sound für bestimmten bereich
    Von SuicideCommando im Forum Allgemeines
    Antworten: 1
    Letzter Beitrag: 06-09-2002, 13:36
  5. Antworten: 3
    Letzter Beitrag: 18-11-2001, 14:18

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •