Hola amigos.
En este tema, voy a aprovechar para enseñarles como cambiar distintos estilos que pwg no tiene. Entre ellos se enseñara a cambiar " Submit, text, textareas, maquetación de formularios, efectos hover y action, resplandores y más”.
. . . . . . . . . ESTILO DE BOTON ( Submit ) . . . . . . . . .
Cita: Para cambiarles el estilo a los botones que nos aparece en los comentarios, formularios etc., casualmente se los puede encontrar como Añadir comentario, etc.
En encontrado un sitio para crear degradados, Código: http://www.colorzilla.com/gradient-editor/
Es sencillo de usar la aplicación
Volviendo al tema, para cambiar el estilo submit, primero que nada debemos empezar colocando este código:
Cita: input[type="submit"] {
Como notaran, el codigo es diferente, por eso para cambiarlo no debemos usar este codigo:
Donde esta marcado con rojo es el nombre del atributo que se encontrara en todos los botones.
Ahora pasaremos al degradado, si ya hemos creado el degradado, vamos a copiar el codigo que nos dio y lo pegaremos de esta manera:
Cita: input[type="submit"] {
background: rgb(235,241,246); /* Old browsers */
background: -moz-linear-gradient(top, rgba(235,241,246,1) 0%, rgba(171,211,238,1) 50%, rgba(137,195,235,1) 51%, rgba(213,235,251,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(235,241,246,1)), color-stop(50%,rgba(171,211,238,1)), color-stop(51%,rgba(137,195,235,1)), color-stop(100%,rgba(213,235,251,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(235,241,246,1) 0%,rgba(171,211,238,1) 50%,rgba(137,195,235,1) 51%,rgba(213,235,251,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 ); /* IE6-9 */
+++++Como resultado nos quedara+++++
Ahora lo que haremos será darle un estilo redondeado al botón, para ello usaremos el siguiente código:
Cita: border: 1px solid #00b2cc; /* edita el color de los bordes de arriba */
border-bottom-color: #0096bb;;/* edita el color de los bordes de abajo */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
padding: 5px 14px 6px;
Donde esta marcado con negritas es donde lo podemos editar.
En el codigo que mostre, nos encontraremos con atributos como por ejemplos "#ccc" eso es un color, nosotros podremos cambiarlo segun el codigo de color que queramos, como tambien nos sale algo similar a esto 6px nosotros si lo editamos nos cambiara el estilo redondeado. ( se pueden editar todos los PX y los # )
+++++Y el resultado sera+++++
Ahora lo que haremos será cambiarle el estilo al color de texto del botón, por eso usaremos el siguiente código:
Cita: color: #007bbb;
font-size: 13px;
El texto #007bbb Lo podemos editar según el código de color que deseamos y se cambiara.
Y el numero que esta marcado 13px Si le cambiamos el numero el tamaño del texto aumentara o disminuirá según el cambio.
+++++El resultado de todo esto sera:+++++
. . . . . . . . . Efecto hover . . . . . . . . .
Ahora lo que vamos a hacer es agregarle un efecto cuando pasamos el mause por el botón, el efecto que vamos a poner se llama Hover.
Como en el primer codigo usamos el codigo Cita: input[type="submit"] { ahora usaremos este otro Cita: input[type="submit"]: hover {
Veremos que ahora nos aparecerá el texto hover eso Hará el efecto.
Cuando creamos un degradado en el primer paso, con el mismo degradado, lo que haremos será mover las flechitas de los colores a su lado opuesto y formas un degradado con los mismos colores pero diferente orden.
Yo ya lo tengo y lo voy a colocar debajo del codigo ya dado anteriormente
Cita: }
input[type="submit"]: hover {
background: rgb(228,245,252); /* Old browsers */
background: -moz-linear-gradient(top, rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-9 */
+++++De resultado nos quedara haci+++++
Ahora lo que haremos sera darle un resplandor exterior como el de twitter pero algo diferente, usaremos el siguiente codigo:
Cita: border: 1px solid #0093c3;
-moz-box-shadow: 0px 0px 5px#00a8ff;
-webkit-box-shadow: 0px 0px[b] [b]5px #00a8ff;
box-shadow: 0px 0px 5px #00a8ff;
Donde esta marcado con color lo podemos editar segun el color que queremos, y donde esta marcado con negrita son los pixeles, si lo editamos el resplandor sera mayor o menor.
+++++El resultado del mismo sera+++++
Yo no lo quise poner un resplandor grande sino uno que se enhotara no más.
. . . . . . . . . Efecto action . . . . . . . . .
Ahora vamos a agregarle un estilo que al presionar el mause sobre el boton nos salga un efecto de sombra.
Usaremos este codigo:
Código: input[type="SUBMIT"]:active {
Y le seguirá este otro:
Código: -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}
Cuando lo pegamos todo el resultado de todo esto sera:
Probado en formulario de contacto ( Extra ):
Pueden ver un ejemplo contemporáneo
http://brianpwg.es.tl/Adquirir.htm
Proximo tutorial : Campos de texto ______________ Es una reina, es una reina, fiesta fiesta. Tito el bambino
Ultima edición por brianpwg el Vie Dic 23, 2011 11:56 pm; editado 1 vez
|
