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 >
<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 >Graham Johnson</h1>
<figure>
<img src="./assets/images/IMG_6750.jpg" alt="Photo of Graham" >
</figure>
<section id="about">
<h1 >Let's Get to Know Each Other</h1>
<figcaption >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 >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 >
<h2 >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" ></a>
<h2 >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" ></a>
</section>
<section id="contact">
<h2 >Have a Question?</h2>
<h3 >Don't Be Shy!</h3>
<p >Email me at: [email protected]</p>
<form>
<ul>
<li>
<label for="name">Name:</label>
<input type="text" id="name" name="user-name">
</li>
<li>
<label for="email">Email:</label>
<input type="text" id="email" name="user-email">
</li>
<li>
<label for="message">Message:</label>
<input type="text" id="message" name="user-message">
</li>
</ul>
<div >
<button type="submit">SEND</button>
</div>
</form>
</section>
</main>
<footer >
© 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 {
}
CodePudding user response：
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,");
mask-image: url("data:image/svg xml,");
}
.maskImg:nth-child(2) {
-webkit-mask-image: url("data:image/svg xml,");
mask-image: url("data:image/svg xml,");
}
.maskImg:nth-child(3) {
-webkit-mask-image: url("data:image/svg xml,");
mask-image: url("data:image/svg xml,");
}
/* 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 src="https://picsum.photos/300?random=1">
<img src="https://picsum.photos/300?random=2">
<img src="https://picsum.photos/300?random=3">