IndianaGirl Posted October 6 Posted October 6 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; } } }
tuanphan Posted October 7 Posted October 7 What is your site url? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment