How to add a text outline to a heading

Report · Jul 10, 2020

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>

Report · Jul 10, 2020

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:

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

Report · Jul 11, 2020

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.

Report · Jul 11, 2020

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%}

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jul 11, 2020

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