Jump to content

How to add this old style custom border to entire site

Recommended Posts

Posted

Site URL: https://onaircode.com/css-border-examples/

I finally found the style I want to use as a site border; however in this example it contains content in it, as it's being used as a content block. I just want a border to use for the entire site to give  it site a "story" look. 

I'm not sure how to modify it correctly to use as a global site border. I'm still in the css learning phase. Additionally, the code might be in need of some tweaks, as it is several years old. If anyone can help edit it, that would be so great!!! 

On this site, https://onaircode.com/css-border-examples/, it's the first example; 1. Fancy border.

 

The code they use ...

html:

.box
  .box-inner
    %h1 Lorem Ipsum
    %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum laudantium odit, eligendi architecto eveniet labore error minus, temporibus doloremque, amet itaque. Voluptatum rerum dolorem nesciunt totam. Saepe reprehenderit dignissimos error!

css:

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);

$color-alpha: #b78846;

* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
  &:before, &:after {
    box-sizing: border-box;
  }
}

html, body {
  height: 100%;
  background: radial-gradient(#003, #000);
  overflow: hidden;
  color: #fff;
  font-family: 'Open Sans';
  font-size: 18px;
}

h1 {
  font-weight: 700;
  margin-bottom: 0.5em;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background-color: rgba(#000, 0.5);
  width: 100%;
  max-width: 600px;
  padding: 5px;
  border: 2px solid $color-alpha;
  &:before, &:after {
    content: "•";
    position: absolute;
    width: 14px;
    height: 14px;
    font-size: 14px;
    color: $color-alpha;
    border: 2px solid $color-alpha;
    line-height: 12px;
    top: 5px;
    text-align: center;
  }
  &:before {
    left: 5px;
  }
  &:after {
    right: 5px;
  }
  .box-inner {
    position: relative;
    border: 2px solid $color-alpha;
    padding: 40px;
    &:before, &:after {
      content: "•";
      position: absolute;
      width: 14px;
      height: 14px;
      font-size: 14px;
      color: $color-alpha;
      border: 2px solid $color-alpha;
      line-height: 12px;
      bottom: -2px;
      text-align: center;
    }
    &:before {
      left: -2px;
    }
    &:after {
      right: -2px;
    }
  }
}

 

fancy border.png

  • Replies 1
  • Views 434
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.