I'm working on adding a black font outline to white text using CSS. The goal is the image below. So far I've been able to come up with below. Is there any other best practice to closer match the thin outline shown in the image below? Thanks!
.introText {
font-family: 'Nunito', sans-serif;
-moz-text-fill-color: white;
-webkit-text-fill-color: white;
-moz-text-stroke-color: black;
-webkit-text-stroke-color: black;
-moz-text-stroke-width: 2px;
-webkit-text-stroke-width: 2px;
font-size: 50px;
margin-top: 20vh;
}
}
<h1 class='introText text-center'>We've got your perfect spot.</h1>
One way to do that is to use text-shadow and overlap multiple shadows:
.introText {
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
}
4 times in this case.
Example:
.introText {
font-family: "Nunito", sans-serif;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
color: white;
font-size: 50px;
margin-top: 20vh;
}
<h1 class="introText text-center">We've got your perfect spot.</h1>
It creates a very similar effect and you can make it stronger or weaker depending on how many repetitions you use.
Maybe this is what your asking
.introText {
font-family: 'Nunito', sans-serif;
background: gray;
color: white;
font-size: 50px;
font-weight: 400;
border: 100px white solid;
margin-top: 20vh;
}
<h1 class='introText text-center'>We've got your perfect spot.</h1>
Related
I was trying to make a button with a red border thats in the bottom and in the middle, but, its padding doesn't let me! You can see with the border, its like 100% width, it makes no sense.
Ive tried everything, the only "solution" i found, was to set the margins to something like 200px, but the hitbox is still massive in the x axis, if someone knows what might becausing this i'd appreciate an answer, thank you!!
HTML:
<div class="message">
<h1>NA CONJUGAÇÃO DO COMPROMISSO, DO ACOMPANHAMENTO E DA ATENÇÃO.</h1>
<h3>A colaboração de todos é fundamental para a concretização dos pressupostos de uma escola que todos queremos.</h3>
</div>
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
CSS:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
text-align: center;
color: white;
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
}
How it looks: (except background)
A commenter correctly points out that you should probably change your element from div to button. However, if for some reason you need to keep the element as-is, adding the following CSS rules should center it:
width: fit-content;
margin: 0 auto;
display: block;
Here's a demo:
h1 {
font-family: 'Abril Fatface', cursive;
color: white;
text-align: center;
padding: 80px 300px 5px;
font-size: 60px;
text-shadow: 0px 2px 3px black;
}
h3 {
font-family: 'Roboto Slab', serif;
color: white;
text-align: center;
text-shadow: 0px 2px 3px black;
}
.ano-letivo {
font-weight: 600;
padding: 10px;
border: 3px solid rgb(255, 69, 59);
width: fit-content;
margin: 0 auto;
display: block;
}
<div class="button">
<a href="example.com">
<div class="ano-letivo">Ano Letivo</div>
</a>
</div>
I am trying to create a reusable div css class that I can use to highlight quotes in articles I am writing on my campaign website. When debugging in Visual Studio using Chrome (or Firefox) I get the desired result:
As you can see there is a silver border, but padding around it.
My CSS class is:
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: silver;
outline-width: 1px;
outline-offset: -10px;
text-align: center;
}
However, in Internet Explorer no padding on the border occurs. Seems like outline-offset is ignored.
Link to article on my website
How can I get a cross-browser class set up that will produce the desired result?
outline-offset is not supported in Internet Explorer.
You could use a combination of outline and border to achieve the same effect.
Here border is used for the silver line and outline is used for the white space surrounding the element.
body {
background: #fffacf;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
outline-style: solid;
outline-color: white;
outline-width: 10px;
text-align: center;
border: 1px solid silver;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Another option is to use box-shadow instead of border or outline. This allows you to have as many "borders" as you like.
body {
background: #e6e6e6;
padding: 15px;
}
.articleQuote {
background-color: #FFFFFF;
font-family: 'PT Sans', sans-serif;
font-size: 20px;
color: navy;
padding: 25px 25px 25px 25px;
text-align: center;
margin: 30px 0;
box-shadow: 0 0 0 1px silver,
0 0 0 10px white;
}
.crazy-border {
margin: 50px 10px;
box-shadow: 0 0 0 2px red,
0 0 0 4px white,
0 0 0 6px orange,
0 0 0 8px white,
0 0 0 10px gold,
0 0 0 12px white,
0 0 0 14px green,
0 0 0 16px white,
0 0 0 18px blue,
0 0 0 20px white,
0 0 0 22px purple;
}
<div class="articleQuote">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
<div class="articleQuote crazy-border">
"80% of North Carolinians polled were in favor of legalizing medical marijuana in the state."
</div>
Try nested divs.
HTML:
<div class="article-quote-outer">
<div class="article-quote-inner">
{text goes here}
</div>
</div>
CSS:
.article-quote-outer {
padding: 12px;
background-color: white;
}
.article-quote-inner {
border: 1px solid silver;
padding: 15px;
}
Example:
JSFIDDLE
If the desired result is no white space surrounding the silver border, delete the line:
outline-offset: -10px;
So here is my goal, I want to have image(aka that's my logo) on top of another which is basically the background. So the background image has the logo on it and also some text and both are centered. Now here is my problem, because I set position to relative and absolute, when I resize the window, my images are not responsive, meaning the logo and the text aren't centered anymore.
So what I had to do, was put the texts and the logo in a div and make the background of that div the other image (using background-url in css) the other image background but that's not efficient. So I have this so far:
#pictures {
width: 100%;
margin-top: 0;
padding-top: 100px;
padding-bottom: 100px;
background: url('http://cdn-s-www.lalsace.fr/images/3CC1D55D-083C-44F1-B484-2D315D21D529/JDE_V0_07/(disney).jpg');
background-size: 100%;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: background-image 1s ease-in-out;
transition: background-image 1s ease-in-out;
}
#logo {
width: 30%;
height: auto;
padding-top: 20px;
background: none !important;
}
#line1 {
font-size: 30px;
color: white;
text-align: center;
padding-top: 40px;
margin-bottom: 4%;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
#line2 {
font-size: 30px;
color: white;
text-align: center;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
<div class=" ui centered grid">
<div id="pictures" class="ui containcer">
<h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
<img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
<h1 id="line2">Sophomores Leaders Impacting, Developing, and Educating</h1>
</div>
</div>
So here is my question : How can I fix the responsiveness problem without having to use the background-url property (So just have img tags in myhtml)? And fyi I am using Semantic UI instead of Bootstrap.
First, I would like to mention that this would be a great use of css grid. But to answer your question and to pick up from what you have started. In order to make your images responsive without using background you need them to have a width: 100% and a height: auto. I modified your code a bit to show this would work in your question. Notice I made a wraper class with the position of relative and an inner class with position of absolute. The inner class contains your text and can text-align: center here. Your text and logo will now be on top of the image and centered. You will need media queries to change your text size to fit within the image on smaller screens. If you want to vertically align your inner class you might want to check out this link: http://vanseodesign.com/css/vertical-centering/ for some more details.
.res-image {
width: 100%;
height: auto;
}
#logo {
width: 30%;
height: auto;
padding-top: 20px;
}
#line1 {
font-size: 30px;
color: white;
padding-top: 40px;
margin-bottom: 4%;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px
1px 0 #000, 1px 1px 0 #000;
font-family: 'IM Fell Double Pica', serif;
}
#line2 {
font-size: 30px;
color: white;
letter-spacing: 0.1em;
-webkit-text-stroke: 1px white;
}
<div class="wrapper ui centered grid">
<img class="res-image" src="https://image.ibb.co/gjfJAR/DSC_0041.jpg">
<div class="inner ui containcer">
<h1 id="line1">Service - Awareness - Commnuity Outreach</h1>
<img id="logo" src="https://image.ibb.co/bBHabb/slide.png">
<h1 id="line2">Sophomores Leaders Impacting, Developing, and
Educating</h1>
</div>
</div>
I encountered a problem when creating inner shadow for the text. I tried this method (some css does not work in such online-compilers, but the code is visible):
.text {
background-color: #565656;
font-size: 35px;
color: transparent;
text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
}
<div class="text">
Text
</div>
The result is a light gray text, but I need the text of a different color. When I tried to change the text color and shadow color (not alpha), it became clear that, apparently, "background-clip: text;" do not cut the shadow in the text area, and I see a blurred silhouette outside the contours of letters.
This is what happens (the text and shadow colors are wrong here, but the overlap is visible):
And that's what I need:
By using a background color the same as main shadow color it's possible, there may be other ways but this is the most common one I know of.
Source code -- https://codepen.io/vincicat/pen/zikrC
body {
/* This has to be same as the text-shadows below */
background: #def;
}
h1 {
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 2em;
line-height: 1em;
text-align:center;
}
.inset-text {
/* Shadows are visible under slightly transparent text color */
color: rgba(10, 60, 150, 0.8);
text-shadow: 1px 4px 6px #def, 0 0 0 #000, 1px 4px 6px #def;
}
/* Don't show shadows when selecting text */
::-moz-selection, ::selection {
background: #5af;
color: #fff;
text-shadow: none;
}
<h1 class="inset-text">Inset text-shadow trick</h1>
.text {
font-size: 50px;
display:flex;
justify-content: center;
font-stretch: ultra-expanded;
color: rgb(96, 32, 24);
background-color: rgb(186, 186, 186);
background-image: url(http://previews.123rf.com/images/auborddulac/auborddulac1201/auborddulac120100059/12000991-Dotted-yellow-background-Stock-Photo.jpg);
text-shadow: rgb(224, 224, 224) 1px 1px 0px;
}
<div class="text">
Text
</div>
I'm currently making a checkout/thankyouforyourorder page for a webshop, and i made different borders with text in them explaining the process after you succesfully placed an order. I gave my borders an orange color and have 4 of them in a row under each other. I want an orange line in the center of them all so i can link them together and style them so i can make a chronologic process of how their order arrives at home. I hope this makes sense, because i have no clue of how to explain it any other way and i can't wrap my head around where i have to look or what to look for. Can anyone who understands this help me?
.opsomming {
width: 600px;
border: 1px;
border-style: solid;
padding: 5px;
margin-top: 3;
border-color: #FFA500;
box-shadow: 2px 2px 2px ##3F3F3F;
font-family: Georgia, Times;
font-weight: 400;
border-radius: 3px;
background-color: #FFBA43;
}
this is 1 of the borders, what i want to do is make a vertical line in the middle of them all, so i can link them together.
You mean like this?
HTML
<div class="leftline-wrap">
<div class="opsomming">content</div>
<div class="opsomming">content</div>
<div class="opsomming">content</div>
<div class="opsomming">content</div>
</div>
CSS
.opsomming {
width: 600px;
border: 1px;
border-style: solid;
padding: 5px;
margin-top: 3;
border-color: #FFA500;
box-shadow: 2px 2px 2px #3F3F3F;
font-family: Georgia, Times;
font-weight: 400;
border-radius: 3px;
background-color: #FFBA43;
}
.opsomming {
margin-left:10px;margin-bottom:5px;max-width: 90%;position:relative;
}
.opsomming:before {
display:block;
content: "";
border-top: 1px solid #FFA500;
width:10px;
height:1px;
position:absolute;
left:-10px;
top:45%;
margin-top: 0px;
margin-left:-1px;
}
.leftline-wrap {
border-left: 1px solid #FFA500;
}
(1) https://jsfiddle.net/q6xzxoan/2/
or like this
(2) https://jsfiddle.net/9ua89hds/4/