html - How to give 2 different colours of the font to the vertical text, in order to text 1 and text 2 was in one "div class"? -
two texts saved on "background-color: blue" test. have 2 "div class":
1) vertical-text1 (text color ---> white)
2) vertical-text2 (text color ---> yellow + font-weight: bold)
my code:
<div class="video_info"> <div class="vertical-text1">text 1</div> <div class="vertical-text2">text 2</div> </div> .video_info { position: fixed; left: 30px; top: 70%; } .vertical-text1 { transform: rotate(-90deg); color: white; background-color: #0000ff; position: absolute; left: -190px; top: -215px; width: 400px; } .vertical-text2 { transform: rotate(-90deg); color: yellow; font-weight: bold; background-color: #0000ff; position: absolute; left: -40px; top: -350px; width: 100px; }
how give 2 different colours of font vertical text, in order text 1 , text 2 in 1 "div class"?
i don't think can have 2 elements different styling without making them different somehow. can move common styling inside class , leave individual styling is, separate each element (using ids), there no duplicate code.
<div class="video_info"> <span id="vertical-text1" class="vertical-text">text 1</span> <span id="vertical-text2" class="vertical-text">text 2</span> </div> .video_info { position: fixed; left: 30px; top: 70%; } .vertical-text { transform: rotate(-90deg); background-color: #0000ff; position: absolute; } #vertical-text1 { color: white; left: -190px; top: -215px; width: 400px; } #vertical-text2 { color: yellow; font-weight: bold; left: -40px; top: -350px; width: 100px; }
Comments
Post a Comment