Sincerely, Evan

Just another bloggete

Tutorial: Heading with strikethrough effect
5 Apr 2018 | Comment

  A few days ago while I had been working on my current blog design, I decided to code my own heading style for the side tabs instead to sticking to old styles. I thought I might as well share the code out:-

The HTML
<!-- strikethrough heading -->

<div class="box">
  <div class="title">Welcome</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

The CSS
body
{
  background-color:#eee;
  height:100%;
}
.box
{
  margin:auto;
  width:300px;
  border: 3px solid #aaa;
  text-align:justify;
  padding: 0 10px 10px 10px;
  font-family: Helvetica, sans serif;
  background: url('https://s17.postimg.org/san8pqq4f/border-grey.png') 0 8px repeat-x;
  background-color:white;
}

.title
{
  text-align:center;
  padding-top:7px;
  color:#aaa;
  font-family: Georgia, serif;
  font-size:18px;
  letter-spacing:1px;
  font-weight:bold;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; /* text stroke */
}

Demo
See the Pen 'Strikethrough' Heading style by Chevvycherokee (@chevvycherokee) on CodePen.

Labels: ,

about

Hi, I'm Evan and I maintain this blog with my occasional musings. Apart from writing, I like being occupied with anything artsy, I enjoy the company of books and I like unleashing my inner nerd through occasional coding. My ideal day would be holding a book in one hand, matcha in the other, ears plugged and a cat purring on my lap.

links