Beautiful CSS Frame for Art Gallery - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Beautiful CSS Frame for Art Gallery, we have prepared well for this article you read and download the information therein. hopefully fill posts Article CSS, Article CSS3, Article HTML, Article Resource, Article Tutorial, Article Web, we write this you can understand. Well, happy reading.

Title : Beautiful CSS Frame for Art Gallery
link : Beautiful CSS Frame for Art Gallery

Beautiful CSS Frame for Art Gallery

Welcome to 2017 year! AA Koben akan berbagi tutorial ringan bagaimana cara menghias gambar dengan menambahkan bingkai atau frame indah di setiap sisinya. Jadi jika sobat mempunyai sebuah image, kebetulan images tersebut memang layak diberikan keindahan dalam tampilannya, maka anda tidak salah membaca artikel ini :P
This is tutorial how to make iframe picture using CSS.

.frame img {
max-width: 100%;
max-height: 100%;
border: solid 2px;
border-color: #ccb #eed #ffe #eed;
}
.frame {
height: 80vh;
padding: 8vmin 0;
margin: 10px 28%;
border-radius: 3px;
position: relative;
text-align: center;
display: inline-block;
background-color: #ddc;
box-sizing: border-box;
border: solid 5vmin #eee;
border-color: #ddd #eee #fff #eee;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25);
}
.frame:before {
content: "";
top: -2vmin;
left: -2vmin;
right: -2vmin;
bottom: -2vmin;
border-radius: 3px;
position: absolute;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
}
.frame:after {
content: "";
top: -2.5vmin;
left: -2.5vmin;
right: -2.5vmin;
bottom: -2.5vmin;
position: absolute;
border-radius: 3px;
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
}

<div class="frame">
  <img src="LINK-IMAGE" alt="" />
</div>

DEMO: codepen.io/chris22smith/full/PbBwjp/

Sudah begitu saja, kalau mau versi galeri berarti harus terus menyimak ;))

figure {
padding: 20px;
overflow: hidden;
position: relative;
border-width: 10px;
border-style: solid;
display: inline-block;
vertical-align: middle;
border-color: #ccc #ddd #efefef #ddd;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5) inset, 0 5px 7px rgba(0, 0, 0, 0.5);
}
figure:before, figure:after {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
position: absolute;
}
figure:before {
z-index: -2;
border: 30px solid #ddc;
box-shadow: 0 0 5px black inset;
}
figure:after {
z-index: -1;
background: transparent;
border-top-left-radius: 300% 300%;
box-shadow: -20px -20px 100px rgba(255, 255, 255, 0.5);
}
figure figcaption {
bottom: 6px;
right: 29px;
padding: 5px;
font-size: 16px;
position: absolute;
text-align: center;
white-space: nowrap;
display: inline-block;
max-width: calc(100% - 60px);
-webkit-transition: .3s;
transition: .3s;
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: scale(0.6);
transform: scale(0.6);
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;

}
figure figcaption:hover {
-webkit-transform: scale(1);
transform: scale(1);
}
figure img {
z-index: -3;
width: auto;
height: 50vmin;
position: relative;
}

<figure title="YOUR TITLE I">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG I</figcaption>
</figure>

<figure title="YOUR TITLE II">
 <img src="LINK-IMAGE" alt="" />
 <figcaption>YOUR CAPTION IMG II</figcaption>
</figure>

DEMO: codepen.io/vank0/full/BQqBOx/

BONUS:

Focal Point Picker - Multiple Dropdown Menus - World Places (CSS 3d hover) - BUTTON LOVE - Simple Button Rollover - Time in Words - Tilt to read - wick editor - polr - 110 CSS Menu - bttn.css - Masonry - csssecrets - csssecrets on dabblet - The SVG Font Machine

Thus articles Beautiful CSS Frame for Art Gallery

that is all articles Beautiful CSS Frame for Art Gallery This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Beautiful CSS Frame for Art Gallery with the link address https://autopostingblogspot.blogspot.com/2017/01/beautiful-css-frame-for-art-gallery.html