I am working on a design where I would like to have the background of text be as a block of text specific to the word themselves (As per example 1). When I decrease the leading. That is, make the line-height tighter and closer together it runs into issues and crops the letters above it.
Searching for a better approach so that I can have tight leading and a maintain the nice block background.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
You need to add style display: inline-block; on span element.
Wrap your text in another <span> and give it position: relative;.
Edit: Yudiz_Webdesign's solution is better, but I'll leave this here as an alternative.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
.box span.inner { position: relative; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span class="outer"><span class="inner">Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></span></div>
Related
This code below for the most works. But when I type inside the lines, and suppose the cursor is in the middle of the word, if I play around and press enter and backspace, two numbers will show up on a line. Is there a CSS-only way of fixing this so only one number per line, and the line numbers still match up?
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
}
pre span {
display: inline-block;
line-height: 1.5rem;
counter-increment: line;
}
pre span:before {
content: counter(line);
display: inline-block;
padding: 0 .5em;
margin-right: .5em;
color: #888;
}
<pre contenteditable="true" spellcheck="false">
<span>lorem ipsum</span>
</pre>
UPDATE: Just tested on Firefox, different layout so the snippet below does not number the lines. (FF just puts in <br> rather than any further HTML structure).
Will leave this answer up for a bit in case it helps someone get to a general answer for all common browsers.
ORIGINAL ANSWER:
At least on Edge/Chrome the extra lines seem to be encased in div elements.
This snippet numbers the first line, which is just a span, in the same way that you have done but then numbers using the counter called line on the div immediate children of the pre rather than on the encased spans.
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
counter-reset: line 1;
}
pre>span::before {
content: '1';
display: inline-block;
padding: 0 .5em;
margin-right: .5em;
color: #888;
}
pre div {
line-height: 1.5rem;
counter-increment: line;
}
pre div::before {
content: counter(line);
display: inline-block;
padding: 0 .5em;
margin-right: .5em;
color: #888;
}
<pre contenteditable="true" spellcheck="false">
<span>lorem ipsum</span>
</pre>
I have the problem that my text is not responsive, i tried to delete the text, the image is responsive, just the text is not..there is a white border.
i dont know how to fix that problem, it hink there is something with my css code, but i dont know what.
#stage {
background: url('../img/ozadje.jpg') center center no-repeat;
background-size: cover;
position:absolute;
color: white;
height: 100%;
width: 100%;
display: flex;
align-items: center;
}
#stage-caption{
font-size: 1.4rem;
font-weight: 200;
max-width: 80rem;
margin: 0 auto;
}
#stage-caption h1{
font-size: 3.5rem;
color:silver;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
text-transform: uppercase;
line-height: 150%;
}
#stage-caption p{
color:silver ;
font-size: 2.5rem;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
font-weight: bold;
text-transform: uppercase;
text-align: center;
}
<div id="stage">
<div id="stage-caption">
<h1 class="display-3">
THERE'S ONLY ONE MIHAEL SOBOČAN, WEB DESIGNER & PROGRAMMER!
</h1></div>
</div>
screenshot of the problem
http://i.stack.imgur.com/FBKyO.png
Well to be honest, it only starts happening once you get down to really small screen sizes.. so it may not be worth even worrying baout really.
BUt the problem is that the word 'PROGRAMMER' is too long to get any shorter, and pushes the width of the viewport out further.
So your solution, if you really are worried about it, is to reduce the font size with a media query under 768px.
#media (max-width:768px) {
#stage-caption h1 {font-size:1em;}
}
please refer to http://jsfiddle.net/3fTyt/806/
I need box 2 has the same box shadow style with box 1 but only top of box 2 must be shadowed.
I tried a lot but couldn't find a solution. Can you please help? regards.
Codes in jsfiddle
CSS
#box1 {
background: #fff;
box-shadow: 0 0 10px 1px rgba(0,0,0,.99);
font: bold 18px/1.2em sans-serif;
height: 100px;
margin: 15px auto;
padding: 75px 15px 25px;
text-align: center;
width: 200px; float:left; margin:50px;
}
#box2
{
background: #fff;
box-shadow: 0 0 10px 1px rgba(0,0,0,.1), 0 -1px 1px rgba(0,0,0,.99);
font: bold 18px/1.2em sans-serif;
height: 100px;
margin: 15px auto;
padding: 75px 15px 25px;
text-align: center;
width: 200px; float:left; margin:50px;
}
HTML
<div id="box1">box 1</div>
<div id="box2">box 2: only top shadow is required and should has same shadow style with box 1</div>
You might try something like this :
#box2 {
box-shadow: 0px -10px 10px -10px rgba(0,0,0,.99);
...
}
Why these settings ?
horizontal offset = 0px : no horizontal offset,
vertical offset = -10px : 10px to the top,
blur radius = 10px : just used the same value as #box1,
spread distance = -10px : as for spread distance, a positive value would expand the shadow, but a negative value make it "shrink" (see the box-shadow documentation here). As we're using a 10px blur radius, we need to use at least a -10px spread distance to avoid seeing any shadow on the left, right and bottom sides.
Which gives us a pretty cool result, I think. Pretty close from what you were looking for :
I am a newb to HTML and CSS and first time poster here. I looked all over for my issue and was unable to find a solution.
This is for the page: http://www.nursingassistantdegree.com/break-the-cycle-of-single-mom-poverty-by-earning-a-certified-nursing-assistant-degree/
Notice the sentence "Working Minimum Wage..." is broken up (in the HTML that is where the img div begins). I would like to remove that space so the "minimum wage" is directly underneath the "assistant degree". If you notice underneath the image the texts just flows nicely together.
Here is the CSS coding (note: I have adjusted all of the numbers of the borders and margins):
.picture {
background-color: #cee4fa;
border: 3px solid #cee4fa; padding: 3px;
font: 11px/1.4em Arial, sans-serif; align:right
}
.picture img {
border: 1px solid #cee4fa;
vertical-align:middle; margin-bottom: 3px;
}
.right { margin: 0.5em 0pt 0pt 0.8em; float:right; }
.left { margin: 0.5em 0.8em 0.5em 0; float:left; }
Here is the HTML:
".... you need to be in. Working <div class="picture right" style="width:402px;">
<img src="http://www.nursingassistantdegree.com/wp-
content/uploads/2013/05/CertifiedNursingAssistantDegree.jpg" width="400" height="267"
align="right" alt="Certified Nursing Assistant Degree"/>Photo Courtesy of Felbry
College</div><p align="justify">minimum wage is never going....."
Any info you can offer would be great! Thanks!
There is an extra padding in p element:
Try to change it as:
.bodyconMiddleInnerLBoxThree p {
font: normal 15px/18px "Myriad Pro";
color: #37383A;
}
Remove padding: 10px from .bodyconMiddleInnerLBoxThree p
Currently
.bodyconMiddleInnerLBoxThree p {
padding: 10px 0;
}
Change to
.bodyconMiddleInnerLBoxThree p {
padding: 10px 0 0 0;
}
I'm making an iPhone lockscreen based on this image.
So far, what I've come up with looks like this.
Although, they look pretty similar in terms of layout the first one is slick and other rather ugly :P. I believe this as everything to do with the smoothness of the text borders. (Believe it or not, the font is exactly the same!) I'm now using this:
text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858;
But as you can see it doesn't look great. Is there a way to add some kind of anti aliasing?
Here's a short demo:
<html>
<head>
<style type="text/css">
body { position: absolute; background-color: #000; font-family: Calibri; color: #fff; text-shadow: -1px 0 #585858, 0 1px #585858, 1px 0 #585858, 0 -1px #585858; }
#clock { position: absolute; width: 290px; top: 50%; margin: -0.7em 0 0 30px; font-size: 53px; }
#day { line-height: 0.8; font-size: 0.9em; }
#date { position: absolute; margin-top: 18px; line-height: 0.6; font-size: 103px; }
</style>
</head>
<body>
<img src="http://tiny.cc/47nz6" width="320" height="480">
<div id="clock">5:30 AM
<div id="day">Wednesday
</div>
<div id="date">14 Dec
</div>
</div>
</body>
</html>
With out providing a demo I cant really test this, but you could try something like:
font-smooth:always;
or
-webkit-font-smoothing: antialiased;