Border 1
Border 2
<div style="background-color: #fcf8c0; border: dotted 3px #FF9900; padding: 5px;">
<div style="border-color: orange; border-style: none solid solid none; border-width: 10px; font-style: italic; margin-bottom: -10px; padding: 10px 10px 10px 0px; text-align: justify;">
MODEL 2 : Cara membuat border dengan style garis untuk kutipan kalimat seperti yang terlihat di contoh ini. Kotak border dengan sebagian ada garis, sebagian tidak seperti contoh di kalimat ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Silahkan di kembangkan kalau ada sobat yg suka utak atik :)<span style="text-align: left;"></span>
</div>
</div>
Border 3
MODEL 3 : Nah, ini model terakhir yang bisa saya berikan. Bentuk border dengan gaya sudut yang berbeda dengan sebelumnya, model ini berbentuk bulat atau "Rounded Corners". Saya tidak panjang lebar untuk menjelaskan. Silahkan di utak atik sendiri dengan merubah angka atau sekedar mengganti background dengan melihat scriptnya di bawah. <span style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: #fcf8c0; border-radius: 10px; color: #555555; float: left; font-family: Arial; font-size: 13px; line-height: 1em; margin: 9px 9px 0 0; padding: 8px 11px;">MODEL 3 : Nah, ini model terakhir yang bisa saya berikan. Bentuk border dengan gaya sudut yang berbeda dengan sebelumnya, model ini berbentuk bulat atau "Rounded Corners". Saya tidak panjang lebar untuk menjelaskan. Silahkan di utak atik sendiri dengan merubah angka atau sekedar mengganti background dengan melihat scriptnya di bawah. Bagaimana, Keren bukan ? </span>
Border 4
Border 5
Border 6
MODEL 1 : Cara membuat border yang berbentuk dot untuk kutipan kalimat seperti yang terlihat di contoh ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Script di bawah masih bisa di modif sesuai selera masing-masing, silahkan di coba-coba :)
<div style="background-color: #fcf8c0; border: dotted 3px #FF9900; padding: 5px;">
MODEL 1 : Cara membuat border yang berbentuk dot untuk kutipan kalimat seperti yang terlihat di contoh ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Script di bawah masih bisa di modif sesuai selera masing-masing, silahkan di coba-coba :) </div>
<br />
<br />
<div style="background-color: #fcf8c0; border: dotted 3px #FF9900; padding: 5px;">
MODEL 1 : Cara membuat border yang berbentuk dot untuk kutipan kalimat seperti yang terlihat di contoh ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Script di bawah masih bisa di modif sesuai selera masing-masing, silahkan di coba-coba :) </div>
<br />
<br />
Border 2
MODEL 2 : Cara membuat border dengan style garis untuk kutipan kalimat seperti yang terlihat di contoh ini. Kotak border dengan sebagian ada garis, sebagian tidak seperti contoh di kalimat ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Silahkan di kembangkan kalau ada sobat yg suka utak atik :)
<div style="border-color: orange; border-style: none solid solid none; border-width: 10px; font-style: italic; margin-bottom: -10px; padding: 10px 10px 10px 0px; text-align: justify;">
MODEL 2 : Cara membuat border dengan style garis untuk kutipan kalimat seperti yang terlihat di contoh ini. Kotak border dengan sebagian ada garis, sebagian tidak seperti contoh di kalimat ini. Bagaimana caranya ? silahkan lihat script di bawah ini. Silahkan di kembangkan kalau ada sobat yg suka utak atik :)<span style="text-align: left;"></span>
</div>
</div>
Border 3
MODEL 3 : Nah, ini model terakhir yang bisa saya berikan. Bentuk border dengan gaya sudut yang berbeda dengan sebelumnya, model ini berbentuk bulat atau "Rounded Corners". Saya tidak panjang lebar untuk menjelaskan. Silahkan di utak atik sendiri dengan merubah angka atau sekedar mengganti background dengan melihat scriptnya di bawah. <span style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background: #fcf8c0; border-radius: 10px; color: #555555; float: left; font-family: Arial; font-size: 13px; line-height: 1em; margin: 9px 9px 0 0; padding: 8px 11px;">MODEL 3 : Nah, ini model terakhir yang bisa saya berikan. Bentuk border dengan gaya sudut yang berbeda dengan sebelumnya, model ini berbentuk bulat atau "Rounded Corners". Saya tidak panjang lebar untuk menjelaskan. Silahkan di utak atik sendiri dengan merubah angka atau sekedar mengganti background dengan melihat scriptnya di bawah. Bagaimana, Keren bukan ? </span>
Border 4
Mau membuat border seperti ini? Berikut Script nya!
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">
Masukkan Teks di Sini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">
Masukkan Teks di Sini</div>
Border 5
Kalau untuk border yang ini, berikut scriptnya:
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">
Masukkan Teks di Sini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left;">
Masukkan Teks di Sini</div>
Border 6
Kalau border yang ini, scriptnya ada di bawah ini:
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">
Masukkan teks di sini</div>
<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left;">
Masukkan teks di sini</div>
Belum ada tanggapan untuk "Border"
Post a Comment