From 2e532fd70669c4352934e0f204672ba4639c4f11 Mon Sep 17 00:00:00 2001 From: Anusha S Date: Wed, 26 Oct 2022 12:17:01 +0530 Subject: [PATCH] added frames issue #3 --- assets/frames/README.md | 16 +++ assets/frames/index.html | 58 ++++++++++ assets/frames/styles.css | 234 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 308 insertions(+) create mode 100644 assets/frames/README.md create mode 100644 assets/frames/index.html create mode 100644 assets/frames/styles.css diff --git a/assets/frames/README.md b/assets/frames/README.md new file mode 100644 index 0000000..2bc11c0 --- /dev/null +++ b/assets/frames/README.md @@ -0,0 +1,16 @@ +# Frame Designs + +### Frame 1, 2, and 3 +- Inspired from : Chris Smith's CSS Picture Frame, [Codepen](https://codepen.io/chris22smith/pen/PbBwjp) +- Could look good on pictures that get highlighted with thick frames +- Suitable for classics, and antiques + +### Frames 4-9 +- Inspired from : Divinector's [CSS Tricks](https://www.youtube.com/watch?v=K3NNBnSA3C4) +- Has cool hover effects +- Frame can be of any abstract image, could be easily compliment the image/photo + +### Frames 10, 11, and 12 +- Inspired from: [W3Docs](https://www.w3docs.com/snippets/css/how-to-add-a-frame-around-an-image.html) +- Give a photobook feel with spiral bound +- Could be used for personal collection \ No newline at end of file diff --git a/assets/frames/index.html b/assets/frames/index.html new file mode 100644 index 0000000..cf6fadf --- /dev/null +++ b/assets/frames/index.html @@ -0,0 +1,58 @@ + + + + + Frame Designs + + + + +

Frame Designs

+
+
+ Pet Dog +
+
+ Pet Dog +
+
+ Pet Dog +
+
+
+
+ Pet Dog +
+
+ Pet Dog +
+
+ Pet Dog +
+
+
+
+ Pet Dog +
+
+ Pet Dog +
+
+ Pet Dog +
+
+
+

+
+
+ Pet Cat +
+
+ Pet Cat +
+
+ Pet Cat +
+
+ + \ No newline at end of file diff --git a/assets/frames/styles.css b/assets/frames/styles.css new file mode 100644 index 0000000..188e6a0 --- /dev/null +++ b/assets/frames/styles.css @@ -0,0 +1,234 @@ +body { + font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; +} + +.heading { + display: grid; + justify-content: center; + color: rgb(67, 58, 15); +} + +.grid-layout { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} + +html { + background-image: linear-gradient(rgb(193, 194, 163), rgb(198, 192, 192)); + height: auto; +} + +img { + width: 150px; + height: 220px; + border: solid 2px; + border-bottom-color: rgb(238, 222, 171); + border-left-color: rgb(238, 222, 171); + border-right-color: rgb(230, 212, 156); + border-top-color: rgb(230, 212, 156); + max-height: 100%; + max-width: 100%; +} + +.frame-1 { + background-color: rgb(207, 176, 146); + border: solid 5vmin rgb(243, 138, 126); + border-bottom-color: rgb(149, 104, 13); + border-left-color: rgb(172, 122, 23); + border-radius: 25px; + border-right-color: rgb(172, 122, 23); + border-top-color: rgb(149, 104, 13); + box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25) inset, 0 5px 10px 5px rgba(0, 0, 0, .25); + box-sizing: border-box; + display: inline-block; + margin: 5vh 5vw; + padding: 4vmin; + position: relative; + text-align: center; +} + +.frame-2 { + background-color: rgb(158, 109, 60); + border: solid 5vmin rgb(243, 138, 126); + border-bottom-color: rgb(99, 13, 4); + border-top-color: rgb(99, 13, 4); + border-left-color: rgb(74, 16, 10); + border-right-color: rgb(74, 16, 10); + border-radius: 5px; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25) inset, 0 5px 10px 5px rgba(0, 0, 0, .25); + box-sizing: border-box; + display: inline-block; + margin: 5vh 5vw; + padding: 4vmin; + position: relative; + text-align: center; +} + +.frame-3 { + background-color: rgb(162, 169, 124); + border: solid 5vmin rgb(55, 42, 4); + border-bottom-color: rgb(53, 40, 11); + border-top-color: rgb(53, 40, 11); + border-left-color: rgb(79, 58, 13); + border-right-color: rgb(79, 58, 13); + border-radius: 15px; + box-shadow: 0 0 5px 0 rgba(0, 0, 0, .25) inset, 0 5px 10px 5px rgba(0, 0, 0, .25); + box-sizing: border-box; + display: inline-block; + margin: 5vh 5vw; + padding: 4vmin; + position: relative; + text-align: center; +} + +.wrapper { + display: flex; + justify-content: center; + align-items: center; + padding-top: 25px; + padding-bottom: 25px; +} + +.box-4 { + background: url("https://images.pexels.com/photos/1293120/pexels-photo-1293120.jpeg"); + box-shadow: inset 0 50px rgba(255, 255, 255, .1), + inset 2px -15px 30px rgba(0, 0, 0, .4); + padding: 25px; + border-radius: 50%; + text-align: center; + margin: 0 20px; + transition: all cubic-bezier(0.55, 0.085, 0.68, 0.53); +} + +.box-5 { + background: url("https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"); + box-shadow: inset 0 50px rgba(255, 255, 255, .1), + inset 2px -15px 30px rgba(0, 0, 0, .4); + padding: 25px; + border-radius: 50%; + text-align: center; + margin: 0 20px; + transition: all cubic-bezier(0.55, 0.085, 0.68, 0.53); +} + +.box-6 { + background: url("https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"); + box-shadow: inset 0 50px rgba(255, 255, 255, .1), + inset 2px -15px 30px rgba(0, 0, 0, .4); + padding: 25px; + border-radius: 50%; + text-align: center; + margin: 0 20px; + transition: all cubic-bezier(0.55, 0.085, 0.68, 0.53); +} + +.box-7 { + background: url("https://cdn.pixabay.com/photo/2016/12/15/20/21/texture-1909992_960_720.jpg"); + box-shadow: inset 0 50px rgba(255, 255, 255, .1), + inset 2px -15px 30px rgba(0, 0, 0, .4); + padding: 25px; + border-radius: 50%; + text-align: center; + margin: 0 20px; + transition: all cubic-bezier(0.55, 0.085, 0.68, 0.53); +} + +.box-8 { + background: url("https://cdn.pixabay.com/photo/2022/10/17/15/41/leaf-7528064_960_720.jpg"); + box-shadow: inset 0 50px rgba(255, 255, 255, .1), + inset 2px -15px 30px rgba(0, 0, 0, .4); + padding: 25px; + border-radius: 50%; + text-align: center; + margin: 0 20px; + transition: all cubic-bezier(0.55, 0.085, 0.68, 0.53); +} + +.box-9 { + background: url("https://cdn.pixabay.com/photo/2020/12/12/13/15/leaves-5825458_960_720.jpg"); + box-shadow: inset 0 50px rgba(255, 255, 255, .1), + inset 2px -15px 30px rgba(0, 0, 0, .4); + padding: 25px; + border-radius: 50%; + text-align: center; + margin: 0 20px; + transition: all cubic-bezier(0.55, 0.085, 0.68, 0.53); +} + +.box-4 img { + width: 150px; + border-radius: 50%; +} + +.box-4:hover { + transform: scale(1.1); +} + +.box-5 img { + width: 150px; + border-radius: 50%; +} + +.box-5:hover { + transform: scale(1.1); +} + +.box-6 img { + width: 150px; + border-radius: 50%; +} + +.box-6:hover { + transform: scale(1.1); +} + +.box-7 img { + width: 150px; + border-radius: 50%; +} + +.box-7:hover { + transform: scale(1.1); +} + +.box-8 img { + width: 150px; + border-radius: 50%; +} + +.box-8:hover { + transform: scale(1.1); +} + +.box-9 img { + width: 150px; + border-radius: 50%; +} + +.box-9:hover { + transform: scale(1.1); +} + +.frame-10 { + padding-left: 40px; + padding-right: 40px; + border: 20px solid transparent; + border-image: url("https://images.pexels.com/photos/6373487/pexels-photo-6373487.jpeg") 35% round; +} + +.frame-11 { + padding-left: 40px; + padding-right: 40px; + border: 20px solid transparent; + width: fit-content; + border-image: url("https://images.pexels.com/photos/6373487/pexels-photo-6373487.jpeg") 35% round; +} + +.frame-12 { + padding-left: 40px; + padding-right: 40px; + border: 20px solid transparent; + border-image: url("https://images.pexels.com/photos/6373487/pexels-photo-6373487.jpeg") 35% round; +} \ No newline at end of file