Archive for the Diseño Category
css3buttons
0
jQuery Plug-In: Botones CSS3 (CSS3 Buttons)

Plug-In para jQuery que permite crear botones CSS3 a partir de un anchor, no hoja de estilos (CSS) necesaria.

HTML

<a href="javascript:;" class="boton">Boton</a>

jQuery

$('.boton').css3button();

Métodos

<!-- Cambiar color del boton
Los colores pueden ser:
orange
red
blue
green
default: gray
-->
$('.boton').css3button({color : 'red'});

<!-- Desactivar boton (state disabled) -->

$('.boton').css3button("disabled");

<!-- Activar boton (state enabled) -->

$('.boton').css3button("enabled");

<!-- Método Destroy -->

$('.boton').css3button("destroy");

Ejemplo

<!-- JavaScript --->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.css3-buttons.js" type="text/javascript"> </script>

<!-- HTML -->
<a class="boton" href="#" rel="orange">Abrir 0</a>
<a class="boton" href="#" rel="red">Abrir 1</a>
<a class="boton" href="#" rel="blue">Abrir 2</a>
<a class="boton" href="#" rel="green">Abrir 3</a>
<a class="boton" href="#" rel="gray">Abrir 3</a>

<!-- jQuery -->
<script type="text/javascript">
$(document).ready(function(){

	$.each($('a.boton'), function() {
		color = $(this).attr('rel');
		$(this).css3button({color : color});

	});
	$('.boton').click(function( ) {
		$(this).css3button("disabled");
	});

});
</script>

Demo

Demo jQuery Plugin CSS3 Buttons

Download

0
CSS Menu Builder: Creador de menús al estilo Web 2.0

Yo soy de las personas que no tiene mucha paciencia a la hora de diseñar, aunque a veces si me da por abrir Fireworks y comenzar con el lienzo a trazar algunos degradados para hacer algún botón, header, banner o algún menú.
Bueno en cuanto a los menús me entere vía del.icio.us de una herramienta web que permite hacer en línea menús totalmente personalizados, en forma vertical u horizontal, en forma tradicional, con tabs, con degradados o sin ellos. Los colores son totalmente personalizables y el sitio te proporciona el código HTML, CSS y también las imágenes que se requieren.
Vale la pena echarle un vistazo.

Sitio: CSS Menu Builder

0
Android: Interfaz probablemente superior al iPhone

Bueno y es que estando a cargo de la empresa más importante en internet, Android es uno de los proyectos con más expectativas.
¿Que piensan uds? pero definitivamente yo encantado probaría Android en algún teléfono compatible, definitivamente un Nokia.

0
Dando estilos al Ampersand

El Ampersand es un símbolo usado mucho en la informática. En la programación en C, se usa para asignar valores a una variable. En PHP para separar diferentes variables y valores en una URL. En diseño es donde su uso es todo un arte.
Para darle un poco de estilos basta con poner en un archivo CSS vinculado en un documento HTML el siguiente código:

span.amp {
  font-family: Baskerville, Palatino, "Book Antiqua", serif;
  font-style: italic;
  }
<span class="amp">&amp</span>

El tipo de fuente le da la forma al ampersand, y el estilo itálico lo inclina sutilmente.

Se pueden lograr muchas formas del ampersand combinando diferentes tipografías y diferentes estilos de las fuentes.

Mac OS X

ampersands_macosx.gif

Windows XP

ampersands_windowsxp.gif

Windows Vista

Windows Vista añadió nuevas fuentes que empiezan por la letra C, claro que estas solo se visualizarán si las tenemos disponibles en la biblioteca de nuestras fuentes.

ampersands_windowsvista-1.gif

Via: SimpleBits

0
noobSlide: un Slide no tan noob (usando Mootools)

Via: frogx3 me entero de noobSlide, un slide para tus imágenes de manera que se presentan con un efecto elegante.

Cabe mencionar que también se le puede dar ese efecto a DIVS, para sustituir a los pasados de moda marcos (marquee).

Se puede usar para mostrar los diferentes elementos del Slide con el evento onmouse, onclick, o configurarlo para que cambie cada cierto tiempo.

En cuanto a la dirección, no hay problema, puede ser horizontal o vertical. ;)

Enlace: noobSlide

1