Issue
I'm in a coding bootcamp currently and one of our projects is setting up a basic portfolio page. I have just a regular border around an image of myself currently but I'd like to make the border look like a flower to make a kind of 70's chic vibe. Any ideas on how to accomplish this? Here's my current code so far
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--link to external font-->
<style>
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&display=swap');
</style>
<link rel="stylesheet" type="text/css" href="./assets/style.css">
<title>Graham Johnson Portfolio</title>
</head>
<body>
<header>
<nav class="text-center">
<ul>
<li> <a href="https://github.com/graham1996" target="_blank">Github</a></li>
<li> <a href="https://www.linkedin.com/in/graham-johnson-035a6823a" target="_blank">Linkedin</a></li>
<li> <a href="#projects">Projects</a></li>
<li> <a href="#about">About</a></li>
<li> <a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
<main>
<h1 class="text-center">Graham Johnson</h1>
<figure>
<img src="./assets/images/IMG_6750.jpg" alt="Photo of Graham" class="photo">
</figure>
<section id="about">
<h1 class="text-center">Let's Get to Know Each Other</h1>
<figcaption class="text-center">Nice to meet you! I'm Graham, a 26 year old full stack bootcamp student
currently learning all about the wonderful world of web development. I started this journey in June
2022, and I can't wait to see where it takes me.</figcaption>
</section>
<section id="projects">
<h2 class="text-center">Project One</h2>
<a
href="./assets/placeholder/index.html" target="_blank">
<img src="https://via.placeholder.com/600x400/fffbe1/e79866."
alt="blank placeholder image containing text that reads 600 x 400"></a>
<div class="wrap">
<h2 class="text-center">Project Two</h2>
<a
href="./assets/placeholder/index.html" target="_blank">
<img src="https://via.placeholder.com/300x200/fffbe1/e79866."
alt="blank placeholder image containing text that read 300 x 200" class="project two"></a>
<h2 class="text-center">Project Three</h2>
<a
href="./assets/placeholder/index.html" target="_blank">
<img src="https://via.placeholder.com/300x200/fffbe1/e79866."
alt="blank placeholder image containing text that read 300 x 200" class="project two"></a>
</section>
<section id="contact">
<h2 class="text-center">Have a Question?</h2>
<h3 class="text-center">Don't Be Shy!</h3>
<p class="text-center">Email me at: nataliegrahamj@gmail.com</p>
<form>
<ul>
<li>
<label class="text-right" for="name">Name:</label>
<input type="text" id="name" name="user-name">
</li>
<li>
<label class="text-right" for="email">Email:</label>
<input type="text" id="email" name="user-email">
</li>
<li>
<label class="text-right" for="message">Message:</label>
<input type="text" id="message" name="user-message">
</li>
</ul>
<div class="text-center">
<button type="submit">SEND</button>
</div>
</form>
</section>
</main>
<footer class="text-center">
© 2022 Graham Johnson
</footer>
</body>
</html>
CSS
/* Universal Selector */
* {
margin:0;
padding:0;
}
html {
background: url(images/pexels-dom-j-310452.jpg) no-repeat center fixed;
background-size: cover;
}
/* Element Selectors */
body {
position: relative;
font-family: 'DM Serif Display', sans-serif;
font-size: 20px;
background-color: rgb(227, 146, 165);
color: #FFFBE1;
margin: 5%;
}
h1,
h2 {
margin: 20px;
font-family: 'DM Serif Display', sans-serif;
}
main {
padding: 60px 0;
font-family: 'DM Serif Display', sans-serif;
}
li {
display: inline;
padding: 0px 20px;
text-decoration: none;
}
a {
text-decoration: none;
color: #EFBD92;
}
header {
height: 60px;
width: 100%;
line-height: 60px;
background-color: #FFFBE1;
position: static;
}
footer {
height: 60px;
width: 100%;
line-height: 60px;
background-color: #FFFBE1;
}
.photo {
width:200px;
display: block;
border-radius:50%;
margin-left: auto;
margin-right: auto;
}
footer {
position: absolute;
margin-top: 0;
bottom: 0;
/*border-bottom: 10px solid #4F4846;*/
color: #EFBD92;
}
figure {
margin-bottom: 40px;
}
img {
display: block;
margin: 20px auto;
border: 8px solid #EFBD92;
}
#about {
margin-bottom: 0;
padding: 20px 10px 40px 10px;
background-color: #EFBD92;
}
#projects {
margin-bottom: 0;
padding: 20px 10px 40px 10px;
background-color: #E79866;
}
#contact {
margin-bottom: 0;
padding: 20px 10px 40px 10px;
/*border-top: 3px solid white;*/
background-color: #E392A5;
}
form {
/* Center the form on the page */
margin: 0 auto;
width: 500px;
padding: 10px;
border: 5px solid #FFFBE1;
border-radius: 20px;
}
label {
display: inline-block;
width: 100px;
}
input,
textarea {
box-sizing: border-box;
width: 300px;
border: 1px solid wheat;
border-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
textarea {
vertical-align: top;
height: 60px;
}
button {
height: 40px;
width: 120px;
background-color: #FFFBE1;
color: #E79866;
font-family: 'DM Serif Display', Georgia, 'Times New Roman', Times, serif;
border: 1px solid wheat;
border-radius: 25px;
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
border-bottom-left-radius: 25px;
}
/* Class Selectors */
.text-center {
text-align: center;
}
footer {
/*border-top: 3px solid white;*/
}
.text-right {
text-align: right;
font-family:'DM Serif Display', Georgia, 'Times New Roman', Times, serif;
}
@media screen {
}
Solution
You could do this with mask-image property, it works similar to background-image but hides the content that doesn't fit in the image. In the below example I've used a base64 encoded SVG but you could use a PNG instead!
Keep pressing the Run code snippet to see a different image appear
There's a great CSS Tricks article about Clipping and Masking which explains this concept in great detail!
.maskImg {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM224 445.1c-36.36-6.141-69.2-22.48-95.59-46.04L224 322.6V445.1zM288 322.6l95.59 76.47C357.2 422.6 324.4 438.1 288 445.1V322.6zM64 256c0-94.95 69.34-173.8 160-189.1v173.7l-135.7 108.6C72.86 321.6 64 289.8 64 256zM423.7 349.2L288 240.6V66.89C378.7 82.2 448 161.1 448 256C448 289.8 439.1 321.6 423.7 349.2z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zM224 445.1c-36.36-6.141-69.2-22.48-95.59-46.04L224 322.6V445.1zM288 322.6l95.59 76.47C357.2 422.6 324.4 438.1 288 445.1V322.6zM64 256c0-94.95 69.34-173.8 160-189.1v173.7l-135.7 108.6C72.86 321.6 64 289.8 64 256zM423.7 349.2L288 240.6V66.89C378.7 82.2 448 161.1 448 256C448 289.8 439.1 321.6 423.7 349.2z'/%3E%3C/svg%3E");
}
.maskImg:nth-child(2) {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 287.4V32c0-17.67-14.31-32-32-32S192 14.33 192 32v216.3C218.7 248.4 243.7 263.1 256 287.4zM170.8 251.2c2.514-.7734 5.043-1.027 7.57-1.516L93.41 51.39C88.21 39.25 76.34 31.97 63.97 31.97c-20.97 0-31.97 18.01-31.97 32.04c0 4.207 .8349 8.483 2.599 12.6l81.97 191.3L170.8 251.2zM416 224c-17.69 0-32 14.33-32 32v64c0 17.67 14.31 32 32 32s32-14.33 32-32V256C448 238.3 433.7 224 416 224zM320 352c17.69 0 32-14.33 32-32V224c0-17.67-14.31-32-32-32s-32 14.33-32 32v96C288 337.7 302.3 352 320 352zM368 361.9C356.3 375.3 339.2 384 320 384c-27.41 0-50.62-17.32-59.73-41.55c-7.059 21.41-23.9 39.23-47.08 46.36l-47.96 14.76c-1.562 .4807-3.147 .7105-4.707 .7105c-6.282 0-12.18-3.723-14.74-9.785c-.8595-2.038-1.264-4.145-1.264-6.213c0-6.79 4.361-13.16 11.3-15.3l46.45-14.29c17.2-5.293 29.76-20.98 29.76-38.63c0-34.19-32.54-40.07-40.02-40.07c-3.89 0-7.848 .5712-11.76 1.772l-104 32c-18.23 5.606-28.25 22.21-28.25 38.22c0 4.266 .6825 8.544 2.058 12.67L68.19 419C86.71 474.5 138.7 512 197.2 512H272c82.54 0 151.8-57.21 170.7-134C434.6 381.8 425.6 384 416 384C396.8 384 379.7 375.3 368 361.9z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 287.4V32c0-17.67-14.31-32-32-32S192 14.33 192 32v216.3C218.7 248.4 243.7 263.1 256 287.4zM170.8 251.2c2.514-.7734 5.043-1.027 7.57-1.516L93.41 51.39C88.21 39.25 76.34 31.97 63.97 31.97c-20.97 0-31.97 18.01-31.97 32.04c0 4.207 .8349 8.483 2.599 12.6l81.97 191.3L170.8 251.2zM416 224c-17.69 0-32 14.33-32 32v64c0 17.67 14.31 32 32 32s32-14.33 32-32V256C448 238.3 433.7 224 416 224zM320 352c17.69 0 32-14.33 32-32V224c0-17.67-14.31-32-32-32s-32 14.33-32 32v96C288 337.7 302.3 352 320 352zM368 361.9C356.3 375.3 339.2 384 320 384c-27.41 0-50.62-17.32-59.73-41.55c-7.059 21.41-23.9 39.23-47.08 46.36l-47.96 14.76c-1.562 .4807-3.147 .7105-4.707 .7105c-6.282 0-12.18-3.723-14.74-9.785c-.8595-2.038-1.264-4.145-1.264-6.213c0-6.79 4.361-13.16 11.3-15.3l46.45-14.29c17.2-5.293 29.76-20.98 29.76-38.63c0-34.19-32.54-40.07-40.02-40.07c-3.89 0-7.848 .5712-11.76 1.772l-104 32c-18.23 5.606-28.25 22.21-28.25 38.22c0 4.266 .6825 8.544 2.058 12.67L68.19 419C86.71 474.5 138.7 512 197.2 512H272c82.54 0 151.8-57.21 170.7-134C434.6 381.8 425.6 384 416 384C396.8 384 379.7 375.3 368 361.9z'/%3E%3C/svg%3E");
}
.maskImg:nth-child(3) {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M0 190.9V185.1C0 115.2 50.52 55.58 119.4 44.1C164.1 36.51 211.4 51.37 244 84.02L256 96L267.1 84.02C300.6 51.37 347 36.51 392.6 44.1C461.5 55.58 512 115.2 512 185.1V190.9C512 232.4 494.8 272.1 464.4 300.4L283.7 469.1C276.2 476.1 266.3 480 256 480C245.7 480 235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1 .0003 232.4 .0003 190.9L0 190.9z'/%3E%3C/svg%3E");
}
/* STYLING FOR SNIPPET -- NOT RELEVANT TO ANSWER */
body { height: 100vh; margin: 0; text-align: center }
.maskImg { aspect-ratio: 1/1; display: inline-flex; filter: drop-shadow(50px 10px 4px white); margin: auto; max-height: 100%; max-width: 32vw }
@-webkit-keyframes __bgSlide { from { background-position: left top } to { background-position: right bottom } }
@keyframes __bgSlide { from { background-position: left top } to { background-position: right bottom } }
body { background-image: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%), linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%), linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%); background-size: 300%; animation-play-state: running; -webkit-animation-play-state: running; animation-name: __bgSlide; -webkit-animation-name: __bgSlide; animation-direction: alternate; -webkit-animation-direction: alternate; animation-duration: 5000ms; -webkit-animation-duration: 5000ms; animation-fill-mode: both; -webkit-animation-fill-mode: both; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; animation-timing-function: linear; -webkit-animation-timing-function: linear }<img class="maskImg" src="https://picsum.photos/300?random=1">
<img class="maskImg" src="https://picsum.photos/300?random=2">
<img class="maskImg" src="https://picsum.photos/300?random=3">Answered By - Simp4Code
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.