I want to create following font style. If not possible I want to be as close to this style as possible. I need to support IE so I cannot use text-stroke.
The closest way I have come is to use multiple text-shadow attributes, for example:
h1 {
color: #2e536f;
font-weight: bold;
font-family: sans-serif;
font-size: 7em;
text-transform: uppercase;
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff,
-2px -5px 0px #ff7c7c;
}
body {
background: #2e536f;
}
<h1>Zwei</h1>
While it does several tasks, I cannot make the color transparent, to reveal the text shadow behind it.
How can I solve this?
If you need to support IE, your best bet is to go for SVG. You can easily give stroke and/or shadow to text to make the exact style you are looking for. This can fit titles but might be a hassle for text that spans several lines though.
Here is your example with an inline SVG:
body {
background: #2e536f;
}
svg {
font-weight: bold;
font-family: sans-serif;
}
<svg viewbox="0 0 10 3">
<text font-size="3" x="1.5" y="2.5" dx="0" dy="0" fill="#FF7C7C">ZWEI</text>
<text font-size="3" x="1.5" y="2.5" dx="0.1" dy="0.15" fill="transparent" stroke="#fff" stroke-width="0.08">ZWEI</text>
</svg>
Note that using SVG (even for titles) doesn't impact SEO and google indexes SVG since 2010
body {
background: #2e536f;
}
h1 {
color: #2e536f;
font-weight: bold;
font-family: sans-serif;
font-size: 7em;
text-transform: uppercase;
text-shadow:
-1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, 1px 1px 0 #fff, 2px -5px 0px #ff7c7c
}
<h1>Zwei</h1>
Can this be close to your expected output?
Related
This question already has an answer here:
Outline effect to text in Arabic using CSS
(1 answer)
Closed 9 months ago.
webkit-text-stroke is not working suitable, I would like to have the text stroke affect like that:
but it appears like that without cutting:
as you can seen when I write long Arabic Text like thet (ملاعــــــب) or (أهــــــــلاً) it is cutting the stroke like that:
this is my code with cutting:
.myText {
font-family: 'DIN Next LT Arabic';
font-style: normal;
font-weight: 500;
font-size: 48px;
line-height: 71px;
/* identical to box height */
display: flex;
align-items: center;
text-align: right;
letter-spacing: -0.02em;
color: #FFFFFF;
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: #2A34BF;
text-shadow: 2px 1.3px 0px #E34D32, 2px 2px 0px #D6F46B;
}
I also need a multi-layes shadow to be like that in the final result:
Finally, I have resolved it and reach the final result using web the text-shadow to make all the texts joined and with about 1px stroke method provided by #kameron
and to create the multi-layered shadow I have used filter and add the numbers of drop shadow I needed
this is the final result same as the final result I needed in the post:
.bg{
background:#2A34C0;
padding:20px;
}
.myText {
font-family: 'DIN Next LT Arabic';
font-style: normal;
font-weight: 500;
font-size: 90px;
line-height: 71px;
display: flex;
align-items: center;
text-align: right;
letter-spacing: -0.02em;
color: #FFFFFF;
text-shadow:
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0,
0 0 1px #2A34C0;
filter:
drop-shadow(-1px -1px 0px #2A34C0)
drop-shadow(1px 1px 0px #2A34C0)
drop-shadow(3px 2px 0px #D6F46B)
drop-shadow(3px -1px 0px #E34D32);
}
<div class="bg">
<p class="myText">
أهــــــــلاً ملاعــــــب
</p>
</div>
<html>
<body style="font-size: 36px; background: #4488ff; color:#fff;">
<div>
<span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>
<div style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;">
<span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>
</body>
</html>
I've noticed that spanned Arabic text have gaps (tested on Chrome\FireFox). Well, I need text to be spanned and I don't think that gaps should exist, anyway I could overcome the issue?
Another option would be to use drop-shadow filter untill text-stroke works :
possible example:
span:nth-child(3) {
color: gold;
}
body {
font-size: 80px;
background: #4488ff;
color: #fff;
margin: auto;
}
html {
display: flex;
min-height: 100vh
}
<div style="filter:
drop-shadow(1px 1px 0px #000)
drop-shadow(-1px -1px 0px #000)
drop-shadow(-1px 1px 0px #000)
drop-shadow(1px -1px 0px #000)
">
<span>أ</span><span>ظ</span><span>ه</span><span>ر</span><span> </span><span>ا</span><span>ل</span><span>ك</span><span>ل</span>
</div>
Hello in Arabic there is no need to write in separate letters like English so you you need to write Full sentence with shadow for example :
// modified text
<div style="text-shadow:-1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; color:#fff">
أظهر الكل
</div>
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>
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>
Is there any way to make effects like the in the images, with just CSS?
It would be sad to lose all precious SEO because of images replacing text.
Brightness around the text
http://i.stack.imgur.com/bISVC.png
Shining text
http://i.stack.imgur.com/T9ojb.jpg
I first thought of shadows and stuff but I can't figure anything out...
Try adding a shadow like this : text-shadow: 0 0 3px #0000FF;
These effects are achieved working with multiple shadows layering colors over a dark background.
Here is an example:
.glow{
font-family: Sans-serif;
font-size: 3rem;
background: black;
color: white;
padding: 80px;
text-shadow:
1px 1px 0px gold,
-3px -0 25px red,
3px 0px 3px white,
0px 0px 15px white,
15px 10px 10px black,
0 0 40px orangered,
0 0 40px orangered,
0 0 60px orangered,
0 0 80px orangered,
0 0 80px orangered,
0 0 100px orangered,
0 0 150px orangered;
}
<h1 class="glow">Glowing CSS only</h1>