Cara Membuat Gambar Dikelilingi Tulisan

Sekali lagi kode CSS bisa melakukan ini: Membuat tulisan mengelilingi sebuah gambar, atau membuat gambar dikelilingi tulisan. Sama saja bukan? Seperti kisah Jimmy teman saya dengan dokter gigi. Ketika itu Jimmy berniat berobat karena giginya sakit. Tapi kemudian keduanya berdebat tentang giginya. Dokter bilang: "Gigi kamu ada lobangnya". Tapi Jimmy bilang, "Bukan Dok! Ada lobang yang dikelililingi gigi!". Seperti tulisan ini: Facebook haram?



Sama persis dengan tulisan ini: Tulisan mengelilingi gambar atau gambar mengelilingi tulisan.



Saya melihat sebuah web yang menampilkan gambar pengantin wanita Pangeran William yang akan menikah memegang bendera Inggris dalam sebuah bingkai yang dikelilingi tulisan. Contoh lain seperti di bawah ini:

Information
Curabitur in augue. Null ultrices elit vel lectus. Integer id m. Morbi quam nu, tempor sit met, imperdiet quis, vehic vel. Nunc quis purus aliq ipsum vene.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mi. Suspendisse potenti. Etiam vulputate mauris vel purus. Aliquam elit. Ut sagittis aliquet metus. Nam sit amet orci. Aenean rhoncus eros at nisi. Nunc venenatis. Cras non mauris in nibh placerat placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis venenatis scelerisque mauris.


Morbi mattis pellentesque pede. Aliquam ac odio. Sed a urna vel massa luctus volutpat. Vivamus id libero et nibh cursus sodales. Duis eros. Quisque tincidunt, justo ut molestie lacinia, sem augue fringilla odio, dictum lobortis felis velit eget magna. Aliquam condimentum nulla vitae purus. Ut ornare ultricies ligula. Nullam quis erat pellentesque elit porta fringilla. Etiam mollis mauris sed mi tempus venenatis.

Untuk melakukan trik ini sebetulnya agak rumit. Tulisan dalam satu baris perlu dikelola agar sebagian tertentu berada di sebelah kiri dan sebagian lain berada di sebelah kanan, berikutnya untuk tulisan dalam baris berikutnya.



Contoh di atas kodenya seperti di bawah ini, jadi silahkan berkreasi sendiri.

<div class="col">

<em class="lpad"></em>

<em class="ln160"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRwUlLhgFDkq9x5X9VMgVEpKWT2WAokwfyqikqxT8B0c8pEjfx11KFUFmgq6ZXseqjJtLzP9nPLV3S93XGH2DOBH5hobcCvKLmLNh__bOX9YwgVvPs4ivX2JCQYfdq3CnNBxSaYJtXDRU/s400/sleep.jpg" alt="evening prayers" title="evening prayers">

<div id="note">

<em class="rn70"></em>

<em class="rn80"></em>

<em class="rn90"></em>

<em class="rn90"></em>

<em class="rn80"></em>

<em class="rn70"></em>

<em class="rn50"></em>

<em class="rn60"></em>

<em class="rn70"></em>

<em class="rn60"></em>

<em class="rn70"></em>

<em class="rn110"></em>

<em class="rn120"></em>

<em class="rn120"></em>

<em class="rn110"></em>

<span class="bld">Information</span>

<span>Curabitur in augue. Null ultrices elit vel lectus. Integer id m. Morbi quam nu, tempor sit met, imperdiet quis, vehic vel. Nunc quis purus aliq ipsum vene.</span>

</div>

</em>

<em class="ln170"></em>

<em class="ln175"></em>

<em class="ln180"></em>

<em class="ln170"></em>

<em class="ln150"></em>

<em class="ln140"></em>

<em class="ln150"></em>

<em class="ln150"></em>

<em class="ln140"></em>

<em class="ln150"></em>

<em class="ln170"></em>

<em class="ln180"></em>

<em class="ln195"></em>

<em class="ln200"></em>

<em class="ln180"></em>

<em class="lpad2"></em>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras mi. Suspendisse potenti. Etiam vulputate mauris vel purus. Aliquam elit. Ut sagittis aliquet metus. Nam sit amet orci. Aenean rhoncus eros at nisi. Nunc venenatis. Cras non mauris in nibh placerat placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis venenatis scelerisque mauris.

</p>

<p>

Morbi mattis pellentesque pede. Aliquam ac odio. Sed a urna vel massa luctus volutpat. Vivamus id libero et nibh cursus sodales. Duis eros. Quisque tincidunt, justo ut molestie lacinia, sem augue fringilla odio, dictum lobortis felis velit eget magna. Aliquam condimentum nulla vitae purus. Ut ornare ultricies ligula. Nullam quis erat pellentesque elit porta fringilla. Etiam mollis mauris sed mi tempus venenatis.

</p>

</div>

<style type="text/css">

</style>

<style type="text/css">

.col {width:400px; margin:0 auto 100px auto; padding:1em; border:1px solid #ddd;

position:relative; font-family:verdana, arial, sans-serif;}

.col em {float:left; clear:left; display:block; display:inline-block; height:18px;

margin-left:60px; position:relative;}

em.lpad {height:2.5em; width:1px; float:left; margin-left:0;}

em.lpad2 {height:5em; width:1px; float:left; margin-left:0;}

.ln160 img {position:absolute; width:200px; height:300px; margin:0; padding:0;}

.ln140 {width:140px;}

.ln150 {width:150px;}

.ln160 {width:160px;}

.ln170 {width:170px;}

.ln175 {width:175px;}

.ln180 {width:180px;}

.ln195 {width:195px;}

.ln200 {width:200px;}

.col p {position:relative; text-align:justify; z-index:20; line-height:1.7em; font-size:0.8em; padding-left:0;}

#note {position:absolute; top:7px; left:-57px; width:150px; height:250px; font-size:0.8em; font-weight:bold;}

#note span {line-height:1.6em; text-align:justify; font-size:0.9em;

font-weight:normal; font-style:normal; color:#060;}

#note em {float:right; clear:right; height:18px; margin:0;}

.rn30 {width:30px;}

.rn40 {width:40px;}

.rn50 {width:50px;}

.rn60 {width:60px;}

.rn70 {width:70px;}

.rn80 {width:80px;}

.rn90 {width:90px;}

.rn110 {width:110px;}

.rn120 {width:120px;}

#note span.bld {font-weight:bold; color:#c00; font-size:0.8em;}



</style>

Selamat mencoba.