Pinked Border

Developer
Joey Hoer
Size
4,630 Kb
Views
54,648
  1. Pinked Border Previews
  2. Pinked Border HTML Codes
  3. Pinked Border CSS Codes
  4. Pinked Border JS Codes

How do I make an pinked border?

An illustration of pinked borders using a variety of methods. Two are created with SVG data URIs, and one uses a pseudo element with linear gradients to simulate a border image. Each has a drop shadow in supported browsers.. What is a pinked border? How do you make a pinked border? This script and codes were developed by Joey Hoer on 14 September 2022, Wednesday.

Pinked Border Previews
IQ Test

Pinked Border - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pinked Border</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="svg-bi svg-ds"> <h1>SVG Border Image</h1> <p>(SVG Drop Shadow)</p>
</div>
<div class="pseudo gradient"> <div> <h1>Pseudo Element Linear Gradients</h1> <p>(CSS Drop Shadow)</p> </div>
</div>
<div class="svg-bi css-ds"> <h1>SVG Border Image</h1> <p>(CSS Drop Shadow)</p>
</div> <script src="js/index.js"></script>
</body>
</html>

Pinked Border - Script Codes CSS Codes

/* SVG Data URI & Border Image (with SVG Drop Shadow) */
/* SVG Data URI & Border Image */
.svg-ds { position: relative; z-index: 2; background-color: teal; -o-border-image: url('data:image/svg+xml,') 27.27273% 26.5625% repeat; border-image: url('data:image/svg+xml,') 27.27273% 26.5625% repeat; border-width: 0 0 18px; border-style: solid; background-clip: padding-box; margin-bottom: -18px;
}
/* Liner Gradients & Pseudo Element */
.pseudo { position: relative; z-index: 1; position: relative; box-sizing: border-box; background-clip: padding-box; border-bottom: 15px solid transparent; margin-bottom: -15px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px); background-color: #ad424e;
}
.pseudo:after { content: ''; position: absolute; display: block; width: 100%; height: 15px; bottom: -15px; left: 0; color: #ad424e; background-image: -webkit-linear-gradient(45deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%), -webkit-linear-gradient(135deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%); background-image: linear-gradient(45deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%), linear-gradient(-45deg, transparent 33.333%, 33.333%, currentColor 66.667%, transparent 66.667%); background-size: 30px 60px; background-position: 50% -45px; background-repeat: repeat-x; z-index: 1;
}
/* SVG Data URI & Border Image */
.css-ds { background-color: orange; -o-border-image: url('data:image/svg+xml,') 0 0 100% repeat; border-image: url('data:image/svg+xml,') 0 0 100% repeat; border-width: 0 0 15px; border-style: solid; background-clip: padding-box; margin-bottom: -10px; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px); filter: drop-shadow(rgba(0, 0, 0, 0.75) 0px 1px 2px);
}
/******************* Unrelated Styles
********************/
body { background: #ccc; /* display: table; */ height: 100%; width: 100%; padding-bottom: 50px;
}
body > div { text-align: center; box-sizing: border-box; color: white; font: bold 0.75em/1.3 sans-serif; padding: 2em; -webkit-transform: translatez(0); transform: translatez(0);
}
body > div + div { padding-top: calc(2em + 15px);
}
h1, p { margin: 0; white-space: pre-line;
}
html { height: 100%;
}

Pinked Border - Script Codes JS Codes

/* Works best in Webkit */
/* Inline XML data URI fix */
/* Some browsers (most browsers) don't render inline XML data URI's unless they are escaped. */
(function() {
if(!window.StyleFix) return;
if(hasxmldatauri()) return;
// Test unescaped XML data uri
function hasxmldatauri() { var img = new Image(); datauri = 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 1,1" fill="#000"></svg>'; img.src = datauri; return (img.width == 1 && img.height == 1);
}
StyleFix.register(function(css) { return css.replace(RegExp(/url\(\'data:image\/svg\+xml,(.*)\'\)/gi), function($0, svg) {	return "url('data:image/svg+xml," + escape(svg) + "')";	});
});
})();
Pinked Border - Script Codes
Pinked Border - Script Codes
Home Page Home
Developer Joey Hoer
Username joeyhoer
Uploaded September 14, 2022
Rating 4
Size 4,630 Kb
Views 54,648
Do you need developer help for Pinked Border?

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!

Joey Hoer (joeyhoer) Script Codes
Name
Multi-line Text Fading
Admit Two
Shift
SMPTE Color Bars
CSS Preloader Animations
Responsive Text with Viewport Units
Mirrored Background
Fluid Hexagonal Grid
Perforated Leather Background
SCSS Star Badges
Create amazing captions with AI!

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!