|
|
@@ -0,0 +1,61 @@
|
|
|
+<!DOCTYPE html>
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<meta charset="utf-8">
|
|
|
+<title>3 shapes - CSS Gradient Rounded Borders</title>
|
|
|
+<style>
|
|
|
+body {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-content: center;
|
|
|
+ align-items: center;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ min-height: 100vh;
|
|
|
+ margin: 0;
|
|
|
+ background-image: linear-gradient(#111, #050505);
|
|
|
+ --img-url: url(https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=350&h=350&fit=crop&crop=faces);
|
|
|
+}
|
|
|
+
|
|
|
+.headshot {
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin: 20px;
|
|
|
+ height: calc(150px + 6vw);
|
|
|
+ width: calc(150px + 6vw);
|
|
|
+ border: calc(8px + 0.2vw) solid transparent;
|
|
|
+ background-origin: border-box;
|
|
|
+ background-clip: content-box, border-box;
|
|
|
+ background-size: cover;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.5);
|
|
|
+}
|
|
|
+
|
|
|
+.headshot-1 {
|
|
|
+ border-radius: 30%;
|
|
|
+ background-image: var(--img-url), linear-gradient(#f9f047, #0fd850);
|
|
|
+}
|
|
|
+
|
|
|
+.headshot-2 {
|
|
|
+ border-radius: 50%;
|
|
|
+ background-image: var(--img-url), linear-gradient(to bottom right, #ff3cac, #562b7c, #2b86c5);
|
|
|
+}
|
|
|
+
|
|
|
+.headshot-3 {
|
|
|
+ border-radius: 50% 10%;
|
|
|
+ background-image: var(--img-url), linear-gradient(to bottom left, #f83600, #f9d423);
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<div class="headshot headshot-1"></div>
|
|
|
+<div class="headshot headshot-2"></div>
|
|
|
+<div class="headshot headshot-3"></div>
|
|
|
+
|
|
|
+<script>
|
|
|
+// https://codepen.io/GeorgePark/pen/EEGJEj
|
|
|
+</script>
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
221V