Teknik SHAPE pada CSS

0
anshori
css

Bintaro – SHAPE.. seperti biasa gw bingung kalo ngasi penjelasan secara TEORI, jadi intinya itu bikin geometri dengan CSS. Contohnya itu persegi panjang, jajaran genjang, segitiga, dll tapi ga gunain image, dibikinnya pake CSS. Banyak sih kalo mau cari di GOOGLE teknik SHAPE ini, coba aja cari “SHAPE ON CSS”.. Nah disini gw mau share iseng2 gara2 lagi kosong kerjaan, jadinya gw bikin aja SHAPE pake gambar. 

Sumonggo cek di >> https://anshori.net/coba/persegi/

HTML..

<div id="anshoriDOTnet">
  <h1>Image gambar persegi</h1>
  <h4>Mas Wahyu Anshori - 11 April 2014</h4>
  <br>
  <div id="tempatGambar">
	  <div id="tempatGambar1">
	  	<img id="anshori" src="1.jpg" />
	  	<div id="segitigaAK"></div>
	  	<div id="segitigaBK"></div>
	  </div>
	  <div id="tempatGambar2">
	  	<img id="anshori" src="2.jpg" />
	  	<div id="segitigaAKn"></div>
	  	<div id="segitigaBKr"></div>
	  </div>
	  <div id="tempatGambar1" style="margin-left: 5px;">
	  	<img id="anshori" src="3.jpg" />
	  	<div id="segitigaAK"></div>
	  	<div id="segitigaBK"></div>
	  </div>
	  <div id="tempatGambar2">
	  	<img id="anshori" src="4.jpg" />
	  	<div id="segitigaAKn"></div>
	  	<div id="segitigaBKr"></div>
	  </div>
	  <div id="bersih"></div>
	  <div id="tempatGambar21">
	  	<img id="anshori" src="5.jpg" />
	  	<div id="segitigaAKn"></div>
	  	<div id="segitigaBKr"></div>
	  </div>
	  <div id="tempatGambar12">
	  	<img id="anshori" src="6.jpg" />
	  	<div id="segitigaAK"></div>
	  	<div id="segitigaBK"></div>
	  </div>
	  <div id="tempatGambar21" style="margin-left: 5px;">
	  	<img id="anshori" src="7.jpg" />
	  	<div id="segitigaAKn"></div>
	  	<div id="segitigaBKr"></div>
	  </div>
	  <div id="tempatGambar12">
	  	<img id="anshori" src="8.jpg" />
	  	<div id="segitigaAK"></div>
	  	<div id="segitigaBK"></div>
	  </div>
	  <div id="bersih"></div>
  </div>
  <div id="bersih"></div>
</div>

 

CSS…

body {width:100%;margin:0;padding:0;font-family: Helvetica;color:;}
h4 {border-bottom: 1px solid #ff0000;display:inline;clear: both;}
#anshoriDOTnet {width:940px;padding:50px 10px 0;margin:0 auto;text-align:center;}
#tempatGambar {width:815px;margin:0 auto;}
#tempatGambar1 {margin-top: 20px;position: relative;width:200px;height:200px;margin-right:0px;float:left;}
#tempatGambar12 {margin-top: 5px;position: relative;width:200px;height:200px;margin-left:5px;float:left;}
img {position:relative;z-index: 0;}
#segitigaAK {width: 0;height: 0;border-top: 70px solid white;border-right: 100px solid transparent;position:absolute;top:0;left:0;z-index:1;}
#segitigaBK {width: 0;height: 0;border-bottom: 70px solid white;border-left: 100px solid transparent;position:absolute;bottom:0;right:0;z-index:1;}
#tempatGambar2 {margin-top: 20px;position: relative;width:200px;height:200px;margin-left:5px;float:left;}
#tempatGambar21 {margin-top: 5px;position: relative;width:200px;height:200px;margin-right:0px;float:left;}
#segitigaAKn {width: 0;height: 0;border-top: 70px solid white;border-left: 100px solid transparent;position:absolute;top:0;right:0;z-index:1;}
#segitigaBKr {width: 0;height: 0;border-bottom: 70px solid white;border-right: 100px solid transparent;position:absolute;bottom:0;left:0;z-index:1;}
#bersih {clear: both;}

Tadinya si keluar pertanyaan di diri gw, kenapa ribet pake SHAPE itu? Padahal kan bisa imagenya di bikin bentuk kaya gitu? Iya juga sih, cuma kalo image yang dibikin statis bentuknya kaya gitu nantinya ga bisa dikasi effect2 manis jquery.. Misal.. Di SHAPE putih atas kalo di HOVER nantinya bisa turun jadi BLOCK yang ada kontent tulisannya, begitupula sebaliknya… 😉

Referensi teknik SHAPE..

http://www.css3shapes.com/

https://css-tricks.com/examples/ShapesOfCSS/

LEAVE A REPLY

Please enter your comment!
Please enter your name here