[MOD BETA No Final] Ventanita flotante (JS) (Solo falta: que vea bien el menú)

Hola amigooooohhsss [Tienes que estar registrado y conectado para ver esa imagen], xD [Tienes que estar registrado y conectado para ver esa imagen] Bueno vengo a decirles que hay un sistema que modele ( [Tienes que estar registrado y conectado para ver esa imagen] ) yo mismito, que se trata de NO AJAX (dirán ustedes: ¿entonces?) Nah [Tienes que estar registrado y conectado para ver esa imagen] , todavía hay esperanzas xD xD No, mirad, he ideado este tipo de ventana flotante que todavía no le he dado uso y que es muy similar al AJAX (Al final dejo la DEMO).

Bueno, acá va el código que todavía no se donde ponerlo claro está, ustedes lo pueden utilizar para lo que quieran...

Código:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript">
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="visible";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.visibility="hidden";
}
</script>

<script src="Drag.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ventana flotante</title>
</head>

<body>

<div id="capa1" onclick="mostrar('window')"><a href="javascript:(open.widowsajax);" style="text-decoration:none"><b><span style="font-family: arial;"><span style="color: Red;"><span style="font-size: 13px;">Haz clic para mostrar</span></span></span></b></a></div><div id="window" style="position:absolute; z-index:10; left:275px; top:50px; height:290px; width:505px;background-color:#CECEF6; border:1px solid #464f5a; visibility:hidden">

<div style="padding-bottom:8px; width:505px; height:10px; background-color:#F6CECE; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">

<div style="position:absolute; top:1px; left:5px; font-size:14px; font-weight:bold; color:#FF0000; font-family: arial;">Prueba de pop up simple con AJAX</div>

<div style="position:absolute; top:3px; left:490px; float:right;">
<div onclick="ocultar('window')"><img src="http://i.imgur.com/Fd6Q2.png" border="0" title="cerrar" /></div>

</div>

</div>
<br/>
<div style="position:absolute; top:20px; margin-left:5px; color:#0000FF; font-size:12px; font-weight:normal; font-family: arial;"><b>Complete el formulario:</b><br><br>

<b>AJAX DEMO, By Shift!<br>
Versión 1.2 BETA<br>
Edite aquí su texto<br></b>

</div>

<br/>

</div>

</body>
</html>

Voy a añadir formularios, iFrames, Menús, y mucho más (dentro del foro (es decir, acá el código en este post)) tan pronto como consiga descubrir un último detalle.

EDIT, he acá ya los detalles que dije ayer que iba a poner:

Un formulario de contacto*:

Van a la parte de:

Código:: <b>AJAX DEMO, By Shift!<br>
Versión 1.2 BETA<br>
Edite aquí su texto<br></b>

y la editan por:

Código:: <b>Complete el formulario:</b><br><br>

<script src="http://www.jotform.com/min/g=jotform&3.1.96" type="text/javascript"></script>
<script type="text/javascript">
JotForm.init();
</script>
<link type="text/css" rel="stylesheet" href="http://www.jotform.com/css/styles/form.css?v3.1.96"/>
<link href="http://www.jotform.com/css/calendarview.css?v3.1.96" rel="stylesheet" type="text/css" />
<style type="text/css">
.form-label{
width:150px !important;
}
.form-label-left{
width:150px !important;
}
.form-line{
padding:10px;
}
.form-label-right{
width:150px !important;
}
.form-all{
width:605px;
color:Blue !important;
font-family:Arial;
font-size:12px;
}
</style>

<form class="jotform-form" action="http://www.jotform.com/submit.php" method="post" name="form_3563027138" id="3563027138" accept-charset="utf-8">
<input type="hidden" name="formID" value="3563027138" />
<div class="form-all">
<ul class="form-section">
<li class="form-line" id="id_1">
<label class="form-label-left" id="label_1" for="input_1"> Escriba el título de su mensaje: </label>
<div id="cid_1" class="form-input">
<input type="text" class="form-textbox" id="input_1" name="q1_escribaEl" size="20" />
</div>
</li>
<li class="form-line" id="id_3">
<label class="form-label-left" id="label_3" for="input_3"> Escriba su mensaje: </label>
<div id="cid_3" class="form-input">
<textarea id="input_3" class="form-textarea" name="q3_escribaSu" cols="40" rows="6"></textarea>
</div>
</li>
<li class="form-line" id="id_2">
<div id="cid_2" class="form-input-wide">
<div style="margin-left:156px" class="form-buttons-wrapper">
<button id="input_2" type="submit" class="form-submit-button">
Enviar
</button>
</div>
</div>
</li>
<li style="display:none">
Should be Empty:
<input type="text" name="website" value="" />
</li>
</ul>
</div>
<input type="hidden" id="simple_spc" name="simple_spc" value="3563027138" />
<script type="text/javascript">
document.getElementById("si" + "mple" + "_spc").value = "3563027138-3563027138";
</script>
</form>

Como siempre ando despistado, si quieren añadirle el boton Resetear, para borrar todo el texto del formulario, van a:

Código:: <button id="input_2" type="submit" class="form-submit-button">
Enviar
</button>

y debajo ponen:

Código:: <button id="input_2" type="reset" class="form-reset-button">
Borrar todo
</button>

* Ah, se me olvido decir que todos los mensajes van a parar a mi cuenta de Gmail, si quieren hacer el suyo propio pueden ir a: [Tienes que estar registrado y conectado para ver este vínculo]

Si quieren un menú*:

Van a la parte de:

Código:: <div style="padding-bottom:8px; width:505px; height:20px; background-color:#CEF6CE; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">

y debajo ponen toda esta burreria xD:

Código:: <div style="position:absolute; top:21px; left:5px; font-size:14px; font-weight:bold; color:#00FF00; font-family: arial;">


<style type="text/css">
div.menuBar,
div.menuBar a.menuButton,
div.menu,
div.menu a.menuItem {
font-family: "MS Sans Serif", Arial, sans-serif;
font-size: 8pt;
font-style: normal;
font-weight: normal;
color: #000000;
}
div.menuBar {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
padding: 4px 2px 4px 2px;
text-align: left;
}
div.menuBar a.menuButton {
background-color: transparent;
border: 1px solid #d0d0d0;
color: #000000;
cursor: default;
left: 0px;
margin: 1px;
padding: 2px 6px 2px 6px;
position: relative;
text-decoration: none;
top: 0px;
z-index: 100;
}
div.menuBar a.menuButton:hover {
background-color: transparent;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
color: #000000;
}
div.menuBar a.menuButtonActive,
div.menuBar a.menuButtonActive:hover {
background-color: #a0a0a0;
border-color: #909090 #f0f0f0 #f0f0f0 #909090;
color: #ffffff;
left: 1px;
top: 1px;
}
div.menu {
background-color: #d0d0d0;
border: 2px solid;
border-color: #f0f0f0 #909090 #909090 #f0f0f0;
left: 0px;
padding: 0px 1px 1px 0px;
position: absolute;
top: 0px;
visibility: hidden;
z-index: 101;
}
div.menu a.menuItem {
color: #000000;
cursor: default;
display: block;
padding: 3px 1em;
text-decoration: none;
white-space: nowrap;
}
div.menu a.menuItem:hover, div.menu a.menuItemHighlight {
background-color: #000080;
color: #ffffff;
}
div.menu a.menuItem span.menuItemText {}
div.menu a.menuItem span.menuItemArrow {
margin-right: -.75em;
}
div.menu div.menuItemSep {
border-top: 1px solid #909090;
border-bottom: 1px solid #f0f0f0;
margin: 4px 2px;
}
</style>
<script type="text/javascript">
function Browser() {
var ua, s, i;
this.isIE = false;
this.isNS = false;
this.version = null;
ua = navigator.userAgent;
s = "MSIE";
if ((i = ua.indexOf(s)) >= 0) {
this.isIE = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
s = "Netscape6/";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = parseFloat(ua.substr(i + s.length));
return;
}
// Treat any other "Gecko" browser as NS 6.1.
s = "Gecko";
if ((i = ua.indexOf(s)) >= 0) {
this.isNS = true;
this.version = 6.1;
return;
}
}
var browser = new Browser();
//----------------------------------------------------------------------------
// Code for handling the menu bar and active button.
//----------------------------------------------------------------------------
var activeButton = null;
// Capture mouse clicks on the page so any active button can be
// deactivated.
if (browser.isIE)
document.onmousedown = pageMousedown;
else
document.addEventListener("mousedown", pageMousedown, true);
function pageMousedown(event) {
var el;
if (activeButton == null)
return;
if (browser.isIE)
el = window.event.srcElement;
else
el = (event.target.tagName ? event.target : event.target.parentNode);
if (el == activeButton)
return;
if (getContainerWith(el, "DIV", "menu") == null) {
resetButton(activeButton);
activeButton = null;
}
}
function buttonClick(event, menuId) {
var button;
if (browser.isIE)
button = window.event.srcElement;
else
button = event.currentTarget;
button.blur();
if (button.menu == null) {
button.menu = document.getElementById(menuId);
menuInit(button.menu);
}
if (activeButton != null)
resetButton(activeButton);
if (button != activeButton) {
depressButton(button);
activeButton = button;
}
else
activeButton = null;
return false;
}
function buttonMouseover(event, menuId) {
var button;
if (browser.isIE)
button = window.event.srcElement;
else
button = event.currentTarget;
if (activeButton != null && activeButton != button)
buttonClick(event, menuId);
}
function depressButton(button) {
var x, y;
button.className += " menuButtonActive";
x = getPageOffsetLeft(button);
y = getPageOffsetTop(button) + button.offsetHeight;
if (browser.isIE) {
x += button.offsetParent.clientLeft;
y += button.offsetParent.clientTop;
}
button.menu.style.left = x + "px";
button.menu.style.top = y + "px";
button.menu.style.visibility = "visible";
}
function resetButton(button) {
removeClassName(button, "menuButtonActive");
if (button.menu != null) {
closeSubMenu(button.menu);
button.menu.style.visibility = "hidden";
}
}

function menuMouseover(event) {
var menu;
if (browser.isIE)
menu = getContainerWith(window.event.srcElement, "DIV", "menu");
else
menu = event.currentTarget;
if (menu.activeItem != null)
closeSubMenu(menu);
}
function menuItemMouseover(event, menuId) {
var item, menu, x, y;
if (browser.isIE)
item = getContainerWith(window.event.srcElement, "A", "menuItem");
else
item = event.currentTarget;
menu = getContainerWith(item, "DIV", "menu");
if (menu.activeItem != null)
closeSubMenu(menu);
menu.activeItem = item;
item.className += " menuItemHighlight";
if (item.subMenu == null) {
item.subMenu = document.getElementById(menuId);
menuInit(item.subMenu);
}
x = getPageOffsetLeft(item) + item.offsetWidth;
y = getPageOffsetTop(item);
var maxX, maxY;
if (browser.isNS) {
maxX = window.scrollX + window.innerWidth;
maxY = window.scrollY + window.innerHeight;
}
if (browser.isIE && browser.version < 6) {
maxX = document.body.scrollLeft + document.body.clientWidth;
maxY = document.body.scrollTop + document.body.clientHeight;
}
if (browser.isIE && browser.version >= 6) {
maxX = document.documentElement.scrollLeft + document.documentElement.clientWidth;
maxY = document.documentElement.scrollTop + document.documentElement.clientHeight;
}
maxX -= item.subMenu.offsetWidth;
maxY -= item.subMenu.offsetHeight;
if (x > maxX)
x = Math.max(0, x - item.offsetWidth - item.subMenu.offsetWidth
+ (menu.offsetWidth - item.offsetWidth));
y = Math.max(0, Math.min(y, maxY));
item.subMenu.style.left = x + "px";
item.subMenu.style.top = y + "px";
item.subMenu.style.visibility = "visible";
if (browser.isIE)
window.event.cancelBubble = true;
else
event.stopPropagation();
}
function closeSubMenu(menu) {
if (menu == null || menu.activeItem == null)
return;
if (menu.activeItem.subMenu != null) {
closeSubMenu(menu.activeItem.subMenu);
menu.activeItem.subMenu.style.visibility = "hidden";
menu.activeItem.subMenu = null;
}
removeClassName(menu.activeItem, "menuItemHighlight");
menu.activeItem = null;
}
function menuInit(menu) {
var itemList, spanList
var textEl, arrowEl;
var itemWidth;
var w, dw;
var i, j;
if (browser.isIE) {
menu.style.lineHeight = "2.5ex";
spanList = menu.getElementsByTagName("SPAN");
for (i = 0; i < spanList.length; i++)
if (hasClassName(spanList[i], "menuItemArrow")) {
spanList[i].style.fontFamily = "Webdings";
spanList[i].firstChild.nodeValue = "4";
}
}
itemList = menu.getElementsByTagName("A");
if (itemList.length > 0)
itemWidth = itemList[0].offsetWidth;
else
return;
for (i = 0; i < itemList.length; i++) {
spanList = itemList[i].getElementsByTagName("SPAN")
textEl = null
arrowEl = null;
for (j = 0; j < spanList.length; j++) {
if (hasClassName(spanList[j], "menuItemText"))
textEl = spanList[j];
if (hasClassName(spanList[j], "menuItemArrow"))
arrowEl = spanList[j];
}
if (textEl != null && arrowEl != null)
textEl.style.paddingRight = (itemWidth
- (textEl.offsetWidth + arrowEl.offsetWidth)) + "px";
}
if (browser.isIE) {
w = itemList[0].offsetWidth;
itemList[0].style.width = w + "px";
dw = itemList[0].offsetWidth - w;
w -= dw;
itemList[0].style.width = w + "px";
}
}
function getContainerWith(node, tagName, className) {
while (node != null) {
if (node.tagName != null && node.tagName == tagName &&
hasClassName(node, className))
return node;
node = node.parentNode;
}
return node;
}
function hasClassName(el, name) {
var i, list;
list = el.className.split(" ");
for (i = 0; i < list.length; i++)
if (list[i] == name)
return true;
return false;
}
function removeClassName(el, name) {
var i, curList, newList;
if (el.className == null)
return;
newList = new Array();
curList = el.className.split(" ");
for (i = 0; i < curList.length; i++)
if (curList[i] != name)
newList.push(curList[i]);
el.className = newList.join(" ");
}
function getPageOffsetLeft(el) {
var x;
x = el.offsetLeft;
if (el.offsetParent != null)
x += getPageOffsetLeft(el.offsetParent);
return x;
}
function getPageOffsetTop(el) {
var y;
y = el.offsetTop;
if (el.offsetParent != null)
y += getPageOffsetTop(el.offsetParent);
return y;
}
</script>
</head>
<body>


<div class="menuBar" style="width:100%;">
<a class="menuButton" href="" onclick="return buttonClick(event, 'fileMenu');" onmouseover="buttonMouseover(event, 'fileMenu');">File</a>
<a class="menuButton" href="" onclick="return buttonClick(event, 'editMenu');" onmouseover="buttonMouseover(event, 'editMenu');">Edit</a>
<a class="menuButton" href="" onclick="return buttonClick(event, 'viewMenu');" onmouseover="buttonMouseover(event, 'viewMenu');">View</a>
<a class="menuButton" href="" onclick="return buttonClick(event, 'toolsMenu');" onmouseover="buttonMouseover(event, 'toolsMenu');">Tools</a>
<a class="menuButton" href="" onclick="return buttonClick(event, 'optionsMenu');" onmouseover="buttonMouseover(event, 'optionsMenu');">Options</a>
<a class="menuButton" href="" onclick="return buttonClick(event, 'helpMenu');" onmouseover="buttonMouseover(event, 'helpMenu');">Help</a>
</div>

<div id="fileMenu" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">File Menu Item 1</a>
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'fileMenu2');"
><span class="menuItemText">File Menu Item 2</span><span class="menuItemArrow">»</span></a>
<a class="menuItem" href="blank.html">File Menu Item 3</a>
<a class="menuItem" href="blank.html">File Menu Item 4</a>
<a class="menuItem" href="blank.html">File Menu Item 5</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">File Menu Item 6</a>
</div>
<div id="editMenu" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">Edit Menu Item 1</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu Item 2</a>
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'editMenu3');"
><span class="menuItemText">Edit Menu Item 3</span><span class="menuItemArrow">»</span></a>
<a class="menuItem" href="blank.html">Edit Menu Item 4</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu Item 5</a>
</div>
<div id="viewMenu" class="menu">
<a class="menuItem" href="blank.html">View Menu Item 1</a>
<a class="menuItem" href="blank.html">View Menu Item 2</a>
<a class="menuItem" href="blank.html">View Menu Item 3</a>
</div>
<div id="toolsMenu" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'toolsMenu1');"
><span class="menuItemText">Tools Menu Item 1</span><span class="menuItemArrow">»</span></a>
<a class="menuItem" href="blank.html">Tools Menu Item 2</a>
<a class="menuItem" href="blank.html">Tools Menu Item 3</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'toolsMenu4');"
><span class="menuItemText">Tools Menu Item 4</span><span class="menuItemArrow">»</span></a>
<a class="menuItem" href="blank.html">Tools Menu Item 5</a>
</div>
<div id="optionsMenu" class="menu">
<a class="menuItem" href="blank.html">Options Menu Item 1</a>
<a class="menuItem" href="blank.html">Options Menu Item 2</a>
<a class="menuItem" href="blank.html">Options Menu Item 3</a>
</div>
<div id="helpMenu" class="menu">
<a class="menuItem" href="blank.html">Help Menu Item 1</a>
<a class="menuItem" href="blank.html">Help Menu Item 2</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Help Menu Item 3</a>
</div>

<div id="fileMenu2" class="menu">
<a class="menuItem" href="blank.html">File Menu 2 Item 1</a>
<a class="menuItem" href="blank.html">File Menu 2 Item 2</a>
</div>

<div id="editMenu3" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">Edit Menu 3 Item 1</a>
<a class="menuItem" href="blank.html">Edit Menu 3 Item 2</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="" onclick="return false;" onmouseover="menuItemMouseover(event, 'editMenu3_3');"
><span class="menuItemText">Edit Menu 3 Item 3</span><span class="menuItemArrow">»</span></a>
<a class="menuItem" href="blank.html">Edit Menu 3 Item 4</a>
</div>
<div id="editMenu3_3" class="menu">
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 1</a>
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 2</a>
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 3</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Edit Menu 3-3 Item 4</a>
</div>

<div id="toolsMenu1" class="menu">
<a class="menuItem" href="blank.html">Tools Menu 1 Item 1</a>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 2</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 3</a>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 4</a>
<div class="menuItemSep"></div>
<a class="menuItem" href="blank.html">Tools Menu 1 Item 5</a>
</div>
<div id="toolsMenu4" class="menu" onmouseover="menuMouseover(event)">
<a class="menuItem" href="blank.html">Tools Menu 4 Item 1</a>
<a class="menuItem" href="blank.html">Tools Menu 4 Item 2</a>
<a class="menuItem" href="blank.html" onclick="return false;" onmouseover="menuItemMouseover(event, 'toolsMenu4_3');"><span class="menuItemText">Tools Menu 4 Item 3</span><span class="menuItemArrow">»</span></a>
</div>
<div id="toolsMenu4_3" class="menu">
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 1</a>
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 2</a>
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 3</a>
<a class="menuItem" href="blank.html">Tools Menu 4-3 Item 4</a>
</div>

</div>

</div>

* Recuerden que el menú se ve tal como está en la DEMO, aparte de Desfigurado, ustedes lo pueden editar, cuando yo lo arregle (supongo que con ayuda), le añadiré efectos. Buah, que si le añadiré... xD

EDIT, ya voy a subir como poner las imágenes y los botones tan grosos que hice (próximamente, formulario redondeado):

Imágenes de fondo*:

Bueno, pues este es el código muy simple por cierto:

En los DIV's, como este de ejemplo:

Código:: <div style="position:absolute; top:1px; left:5px; font-size:14px; font-weight:bold; color:#FF0000; font-family: arial;">
Prueba de pop up simple con AJAX</div>

Ponen arriba el código de unaa imágen, en este caso, en el mismo código de ejemplo que les di, ponen encima esto:

Código:: <img src="http://i39.tinypic.com/audr1e.gif" border="0" width="505" height="20" alt="">

Y así en las 3 capas:

Siguiente DIV:

Código:: <div style="position:absolute; top:21px; left:5px; font-size:14px; font-weight:bold; color:#00FF00; font-family: arial;">

Siguiente código que ponen encima es:

Código:: <img src="http://www.biblioteca.sabiv.com/images/Fondo_Degradado_1.jpg" border="0" width="505" height="30" alt="">

Siguiente DIV:

Código:: <div style="position:absolute; top:50px; margin-left:5px; color:#0000FF; font-size:12px; font-weight:normal; font-family: arial;">

Siguiente código:

Código:: <img src="http://es.appleweblog.com/files/2006/06/Imagen%2021.png" border="0" width="505" height="287" alt="">

* Recuerden que pueden editar esas imagenes por otras.

Botones re-grosos xD*:

Van y ponen al final del todo, sin pasarse las meta-etiquetas: y
y ponen:

Código:: <style type="text/css">
.button{
font:15px Calibri, Arial, sans-serif;

/* A semi-transparent text shadow */
text-shadow:1px 1px 0 rgba(255,255,255,0.4);

/* Overriding the default underline styling of the links */
text-decoration:none !important;
white-space:nowrap;

display:inline-block;
vertical-align:baseline;
position:relative;
cursor:pointer;
padding:10px 20px;

background-repeat:no-repeat;

/* The following two rules are fallbacks, in case
the browser does not support multiple backgrounds. */

background-position:bottom left;
background-image:url('http://i.imgur.com/uTt6U.png');

/* Multiple backgrounds version. The background images
are defined individually in color classes */

background-position:bottom left, top right, 0 0, 0 0;
background-clip:border-box;

/* Applying a default border raidus of 8px */

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

/* A 1px highlight inside of the button */

-moz-box-shadow:0 0 1px #fff inset;
-webkit-box-shadow:0 0 1px #fff inset;
box-shadow:0 0 1px #fff inset;

/* Animating the background positions with CSS3 */
/* Currently works only in Safari/Chrome */

-webkit-transition:background-position 1s;
-moz-transition:background-position 1s;
transition:background-position 1s;
}

.button:hover{

/* The first rule is a fallback, in case the browser
does not support multiple backgrounds
*/

background-position:top left;
background-position:top left, bottom right, 0 0, 0 0;
}

.button:active{
/* Moving the button 1px to the bottom when clicked */
bottom:-1px;
}

/* The three buttons sizes */

.button.big { font-size:30px;}
.button.medium { font-size:18px;}
.button.small { font-size:13px;}

/* A more rounded button */

.button.rounded{
-moz-border-radius:4em;
-webkit-border-radius:4em;
border-radius:4em;
}

/* Defining four button colors */

/* BlueButton */

.blue.button{
color:#0f4b6d !important;

border:1px solid #84acc3 !important;

/* A fallback background color */
background-color: #48b5f2;

/* Specifying a version with gradients according to */

background-image: url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'),
-moz-radial-gradient( center bottom, circle,
rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px),
-moz-linear-gradient(#4fbbf7, #3faeeb);

background-image: url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(89,208,244,1)), to(rgba(89,208,244,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb));
}

.blue.button:hover{
background-color:#63c7fe;

background-image: url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'),
-moz-radial-gradient( center bottom, circle,
rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px),
-moz-linear-gradient(#63c7fe, #58bef7);

background-image: url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'),
-webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100,
from(rgba(109,217,250,1)), to(rgba(109,217,250,0))),
-webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7));
}

/* Green Button */

.green.button{
color:#345903 !important;
border:1px solid #96a37b !important;
background-color: #79be1e;

background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -moz-radial-gradient(center bottom, circle, rgba(162,211,30,1) 0,rgba(162,211,30,0) 100px),-moz-linear-gradient(#82cc27, #74b317);
background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(162,211,30,1)), to(rgba(162,211,30,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#82cc27), to(#74b317));
}

.green.button:hover{
background-color:#89d228;

background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -moz-radial-gradient(center bottom, circle, rgba(183,229,45,1) 0,rgba(183,229,45,0) 100px),-moz-linear-gradient(#90de31, #7fc01e);
background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(183,229,45,1)), to(rgba(183,229,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#90de31), to(#7fc01e));
}

/* Orange Button */

.orange.button{
color:#693e0a !important;
border:1px solid #bea280 !important;
background-color: #e38d27;

background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -moz-radial-gradient(center bottom, circle, rgba(232,189,45,1) 0,rgba(232,189,45,0) 100px),-moz-linear-gradient(#f1982f, #d4821f);
background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(232,189,45,1)), to(rgba(232,189,45,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1982f), to(#d4821f));
}

.orange.button:hover{
background-color:#ec9732;

background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -moz-radial-gradient(center bottom, circle, rgba(241,192,52,1) 0,rgba(241,192,52,0) 100px),-moz-linear-gradient(#f9a746, #e18f2b);
background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(241,192,52,1)), to(rgba(241,192,52,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9a746), to(#e18f2b));
}

.gray.button{
color:#525252 !important;
border:1px solid #a5a5a5 !important;
background-color: #a9adb1;

background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -moz-radial-gradient(center bottom, circle, rgba(197,199,202,1) 0,rgba(197,199,202,0) 100px),-moz-linear-gradient(#c5c7ca, #92989c);
background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(197,199,202,1)), to(rgba(197,199,202,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#c5c7ca), to(#92989c));
}

.gray.button:hover{
background-color:#b6bbc0;

background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -moz-radial-gradient(center bottom, circle, rgba(202,205,208,1) 0,rgba(202,205,208,0) 100px),-moz-linear-gradient(#d1d3d6, #9fa5a9);
background-image:url('http://i.imgur.com/uTt6U.png'), url('http://i.imgur.com/uTt6U.png'), -webkit-gradient(radial, 50% 100%, 0, 50% 100%, 100, from(rgba(202,205,208,1)), to(rgba(202,205,208,0))),-webkit-gradient(linear, 0% 0%, 0% 100%, from(#d1d3d6), to(#9fa5a9));
}
</style>

Y ya está, si quieren pruebas, pueden utilizar cualquier tipo de "class="button small orange""

Si lo quieren aplicar a nuestros botones, pues sus tituyen este código:

Código:: <button id="input_2" type="submit" class="form-submit-button">
Enviar
</button>
<button id="input_2" type="reset" class="form-reset-button">
Borrar todo
</button>

Por este otro:

Código:: <button class="button small blue" id="input_2" type="submit" class="form-submit-button">
Enviar
</button>
<button class="button small green" id="input_2" type="reset" class="form-reset-button">
Borrar todo
</button>

* Estos botones lo saqué de [Tienes que estar registrado y conectado para ver este vínculo].
Pronto sacaré más colores yo mismo.

EDIT (Todavía no es el FINAL hasta que no sepa como hacer que se vea bien el foro), ahora les traigo el redondeamiento y nuevos botones.

Más botones*:

Tengo unos botones que saqué de un post de SP, que supuestamente están colgados en T!, y vpya sacar mas estilos, bueno, el código:

Van al final, y después de los últimos códigos de botones que le dí, van y pegan este:

Código:: <style type="text/css">
/* Botones css compartidos por Shift! */

.button{
background:url('http://i.imgur.com/7uXKT.gif') repeat-x;
background-color:#1769BA;
border:1px solid #173977;
cursor:pointer;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
margin:5px 5px;
min-width:100px;
padding:8px 10px;
text-shadow:0 1px 1px #000000;
-moz-box-shadow:1px 1px 1px #A7A7A7;
-moz-border-radius:5px;
-webkit-box-shadow:1px 1px 1px #A7A7A7;
-webkit-border-radius:5px;
}
a.button{color:#FFF;}
a.button:hover{text-decoration:none;}
.button:hover{
-moz-box-shadow:0px 0px 10px #5298f0;
-webkit-box-shadow:0px 0px 10px #5298f0;
}
.button:active{
background:#2b79cc;
font-weight:bold;
color:#0B243B;
text-shadow:1px 1px 1px #4f96ed;
-moz-box-shadow:none!important;
}
input.button:disabled{
opacity:0.5;
filter:alpha(opacity=50);
}

/*Botones 2.0 Colores*/

/*Rojo*/

.button.rojo{
background:url('http://i.imgur.com/7uXKT.gif') 0 -45px repeat-x;
background-color:#1769BA;
border-color:#530e0e;
}
.button.rojo:hover{
-moz-box-shadow:0px 0px 10px #FD9393;
-webkit-box-shadow:0px 0px 10px #FD9393;
}
.button.rojo:active{ background:#bf1e1e; color:#610B0B; text-shadow:1px 1px 1px #f06161;}

/*Verde*/

.button.verde{
background:url('http://i.imgur.com/7uXKT.gif') 0 -90px repeat-x;
background-color:#2f9a12;
border-color:#0d5020;
}
.button.verde:hover{
-moz-box-shadow:0px 0px 10px #64e34b;
-webkit-box-shadow:0px 0px 10px #64e34b;
}
.button.verde:active{ background:#2f9a12; color:#0B3B0B; text-shadow:1px 1px 1px #61df48;}

/*Amarillo*/

.button.amarillo{
background:url('http://i.imgur.com/7uXKT.gif') 0 -135px repeat-x;
background-color:#b9ba18;
border-color:#565c13;
color:#000;
text-shadow:1px 1px 1px #FFF;
}
.button.amarillo:hover{
-moz-box-shadow:0px 0px 10px #b9ba18;
-webkit-box-shadow:0px 0px 10px #b9ba18;
}
.button.amarillo:active{ font-weight:normal; background:#b9ba18; color:#393B0B; text-shadow:1px 1px 1px #f0ef61;}

/*Gris*/

.button.gris{
background:url('http://i.imgur.com/7uXKT.gif') 0 -180px repeat-x;
background-color:#a5a4a4;
color:#000;
text-shadow:1px 1px 1px #FFF;
border-color:#61615f;
}
.button.gris:hover{
-moz-box-shadow:0px 0px 10px #a4a4a3;
-webkit-box-shadow:0px 0px 10px #a4a4a3;
}
.button.gris:active{ font-weight:normal; background:#a5a4a4; color:#2E2E2E; text-shadow:1px 1px 1px #dcdbda;}

/*Naranja*/

.button.naranja{
background:url('http://i.imgur.com/7uXKT.gif') 0 -225px repeat-x;
background-color:#c57617;
border-color:#855614;
}
.button.naranja:hover{
-moz-box-shadow:0px 0px 12px #d69335;
-webkit-box-shadow:0px 0px 12px #d69335;
}
.button.naranja:active{ background:#c87c1d; color:#61380B; text-shadow:1px 1px 1px #efc063;}

/* botones css compartidos por Shift! */
</style>

* La font de los botones es [Tienes que estar registrado y conectado para ver este vínculo].
Y la utilización esta:

Citación :

Código:: Azul: <input class="button" value="Normal" type="submit">
Rojo: <input class="button rojo" value="Rojo" type="submit">
Verde: <input class="button verde" value="Verde" type="submit">
Amarillo: <input class="button amarillo" value="Amarillo" type="submit">
Gris: <input class="button gris" value="Gris" type="submit">
Naranja: <input class="button naranja" value="Naranja" type="submit">

El redondeamiento*:

Bueno, este mod, es totalmente hecho por mi, buscando y re-buscando en San Google, bueno los códigos:

Primero van y ponen al final del último código que les dí de botones este código:

Código:: <style type="text/css">
.corner{display:block}
.corner *{
display:block;
height:1px;
overflow:hidden;
font-size:.01em;}
.corner1{
margin-left:3px;
margin-right:3px;
padding-left:1px;
padding-right:1px;
border-left:1px solid;
border-right:1px solid;}
.corner2{
margin-left:1px;
margin-right:1px;
padding-right:1px;
padding-left:1px;
border-left:1px solid;
border-right:1px solid;}
.corner3{
margin-left:1px;
margin-right:1px;
border-left:1px solid;
border-right:1px solid;}
.corner4{
border-left:1px solid;
border-right:1px solid}
.corner5{
border-left:1px solid;
border-right:1px solid}
.cornerfg{
-moz-border-radius:10px;
-webkit-border-radius:10px;
-ms-border-radius:10px;}
</style>

Después, van y editan las imágenes del DIV Nº 1 y 3, por esto:

[Tienes que estar registrado y conectado para ver este vínculo]

y

[Tienes que estar registrado y conectado para ver este vínculo]

Quedaría algo así:

Código:: <img class="cornerfg" src="http://i.imgur.com/c3QKl.gif" border="0" width="505" height="20" alt="">

y

Código:: <img src="http://i.imgur.com/tHd5J.png" border="0" width="505" height="287" alt="">

Luego van a los DIVs 1 y 3, y ponen al lado de cada "
Quedría algo así:

Código:: <div class="cornerfg" style="padding-bottom:8px; width:505px; height:10px; background-color:#F6CECE; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);">

y

Código:: <div class="cornerfg" style="position:absolute; top:50px; margin-left:5px; color:#0000FF; font-size:12px; font-weight:normal; font-family: arial;">

Pero, también tienen que añadir el: "class="cornerfg""

Acá:

Código:: <div id="capa1" onclick="mostrar('window')"><a href="javascript:(open.widowsajax);" style="text-decoration:none"><b><span style="font-family: arial;"><span style="color: Red;"><span style="font-size: 13px;">Haz clic para mostrar POP-UP con AJAX MOD</span></span></span></b></a></div><div id="window" style="position:absolute; z-index:10; left:275px; top:50px; height:335px; width:505px;background-color:#CECEF6; border:1px solid #464f5a; visibility:hidden">

Quedaría algo así:

Código:: <div class="cornerfg" id="capa1" onclick="mostrar('window')"><a href="javascript:(open.widowsajax);" style="text-decoration:none"><b><span style="font-family: arial;"><span style="color: Red;"><span style="font-size: 13px;">Haz clic para mostrar POP-UP con AJAX MOD</span></span></span></b></a></div><div class="cornerfg" id="window" style="position:absolute; z-index:10; left:275px; top:50px; height:335px; width:505px;background-color:#CECEF6; border:1px solid #464f5a; visibility:hidden">

* Esto solo se visualiza bien en Firefox (FF), trabajando para que se visualiza bien en todos los navegadores (incluso los desactualizados, como: Internet Explorer)

¡Saludos, estos son todos los mods que le añadí a la caja!

Un poco de utilidad le ven ya mas ¿no? xD, porque, esta es toda la que le añadí.

Puede que trabaje para cambiarle el borde, y ponerle color de fondo, todo de color transparente.

-----------------------------------------------------------------------------

Bueno, estoy dandole uso para ver, si se puede hacer Registros, MPs, Denuncias, Postear incluso, etc. Aunque no sé...

SP Members + AJAX MOD BETA (Utilizable) = Algo guay

Yo creo, que ustedes pueden aplicar su inteligencia a este mod, para que ya no diga Jona, <>, bah, ya bueno, se fue esa perrería y pueden hacer sus registros con esta genialidad (Es broma todo lo que está subrayado xD).

Bueno, la DEMO: [Tienes que estar registrado y conectado para ver este vínculo]

PD: Fijense, que si es BETA, que no se si es compatible con los foros de SP. xD
Y no vengan, [s]a hinchar pelotas[/s] con que el menú de la DEMO se ve mal (desfigurado diría yo), que ya lo sé, y me las estoy apañando para arreglarlo.

"PDs: Ups! Tuve un pequeño error con Juans y dijera que borrara este tema en vez de otro, pero Bueh... A la "miercoles" los mensajes de Don Kaissar.com LOL [Tienes que estar registrado y conectado para ver esa imagen] "

PDSD: Translade el mensaje a Este foro ya que en SP, no cabe.

¡Saludos!

Dejen de bardear, lo dicho, si van a comentar para molestar mejor no comenten. [Tienes que estar registrado y conectado para ver esa imagen]

» Prueba de post de invitados