Make Image Comparison Slider just use CSS - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Make Image Comparison Slider just use CSS, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article Trik dan Tips, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Make Image Comparison Slider just use CSS
link : Make Image Comparison Slider just use CSS

Make Image Comparison Slider just use CSS

Ketika melongok web mbater (sebutan master buat yg cewek) Lea Verou, ada artikel tentang image comparison slider with pure CSS lea.verou.me/2014/07/image-comparison-slider-with-pure-css Sebuah trik tutorial seputaran image, fungsi utama yaitu membandingkan 2 buah gambar dengan gaya slider hanya menggunakan CSS! Begitulah kira² penjelasan versi AA Koben ;)) Apabila sobat mempunyai 2 gambar dan bermaksud membandingkannya, tidak perlu satu per satu menampilkan tetapi bisa memakai trick ini!
Lihat demo

codepen.io/beben-koben/full/JKzyf

Kode CSS pada sumber tidak berjalan bagus pada browser mozilla, sehingga saya harus turun tangan :D Ternyata masih ada kendala jg setelah gue turun-tangan, width (panjang) slider berbeda pula ketika di patok dengan nominal 50% #:-S Oleh karena itu width terpaksa diberikan dengan nilai 25px

.image-slider {
 line-height: 0;
 position:relative;
 display: inline-block;
}
.image-slider img {
 user-select: none;
 max-width: 400px;
}
.image-slider > div {
 position: absolute;
 top: 0; 
 left: 0;
 bottom: 0; 
 width: 25px; /* I mean this nominal, try to substitute with 52% and see in google chrome */
 max-width: 100%;
 overflow: hidden;
 resize: horizontal;
}
.image-slider > div:before {
 content: '';
 display: block;
 width: 13px; 
 height: 13px;
 overflow: hidden;
 position: absolute;
 resize: horizontal;
 right: 3px; bottom: 3px;
 background-clip: content-box;
 background: linear-gradient(-45deg, black 50%, transparent 0);
 -webkit-filter: drop-shadow(0 0 2px black);
 filter: drop-shadow(0 0 2px black);
}

Perhatikan property width: 25px; pada class attribute .image-slider > div Jika nominal di ganti dengan 52%, efek slider akan bisa mentok sampe ujung kiri & kanan (mozilla) tidak berjalan mulus pada google chrome. Maka dari itu nominal di beri nilai 25px agar bisa mentok kiri pada chrome.

Markup HTML<div class="image-slider">
<div><img src="IMAGE-BEFORE.jpg" alt="" /></div>
<img src="IMAGE-AFTER.jpg" alt="" />
</div>

Bonus: www.webdesigncrowd.com/sliding-jquery-image-divider

Happy coding \m/

Thus articles Make Image Comparison Slider just use CSS

that is all articles Make Image Comparison Slider just use CSS This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Make Image Comparison Slider just use CSS with the link address https://autopostingblogspot.blogspot.com/2014/08/make-image-comparison-slider-just-use.html