Färben eines Schriftzugs mit CSS, ohne Veränderung HTML-Code

-2

Ich bin ein Starter in CSS, und heute habe ich eine Schule Aufgabe:Färben eines Schriftzugs mit CSS, ohne Veränderung HTML-Code

Hier ist das HTML-Code:

<head> 
    <meta charset="UTF-8"> 
    <title>ABC</title> 
    <style> 
     /* CSS part */ 
    </style> 
</head> 
<body> 
    <p>ABC</p> 
</body>

Meine Aufgabe ist den Buchstaben "A" auf # ec407a "B" auf # ffb300 "C" auf # 26a69a zu färben, ohne den HTML-Code zu ändern.

Wie kann ich das schaffen? Danke Jungs!

Quelle

2017-01-19 easymaaan

Sie können nicht. Für das A könnte man mit Pseudo-Selektor 'p: first-letter' gehen, aber es gibt keine Möglichkeit, zwischen B und C aus einer CSS-Perspektive zu unterscheiden. – connexo

Sie können dies nur mit Javascript erreichen, und natürlich müssen Sie den HTML-Code ändern. – Bellu

Wie wäre es, wenn Sie uns die Frage Ihres Ausbilders wörtlich zeigen, ich bin neugierig. – zer00ne

Ernst Hack, aber hier gehen Sie

<style> 
p { 
    color:#ffb300; 
    position: relative; 
} 
    p:first-letter { 
    color: #ec407a; 
    } 
    p::after { 
    bottom: 0; 
    color: #26a69a; 
    content: 'C'; 
    position: absolute; 
    transform: translate(-100%, 0); 
    } 
</style> 
<body> 
    <p>ABC</p> 
</body>

https://jsfiddle.net/fqu9ppL4/1/

Quelle

2017-01-19 13:25:02 tigerdi

Kumpel, das ist etwas .. – ab29007

Man könnte dies mit mix-blend-mode tun, wenn es von den meisten Browsern bedeckt war, aber unfortunately .. noch nicht.

Also für die futur, könnte dies ein Weg sein:

p { 
 
    margin:1em; 
 
    display:table; 
 
    position:relative; 
 
    background:white;/* 
 
    or hudge white inset white shadow to cut off colors 
 
    box-shadow:inset 0 0 0 100px white; */ 
 
    } 
 
    p+p { 
 
    font-size:3em; 
 
    font-family:'Courier New', Courier, modern, monospace; 
 
    
 
} 
 
p:before { 
 
    content:''; 
 
    background:linear-gradient(to left, #ec407a ,33.33%, #ffb300 33.33%,#ffb300 66.66%, #26a69a 66.66%); 
 
    position:absolute; 
 
    top:0; 
 
    left:0; 
 
    right:0; 
 
    bottom:0; 
 
    mix-blend-mode:screen; 
 
}

<p>What about a few more letters ?</p> 
 
<p>WIW</p>

gibt es auch

-webkit-background-clip: text; 
-webkit-text-fill-color: transparent;

p { 
 
    font-size:3em; /* demo purpose any size */ 
 
    display: table; 
 
    background: linear-gradient(to left, #ec407a, 33.33%, #ffb300 33.33%, #ffb300 66.66%, #26a69a 66.66%); 
 
    -webkit-background-clip: text; 
 
    -webkit-text-fill-color: transparent; 
 
}

<p>ABC</p>

Quelle

2017-01-19 13:25:54

upvote für Ich weiß nicht, Mix-Blend war eine Sache – ab29007

Sie änderten die HTML. – connexo

@connexo wo habe ich? ein einzelner Absatz ist immer noch ein einzelner Absatz –

Dies wäre eine mögliche „Lösung“ sein, die extrem Hack-Stil ist, und nur für die angegebenen Zeichen in der angegebenen Schrift funktioniert.

p { 
 
    color: #ec407a; 
 
    display: inline-block; 
 
    font-size: 6em; 
 
} 
 
p:after { 
 
    background-color: white; 
 
    content: 'B'; 
 
    color: #ffb300; 
 
    display: inline-block; 
 
    float: right; 
 
    position: relative; 
 
    left: -1.33em; 
 
} 
 
p:before { 
 
    content: 'C'; 
 
    color: #26a69a; 
 
    display: inline-block; 
 
    float: right; 
 
    position: relative; 
 
    left: -1.335em; 
 
}

<p>ABC</p>

Quelle

2017-01-19 13:27:37 connexo

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="UTF-8"> 
    <title>ABC</title> 
    <style> 
     p::first-letter { 
      color: #ec407a; 
     } 
    </style> 

    <script type="text/javascript"> 
     var text = "ABC"; 
     var colors = new Array("#ec407a", "#ffb300", "#26a69a"); 
     for (var i = 0; i < text.length; i++) 
    document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + text[i] + "</span>"); 
    </script> 

</head> 

<body> 
    <p>ABC</p> 
</body> 

</html>

Quelle

2017-01-19 14:23:39

Ich stimme obigen Kommentar zu, da meines Wissens keine Option vorhanden ist –

Färben eines Schriftzugs mit CSS, ohne Veränderung HTML-Code

Antwort

Verwandte Themen