Caixa de Aviso!

Eu peguei esse tutorial lá no Viciados na Net

<style type="text/css">#aviso{width:500px; /* Altura da caixa */padding:5px; 

position:absolute; z-index:5000;}.caja-aviso{border:4px double #000000; /* Cor da borda */

-webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;

-webkit-box-shadow: 8px 8px 6px #808080; 

-moz-box-shadow: 8px 8px 6px #808080; 

box-shadow: 8px 8px 6px #808080;

background-color: #D3D3D3; /* Cor de fundo */

padding: 10px; font-family: Verdana, Geneva, sans-serif;

color: #0B173B; /* Cor do texto */

}.letrero-aviso { /* Estilos da palavra AVISO */

font-size:18pt;

font-weight:bold;

color:#B4045F;

text-shadow: 0px 0px 10px #BA55D3;

}</style>

<div id="aviso" style="left:300px;

top:100px; 

padding:0;

"><div align="right" style="margin-bottom:-30px;

"><b><a href="javascript:closeit()" ><font face="Arial" size="1">[FECHAR]</font> <img valign="middle" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5cMS7M9euM6RlyQOBkBHo1_uJO3QmPST8axhcjfUGzduT2Mxh5TxcyorKoyzxVxKkQGsqxWFnEl1e0jYEOO-WpPbXy7XCTOZyNQwukwg-dRDvaHjAv0CvxBY7iz__6MCHY9cDBr6qlDOW/" style="vertical-align:middle;

"/></a></b></div>

<br/><fieldset class="caja-aviso"><legend class="letrero-aviso" align="center">AVISO</legend>...Escreva aqui sua mensagem...<br/><div align="right"><a href="http://www.facebook.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3uLMrw34krfoxJNyA-OheZyZ6EdboSbvPiNHipL3ZkjhvJ1yb-auYT8ga-efhd0Tacz6-JWhYguVo-o4qV1VsIMiciuFrQ-XXZGRwlZ68fufZkE5fVobqX982Wzw6P_QbSiM6Q59TjPHK/" width="26"/></a><a href="http://twitter.com/usuario" target="blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkr2fkNZbR27foVY3gxGJWfEEKsIW5a4XqrKW-9MT-ZDwwZrjMAETFKPW4fZlHqmHeH6XvspTVQ1lrEi7QE29BZ1sj84sBYKz1ai2227ICvlQflr_2WFl3SuYlKWq_SchAcgmVEMklg6EY/" width="25"/></a></div></fieldset>

<script>function closeit(){document.getElementById("aviso").style.visibility = "hidden";}</script>

</div><div class="clear"/></div>

E ficará assim:

>Mas como eu gosto de modificar, vou passar para vocês o mesmo tutorial, mas só que um pouco modificado por mim como eu estou usando lá no Campos:

<div style="position: absolute;

 margin-top: -4px; left: -220px;

"><style type="text/css">#aviso{width:500px; /* Altura da caixa */

padding:5px; position:absolute; z-index:5000;}.caja-aviso{border:px double #; /* Cor da borda */

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

border-radius: 10px;

background-color: #F9F9F9; /* Cor de fundo */

font-family: Josefin Sans;

color: #F56991; /* Cor do texto */}.

{ /* Estilos da palavra AVISO */

font-size:18pt;

font-weight:bold;

color:#B4045F;

}</style>

<div id="aviso" style="left:300px; 

top:-100px; padding:0;

"><div align="left:-750px" style="margin-bottom:-20px;

"><b><a href="javascript:closeonlyonce()" ><font face="Arial" size="1"></font> <img valign="middle" src="http://1.bp.blogspot.com/-0IMnsHg_a6Q/UXBLqtEZuWI/AAAAAAAAC_g/UWXsybjteL4/s1600/fundo+transparente.png" style="vertical-align:middle;"/></a></b></div>

<br/><fieldset class="caja-aviso"><legend class="" align="center"></legend><img src="Url da imagem do recado" />

<br/><div align="right"></div></fieldset>

<script>function closeonlyonce(){document.getElementById("aviso").style.visibility = "hidden";

}</script>

</div><div class="clear"/></div></div>

O meu ficou assim: