The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> PRIDE - Text, PRIDE Rainboww text BG
Alex Barlow
post Jul 18 2020, 02:40 PM
Post #1





Group: Members
Posts: 1
Joined: 18-July 20
Member No.: 27,442



I want to replicate this rainbow text, but if I copy their HTML/CSS, my rainbow hovers above.

IPB Image

IPB Image

Please help recreate this
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 18 2020, 03:22 PM
Post #2


.
********

Group: WDG Moderators
Posts: 8,553
Joined: 10-August 06
Member No.: 7



I'd try using a CSS background-image for the text, something like:

CSS
CODE
span.pride {
color: #fff;
background: #000 url(pride.gif) repeat-x;
background-size: auto 100%;
}


HTML
CODE
<p>lorem <span class="pride">ipsum</span> dolor</p>


The background-image is sized to fit the height of the HTML element ; but is made to repeat horizontally, since I don't know the length of the text. I also use a black background-color so that the white foreground-color won't become unreadable if the image fails to load.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 25th September 2020 - 10:40 PM