Buscamos ser Diferentes: CSS

Mostrando entradas con la etiqueta CSS. Mostrar todas las entradas

lunes, 3 de diciembre de 2012

Truco CSS:Codigo para crear blogroll efecto deslizante en blogger

Posted on 11:32 by XSaint with No comments

Este es el codigo para que su blogroll luzca asi o algun lector de noticias que tengas aplican este efecto con las etiquetas marquee

Juega Bingo GRATIS!!
Trabaja por Internet
Juega Poker

JQuery UI Ajax Autocompletar TextBox con Base de Datos en ASP.NET usando WebService

Posted on 17:34 by XSaint with 8 comments

Para lograr esto utilize la base de datos AdventureWorks y la tabla Person.Contact, bueno mas abajo veran esta conexion, lo primero que haremos sera crear un proyecto web en C# y agregan este codigo en la hoja de codigo de la parte html:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
    <title>Página sin título</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script> 
                <script type="text/javascript">
                    $(document).ready(function() {
                        SearchText();
                    });
                    function SearchText() {
                        $(".auto").autocomplete({
                            source: function(request, response) {
                                $.ajax({
                                    type: "POST",
                                    contentType: "application/json; charset=utf-8",
                                    url: "Default.aspx/GetAutoCompleteData",
                                    data: "{'FirstName':'" + document.getElementById('FirstName').value + "'}",
                                    dataType: "json",
                                    success: function(data) {
                                        response(data.d);
                                    },
                                    error: function(result) {
                                        alert("Error Occurred");
                                    }
                                });
                            }
                        });
                    }
                </script>
</head>
<body>
    <form id="form1" runat="server">
   <div class="demo">
<div class="ui-widget">
    <label for="tbAuto">Ingrese un nombre: </label>
   <input type="text" id="FirstName" class="auto" />
</div></div>
    </form>
</body>
</html>

Mas o menos se vera asi:

Como ven en el codigo de la cabecera de arriba agregue algunos scripts y archivos CSS esto para tener la opcion de mostrar el autocompletado con estilo css. Para conseguir estos archivos agreguen estas URLS a su aplicacion.
Otra cosa que necesitamos saber es la funcion script en la seccion header.

$(".auto").autocomplete({
                            source: function(request, response) {
                                $.ajax({
                                    type: "POST",
                                    contentType: "application/json; charset=utf-8",
                                    url: "Default.aspx/GetAutoCompleteData",
                                    data: "{'FirstName':'" + document.getElementById('FirstName').value + "'}",
                                    dataType: "json",
                                    success: function(data) {
                                        response(data.d);
                                    },
                                    error: function(result) {
                                        alert("Error Occurred");
                                    }
                                });
                            }
                        });

Esta declaracion de la funcion de formato JSON que estamos usando es para llamar a los metodos web usando JQuery $.ajax() cuando queramos llamar a Ajax con JQuery usaremos funciones JSON con el formato de arriba.
Los atributos ContentType y dataType son los mismos para todas las funciones solo url, data y success function variaran basadas en nuestra peticion.
url: Esta es la ruta para nuestros metodos Web
data: Pasaremos parametros utilizando este parametro sino pasamos ninguno entonces en data pondremos: "{}".
Hay un detalle JSON es sensible a mayusculas asi que sean cuidadosis antes de escribir el formato de data JSON.
Ahora abran la hoja de codigo y agreguen los siguientes namespaces:

using System.Collections.Generic;
using System.Data.SqlClient;
using System.Web.Services;

Luego agregan el siguiente codigo en C#

[WebMethod]

    public static List GetAutoCompleteData(string FirstName)
    {
        List result = new List();
        using (SqlConnection con = new SqlConnection("Data Source=XSaint;Integrated Security=true;Initial Catalog=AdventureWorks"))
        {
            using (SqlCommand cmd = new SqlCommand("select distinct FirstName from Person.Contact where FirstName LIKE '%'+@FirstName+'%'", con))
            {
                con.Open();
                cmd.Parameters.AddWithValue("@FirstName", FirstName);
                SqlDataReader dr = cmd.ExecuteReader();
                while (dr.Read())
                {
                    result.Add(dr["FirstName"].ToString());
                }
                return result;
            }
        }
    }

Luego presionen F5 y el resultado sera asi:

Agregar widget social sharing/bookmarking con efecto hover

Posted on 10:55 by XSaint with No comments

En este post veran como agregar un widget y agregar el efecto hover con CSS3 para ustedes. Este widget social de sharing/bookmarking con escala de grises y a color lo pueden agregar en su blog y lucira como ven abajo:

Ejemplo

Como instalar este widget sharing/bookmarking

Paso 1: Agregar codigo CSS

Ir a las pestañas de blogger > Pestaña Diseño > Editar HTML
Click en el checkbox Expandir plantilla de artilugios
Busca la etiqueta ]]> y pongan este codigo antes de la etiqueta

#w2b-share ul {list-style: none;clear: none;padding: 0px 0px ;margin: 5px 0;}
#w2b-share ul li {display: inline;background:none;margin:0;padding:0;}
#w2b-share ul li a {display: block;float: left;width: 32px;height:32px;background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnhbQCS3BMmDifMI9DeNb4wrHZA0anH7ufJKQ7y0c1_fQSflBOCA9WYckKaGoFxlSblCWQ_eUnF_PyYp7PMGSGO2mvKKZ0zoGryGJ4SSN6u7-xa_ieSTPeRngCiplw7hBG3OYoE1CQuN8/s1600/share-icons-sprite.png') ;margin-left:3px;background-repeat: no-repeat;margin-right: 2px;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; }
#w2b-share ul li a.twitter    {background-position: -0px -0px;   }
#w2b-share ul li a.twitter:hover {background-position: -0px -33px;  }
#w2b-share ul li a.facebook   {background-position: -32px -0px;  }
#w2b-share ul li a.facebook:hover {background-position: -32px -33px; }
#w2b-share ul li a.stumbleupon  {background-position: -64px -0px;  }
#w2b-share ul li a.stumbleupon:hover{background-position: -64px -33px; }
#w2b-share ul li a.digg    {background-position: -192px -0px; }
#w2b-share ul li a.digg:hover  {background-position: -192px -33px;}
#w2b-share ul li a.reddit   {background-position: -160px -0px; }
#w2b-share ul li a.reddit:hover  {background-position: -160px -33px;}
#w2b-share ul li a.google   {background-position: -128px -0px; }
#w2b-share ul li a.google:hover  {background-position: -128px -33px;}
#w2b-share ul li a.del-icio-us  {background-position: -480px -0px; }
#w2b-share ul li a.del-icio-us:hover{background-position: -480px -33px;}
#w2b-share ul li a.mixx    {background-position: -96px -0px;  }
#w2b-share ul li a.mixx:hover  {background-position: -96px -33px; }
#w2b-share ul li a.technorati  {background-position: -416px -0px; }
#w2b-share ul li a.technorati:hover {background-position: -416px -33px;}
#w2b-share ul li a.linkin   {background-position: -256px -0px; }
#w2b-share ul li a.linkin:hover  {background-position: -256px -33px;}
#w2b-share ul li a.yahoobuzz  {background-position: -448px -0px; }
#w2b-share ul li a.yahoobuzz:hover {background-position: -448px -33px;}
#w2b-share ul li a.myspace   {background-position: -512px -0px; }
#w2b-share ul li a.myspace:hover {background-position: -512px -33px;}
#w2b-share ul li a.more    {background-position: -576px -0px; }
#w2b-share ul li a.more:hover  {background-position: -576px -33px;}

Step 2: Agregar codigo al widget

Busca la etiqueta
Coloca este codigo despues de la etiqueta. y guarda tu template (por si no les funcione antes de este guarden su template en caso de errores)

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='w2b-share'>
<ul>
<li><a class='twitter' expr:href='&quot;http://twitter.com/?status=&quot; + data:post.title + &quot; - &quot; + data:post.url ' rel='nofollow' target='_blank' title='Share this post on twitter'/></li>
<li><a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Facebook'/></li>
<li><a class='stumbleupon' expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Stunbleupon'/></li>
<li><a class='digg' expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Digg'/></li>
<li><a class='reddit' expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on Reddit'/></li>
<li><a class='google' expr:href='&quot;http://www.google.com/bookmarks/mark?op=add&amp;bkmk=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Bookmark this post on Google'/></li>
<li><a class='del-icio-us' expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Share this post on delicious'/></li>
<li><a class='mixx' expr:href='&quot;http://www.mixx.com/submit?page_url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' rel='nofollow' target='_blank' title='Share this post on Mixx'/></li>
<li><a class='technorati' expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank' title='Fav on Technorati'/></li>
<li><a class='yahoobuzz' expr:href='&quot;http://buzz.yahoo.com/submit/?url=&quot;+ data:post.url' rel='nofollow' target='_blank' title='Share this post on Yahoo!Buzz'/></li>
<li><a class='myspace' expr:href='&quot;http://www.myspace.com/Modules/PostTo/Pages/?u=&quot;+ data:post.url + &quot;&amp;t=&quot; + data:post.title' rel='nofollow' target='_blank' title='Sahre this post on Myspace'/></li>
<li><a class='a2a_dd more' expr:href='&quot;http://www.addtoany.com/share_save?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title '/><script src='http://static.addtoany.com/menu/page.js' type='text/javascript'/></li>
</ul>
</div>
</b:if>

Agregar GO TO TOP BUTTON con CSS & JQUERY para BLOGGER / BLOGSPOT

Posted on 15:27 by XSaint with No comments

Agregar “Go to Top Button” con CSS y Jquery es un atajo .para subir rapidamente a la parte superior de la pagina cuando estas abajo, similar al que yo tengo.
Agregar boton ‘SCROLL TO TOP’ con CSS:
Usa el siguiente boton para agregar este widget en tu blog facilmente:

o utiliza el siguiente codigo y ponlo antes de la etiqueta en tu template y lo guardas.

Agregar boton ‘SCROLL TO TOP’ con JQUERY:
Usa el siguiente boton para agregar a tu blog facilmente:

o usa el siguiente codigo y colocalo antes de la etiqueta en tu template y guarda.




Scroll to Top

Tambien podrias personalizar el CSS con tu propio codigo y reemplazar el texto que sale en la esquina inferior izquierda con una imagen.

Mejora la apariencia de los checkbox con CSS3 y JQuery

Posted on 19:39 by XSaint with 1 comment

Asi como en ejemplos anteriores mostramos como mejorar la apariencia de nuestros textbox, les mostrare como mejorar la apariencia de nuestros checkboxes de nuestras paginas web con algunas lines de codigo CSS/CSS3 y JQuery.

El ejemplo de arriba es un ejemplo de un simple checkbox con CSS. Este tipo de checkbox es usado por Twitter y Google y es parte del Bootstrap Framework (Prepended checkbox) de Twitter. Simplemente lo he modificado para mi uso personal y lo he usado de un modo diferente. Aqui estan los codigos para el checkbox.
En HTML:

El CSS para el checkbox por defecto:

.checky{
   width: auto;
   min-width: 16px;
   height: 18px;
  padding: 4px;
  margin-right: -1px;
   font-weight: normal;
   line-height: 18px;
  text-align: center;
  -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   background: #dddfff;
   border: 1px solid #aaa;
 color: #bfbfbf;
 text-shadow: 0 1px 0 #ffffff;
}

El CSS para el checkbox marcado:

.greeny{
  background: #a9dba9;
  border-color: #46a546;
}

Aqui estan las lineas del JQuery:

$(document).ready(function(){
    $('.checky :checkbox').click(function () {
    if ($(this).attr('checked')) {
      $(this).parents('.checky').addClass('greeny')
    }
     else {
      $(this).parents('.checky').removeClass('greeny')
    }    
    })/******* Fix for Firefox and some other browsers *****/$(":checkbox:checked").each(
        function() {
           $(this).parents('.checky').addClass('greeny');
        }
    ); 
})

El ejemplo completo pueden bajarlo aqui (aprovechen antes que se apruebe la Ley SOPA):

Descargar aqui

Pruebenlo en Chrome creo que en algunas versiones de Explorer no resulta o pide habilitar Javascript, no lo probe en todos los navegadores pero Chrome si lo soporta.

Efecto iluminacion en enlaces con CSS3

Posted on 18:37 by XSaint with 1 comment

Un sencillo ejemplo de como simular un efecto de “iluminacion” sobre una tipografía en CSS3, sin utilizar imágenes. Para ello utilizamos principalmente text-shadow para dar resplandor al texto, text-fill-color para colorear el interior del texto, text-stroke-color para el color del borde exterior, y text-stroke-width para el ancho del borde.

decidi hacerlo sobre un vinculo y que al pasar el mouse el texto cambie y se vea como la imagen, este codigo es el que tienen que poner:

ahora si quieren que un enlace tenga este efecto pongan el enlace de esta forma:

Iluminate

Lo probe en Chrome y si funciona si no les aparece en el Explorer no es porque el ejemplo este mal, algunas versiones de Explorer aun no muestran la propiedad text-shadow

CSS: Texto con sombra usando text-shadow + Shadow Filter

Posted on 19:16 by XSaint with 1 comment

Ahora que la mayoría de los navegadores soportan la propiedad text-shadow de CSS3, vamos a ver cómo usarla para crear un interesante efecto de sombra en los textos.
La propiedad text-shadow está soportada en las versiones actuales de Firefox, Chrome, Safari y Opera. En cambio, no es así en Internet Explorer 8, por lo que usaremos Shadow Filter para que también se muestren las sombras en este navegador.
Por otra parte, aunque en la reciente Preview de Internet Explorer 9 que nos ha mostrado Microsoft todavía no se soporta esta propiedad, esperemos que la versión final sí la soporte y podamos usar una única propiedad text-shadow para todos los navegadores.
Para usar este efecto de sombra, añadimos a nuestra hoja de estilos una clase llamada “shadow”, en la que se definen las dos propiedades:

.shadow {
text-shadow:#666666 3px 3px 3px;
filter: progid:DXImageTransform.Microsoft.Shadow(color='#666666', Direction=135, Strength=4);
}

Si no tuviéramos una hoja de estilos en nuestra página web, podemos ponerla en el head de la siguiente manera:

Para aplicar la sombra a un texto dentro del contenido de la página ponemos por ejemplo:

Ejemplo de texto con sombra

Y este sería el resultado si le aplicamos la sombra a un texto con formato de título (h4):

Ejemplo de texto con sombra

Después podemos cambiar los valores de la sombra para que quede a nuestro gusto, sin olvidar que tendremos que hacer los cambios en las dos propiedades, intentando que la sombra sea similar en ambos navegadores.

Valores de text-shadow

Color de la sombra. (Ejemplo: #666666)

Desplazamiento de la sombra sobre el eje X. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)

Desplazamiento de la sombra sobre el eje Y. Relativo al texto; puede tomar valores negativos. (Ejemplo: 3px)

Cantidad de efecto blur de la sombra. (Ejemplo: 3px)

Más información sobre text-shadow aquí y aquí.

Atributos de Shadow Filter
Color de la sombra (Ejemplo: color=’#666666′)

Dirección de la sombra, en grados. Sólo puede tomar los valores: 0, 45, 90, 135, 180, 225, 270, 315. (Ejemplo: Direction=135)

Extensión de la sombra, en píxeles. (Ejemplo: Strength=4)

Más información sobre Shadow Filter aquí.

Efecto Shadow con CSS3

Posted on 18:53 by XSaint with 1 comment

Ultimamente he estado viendo un poco las nuevas novedades de CSS3, esta vez no esperare a que este totalmente implementado para empezar a probar dentro de las cosas más interesantes que me he encontrado es la posibilidad de ponerle efecto shadow a un div o a un texto, los que visitan mi blog desde Mozilla Firefox podrán notar que el título de los posts tiene una apariencia algo diferente, una pequeña sombrita algo tenue.

Pues no estoy usando Jquery o Flash para lograr dicho efecto, es puro y llano CSS3, con una interesante propiedad llamada text-shadow, bueno, en realidad la propiedad existia desde CSS2, pero creo que tenia muy poca difusión, la estructura es basicamente la siguiente:

{text-shadow: 2px 2px 2px #000;}

Con lo anterior se podria lograr algo como lo siguiente:

También se puede lograr cosas avanzadas jugando un poco con la propiedad:

{text-shadow:0 0 4px #fff, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;color:#fff;}

{-webkit-box-shadow: 3px 3px 5px #333;;-moz-box-shadow: 3px 3px 5px #333;;box-shadow: 3px 3px 5px #333;}

Al igual que la propiedad text-shadow con esta podemos jugar un poco:

Aclaro un par de cosas, todos son los ejemplos son imagenes, la razón de esto es que no todos los navegadores aceptan estas propiedades.
La otra aclaración es sobre la manera como funcionas las propiedades:

{box-shadow: x y shadow color;}

Como hacer un boton redondeado CSS con efecto Drop Shadow

Posted on 14:02 by XSaint with No comments

El boton utiliza el CSS border-radius para los bordes redondeados, box-shadow para un efecto en la sombra y la propiedad CSS text-shadow para dar al link de texto un buen efecto de relieve sutil.
Un efecto hover es agregado, reduciendo la caida de la sombra y ajustando los margenes para dar un efecto de boton presionado.

CSS Code for the button

.round_shadow_button {
font: 14px/2.3em trebuchet,arial;
color: #aaa;
text-shadow: 0 1px 0 #fff;
text-align: center;
text-decoration: none;
display: block;
padding: 0 5px;
margin: 3px auto 5px;
background: #fff url(btn.png) repeat-x bottom;
border: 1px solid #ddd;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-o-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 3px 5px #ccc;
-webkit-box-shadow: 0 3px 5px #ccc;
-o-box-shadow: 0 3px 5px #ccc;
box-shadow: 0 3px 5px #ccc;
}

CSS code for the hover

.round_shadow_button:hover {
margin: 5px auto 3px;
-moz-box-shadow: 0 0 1px #eee;
-webkit-box-shadow: 0 0 1px #eee;
-o-box-shadow: 0 0 1px #eee;
box-shadow: 0 0 1px #eee;
}

HTML

Ahora para agregar el estilo a un enlace, simplemente agrega la clase a tu link

Click on Me

La propiedad text-shadow en enlaces

Posted on 13:27 by XSaint with No comments

Hay a quien le gusta de vez en cuando cambiar la forma de mostrar los enlaces, lo hacemos en los estilos para conseguir distinto color, tamaño o tipo de fuente y en algunos casos añadimos alguna propiedad para crear un efecto.

Click En Enlace

En Impressive Webs nos indican los pasos a seguir para añadir sombra con la propiedad text-shadow y como ejemplo proporcionan los siguientes estilos:

a:link, a:visited {
color: #aaa;
text-decoration: none;
font-size: 36px;
text-shadow: 1px 1px 1px #555;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:hover {
color: #bbb;
}

a:active {
text-shadow: -1px -1px 1px #555;
position: relative;
top: 1px;
left: 1px;
}

Si queremos añadir esos estilos en una entrada concreta bastaría con añadir los estilos en la misma entrada.

Y el enlace de la siguiente forma:

Texto enlace

Bonita caja de busqueda con CSS3

Posted on 13:13 by XSaint with No comments

Son miles las maravillas que podemos hacer con CSS3. Smashing Magazine ha estado investigando y ha creado una bonita caja de búsqueda realizada con CSS3, aplicando degradados con CSS Gradient, creando círculos redondeados con border-radius y aplicando sombra inferior con box-shadow inset.
Ahora vamos a comprobar como se crea cada elemento que forma parte de la caja de búsqueda.
Círculo redondeado

Puedes crear un círculo dando un valor muy alto a la propiedad border-radius, el ejemplo usa 100 px.

.circle {
   width: 100px;
   height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
 }

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.

.inset {
    -moz-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    -webkit-box-shadow: inset 0 3px 8px rgba(0,0,0,.4);
    box-shadow: inset 0 3px 8px rgba(0,0,0,.24); 
}

Ejemplo de la caja de búsqueda

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í:

El código CSS:

.searchform {
display: inline-block;
zoom: 1; /* ie7 hack para display:inline-block */
*display: inline;
border: solid 1px #d2d2d2;
padding: 3px 5px;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
background: -webkit-gradient(linear, left top, left bottom, from(#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 {
font: normal 12px/100% Arial, Helvetica, sans-serif;
}

.searchform .searchfield {
background: #fff;
padding: 6px 6px 6px 8px;
width: 202px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}

.searchform .searchbutton {
color: #fff;
border: solid 1px #494949;
font-size: 11px;
height: 27px;
width: 27px;
text-shadow: 0 1px 1px rgba(0,0,0,.6);
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
border-radius: 2em;
background: #5f5f5f;
background: -webkit-gradient(linear, left top, left bottom, from(#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 */
}

Como hacer borde redondeado a los textbox usando CSS

Posted on 13:24 by XSaint with 1 comment

hola como estan, hace tiempo que no escribo algo al blog, espero que esto les sirva a los amantes del diseño web, CSS y gente que quiera aprender, aqui explicare como hacer un borde redondeado a una caja de texto usando una imagen y CSS. El textbox sera ubicado sobre la imagen la cual dara el efecto de ver los bordes redondeados para que luzca asi

utilize este formulario de inicio de sesion que tenia hecho en php para explicarles.
Ahora lo que van a colocar en el textbox que deseen poner este efecto es este codigo HTML
Codigo HTML para textbox con bordes redondeados

en el ejemplo que tengo como eran 2 textbox, uno de login y el otro de password dentro de una tabla tuve que hacerlo asi:


ID Usuario


Password

para explicarles mejor la etiqueta div contiene la imagen de fondo(la de los bordes redondeados) y en la etiqueta input definimos el textbox y llamamos a loginbox.
Ahora para utilizar esa imagen hemos llamado a loginboxdiv la cual contiene a la imagen.
aqui pondre el codigo CSS para lograr tal efecto:

Como ven este codigo CSS es muy sencillo, el alto y el ancho de la clase loginboxdiv es mayor que la clase loginbox. La clase loginbox es la clase del texbox. Como pueden ver en el codigo CSS, el borde es eliminado y la altura, ancho y relleno son manejados de acuerdo al tamaño de la imagen de fondo.
Obviamente donde ejecuten su pagina ya sea .php .html lo que sea tienen que poner la imagen login_bg.gif y el codigo de arriba lo ponen antes de la etiqueta .
Pero si su pagina esta en php y hereda los estilos de otro archivo .css el codigo CSS peguenlo en el mismo script PHP.
Espero les sirva el codigo :D, si quisieran que postee otros contenidos solo diganme, trato de poner lo que voy aprendiendo aqui porque creo que elc onocimiento se comparte, ya no he tenido mucho tiempo pero ojala este post les haya gustado. Gracias por su visita y su tiempo. Tengan Feliz Navidad.

Libros AJAX, JavaScript, CSS, XHTML en Linea

Posted on 8:35 by XSaint with No comments

La web llamada librosweb.es, nos da la oportunidad de aprender 4 lenguajes con los cuales podemos DOMINAR EL MUNDO WEB... y adentrarse mas en el diseño web porque con CSS se puede hacer muuuuchas cosas ... yo solo les puedo decir que son la base de toda Web 2.0... y si aprendemos a manejarlos dominaran el mercado web... asi que el que no aprende es porque no quiere... disfruten estos libros

Buscamos ser Diferentes

Menu

lunes, 3 de diciembre de 2012

Truco CSS:Codigo para crear blogroll efecto deslizante en blogger

domingo, 9 de septiembre de 2012

JQuery UI Ajax Autocompletar TextBox con Base de Datos en ASP.NET usando WebService

viernes, 16 de marzo de 2012

Agregar widget social sharing/bookmarking con efecto hover

Como instalar este widget sharing/bookmarking

sábado, 10 de marzo de 2012

Agregar GO TO TOP BUTTON con CSS & JQUERY para BLOGGER / BLOGSPOT

martes, 24 de enero de 2012

Mejora la apariencia de los checkbox con CSS3 y JQuery

Efecto iluminacion en enlaces con CSS3

sábado, 21 de enero de 2012

CSS: Texto con sombra usando text-shadow + Shadow Filter

Ejemplo de texto con sombra

Efecto Shadow con CSS3

Como hacer un boton redondeado CSS con efecto Drop Shadow

La propiedad text-shadow en enlaces

Bonita caja de busqueda con CSS3

viernes, 23 de diciembre de 2011

Como hacer borde redondeado a los textbox usando CSS

Libros AJAX, JavaScript, CSS, XHTML en Linea

ESCRIBENOS Y ANUNCIATE

Popular Posts

Categories

Blog Archive

Blogger templates

Pages

Blogger news

Followers

Blogroll

Blog Archive

BTemplates.com

About