Mas que Wordpress - Tutoriales, recursos web, JQuery y PHP, Wordpress , twitter y muchos recursos más » efectos http://www.masquewordpress.com Tutoriales y recursos web sobre JQuery , PHP, Wordpress , twitter. Aprende diseño web y programación Fri, 03 Feb 2012 19:33:40 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Esquinas redondeadas y degradados con CSS3 http://www.masquewordpress.com/esquinas-redondeadas-y-degradados-con-css3/ http://www.masquewordpress.com/esquinas-redondeadas-y-degradados-con-css3/#comments Sun, 13 Jun 2010 03:37:02 +0000 Damian http://masquewordpress.com/?p=422 Hola a todos! Últimamente empieza a sonar más fuerte HTML5 y CSS3 , a medida que los navegadores se hacen más compatibles con estas nuevas tecnologías, así que hoy pensé en traerles un par de “trucos” que pueden realizar con CSS3 y que hasta ahora solo era posible con Javascript o imágenes.

Esquinas redondeadas

Hace un tiempito largo explique como redondear las esquinas de un DIV con el Plugin de JQuery JQuery.corners.
Hoy les explico lo mismo tan solo usando CSS3.

1

<div class="rounded"> Este es un ejemplo para http://masquewordpress.com</div>

Dado un div cualquiera aplicamos la propiedad border-radius

1
2
3
4
5

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
}

Degradados y sombras con CSS3

Utilizando el ejemplo anterior vamos a aplicarle sombras al DIV y luego un degradado. Aunque en mi ejemplo utilizo DIVS cabe decir que se puede aplicar a otros objetos como botones y crear efectos muy buenos. Pueden ver un ejemplo de botones con degradado y sombras aquí.

Aplicando sombras al DIV y letras

1
2
3
4
5
6
7
8
9
10

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
}

Y por último le aplicamos un degradado 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.rounded{
border-radius:7px;
-moz-border-radius:7px; //Firefox
-webkit-border-radius:7px; //Safari y navegadores que usen WebKit
 
text-shadow: #fff 0px 1px 1px;
box-shadow: 1px 1px 2px rgba(0,0,0,.5);
-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Safari y navegadores que usen WebKit
-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5);//Firefox
 
background: -webkit-gradient(linear, left top, left bottom, from(#D7E9F3), to(#ffffff));
background: -moz-linear-gradient(top,  #D7E9F3,  #ffffff);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#D7E9F3', endColorstr='#ffffff');
}

Listo !! con estas simples lineas habremos creado unos lindos efectos. Tengan en cuenta que van a necesitar las últimas actualizaciones de sus navegadores para que esto funcione correctamente.

Ver Ejemplo online
Descargar código del ejemplo

]]> http://www.masquewordpress.com/esquinas-redondeadas-y-degradados-con-css3/feed/ 10 Introducción a JQuery http://www.masquewordpress.com/introduccion-a-jquery/ http://www.masquewordpress.com/introduccion-a-jquery/#comments Fri, 15 May 2009 02:15:14 +0000 Damian http://masquewordpress.com/?p=3 Hola a todos, les quiero dar la bienvenida a mi blog. Mi nombre es Damián , soy técnico informático y ultimante más diseñador/programador web que otra cosa. En el blog solo pretendo poner algun que otro ejemplo de problemas que me encuentro dia a dia a la hora de hacer una página web. Más que nada serán ayudas para algunos y a mi personalmente me servirá de cuaderno de anotaciones por si algun día topo otra vez con el mismo problema.

No esperen actualizaciones diarias ni mucho menos , porque últimamente ando fatal de tiempo. Eso sí en la medida de lo posible pondre utilidades , recursos, noticias y lo que vaya encontrando por internet.

Una vez hecha las presentaciones, empiezo a explicar un poco de que trata JQuery.

Para simplificar, podríamos decir que jQuery es un framework o librería para Javascript(para el que no sabe aun que es Javascript , le recomiendo empezar con este libro) que simplemente nos hace la vida más fácil en todos los sentidos, haciendonos así ahorrar código y tiempo.

Por poner un ejemplo digamos que tenes el siguiente campo de texto: 

<input id="campo1" name="campo1" type="text" value="Esto es un campo de texto" />

Para seleccionar el valor de este campo con Javascript seria de la siguiente forma:

1
2
3

//Mediante su id
 
document.getElementById("campo1").value();

Esto mismo con JQuery lo hariamos de la siguiente manera:

1
2
3

//Mediante su id
 
$('#campo1').text();

Como pueden apreciar se ahorra mucho código para un operación tan sencilla como esa. Existen muchas otras formas de seleccionar un objeto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

 
//Todos los objetos de una misma clase
 
$(" .nombreDeLaClase")
 
//Todos los div de la clase .noticias
 
$("div .noticas")
 
//Todos los link
$("a")
 
//Todos los elementos del tipo x hijos del elemento tipo y
 
$("y &gt;x")

Y como esto muchos más. Acá podes encontrar una lista completa de selectores.

También podemos manejar todos los eventos tales como click , onmouseover, blur, focus , ….etc . Se podria decir que el más importante que vamos a usar es el evento ready.

El evento ready sirve para ejecutar una función cuando termine de cargar el DOM de la página , tal y como hace su homólogo “window.onload=” en Javascript. La única (y más importante) diferencia es que mientras en Javascript solo podemos llamar a este evento para una sola función , con JQuery podremos ejecutar todas las funciones que querramos.

Veamos un ejemplo de como asignar un evento click a un enlace una vez que la página cargue todos los elementos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

 
//La forma es la siguiente $(document).ready(function () {...funciones... });
//Para nuestro ejemplo asignaremos un evento click al enlance para que cambie de color un div asignado
 
//codigo Javascript que usualmente se coloca antes de la etiqueta
<script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function () {
                           $("#link_color").click( function(){
                                               $("#div_colores").css("background-color","red");
                            });
});
// --></script>
 
//Codigo HTML del ejemplo
 
<input type="button" value="Cambiar a rojo" id="link_color">
<div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>

Ejecutar ejemplo 1

Ahora por ejemplo si quisieras crear un botón que alterne dos colores podriamos usar la función toggle de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

//codigo Javascript que usualmente se coloca antes de la etiqueta
<script src="js/jquery-latest.js" type="text/javascript"></script> <script type="text/javascript"><!--
$(document).ready(function () {
                           $("#link_color").toggle(
                                         function(){
                                               $("#div_colores").css("background-color","red");
                                        },
                                        function(){
                                               $("#div_colores").css("background-color","green");
                                        }
                          );
});
// --></script>
 
//Codigo HTML del ejemplo
 
<input type="button" value="Cambiar color" id="link_color2">
<div id="div_colores" style="width: 50px; height: 50px; background-color: #191919;"></div>

Ejecutar ejemplo 2

Como hemos visto además del manejar los eventos podemos acceder a los estilos de una forma muy facil:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

//Para añadir una clase
$("#div_colores").addClass("nombreclase");
 
//Para quitar una clase
$("#div_colores").removeClass("nombreclase");
 
//Para cambiar multiple propiedades css
$("#div_colores").css({"width":"120px","height":"20px"});
 
 
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
   $('#div_colores').css(cssObj);
 
//Para cambiar una sola propiedad
  $('#div_colores').css("color","red");

Veamos otro ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

 $("p").hover(function () {
      $(this).css({'background-color' : 'yellow', 'font-weight' : 'bolder'});
    }, function () {
      var cssObj = {
        'background-color' : '#ddd',
        'font-weight' : '',
        'color' : 'rgb(0,40,244)'
      }
      $(this).css(cssObj);
    });
 
//codigo html
<p>
    Pasa el rator por encima
  </p>
  <p>
   O pasalo por aca.
  </p>

Ejecutar ejemplo 3

Y para terminar por hoy vamos a ver una de las cosas más atractivas de JQuery y un motivo por el cual la mayoría de nosotros empezamos a utilizarlo. Hablo de los efectos

Hay un monton de efectos , y si no encontramos el que queremos seguro que alguien habrá echo un plugin que lo traiga.

Para los efectos mejor veamos el Ejemplo 4 directamente.

Eso es todo para empezar. Espero que haya servido de ayuda. Saludos

Descargar ejemplo

]]> http://www.masquewordpress.com/introduccion-a-jquery/feed/ 2