Webdesign: Gibt es einen CSS-Style, bei dem der Text automatisch die entgegengesetzte Farbe vom Hintergrund annimmt (z.B. bei einem farblich 2-geteilten Bilds?

Hallo,

angenommen ich habe einen Bildschirm oder Container, der sich durch ein background-gradient in zwei senkrechte Spalten aufteilt. (sagen wir mal in rot und weiß)

Wenn dann ein zentrierter Text auf der roten Fläche beginnt, soll dieser in weiß dargestellt werden und ab dort, wo er in den weißen Flächenbereich hineingeht soll er die Textfarbe in rot darstellen. Idealerweise auch innerhalb des jeweiligen Buchstabens, der gerade auf der Mitte liegt.

Ist sowas überhaupt allein mit CSS möglich?

Hab mal zur Verdeutlichung ein Beispielbild hinzugefügt.

Background-Text-Exchange - (Text, CSS, background)

4 Antworten

DarkJohnson

23.01.2017, 13:30

Ich schätze würde man eher als Bild machen, oder vielleicht mit JavaScript. Für CSS ist mir nichts dergleichen bekannt

abbrechen

25.01.2017, 20:11

blend-mode ist das Zauberwort.

http://stackoverflow.com/questions/16981763/invert-css-font-color-depending-on-background-color/25707161#25707161

DarkJohnson

03.04.2017, 18:47

@abbrechen

nice.

JutenMorgen

23.01.2017, 13:41

Ich werde dir keine fertige Lösung zeigen, da ich nachher eine Prüfung habe, aber eine Idee geben wie es funktionieren könnte. Meiner Meinung nach sollte es auf jeden Fall lösbar sein.

<div style="width: 100vH; background-color: #FFF; color: #F00;"><p>Beispiel</p></div>
<div style="width: 50vH; background-color: #F00; color: #FFF;"><p>Beispiel</p></div>

Jetzt musst du nur noch schauen, dass sich die beiden Container überlappen und der Text in der Mitte der divs angezeigt wird. "align: center" und "overflow: hidden" sollten hier weiter helfen.

Ich denke das ganze ist durchaus machbar und nicht mal so schwierig. Falls du noch Fragen hast frag gerne, aber probier vorher ein wenig mit der Idee herum. Ab heute Nacht habe ich wieder Zeit ;)

Liebe Grüße, JutenMorgen!

GanMar

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

23.01.2017, 13:15

Idealerweise auch innerhalb des jeweiligen Buchstabens, der gerade auf der Mitte liegt.

Zumindest das ist mit css nicht lösbar.

Minilexikon

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

24.01.2017, 13:25

Ich denke mal, das sollte dir weiterhelfen: http://stackoverflow.com/a/25707161

Hallo,

Ich habe mit HTML Editor eine Liste erstellt und diese dann mit CSS zentriert.

Das Problem: Irgendwie sind die Punkte für die Liste ganz links, nicht wie der Text der Liste. Vorher waren die mal zusammenhängend, aber ich weiß nicht mehr was ich anders gemacht habe.

...zur Frage

Durch Javascript erzeugten Text farbig darstellen, wie geht das?

Hallo ich würde gerne in meinen Javascript Code (per CSS) bestimmte Variablen farbig angeben, damit sie danach auch immer wieder farbig angezeigt werden.

Gespraech=Gespraech+"\n"+"Kunde: "+Antwort;

"Gespraech" und "Antwort" sind jeweils definierte Felder, in diese wird Text erzeugt. Auf diese würde ich gerne (per CSS) zugreifen und den erzeugten Text in unterschiedlichen Farben erzeugen lassen. Bsp: Rot und Grün.

Danke für eure Hilfe!

MfG.

Ghost

...zur Frage

Hallo, wie kann ich einen Button in HTML/Javascript erstellen, der die Farbe ändert?

Ich möchte einen Button erstellen, der dann die Textfarbe von einer Liste ändert. Also die Begriffe in der Liste sind zuerst rot und sollen nach dem Klick auf einen Button schwarz werden. Geht das?

Ich habe die Schriftfarben mit CSS über eine ID gemacht:

diese 3 Punkte sollen über einen Klick auf einen Button schwarz werden.

...zur Frage

CSS + Hover + WP - Wie gleichzeitig Rahmen & Text hovern?

Hallo Community :)

Ich habe einen Rahmen mit Text (ein Link)

Wenn ich mit der Maus über den Rahmen gehe kommt ein Hover-Effekt (Rahmen-Farbe verändert sich).

Wenn ich dann weiter in die Mitte des Rahmens gehe bis zum Text (ein Titel mit Verlinkung), dann verändert er erst seine Text-Farbe

Ich möchte aber, dass sobald ich den Rahmen mit der Maus berühre, dass sowohl Rahmen UND Text den Howereffekt bekommen

Habt Ihr dafür eine Lösung?

.rahmen { border: 8px solid blau; }

.text a { color: blau; padding 40px 40px 40px 40px; }

.rahmen:HOVER { border: 8px solid rot; }

.text a:HOVER { color: rot; }

...zur Frage

Wie lasse ich ein Bild in CSS einem DIV-Element überlappen?

Hallo,

ich veranstalte bald eine Reihe von Gewinnspielen anlässlich des 10-jährigen Bestehens. Über die volle Breite des Bildschirms soll am unteren Rand fixiert eine Leiste zu sehen sein, mit der man schnell per Klick zum Gewinnspiel kommt.

Links im DIV soll ein Bild von einem Luftballon zu sehen sein, der dann sozusagen über dem DIV "schwebt"; also die Styles des DIVs nicht übernimmt, sondern transparent einfach darüber liegt.

Ich habe jetzt folgenden Codepen: https://codepen.io/gooloonetwork/pen/KKvXoMO

Aber irgendwie sieht man das Bild nicht. Hat jemand einen Tipp, wie ich es hinbekomme, dass das Bild zu sehen bleibt (und vielleicht auch eine Idee, wie sich Bild und Text nicht beißen, also der Text aus dem ersten DIV nicht aus Versehen in den Hintergrund des Bilds schwappen)?

...zur Frage

text neben bild in css?

Guten Tag,

wie kann ich das in css umsetzen das ich links ein bild hab un rechts daneben text hab(wie in dem bild).

...zur Frage

CSS: Wie kann man einen Text Vertikal zentrieren?

Hier ist mein Code: JSFiddle - Code Playground

Wie kann ich hier den Text Vertikal zentrieren. Also den Text in die Mitte schieben?

...zur Frage

Textfarbe des von JavaScript ausgegebenen Textes ändern?

Hallo, ich schreibe gerade eine HTML-Seite.

Dabei benutze ich ein JS um zu bestimmten Uhrzeiten einen bestimmten Text auszugeben. Dazu benutze ich die Funktion getTime().

Wie kann ich den Text, der hierbei ausgegeben wird (also durch answer="xxx" ) verändern? Also durch CSS z.B. die Schriftfarbe und -größe ändern??

Hier mein bisheriger Code:

...zur Frage

Mit html und css durch einen button Hintergrundfarbe ändern?

Hallo,

ich mache gerade eine Website und möchte da einen Knopf, mit dem ich die Hintergrundfarbe und die Schriftfarbe der Website ändern kann. Ich habe bereits einen Button designet, weiß aber nicht, wie ich mit ihm Befehle ausführen kann.

Vielen Dank schonmal im voraus!

Hier ist der html-text für den Button:

<main>

<button class="bonbon orange">hier drücken zum ändern der Hintergrundfarbe</buton>

</main>

und hier ist der css-text für den Button:

main{

background: white

}

.bonbon{

width.: 250px;

height: 60px;

backgorund: orange;

/* old browsers */

background: linear-gradient(to bottom, white, orange);

box-shadow: inset 0px 0px 6px #fff, inset 0px -1px 6px #fff;

border: 1px solid #5ea617;

border-radius: 1em;

marign: 1em

}

.bonbon:hover{

box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.bonbon:focus {

box-shadow: rgba(0, 0, 0, 0.7) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px

}

...zur Frage

HTML gradient in nav bar?

Hallo, ich versuche vergebens eine nav bar zu bauen, welche durch hovern einen gradient freigibt, nicht hinter jedem linkblock soll ein gradient sein, sondern ein 'grosser' hinter allen zsm. Mein ansatz ist bis jetzt dies:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>G&M Barber</title>
  </head>
  <body>
   
        <ul>
            <li><a href="barber.html">Home</a></li>
            <li><a href="barber.html">News</a></li>
            <li><a href="barber.html">Contact</a></li>
            <li><a href="barber.html">About</a></li>
            
        </ul> 
    
</body>
</html>

css:

body {
    background-color: black;
  }
  
  ul {
  background: linear-gradient(90deg, rgba(0, 3, 36, 1) 0%, rgba(121, 9, 118, 1) 47%, rgba(56, 134, 188, 1) 100%);    border-radius: 12px;
    overflow: hidden;
    display: table;
    margin: 0 auto;
    padding: 0;
  }
  
  li {
    display: inline-block;
  }
  
  li a {
    display: block;
    color: rgb(255, 255, 255);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: black;
  }
  
  li a:hover {
    background: transparent;
  }

jedoch sind die Abstände zwischen den li 'boxen' auch gefärbt, wie ändere ich das, oder wie gehe ich das schlauer an?

Vielen Dank schon mal

...zur Frage

Abstand zwischen Bild und Text in CSS entfernen?

Also ich habe folgende Situation:

Der mittlere hellblaue Streifen soll direkt an die Bilder darüber und darunter sein, ohne diesen weißen Abstand dazwischen

Kann mir da jemand helfen?

...zur Frage

Transition des Background Images in CSS?

.btn{
    border-color: rgb(0, 153, 255);
    border-style:solid;
    color: black;
    align-content: center;
      flex-direction: column;
      margin: 20px;
      padding-right: 5em;
      padding-left: 5em;
      padding-top: 0.1em;
      padding-bottom: 0.1em;
      border-radius: 20px;  font-family: "Roboto", sans-serif; 
      text-align:center;
    text-decoration: none;
    cursor: pointer; 
    float: left;
    transition: 0.5s;
    overflow: hidden;
}

.btn:hover{
    transition: 0.5s;
    background-image:-webkit-linear-gradient( top left, rgba(0, 153, 255, 0.5), rgba(6, 125, 204, 0.5));
    color: white;
}

...zur Frage

Html / Css Text auf Header bzw. Div-Container Text über Hintergrund?

CSS formatiert die Schrift so, dass immer der ganze Querbalken über dem Hintergrund nicht transparent ist. Wie mache ich das? ** Siehe Grafiken **

h1 { font-family: arial, verdana, helvetica; font-size: 40px; font-weight: 200; }

header { position: relative; height: 200px; display: block; background-color: black;

} nav { width: 500px; height: 200px; background-color: aqua; }

...zur Frage

localhost css laden?

Ich kann bei keine css dateien mit dem link tag laden. Ich habe mehrere Möglichkeiten ausprobiert:

<link type="text/css" rel="stylesheet" href="stylesheets/style.css">

<link type="text/css" rel="stylesheet" hrefhttp://localhost/stylesheets/style.cssss">

<link type="text/css" rel="stylesheet" href="./stylesheets/style.css">

nur fürs Verständnis:

htdocs

|- index.php

|- stylesheets

|- style.css

keine dieser möglichkeiten funktioniert.

Weiß jemand wie das geht? Oder hab ich einen Fehler gemacht?

Danke im Voraus :)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen