This question already has answers here:
Thick underline behind text
(7 answers)
How to increase width of underline for the multiline text when on hover
(6 answers)
Closed 2 years ago.
I'm not very good at this and I'm basically just googling everything. I'm trying to figure out how I could do a box shadow at the bottom of a text. Kinda like the image below (screencapped from a random blog/site).
I've managed to add the border but it extends to the length of the site instead of just under the text. So I don't know where to go from here.
You can do this by setting the background-image of the element that contains your text with a linear-gradient.
For example:
.underlined {
background-image: linear-gradient(180deg, transparent 0 60%, #f0640780 0 100%);
}
<p>
<span class="underlined">Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
You can use this css code to do what you want box-shadow: 3px 15px 5px 0px rgba(50, 50, 50, 0.75);
Related
When I hover over the anchor tag, it flickers. It's because there are vertical gaps between the lines of the wrapped anchor tag. Moreover, if I happen to click between the lines, the link doesn't activate. I would like to get rid of this flickering and vertical hover gaps that cause it. The rest of the layout including apparent line height and button position (on the same line as the last word of the anchor tag) should stay the same.
I was thinking about this for a couple of days with no luck. The best alternative I have is using inline-block on the anchor tag, but that clears the button to the next line, which wastes too much space.
body {
line-height: 1.5;
width: 300px;
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
<a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</a>
<button>click</button>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
Added:
a {
padding: 4px 0;
}
It'll give the a element an extra space from top and bottom, and it doesn't affect the gaps.
body {
line-height: 1.5;
width: 300px;
}
a {
text-decoration: none;
padding: 4px 0;
}
a:hover {
text-decoration: underline;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<p>
<a href="#">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</a>
<button>click</button>
</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
I'm attempting to understand the exact relation between padding and border in CSS.
Would it be accurate to say that a solid border of transparent color is essentially the same thing as the same amount of padding, and can be expected to behave similarly- except insofar as they will coexist on the same element rather than overwriting each other?
In other words, is there any case in which:
#Square1{
padding: 50px;
}
, if replaced with:
#Square1{
border-style: solid;
border-width: 50px;
border-color: transparent;
}
would be expected to display different behavior in any meaningful way, except if there was something like this in the same CSS file:
.ClassThatSquare1HappensToHave{
border-style: solid;
border-width: 50px;
border-color: transparent;
}
, in which case you will effectively end up with twice the amount of border/padding/element-expanding space?
Maybe this is what you are looking for. Note how overflow behaves differently both in the content that is left displayed (which is clipped to the padding edge) and the position of the scrollbar, which sits outside padding, but inside border.
#Square1{
padding: 50px;
}
#Square2{
border-style: solid;
border-width: 50px;
border-color: transparent;
}
body {
width:400px;
}
div {
background-color:lightblue;
height:100px;
overflow:auto;
}
<div id="Square1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<hr>
<div id="Square2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
They both belong to CSS box model but they serve different purposes.
In the box model :
The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.
(...)
The border area, bounded by the border edge, extends the padding area
to include the element's borders. Its dimensions are the border-box
width and the border-box height(...)
If the box-sizing property is set to border-box, the border area's
size can be explicitly defined with the width, min-width, max-width,
height, min-height, and max-height properties.
With that said, you should use padding whenever you want to give inner space and use border to give exactly what it states - a border - a line that if has padding will show after the padding area.
I am trying to float the image to left, wrap the description around the image, and float the location to the bottom left by using float and clear properties: https://jsfiddle.net/darf4ama/5/
<aside>
<h2>Photo Posts</h2>
<p><img src="http://lorempixel.com/200/300/animals/" alt="Image Title"></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Image</p>
</aside>
aside img {border: 2px dotted yellow; float: left;}
aside:first-of-type p:first-of-type {border: 2px dotted blue;}
aside:first-of-type p:nth-of-type(2) {border: 2px dotted green; float: left; overflow: auto;}
aside:first-of-type p:last-child {border: 2px dotted red; float: left; clear: both; font-style: italic;}
I think I have floated the image and the location and have cleared these two properties correctly. However I can't seem to float and clear paragraph 2. What am I doing wrong here?
Float does change the behaviour of elements
you might consider of using flex box
if you want to have the image and paragraph next to each other with a margin to it
check the following snippet
aside{
display:flex;
border:1px solid red;
}
aside img {border: 2px dotted yellow; }
aside p:nth-child(2){
margin:10px;
border:2px solid green;
}
<h2>Photo Posts</h2>
<aside>
<p>
<img src="http://lorempixel.com/200/300/animals/" alt="Image Title">
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</aside>
<p>Image</p>
Hope this helps
What is the best way to truncate text(or line clamp) on a specific row?
Lets say I have a paragraph with 8 lines of text but I only want to show 3?
Is this possible via CSS or do I need something else?
Set line-height, and max-height as multiple for n rows you want to show. For example, if line-height is 30px, only show 2 lines:
HTML
<p class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
CSS
.text {
line-height: 30px;
max-height: 60px;
overflow: hidden;
}
Example: https://jsfiddle.net/rk8y0rsd/
Yes, it is simple, look the example bellow.
html:
<div class="i-speak-too-much">
Hello I like speak, I live in the future I am the Universe
</div>
css:
.i-speak-too-much {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; //making dots
}
jsfiddle: https://jsfiddle.net/ot9excbr/
I'd like to set the textarea's rows and cols attributes via CSS.
How would I do this in CSS?
<textarea rows="4" cols="50"></textarea>
It is equivalent to:
textarea {
height: 4em;
width: 50em;
}
where 1em is equivalent to the current font size, thus make the text area 50 chars wide.
see here.
width and height are used when going the css route.
<!DOCTYPE html>
<html>
<head>
<title>Setting Width and Height on Textareas</title>
<style>
.comments { width: 300px; height: 75px }
</style>
</head>
<body>
<textarea class="comments"></textarea>
</body>
</html>
I don't think you can. I always go with height and width.
textarea{
width:400px;
height:100px;
}
the nice thing about doing it the CSS way is that you can completely style it up. Now you can add things like:
textarea{
width:400px;
height:100px;
border:1px solid #000000;
background-color:#CCCCCC;
}
As far as I know, you can't.
Besides, that isnt what CSS is for anyway. CSS is for styling and HTML is for markup.
I just wanted to post a demo using calc() for setting rows/height, since no one did.
body {
/* page default */
font-size: 15px;
line-height: 1.5;
}
textarea {
/* demo related */
width: 300px;
margin-bottom: 1em;
display: block;
/* rows related */
font-size: inherit;
line-height: inherit;
padding: 3px;
}
textarea.border-box {
box-sizing: border-box;
}
textarea.rows-5 {
/* height: calc(font-size * line-height * rows); */
height: calc(1em * 1.5 * 5);
}
textarea.border-box.rows-5 {
/* height: calc(font-size * line-height * rows + padding-top + padding-bottom + border-top-width + border-bottom-width); */
height: calc(1em * 1.5 * 5 + 3px + 3px + 1px + 1px);
}
<p>height is 2 rows by default</p>
<textarea>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>height is 5 now</p>
<textarea class="rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
<p>border-box height is 5 now</p>
<textarea class="border-box rows-5">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</textarea>
If you use large values for the paddings (e.g. greater than 0.5em), you'll start to see the text that overflows the content(-box) area, and that might lead you to think that the height is not exactly x rows (that you set), but it is. To understand what's going on, you might want to check out The box model and box-sizing pages.