RSS
Facebook
G+

Buscador de IntercambioSOS:


Retroceder   Foro de Ayuda IntercambiosvirtualeS > Soporte Sobre: Educación & Entretenimiento > Zona Académica > Programación

Respuesta
 
Herramientas Desplegado
Antiguo 22-nov-2010     #1
Predeterminado Diseño de Texbox con CSS

Círculo redondeado



Código PHP:
.circle {     width100px;     height100px;     -moz-border-radius100px;     -webkit-border-radius100px; } 

Efecto de sombra interior



Especificando el valor inset podemos crear sombra interior en una caja. Esta característica sólo está soportada, por ahora, en Google Chrome 4+ y Firefox 3.5.

Código PHP:
.inset {    -moz-box-shadowinset 0 3px 8px rgba(0,0,0,.4);    -webkit-box-shadowinset 0 3px 8px rgba(0,0,0,.4);    box-shadowinset 0 3px 8px rgba(0,0,0,.24); } 


Unidas las 3 características anteriores, más CSS gradient para realizar un degradado en la parte de fuera de la caja de búsqueda, crearemos un sencillo buscador estilizado con CSS3. Para los navegador que no soporten CSS3, la caja se mostrará con forma cuadrada en todos los elementos que contiene y sin efecto de degradado.

El código HTML sería así:

Código PHP:
<form>
<
input type="text" value="Buscar..." onfocus="if (this.value == 'Buscar...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Buscar...';}" />
<
input type="button" value="Ir" />
</
form
En Css seria asi:

Código PHP:
.searchform {

displayinline-block;

zoom1/* ie7 hack para display:inline-block */

*displayinline;

bordersolid 1px #d2d2d2;

padding3px 5px;

-
webkit-border-radius2em;

-
moz-border-radius2em;

border-radius2em;

-
webkit-box-shadow0 1px 0px rgba(0,0,0,.1);

-
moz-box-shadow0 1px 0px rgba(0,0,0,.1);

box-shadow0 1px 0px rgba(0,0,0,.1);

background#f1f1f1;

background: -webkit-gradient(linearleft topleft bottomfrom(#fff), to(#ededed));

background: -moz-linear-gradient(top,  #fff,  #ededed);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff'endColorstr='#ededed'); /* ie7 */

-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff'endColorstr='#ededed'); /* ie8 */

}

.
searchform input {

fontnormal 12px/100ArialHelveticasans-serif;

}

.
searchform .searchfield {

background#fff;

padding6px 6px 6px 8px;

width202px;

bordersolid 1px #bcbbbb;

outlinenone;

-
webkit-border-radius2em;

-
moz-border-radius2em;

border-radius2em;

-
moz-box-shadowinset 0 1px 2px rgba(0,0,0,.2);

-
webkit-box-shadowinset 0 1px 2px rgba(0,0,0,.2);

box-shadowinset 0 1px 2px rgba(0,0,0,.2);

}

.
searchform .searchbutton {

color#fff;

bordersolid 1px #494949;

font-size11px;

height27px;

width27px;

text-shadow0 1px 1px rgba(0,0,0,.6);

-
webkit-border-radius2em;

-
moz-border-radius2em;

border-radius2em;

background#5f5f5f;

background: -webkit-gradient(linearleft topleft bottomfrom(#9e9e9e), to(#454545));

background: -moz-linear-gradient(top,  #9e9e9e,  #454545);

filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e'endColorstr='#454545'); /* ie7 */

-ms-filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e'endColorstr='#454545'); /* ie8 */



"El hombre es esclavo de sus palabras y dueño de su silencio"

"No hay nada más bello que vivir"... R.I.P. Jaime Moreno Garcia
Responder Citando
Los siguientes 3 usuarios agradecen a sasuke.17 por este mensaje:
Dianela (22-nov-2010), Felina05 (23-nov-2010), jchierro (24-nov-2010)
Antiguo 22-nov-2010     #2
Predeterminado

Enviar un mensaje por MSN a Dianela Responder Citando
Antiguo 22-nov-2010     #3
Predeterminado

Excelente, guardado a favoritos...
[EDIT] Sería mejor que lo muevas al foro de Recursos de Webmaster y Diseño Web

Saludos


La esencia no se pierde

Última edición por Rplate; 22-nov-2010 a las 21:28 Razón: Edit
Enviar un mensaje por MSN a Rplate Enviar un mensaje por Skype™ a Rplate Responder Citando
Antiguo 23-nov-2010     #4
Predeterminado


"Aprende a interrogar razonablemente, a escuchar con atención, a responder serenamente, y a callar cuando no tengas nada que decir"


Responder Citando
Respuesta


(0 miembros y 1 visitantes)
 
Herramientas
Desplegado

Normas de Publicación
No puedes crear nuevos temas
No puedes responder mensajes
No puedes subir archivos adjuntos
No puedes editar tus mensajes

Los Códigos BB están Activado
Las Caritas están Activado
[IMG] está Activado
El Código HTML está Desactivado

Ir al Foro

Temas Similares
Tema Autor Foro Respuestas Último mensaje
Diseño grafico de paginas web wpiaw AudioLibros, Manuales, Libros & Revistas 41 04-dic-2011 07:16
Análisis y Diseño de Sistemas wolfito Otras 3 07-feb-2011 15:23
Lista de webs de diseño y diseñadores sxat Recursos Webmasters & Diseño Web 0 03-dic-2009 14:45


Desarrollado por: vBulletin® Versión 3.8.1
Derechos de Autor ©2000 - 2017, Jelsoft Enterprises Ltd.
Ad Management by RedTyger