Border-image for Frames

Developer
Anya Craig
Size
2,282 Kb
Views
42,504
  1. Border-image for Frames Previews
  2. Border-image for Frames HTML Codes
  3. Border-image for Frames CSS Codes

How do I make an border-image for frames?

Using the background-image property to give images fancy frames.. What is a border-image for frames? How do you make a border-image for frames? This script and codes were developed by Anya Craig on 26 August 2022, Friday.

Border-image for Frames Previews
IQ Test

Border-image for Frames - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Border-image for Frames</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <div class="wrapper left"> <img class="donkey" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQZK5hH-Pssq_Tojw-IQCnAXKDulAzZZPSEESPMGMDB5TRG7aSZPzq1yI_Q" alt="a little donkey sniffing some irises"/> </div><!-- /.wrapper-left --> <div class="wrapper middle"> <img class="duck" src="http://www.pageresource.com/wallpapers/wallpaper/free-widescreen-animals-duckling_100458.jpg" alt="a semi-underwater view of a duckling swimming" /> </div><!-- /.wrapper-middle --> <div class="wrapper right"> <img class="spider" src="http://images.fineartamerica.com/images-medium-large/big-scary-spider-cheryl-stephenson.jpg" alt="a portrait of a handsome hairy spider"/> </div> <!--/.wrapper-right -->
</body>
</body>
</html>

Border-image for Frames - Script Codes CSS Codes

html { box-sizing: border-box;
}
*, *:before, *:after { box-sizing: inherit;
}
body { background-image: url(http://pinso.co.uk/wp-content/uploads/2012/09/PINSO-CREATIVE-GRADUATES-FARROW-AND-BALL-PATTERN-WALLPAPER-O.jpg);
}
.wrapper { float: left;
}
.left,
.right { width: 30%
}
.middle { width: 40%;
}
img { display: block; transition: .4s all ease-in-out;
}
.donkey { width: 80%; margin: 50px 8%; border: 70px solid transparent; border-image-source: url(http://www.eventideguestapartment.com/images/gallery-frame-2.png); border-image-slice: 70; border-image-repeat: round;
}
.donkey:hover { transform: rotate(-5deg);
}
.duck { width: 95%; margin: 20px auto; border: 100px solid transparent; border-image-source: url(http://mcapraro.com/projects/downloads/picture-frame-1.png); border-image-slice: 120; border-image-repeat: round;
}
.duck:hover { transform: rotate(3deg);
}
.spider { width: 85%; margin: 40px auto; border: 50px solid transparent; border-image-source: url(https://s-media-cache-ak0.pinimg.com/236x/62/4a/b7/624ab7b6fc84f5079237532406ce388f.jpg); border-image-slice: 46 49; border-image-repeat: round;
}
.spider:hover { transform: rotate(-6deg);
}
Border-image for Frames - Script Codes
Border-image for Frames - Script Codes
Home Page Home
Developer Anya Craig
Username AnyaCraig
Uploaded August 26, 2022
Rating 3
Size 2,282 Kb
Views 42,504
Do you need developer help for Border-image for Frames?

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!

Anya Craig (AnyaCraig) Script Codes
Name
Fair to Foul
Animating background foofs
Responsive Square with Background Image
Responsive Image Height Test
Flex Baseline Test
Paint by Number
Pawprints animation
Maple Blossom
Cupid in Pursuit
Making an img fill a div while maintaining aspect ratio - Three Imperfect Solutions
Create amazing love letters 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!