scripted resources
scripted.neocities.org
Image
/
Music Players
/
Cursor & Bg
/
Scrollbox
/
Text
/
Miscellaneous
/
Menu
/
Home
•
Tutorial: Create frame and borders from material websites
• To hide/show images with border styles, click
Hide/Show Images
button.
Hide Images
Show all
Animation
Basic
Border
Hover
Mask
Border
<style> .border { border: 7px solid; border-image: url("border-url") 900 fill round; } </style> <img src="#" class="border">
Template
Beaded
border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/baf/heart/he32-012-c.gif") 7 fill round;
Biscuit
border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/baf/food/fo32-008-a.gif") 7 fill round;
Black
border-style: solid; border-width: 10px; border-image: url("https://dl.dropbox.com/scl/fi/6wo0voidugxmgg0a81v20/lace-border-png-37013.png?rlkey=3hn4k762e8y0v6d2v6mwrtcbr&st=5o8bpex4") 60 fill round;
Blue 1
/* (c) reijeoh */ border-width:7px; border-style:solid; border-image: url("https://64.media.tumblr.com/0bf9b5b1bc56ef2bd4a443aeec3dab08/e7a46821cfe7af87-12/s250x400/d314d89c3d9fb927d552b57cf19abec1d0b29c13.png") 7 fill round;
Blue 2
border-width:7px; border-style:solid; border-image: url("https://i.imgur.com/J6qaOtb.png") 5 fill round;
Blue 3
border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/v8iy6a8feyq041p/blue%20ver.png") 8 fill round;
Brown
border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/w5yteo6huqvmzx1/brown.png") 8 fill round;
Chocolate
border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/menu05/51a-none.gif") 9 fill round;
Flower
border-width:7px; border-style:solid; border-image: url("https://foollovers.com/mat/baf/flower/fl32-005-d.gif") 7 fill round;
Glowcross
/* (c) lovermonth */ border-width:20px; border-style:solid; border-image: url("https://i.imgur.com/nHU4cUD.gif") 20 fill round;
Golden Frame
border-width:10px; border-style:solid; border-image: url("https://i.imgur.com/I7i5Udr.png") 35 fill round;
Grey s
/*(c) solielios*/ border-width:12px; border-style:solid; border-image: url("https://i.imgur.com/Kh6qtcn.png") 11 fill round;
Hot Pink
border-width:8px; border-style:solid; border-image: url("https://i.ibb.co/h1Q3bFn/83-B27704-CEA1-4-B8-F-BF79-90-D624-EDC6-F6.png") 8 fill round;
Orange
border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/rr5se47u373c2yn/orange%20lace.png") 8 fill round;
Pink 1
border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/ROjUrNz.gif") 6 fill round;
Pink 2
border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/2jXrMdE.png") 11 fill round;
Pink 3
border-width: 8px; border-style: solid; border-image: url("https://i.imgur.com/J4IhM3e.png") 7 fill round;
Pink 4
border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/8Tk8PKV.gif") 7 fill round;
Pink 5
border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/FsgoCPW.png") 7 fill round;
Pink 7
border-width: 8px; border-style: solid; border-image: url("https://i.imgur.com/e3EPu48.png") 12 fill round;
Pink 6
/*(c) solielios*/ border-width:12px; border-style:solid; border-image: url("https://i.imgur.com/gTFIwdW.png") 11 fill round;
Pink 7
/*(c) lovermonth*/ border-style: solid; border-width: 26px 26px 26px 26px; -moz-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round; -webkit-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round; -o-border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round; border-image: url(https://i.imgur.com/PaK2h0q.gif) 26 26 26 26 round round;
Pink Paper
border-width:10px; border-style:solid; border-image: url("https://img-fotki.yandex.ru/get/4602/28257045.844/0_7d5c6_2de543e9_XXXL") 35 fill round; border-radius:15px;
Purple
border-width:8px; border-style:solid; border-image: url("https://dl.dropbox.com/s/l61yvavjx2e501e/image.png") 8 fill round;
White 1
border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/NJa4bp2.png") 8 fill round;
White 2
/*(c) baeyhkun*/ border-width: 7px; border-style: solid; border-image: url("https://i.imgur.com/8xftJ3v.gif") 7 fill round;
Yellow & Pink Heart
border-width:10px; border-style:solid; border-image: url("https://hosting.photobucket.com/albums/bb183/phyncke_graphique/Pixel-Frames/.highres/a49U000028.gif?width=450&height=278&crop=fill") 9 fill round;
Mask
<style> .myImageMask { -webkit-mask-image: url(#); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } </style> <img src="#" class="myImageMask">
Empty Template
Circle Mask
-webkit-mask-image: url(https://i.imgur.com/1PjqQS6.png); -webkit-mask-size: 200%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
Blurred Edge
background-image: url('https://64.media.tumblr.com/79a04b5e2e9b8f297bf8c0467444c4f5/tumblr_n4wzplYfWD1r3hi20o1_500.png'); width: 200px; height: 200px; /* you need to match the shadow color to your background or image border for the desired effect*/ box-shadow: 0 0 8px 8px white inset;
Fog Mask
-webkit-mask-image: url(https://i.ibb.co/JjDXBPr/ED5929-CE-1-D66-4-EC4-8-F8-A-14792-D8-F2384.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; border-radius: 15px; -webkit-mask-position: center;
Hello Kitty
/*(c) viliarreai*/ -webkit-mask-image: url(https://dl.dropbox.com/scl/fi/upfrxxysrq7ohzi4lkz1w/57a622d5e160e83551bea56ff47b4f49-removebg-preview.png?rlkey=y03l4z82olqm1xyo2waz2ssp0&st=5aa62bk8); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
Paper Mask
-webkit-mask-image: url(https://i.ibb.co/KhqQW5x/73696-B1-E-A0-D7-4529-B2-D2-FB27-F0-D5-B437.png); -webkit-mask-size: 150%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
Star Mask
/* (c) imiyaimi */ -webkit-mask-image: url(https://i.imgur.com/Nfc5Pr6.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
Nene's Mask B1 (c) solielios
Nene's Mask B2 (c) solielios
Nene's Mask B3 (c) solielios
Flower Mask Collection (c) fiorefae
Animation
Float Animation
.img-floatinganim { animation-name: floating; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes floating { 0% { transform: translate(0, 0px); } 50% { transform: translate(0, 15px); } 100% { transform: translate(0, -0px); } }
Jellymask Image
@keyframes heart{ 0%, 12%, 25%, 50% { transform: rotate(0deg); } 55% { transform: rotate(-2.5deg); } 65% { transform: rotate(3.5deg); } 75% { transform: rotate(-7deg); } 95%, 100& { transform: rotate(0deg); }} #image02{ animation: heart 1.5s ease infinite; }
Pop Animation
.img-popinoutanim { -webkit-animation: pop 1s ease-in-out infinite alternate; animation: pop 1s ease-in-out infinite alternate; -moz-animation: pop 1s ease-in-out infinite alternate; } @keyframes pop { from { transform:scale(0.95) } 50% { transform:scale(1) } to { transform:scale(0.95) } }
Spinning CD/Vinyl
<style> .disk { object-fit: cover; -webkit-mask-image: url(https://imgur.com/tDqMXc6); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; animation-duration: 3s; animation-iteration-count: infinite; animation-name: spin; animation-timing-function: linear; } @keyframes spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } } </style> <img class="disk" src="https://i.pinimg.com/474x/56/07/37/560737729f11fb19daad483447482e3a.jpg" alt="disk">
Hover
Grayscale
.img-grayscalehover{ filter: grayscale(0%); transition: .25s ease-out; } .img-grayscalehover:hover{ filter: grayscale(100%); transition: .25s ease-in; }
Heart Mask
.img-hearthover { transition: all 0.5s; display: block; transition: 1s ease; -webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png); -webkit-mask-size: 220%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .img-hearthover:hover{ transition: all 0.5s; -webkit-mask-image: url(https://dl.dropbox.com/s/2kih8ox9q2czjeg/pngfind.com-kawaii-transparent-png-621355.png); -webkit-mask-size: 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; }
Bounce
.img-infinitebouncehover { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .img-infinitebouncehover:hover { -webkit-animation-name: bounces; animation-name: bounces; } @-webkit-keyframes bounces { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounces { 0%, 100%, 20%, 50%, 80% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } }
Rotate Blur
#rotate { overflow: hidden; display: inline-block; } #rotate img { transition: transform .5s; } #rotate:hover img { transform: scale(1.25) rotate(10deg); transform-origin: 50% 50%; webkit-filter: blur(.5px); filter: blur(.5px); }
Saturate
.img-saturatedhover { filter: saturate(100%); transition: .25s ease-out; } .img-saturatedhover:hover { filter: saturate(200%); transition: .25s ease-in; }
Shake
.img-shakehover { animation: shake 0.5s; animation-iteration-count: infinite; -webkit-filter:blur(1px); -webkit-transition: .5s ease-in; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } }
Slide Right
.img-sliderighthover { -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; } .img-sliderighthover:hover { margin-left: 30px }
Star
/*(c) tubbox*/ .img-starhover { -webkit-mask-image: url(https://i.imgur.com/WPTnhzY.png); -webkit-mask-size: 250%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; transform:rotate(0deg); transition:0.3s; } .img-starhover:hover{ -webkit-mask-size: 100%; transform:rotate(-15deg); transition:0.3s; }
Tool Tip
<script> (function($) { $(document).ready(function() { $("[title]").style_my_tooltips({ tip_follows_cursor: true, tip_delay_time: 100, tip_fade_speed: 300, attribute: "title" }); }); })(jQuery); </script> <style> #s-m-t-tooltip { z-index: 9999; background: #fff; font-size: 12px; line-height: 13px; font-family:lucida console; letter-spacing: 1px; border:solid 1px; moz-border-radius-bottomright: 5px; border-bottom-right-radius: 5px; -moz-border-radius-topleft: 5px; border-top-left-radius: 5px; -moz-border-radius-bottomleft: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; border-top-right-radius: 5px; -o-transition: all 0.3s ease-out; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; text-transform: normal; color: {color:Link Title Text}; max-width: 150px; word-wrap: break-word; padding: 2px 5px 2px 6px; display: block; margin: 24px 14px 7px 12px } </style>
Basic
Dashed
border: 9px dashed purple;
Dotted
border: 9px dotted purple;
Double
border: 9px double purple;
Dropshadow
filter: drop-shadow(1px 1px 0 purple) drop-shadow(-1px 1px 0 purple) drop-shadow(0 2px 0 purple) drop-shadow(0 -1px 0 purple) drop-shadow(0 1px 1.5px purple) drop-shadow(0 -1px 1.5px purple) drop-shadow(1px -1px 1.5px purple) drop-shadow(-1px -1px 1.5px purple);
Gradient
border: 3px; border-image-slice: 1; border-image-source: linear-gradient(purple, grey);
Inset
border: 9px inset purple;
Uneven
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px; border: 3px solid #eb78ae;
