Tabela de cores

Por favor, kreasikan pal seu blog com a cor - a cor abaixo:

Selecionado código de cor :

Postado por: Dody FariaL No dia Domingo, 14 de junho de 2009

»»  Leia mais... Read more...

Tipos de textos com sombras

Jika sudah, mari kita lanjut ke tutorialnya. Perhatikan kode css dibawah ini :

color: #000;
background: #fff;
text-shadow: 1px 1px 1px #424242;

• color : #000 adalah warna dasar tulisan
• background: #fff adalah warna latar
• 1px 1px 1px #424242 untuk warna bayangannya (shadow)

Dibawah ini ada beberapa contoh model text shadow beserta kode css-nya, silahkan sobat kreasikan.

	color: #000; background: #fff; text-shadow: 2px 2px 3px #000;
	color: #000; background: #fff; text-shadow: 2px 2px #000;
	color: #000; background: #fff; text-shadow: 2px -2px 3px #000;
	color: #000; background: #666; text-shadow: 0px 1px 1px #fff;
	color: #666; background: #000; text-shadow: 0px 1px 0px #ccc;
	color: #fff; background: #666; text-shadow: 0px 1px 1px #000;
	color: #fff; background: #000; text-shadow: 1px 1px 6px #fff;
	color:#FFE9C7; background:#FF6C17;  text-shadow: 2px 2px 2px #A6250C;
	color:#823210; background:#FF6C17; text-shadow:1px 1px 1px #FF9924;
	color: #fff; background: #fff; text-shadow: 1px 1px 4px #000;
	color: #000; background: #000; text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Selamat berkreasi, semoga dengan adanya text shadow blog sobat jadi lebih hidup.

»»  Leia mais... Read more...

Tipos de bordas

Tipos de bordas

border-style: dotted border-style: solid border-style: groove border-style: inset

border-style: dashed border-style: double border-style: ridge border-style: outset

Berikut ini contoh dari border yang bisa sobat gunakan :


Border-style: dotted

<div style="border:5px dotted #08088A; background:#FFF; width:500px; padding:20px">

dotted dotted dotted dotted dotted

</div>

dotted dotted dotted dotted dotted

Border-style: solid

<div style="border:5px solid #08088A; background:#FFF; width:500px; padding:20px">

solid solid solid solid solid

</div>

solid solid solid solid solid

Border-style: dashed

<div style="border:5px dashed #08088A; background:#FFF; width:500px; padding:20px">

dashed dashed dashed dashed dashed

</div>

dashed dashed dashed dashed dashed

Border-style: groove

<div style="border:5px groove #08088A; background:#FFF; width:500px; padding:20px">

groove groove groove groove groove

</div>

groove groove groove groove groove

 

Border-style: double

<div style="border:5px double #08088A; background:#FFF; width:500px; padding:20px">

double double double double double

</div>

double double double double double

Border-style: inset

<div style="border:5px inset #08088A; background:#FFF; width:500px; padding:20px">

inset inset inset inset inset

</div>

inset inset inset inset inset

Border-style: outset

<div style="border:5px outset #08088A; background:#FFF; width:500px; padding:20px">

outset outset outset outset outset

</div>

outset outset outset outset outset

Border-style: ridge

<div style="border:5px ridge #08088A; background:#FFF; width:500px; padding:20px">

ridge ridge ridge ridge ridge

</div>

ridge ridge ridge ridge ridge

Border Campur Aduk

<div style="border-style:dotted  dashed double outset; border-color:red orange blue purple; border-width:5px; background:#FFF; width:500px; padding:20px">

dotted dashed double outset

</div>

dotted dashed double outset

Syntax untuk border-radius

Mozilla Equivalent	Browser Opera 10.5	Webkit Equivalent (Safari 3)
-moz-border-radius-topright	border-top-right-radius	-webkit-border-top-right-radius
-moz-border-radius-bottomright	border-bottom-right-radius	-webkit-border-bottom-right-radius
-moz-border-radius-bottomleft	border-bottom-left-radius	-webkit-border-bottom-left-radius
-moz-border-radius-topleft	border-top-left-radius	-webkit-border-top-left-radius
-moz-border-radius	border-radius	-webkit-border-radius

-Moz-Border-Radius (Untuk Mozilla)

<div style="background-color:#ccc; -moz-border-radius:5px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#ccc; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; border:1px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topright:30px; -moz-border-radius-bottomright:30px; border:5px solid #000; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius-topleft:30px; -moz-border-radius-bottomright:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5F6CE; -moz-border-radius:30px 10px;  border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

-Webkit-Border-Radius (Untuk Safari)

<div style="background-color:#A9D0F5; -webkit-border-top-left-radius:30px; -webkit-border-bottom-right-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

<div style="background-color:#F5D0A9; -webkit-border-top-left-radius:50px; -webkit-border-top-right-radius:50px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Border-Radius (Support Opera 10.5)

<div style="background-color:#F5F6CE; border-radius:30px; border:5px solid #38610B; padding:10px;">ISI TULISAN</div>

Fonte: http://miscah.blogspot.com/2010/04/css-border-style.html

»»  Leia mais... Read more...

Free Template Garden for blogger

Template Garden

DEMO - DOWNLOAD - LICENÇA

»»  Leia mais... Read more...

Free Favicon para seu blog

Se o seu blog ou site não tem favicon, talvez você pode baixar FreeFavicon.com. Você pode fazer o download e usar o favicon no seu blog ou site gratuitamente. Há uma abundância dos ícones para escolher e são gratuitos.

»»  Leia mais... Read more...