Dynamic & parametric textured photo frame
How do I make an dynamic & parametric textured photo frame?
What is a dynamic & parametric textured photo frame? How do you make a dynamic & parametric textured photo frame? This script and codes were developed by Sébastien Lombard on 16 September 2022, Friday.
Dynamic & parametric textured photo frame Previews
Dynamic & parametric textured photo frame - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic & parametric textured photo frame</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/https___codepen_io_sebl_p.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <header id="title"> <h1><i class="ion-image"></i> Dynamic & parametric textured photo frame</h1>
</header>
Github repository available <a href="https://github.com/Englar/FineArt.scss" target="_blank">HERE</a><br /><br />
<figure class="item"> <div class="inner"> <img src="http://placekitten.com/g/400/400" /> </div> <figcaption class="title"> <h1>Title</h1> You can change the image source as you want the frame will automaticly adjust, and change the frame width and mask width with the SCSS variables. </figcaption>
</figure>
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css" />
</body>
</html>Dynamic & parametric textured photo frame - Script Codes CSS Codes
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,300");
html,
body { height: 100%;
}
body { text-align: center; padding: 3rem; padding-top: 0; background-image: radial-gradient(ellipse at top, #ffffff, #bdc3c7 80%); font-family: 'Open Sans', sans-serif; font-weight: 300;
}
a { color: white; text-decoration: none;
}
.item { list-style-type: none; position: relative; display: inline-block; background-color: black; padding: 2rem; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0; box-shadow: rgba(0, 0, 0, 0.7) 0 1rem 2rem 0;
}
.item:before, .item:after { content: ' '; display: block; background-image: url(https://dl.dropboxusercontent.com/u/20104014/codepen/frame-h.png); -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position: absolute; left: 0; height: 2rem; width: 100%;
}
.item:before { background-position: top center; top: 0;
}
.item:after { background-position: bottom center; bottom: 0;
}
.inner { position: relative; padding: 2rem; background-color: white; -moz-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset; -webkit-box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset; box-shadow: rgba(0, 0, 0, 0.7) 0 0 1.5rem 0 inset;
}
.inner:before, .inner:after { content: ' '; background-image: url(https://dl.dropboxusercontent.com/u/20104014/codepen/frame-v.png); display: block; -moz-background-size: cover; -o-background-size: cover; -webkit-background-size: cover; background-size: cover; position: absolute; top: -2rem; width: 2rem; height: calc(100% + 2rem*2);
}
.inner:before { background-position: left center; left: -2rem;
}
.inner:after { background-position: right center; right: -2rem;
}
.inner img { display: block; border: 1px solid rgba(0, 0, 0, 0.2);
}
.title { text-align: left; position: absolute; left: 0; margin-top: calc(2rem + 1.5rem); color: #666666; line-height: 1.5rem;
}
.title h1 { font-size: 2rem; margin-bottom: 0.5rem; color: black;
}
| Developer | Sébastien Lombard |
| Username | SebL |
| Uploaded | September 16, 2022 |
| Rating | 4.5 |
| Size | 3,729 Kb |
| Views | 24,288 |
Do you need developer help for Dynamic & parametric textured photo frame?
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!
Sébastien Lombard (SebL) Script Codes
| Name | Size |
| Perspective modal window | 3,724 Kb |
| NgServerMessages | 3,106 Kb |
| ES6 Class to get query params in string url or array of string urls | 3,158 Kb |
| Bloc hover animation | 3,452 Kb |
| Responsive grid template editor concept | 4,205 Kb |
| SoundCloud Mini player with css record animation | 5,024 Kb |
| Super simple CSS custom checkbox | 2,990 Kb |
| Super quick responsive parametric grid generator with SASS | 4,000 Kb |
| Handles | 1,792 Kb |
| Simple 2 sides title animation | 2,306 Kb |
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!
Similar Scripts & Codes
| Name | Username | Size |
| Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
| Highbrow Basic HTML Lesson 8 | Kimlarocca | 2,094 Kb |
| A Pen by Dalton Liu | Liudalton | 12,437 Kb |
| Pink expansion tunnel | Vez | 1,738 Kb |
| Random Gradients - JS | Aldlevine | 2,026 Kb |
| Scrolling Horizontal Isotope | Bramus | 2,017 Kb |
| A Pen by Patrick Cox | Pcridesagain | 2,899 Kb |
| Segments mouse following | Nosir | 2,909 Kb |
| Intake Form Page 2 | Ijantje | 4,983 Kb |
| 03 - CSS Variables | Run-time | 2,682 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!