0

Does anyone know how to make a text appear in tricolour or more colours? Is it possible in PHP/HTML? By tricolour I mean horizontally not vertically. For more clarification horizontal means flag of India and vertical means flag of Ireland. Is there any tag or something in HTML for this? Or can it be made possible through PHP?

1

3 Answers 3

3

You could accomplish this using SVG text, which is supported by all major browsers (newer ones anyway). Below is just copied from the link.

<svg viewBox = "0 0 600 200" version = "1.1">
    <defs>
        <rect id = "r1" width = "250" height = "50" stroke = "black" stroke-width = "1"/>
        <linearGradient id = "g1" x = "0%" y = "100%">
            <stop stop-color = "olivedrab" offset = "0%"/>
            <stop stop-color = "peru" offset = "20%"/>
            <stop stop-color = "goldenrod" offset = "40%"/>
            <stop stop-color = "firebrick" offset = "60%"/>
            <stop stop-color = "thistle" offset = "80%"/>
            <stop stop-color = "sandybrown" offset = "100%"/>
        </linearGradient>
    </defs>
    <g font-size = "40">
        <use x = "0" y = "0" xlink:href = "#r1" fill = "url(#g1)"/>
        <text font-size = "20" fill = "url(#g1)" stroke = "none">
            <tspan x = "10" y = "80">
                Have you wandered in the wilderness, the sagebrush desolation,
            </tspan>
            <tspan x = "10" y = "140">
                The bunch-grass levels where the cattle graze?
            </tspan>
        </text>
    </g>
</svg>
2
  • In case this is your next question, the answer is yes, you can pop this straight into your html document, and generate the SVG markup using php the same way you generate html.
    – Ryan Lynch
    May 1, 2013 at 6:57
  • Hi Ryan, thanks for your answer. It was not exactly what I was looking for. But I can use it somewhere else.
    – Rolen Koh
    May 1, 2013 at 11:20
2

One, horrible, approach is to use pseudo-elements and CSS' generated content:

<p data-text="Some arbitrary text">Some arbitrary text</p>

p {
    color: #00f;
    position: relative;
    background-color: #ffa;
}

p::before {
    color: #0f0;
    content: attr(data-text);
    position: absolute;
    height: 66%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

p::after {
    color: #f00;
    content: attr(data-text);
    position: absolute;
    height: 33%;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

JS Fiddle demo.

Though, unfortunately, it comes with two obvious problems (and perhaps others), the first is that it's only supported in those browsers that implement the ::before/::after pseudo-elements as well as CSS-generated content. The second problem is the larger, however, in that it only works across single-line spans (because of the position: absolute positioning), not multiple lines.

As a third problem it also relies on using a custom HTML (albeit valid HTML data-*) attribute), which does bloat the mark-up rather more than is ideal.

0
0

This is what you are looking for

Just play a little bit with the pads, and copy the line code generated!

Example CSS:

background: rgb(30, 50, 230);
background: -moz-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -webkit-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -o-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: -ms-linear-gradient(30deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
background: linear-gradient(120deg, rgb(30, 50, 230) 30%, rgb(90, 140, 250) 70%);
2
  • Did the answer help you or not?
    – Alice
    May 1, 2013 at 12:10
  • Your answer is great, but you should really provide some example code, not just a link to an external site.
    – Ryan Lynch
    May 1, 2013 at 12:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.