KOTAK TEST


PROJECT 1

Tuliskan Teks di sini

<h3 style=”color: #01022c; font-family: staccato222 BT; font-size: 2em; font-weight: 700; line-height: 1.2em; padding: 3px 10px; text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119);”>
Tuliskan Teks di sini
</h3>

1

<div style=”width: 400px; background-color: #ffffcc; margin-left: auto; margin-right: auto; text-align: center; padding: 10px; border: thin solid #330099;”> MASUKAN TEKS NO.1 KEDALAM TULISAN INI</div>

 2

MASUKAN TEKS NO.1 KEDALAM TEKS NO,2-MAKA HASILNYA TEKS AKAN ADA DALAM KOTAK-SEPERTI INI

Tuliskan Teks di sini

PROJECT 2

<div align=”center”>

<h3 style=”color: #01022c; font-family: staccato222 BT; font-size: 2em; font-weight: 700; line-height: 1.2em; padding: 3px 10px; text-shadow: 0.1em 0.1em 0.2em rgb(119, 119, 119);”>
Tuliskan Teks di sini
</h3>

1

Di Teks 1 Pasang Tulisan / Di Teks 2 Pasang Gambar =   pindahkan Kode </h3> dan gandengkan dengan Kode </div>  di Teks 2 – kemudian gandengkan Teks 1 dan Teks 2 .

<div style=”width: 400px; background-color: #ffffcc; margin-left: auto; margin-right: auto; text-align: center; padding: 10px; border: thin solid #330099;”> ISI DENGAN GAMBAR</div>

 2

Hasil Akhir


Tuliskan Teks di sini


PADA DASARNYA SCRIPT – KODE YANG DIBAWAH INI DAPAT DIKEMBANGKAN

<div style=”background-color: #fe8080; border: 2px solid #FFFF00; z-index: 999999; opacity: .75; border-radius: 1px 1px 1px 1px; box-shadow: 0 0 5px 5px#CC0099; padding: 15px; text-align: left;”>OTOMATIC</div>
<div style=”overflow:auto; padding:5px; width:350px; height:100px; background-color: rgb(255, 255, 255); border:1px solid #ccc;”>Masukkan teks atau kode script disini</div>
<p style=”text-align: center; font-family: staccato222 BT; line-height: 1.2em; color: #0308e6; font-weight: 900; border-top: 1px solid #5c5d82; text-shadow: white .1em .1em .2em; padding: 3px 10px; font-size: 2em; margin-top: 20px; background: #78ff32 url(‘images/h.gif’) no-repeat left 10px; background-position: left center;”><span style=”border-bottom: 1px solid #555;”>Text-Shadow</span></p>
<p style="padding:15px 0;font-size:40px;text-shadow:4px -4px;">ini adalah style css3 dengan text-shadow</p>
<h4 style=”text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd; font-size: 50px; color: #666; text-align:center; text-height:font-size;”>TEXT</h4>
<h1 style=” color: #ff8000; font-size: 30px; text-align: center; text-height: font-size; text-shadow: 1px 0px #ccc, 0px 1px #ccc, 2px 1px #ddd, 1px 2px #bbb, 3px 2px #ddd, 2px 3px #bbb, 4px 3px #ddd, 3px 4px #bbb, 5px 4px #ddd, 4px 5px #bbb, 6px 5px #ddd, 5px 6px #bbb, 7px 6px #ddd, 6px 7px #bbb, 8px 7px #ddd, 7px 8px #bbb, 8px 8px #ddd;”> IMAGE</h1>

<h1 style=”width: 80%; text-align: center; font-size: 12px; font-weight: bold; font-family: Lucida Calligraphy; color: grey; background: white; border: 10px inset green;”> font-family: Lucida Calligraphy </h1>

.

Posisi Lurus dan Miring – kesannya lain

.

TEXT DIATAS – PERMUKAAN

.

Teks dibawah – permukaan

.

Posisi Lurus dan Miring – kesannya lain

.

EMBOSS – emboss – EMBOSS

.

  INSET – insetINSET

.
.

CARI DAN COCOKAN DENGAN SELERA

KODE #FFF – dapat diganti dengan tulisan  – HASILNYA SEPERTI DIATAS

MENCARI JODOH DENGAN KHAYAL

Membuat Bayang / Blur pada Gambar

<style type=”text/css”>
.shadowblur{
box-shadow: 7px 7px 8px #00FF00;
-webkit-box-shadow: 7px 7px 8px #000000;
-moz-box-shadow: 7px 7px 8px #000000;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#000000, offX=7, offY=7, positive=true); } </style>

<img src=”https://adjiesugilar.files.wordpress.com/2013/07/201306091834epg.jpg” class=”shadowblur width=”200″ height=”200″ alt=”CSS Drop shadow effect”>

( Maaf yang ini hanya dapat diproses diExplorer )

Tuliskan Teks di sini

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s