I am trying to change the text colour on alternate lines of a paragraph. The problem is, the number of lines in a paragraph will depend on things like screen size. Is there a way in CSS where I can have alternate text colours for each line inside a <p> tag?
For example, in the following code
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas. Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>
Each line of text should be an alternate colour regardless of which words are actually on which lines (which will obviously depend on the screen size).
My first instinct was to try and calculate the number of lines based on screen size, but then I'm not sure where to go from there.
Nice question! For a CSS only implementation of this, you can use the magic of webkit-background-clip, along with a gradient.
You can try out my solution at https://jsfiddle.net/kavot054/, I've also put the HTML and CSS code for it below.
Notice the relationship between the line-height of the text and the gradient; if you were to change the font for example, you would need to update both of these.
It is also worth noting that the webkit-background-clip only works on webkit browsers, so this is something to be wary of when thinking about your site's accessibility.
p {
line-height: 30px;
background: -webkit-repeating-linear-gradient(red, red 30px, blue 30px, blue 60px);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vel metus sapien. Duis eleifend justo eu enim venenatis, quis malesuada eros rhoncus. Sed id orci sed nulla ultrices lobortis. Nam ultricies nibh dictum odio posuere porttitor. Vivamus vitae diam felis. Duis dapibus eget velit id tempor. Integer tristique viverra lorem sit amet congue. Suspendisse vitae ex condimentum, volutpat nisi eu, cursus dolor. Curabitur suscipit hendrerit semper. Vestibulum egestas lorem vitae aliquet egestas.
Nulla non faucibus velit, sit amet sagittis velit. Nulla fringilla efficitur erat, sed porttitor mi fringilla non. Phasellus dictum gravida ligula at elementum. Phasellus nec dui suscipit, mollis turpis eu, posuere erat.</p>
Related
can anyone tell me why is my nav bar not following sticky position property.
HERE IS THE LINK TO MY CODE--https://codepen.io/prashant_verma/full/yLMKMQL
Use position: fixed
header {
position: fixed;
background-color: lightblue;
}
p {
width: 150px;
}
<header>
<h1>Hello World</h1>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eleifend, est at consequat facilisis, sapien nunc pharetra nunc, eu gravida quam massa vel sapien. Vivamus suscipit dui quis erat consectetur, a euismod enim varius. Curabitur quis dolor sed dolor aliquet pharetra. Phasellus eu malesuada turpis. Sed condimentum, augue et condimentum laoreet, leo enim ultrices justo, sit amet congue est lacus a ipsum. Ut posuere mi ac mi sagittis, ut fermentum dolor condimentum. Morbi aliquam egestas lacus et suscipit. Fusce sodales sollicitudin ex eget pulvinar. Nunc velit dui, rutrum vitae lacinia id, sodales vitae sem. Vivamus interdum nibh auctor massa tempus, non sollicitudin risus tincidunt. Donec tortor enim, volutpat a nunc non, placerat semper ex.
</p>
This is because position sticky always follows its parent height and width. In your case, #sticky is inside its parent <header> and header has the least minimum height, that's why when you are passing the header, #sticky is following so. So,the solution is, you rather keep the #sticky in such a position so that <body> can be its parent. like this,
<body>
<div id="sticky">
...
</div>
<body>
then it will stick on top always across the page.
And if you want to place it under the h1 - Flexbox challenge 2,
give it top: (the height of the h1)
Though position: fixed is an easy solution for you, you must know position sticky well also
I would like to layout a webpage as sketched in the image:
The main text (a series of div elements) is supposed to go in a main column. I do have occasional images and remarks that relate to the text but with which I don't want to interrupt the actual text flow.
How can I position a given image or "remark" text box to the right of a given div element in the main column?
In the following minimal example, how would I put the img element just to the right of the second div element?
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque eu condimentum ligula. Fusce sollicitudin quam ornare,
pharetra lorem quis, luctus erat. Nulla convallis velit magna, sit
amet semper erat cursus sed. Praesent non turpis id lectus aliquet
vestibulum. Donec non leo venenatis, commodo dolor eget, facilisis
turpis. Donec dapibus scelerisque orci vel molestie. Vestibulum ut
elit a arcu interdum tempor ut scelerisque enim. Duis maximus ex sit
amet elit scelerisque, ultricies feugiat mauris feugiat. Morbi non
egestas arcu, at semper massa. Ut feugiat metus eget nulla porttitor
lobortis. Praesent lorem lacus, finibus quis blandit a, iaculis sed
mauris. Vivamus aliquam molestie ex, a lacinia erat faucibus non.
Donec scelerisque neque ac ante interdum, vel varius justo tincidunt.
Quisque ultricies nulla in nisi facilisis, et accumsan libero imperdiet.
</div>
<div>Curabitur imperdiet at diam eget rhoncus. Aenean pretium magna
quis sodales ornare. Sed vitae vehicula nisi. Nulla a tristique lectus.
Nam rutrum ut libero viverra porta. In rhoncus leo et mi luctus, at
osuere est commodo. Vestibulum fringilla luctus mi, in consectetur sem
semper non. Phasellus ac augue et purus vulputate suscipit.
Pellentesque tempus imperdiet urna non convallis. Quisque finibus elit
magna, nec finibus ipsum ornare vitae. Vestibulum id sapien est. Maecenas
in mauris sit amet orci facilisis bibendum id sed ante. Vestibulum at
egestas justo. In nibh ex, ullamcorper sit amet urna vel, molestie mattis
tortor. Ut vel felis dolor.
</div>
<img src="img.png"/>
The easy way is to add calc width (for example 100% - 100px for 100px wide column right):
.leave-space-form-right {
width: calc(100% - 100px);
float:left;
}
.put-element-on-right {
float:left;
}
Here is an example:
https://jsfiddle.net/txdue3n0/6/
Consider the following CSS / HTML :
img.text-wrap-left {
float:left;
}
<p>
<img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>
When the viewport is resized, the text will wrap right of the image, but will also become very narrow, to the point of even having a few letters only.
Is it possible to specify the minimum width of the text before the paragraph just goes entirely under the image, all without sacrificing paddings and margins?
In this example, an easy solution would be to add a media CSS condition, and tell the image to display:block; at a certain width. The problem is that this is only an example; my problem is that the images that are used with the text may have variable widths (i.e. they are user defined) and I am looking for a responsive solution.
Any ideas?
I think better option is to use max-width on image to keep its max-width at some % and then also add media query to break text to new line at some point. Fiddle
img.text-wrap-left {
float:left;
max-width: 50%;
}
#media(max-width: 480px) {
img.text-wrap-left {
display: block;
float: none;
max-width: 100%;
}
}
<p>
<img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam.
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit.
</p>
I'm sure this is baby stuff for many, but I'm afraid I just can't get it right. The more I tweak, the further away I get with the results. No need to describe the consequences of my efforts. Instead here is the desired effect as the viewport shrinks:
The lower image is NOT what I'm actually producing; it's what I'd like to happen. Instead I've got the elements doing everything but this, the most annoying being the text wrapping under the images.
If someone can point me toward the most efficient code for this, including media queries, I'm grateful.
I trust you're using #media queries in your CSS, so I'll assume this unless told otherwise.
One way you could look at it is this:
Set the display property to inline-block of the Items 2 & 3.
Then, set the width of items 2 & 3 to 50% when the viewport is at more than 600px (desktop/tablet) wide. This will make them sit side-by-side.
Note: you might need to use box-sizing: border-box; for this to work properly; depending if you're using borders or not.
Then, on your media query for less than 600px (for mobile), set Items 2 & 3's widths to 100% to fill the width of the screen.
This will make them cascade neatly underneath one another.
Furthermore, I would recommend looking at using Bootstrap as this makes responsive website coding a doddle.
Hope this helps!
I think that the eassier solution here is using media queries. I give you a bit of background, just in case you don't know what they are.
When you create a stylesheet, the styles created are applied to the elements you target using selectors, like class, ids, etc.
Media queriesallow you to set conditions to that CSS rules, for example, you can create rules depending on the screen size.
See this fiddle to check how it works.
.short {
width: 50%;
float: left
}
#media screen and (max-width: 500px) {
.short {
width: 100%;
float:none;
}
}
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p class="short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum elementum purus vel purus tempor, id lobortis sem placerat. Phasellus sed magna varius, fermentum velit sed, vestibulum ante. In enim est, iaculis in neque sed, dictum venenatis nulla.
Fusce sit amet auctor augue. Vestibulum at dui ipsum. Sed vehicula bibendum eros sed feugiat. Fusce cursus mi non eros eleifend, viverra tempus massa accumsan. Maecenas venenatis purus sit amet metus ornare, at feugiat ex bibendum. Aliquam erat volutpat.
Vivamus tristique odio non elit imperdiet, vel ornare diam suscipit. Pellentesque ultrices, tortor vitae varius vehicula, metus mi porta est, tincidunt posuere lorem turpis non justo. Nulla ullamcorper dolor a mattis ornare.
</p>
The CSS is easy. The first thing is the class short, which applies always to the elements. Then you find the media query which says that the CSS rules that encloses are applied only when the width is under 500px.
I had a project on responsive webpage and I'm a new learner so it's all basics:
https://github.com/nirupaboricha/Responsive_Webpage
Let me know if it's helpful.
I have a large text. I've made 3 columns with the following CSS:
.columns {
-webkit-column-count: 3;
text-align: justify;
}
It has to work in Safari. This works just fine. But now I would like to place an image to the top of the second column.
How can I have this result?
Edit: This was my start of doing the thing, but I would like to say that the important thing is to have the result in any way, so I can drop this css in case it can be solved without this.
Edit 2: I've solved it with the jquery colonizer plugin. I had to add 3-5 lines of code to the plugin. I need this for the iPad, where I have arrange the text and image like I mentioned before. I think this is the simplest method to have this job done.
In case you need the solution, feel free to e-mail me.
#flynfish, please post it as an answer, so I can accept it.
I'm not sure that this is possible. The browser determines where to break the content and there's no way via CSS to insert something at those points. The closest thing I've been able to come up with uses the column-break-before: property (-webkit-column-break-before, -moz-column-break-before, column-break-before).
For example:
CSS:
div#multicolumnElement {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
}
.special {
-webkit-column-break-before:always;
-moz-column-break-before:always;
column-break-before:always;
}
HTML:
<div id="multicolumnElement">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur mattis, lectus
nec tempor auctor, urna urna venenatis nisi, ac pellentesque est felis egestas lorem!
Duis lectus dui, commodo in varius sed, bibendum at eros. Donec ultricies, est quis
pretium porttitor, neque arcu auctor dui, sit amet adipiscing erat est id massa.
Morbi at elementum <img class="special" src="http://dummyimage.com/200x150/000/fff" />lectus. Donec fermentum massa sit amet nisi tempus sed vestibulum
tortor pellentesque. Aliquam dictum, sapien a luctus ultricies, ipsum erat dignissim
tellus, in ultricies mi lorem tempor velit. Vivamus ornare nulla sed arcu elementum
pharetra. </p>
<p>Phasellus cursus felis sed felis porta tempor. Vestibulum at eleifend ligula.
Vestibulum hendrerit ligula at elit lacinia at ultricies metus fringilla! Vestibulum
ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi
ultrices tortor vel ipsum imperdiet imperdiet. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
eu leo quis lectus aliquet elementum. Aenean porta interdum nibh id posuere? Phasellus
nisl lorem, semper bibendum semper at, malesuada non odio. </p>
<p>In ullamcorper eros quis nisi pharetra tincidunt. Vestibulum ac elit nunc, sed
laoreet leo! Duis et nulla sit amet lorem gravida lacinia. Cras massa ipsum, semper
in mattis ut, fringilla in nisi. Nulla mauris urna, feugiat sed convallis id, facilisis
et sem. Donec egestas ultricies commodo. Aliquam eget nulla enim, et dictum nisi.
In faucibus, leo vitae congue convallis, elit eros venenatis leo, nec lobortis sapien
orci at nunc. </p>
</div>
This produces four columns of text with an image at the top of the second column, however depending on the amount of text and the space available, it's possible that this may not always turn out as you want.
I'd have linked to a jsFiddle example but it seems to be down ATM.