Inspiring

Question

How to add a text outline to a heading

4 replies
1776 views
Translate

Hello

How to add a stroke outline to text thicker then 1px ?

Example is I made the outline 2px and it looks ragged compared to the 1px.
Is there a better way to add a stroke outline to any text?

Also can you take an image and resize it as the screen is resized?
https://cooltext.com/Logo-Design-Keen

Example of what I want but using css.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Text Stroke</title>
<style type="text/css">

body {
 background-color: #4B7187;
 padding: 0px;
 margin-top: 50px;
 margin-bottom: 50px;
}
.container {
	max-width: 60%;
	min-width: 350px;
	background-color: #62C0FF;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 0px;
	border: 2px solid #000;
}
.header {
	background-color: #FFFFCA;
	padding: 0px;
	margin: 0px;
}
.sidebar {
 float: left;
 width: 100px;
 margin: 0px;
 padding: 15px;
}
.content {
	padding: 15px;
	float: left;
	margin: 0px;
}
.footer {
 position: relative;   
 clear: both;     
 margin: 0px;
 padding: 10px;
 text-align: center;
}
h1 {
	font-size: 400%;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #e35926;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 90px;
 }
 .stroke1 {	
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
 }
h2 {
	margin: 0px;
	padding: 0px;
	display: block;
	font-family: Georgia, "Times New Roman", Times, serif;
	color: #FFFF00;
	font-size: 350%;
}
.stroke2 {	
text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 }
 p {
	font-family: Roboto;
	font-size: 110%;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	line-height: 1.2em;
}
</style>

<div class="container">
<div class="header">
 <h1 class="stroke1">Text Stroke</h1>
</div> 
<!-- end of header -->

<div class="sidebar">
  <h3>Menu </h3>
  <p>HTML</p>
  <p>CSS</p>
  <p>Is</p>
  <p>Driving</p>
  <p>Me</p>
  <p>Crazy</p>
</div> 
<!-- end of sidebar -->
<div class="content">
<h2 class="stroke2">Header</h2>
  <p>Container / wrapper div is at 60% width of screen.<br>
    min-width is 350px
    <br>
    Random text lorem ipsum. Random text lorem ipsum. </p>
</div> 
<!-- end of content -->
<div class="footer"> 
  <p>Footer </p>
</div>
<!-- end of footer -->
</div> 
<!-- end of container -->
</body>
</html>

This topic is closed to new replies. Start a new post to keep the conversation going.

Nancy OShea

Community Expert

Responsive image.

HTML:

CSS:

/**never bigger than native file size**/

img { max-width:100%}

/**as big as parent container, some distortion may occur**/

img {width: 100%}

Translate

Nancy O'Shea— Product User & Community Expert

davidhelpAuthor

Inspiring

Thanks to all of you.
I came across this from Adobe that has helped me.

Creating Fluid Layouts & Images with CSS
https://theblog.adobe.com/creating-fluid-layouts-images-with-css

Translate

BenPleysier

Community Expert

https://css-tricks.com/adding-stroke-to-web-text/ will show you why you cannot go further than 1px without paying a penalty.

For responsive font sizes (RFS), I use the inbuilt Bootstrap style rules. Without Bootstrap, you can still use the Bootstrap style rules for RFS if you add the following to your style sheet.

@media (max-width: 1200px) {
  legend {
    font-size: calc(1.275rem + 0.3vw);
  }
  h1,
  .h1 {
    font-size: calc(1.375rem + 1.5vw);
  }
  h2,
  .h2 {
    font-size: calc(1.325rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(1.3rem + 0.6vw);
  }
  h4,
  .h4 {
    font-size: calc(1.275rem + 0.3vw);
  }
  .display-1 {
    font-size: calc(1.725rem + 5.7vw);
  }
  .display-2 {
    font-size: calc(1.675rem + 5.1vw);
  }
  .display-3 {
    font-size: calc(1.575rem + 3.9vw);
  }
  .display-4 {
    font-size: calc(1.475rem + 2.7vw);
  }
  .close {
    font-size: calc(1.275rem + 0.3vw);
  }
}

This is the result:

Translate

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

O

osgood_

Legend

Personally l'm not in favour of fluid responsive text as its less exacting than using responsive text, but l guess its just another example of where we are heading, it will do if it means less work. The jumping effect using responsive text is not a consideration as no one apart from dorky web developers when they are testing their creations change the width of their browser window.......just my thoughts.

Translate

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.