I have got a little problem with a spacing. I want to have spacing less than 1 pixel. Here is my html
<div id="head">
<h1>Mira's</h1>
<br>
<h2>Koding place</h2>
</div>
and here is the CSS
#font-face {
font-family: Museo;
src: url("fonts/Museo300-Regular.otf") format("opentype");
}
body {
background-color: black;
}
h1 {
text-align: center;
margin: 0 auto;
font-family:'Museo', 'Lucida Console', Courier;
font-size: 7em;
text-transform: uppercase;
color: #fff;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #029408, 0 0 70px #029408, 0 0 80px #029408, 0 0 100px #029408, 0 0 150px #029408;
}
h2 {
font-size: 1.65em;
text-align: center;
font-family:'Museo', 'Lucida Console', Courier;
color: #fff;
margin-top: -1.65em;
margin-left: 0.13em;
letter-spacing: 0.5px;
}
Problem is that it's not letter spacing less than one px, is there any hack to make it less than one px?
Here is jsfiddle with it http://jsfiddle.net/3np3y/
Also dont mind that some things in CSS are px and some are em. I will retype everything to em soon.
Letter spacing can have negative value, so try that :)
I.E. letter-spacing: -4px;
Related
The designer applied a button’s box shadow in Figma with 1rem blur-radius multiple times, to render it stronger.
I figured out that I can approximate the same box shadow with a single one, using a smaller blur-radius and a spread-radius.
So I’m wondering: How do repeated box-shadows get combined, and how could one calculate the single shadow to replace the repetition?
body {
background: #000f4d;
}
button {
display: block;
color: white;
background-color: #000f4d;;
border: .1rem solid white;
border-radius: 2.5rem;
padding: .8rem 1.3rem;
margin: 2rem;
}
.multiple {
box-shadow: 0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7;
}
.equivalent {
box-shadow: 0 0 .625rem .4rem #0dc0f7;
}
.single {
box-shadow: 0 0 1rem #0dc0f7;
}
<button class="multiple">Multiple shadows</button>
<button class="equivalent">Equivalent single shadow</button>
<button class="single">Single shadow</button>
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>
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;}
}
Does anyone know if it's possible to draw this red shape for title background in CSS only ?
I need to have this with different width for different title lenght.
Thank you !
Manue
If border-radius seems fine to you, you may tune each corners in 2 ways to get a shape alike :
see for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
example possible below
h1 {
display: table;
margin: 0.1em auto;
font-size: 45px;
font-family: cursive;
text-transform: uppercase;
padding: 0.25em 0.5em;
background: #D71E19;
color: white;
/* below the values you want to tune to round and cut off corners */
border-radius: 0.75em 0.5em 0.65em 0.5em / 25px 22px 100px 50px;
}
h1 + h1 {
/* borders or shadow will follow the shape edge */
margin-top:10px;
box-shadow:0 0 0 4px pink, 0 0 4px 3px black, inset 0 0 2px black;
text-shadow:1px 1px 2px gray, -1px -1px 2px #333;
}
<h1>Title experiment</h1>
<h1>shadow & border</h1>
I want to create a styleguide for a website, and say I have a h1 I always want there to be 28px bottom margin before the next text whatever it is, from the foot of the letters to the top of next letters. Problem is that in HTML if the line-height's always add some extra spacing, and it might differ for each text. Is there a rule to know exactly how much margin-bottom to use so it will always be 28px for example?
<h1>HL1: Meine Bestellungen</h1>
<h2>SL1: Bestellnr. 1234563</h2>
h1 {
background: none repeat scroll 0 0 rgb(255, 255, 0);
color: rgb(153, 145, 141);
font-family: Georgia;
font-size: 26px;
font-weight: normal;
letter-spacing: 0;
line-height: 30px;
margin-bottom: 28px;
text-decoration: none;
text-transform: uppercase;
}
h2 {
background: none repeat scroll 0 0 rgb(0, 255, 0);
color: rgb(196, 18, 47);
font-family: Lucida Sans;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.1em;
line-height: 20px;
margin-bottom: 6px;
text-decoration: none;
text-transform: uppercase;
}
Thanks!
It's got nothing to do with line height, it's got to do with browser defaults.
For instance in my version of Google Chrome there is a margin-top value applied to the h2 by default. You should just specify all margins:
h1 {
margin: 0 0 28px; /* shorthand notation */
}
h2 {
margin: 0 0 6px;
}
Look into a "CSS reset", and in jsFiddle you can check the "Normalize CSS" option.
Reources:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
CSS reset - What exactly does it do?