CSS3 Border Image
How do I make an css3 border image?
My brother is currently taking a class in HTML/CSS. He sent me 3 image slices - top, repeat-y and bottom to create a container like the one on this page. This felt very 2005 so I decided to try to replicate the effect with the CSS3 border-image property. . What is a css3 border image? How do you make a css3 border image? This script and codes were developed by Andy McFee on 09 August 2022, Tuesday.
CSS3 Border Image - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Border Image</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ * { box-sizing: border-box;
}
body { padding: 20px; background: #eee;
}
.scroll { width: 100%; margin: 0 auto; min-height: 200px; border-style: solid; border-width: 17px; border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/152/scroll-border.png) 17 fill repeat; color: #483d28; text-shadow: 1px 1px 0 #e9e3d8;
}
@media (min-width: 300px) { .scroll { height: 50vw; max-height: 60vh; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="scroll"> <h1>Border Image</h1> <p>I'm a container using the CSS3 border-image property.</p> <p>Resize this window to see how it scales.</p>
</div>
<h4>Source Image:</h4>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/152/scroll-border.png" alt="" /> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
CSS3 Border Image - Script Codes CSS Codes
* { box-sizing: border-box;
}
body { padding: 20px; background: #eee;
}
.scroll { width: 100%; margin: 0 auto; min-height: 200px; border-style: solid; border-width: 17px; border-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/152/scroll-border.png) 17 fill repeat; color: #483d28; text-shadow: 1px 1px 0 #e9e3d8;
}
@media (min-width: 300px) { .scroll { height: 50vw; max-height: 60vh; }
}
Developer | Andy McFee |
Username | andymcfee |
Uploaded | August 09, 2022 |
Rating | 3 |
Size | 2,853 Kb |
Views | 70,840 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Flexbox vertcially centered nav text | 4,011 Kb |
Flip Card | 4,615 Kb |
Flexbox Header Demo | 2,618 Kb |
CSS Loading Spinners | 3,969 Kb |
Responsive Boxes without Images | 4,120 Kb |
Round Music Player with Official.fm API | 6,473 Kb |
BEM Flexbox Nav build for a workshop | 3,126 Kb |
Responsive Web App Panel Layout | 5,055 Kb |
Single-page app layout with animating transitions | 4,845 Kb |
Page Transitions - Vertical Sliding | 4,943 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Impress JS Algorhytmic Generator | Jeffscottward | 7,906 Kb |
Vue Transition | Chenming142 | 4,561 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
Snow collision | Wojtek1150 | 3,542 Kb |
Pure CSS Torch Light | Juliendargelos | 2,727 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Fading text with CSS blend modes | Giana | 3,305 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!