EntreBits » Diseño http://rd.entrebits.com.mx Lo que dejo entre bits. Mon, 02 Jan 2012 09:44:35 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 jQuery Plug-In: Botones CSS3 (CSS3 Buttons) http://rd.entrebits.com.mx/2011/10/11/jquery-plug-in-botones-css3-css3-buttons/ http://rd.entrebits.com.mx/2011/10/11/jquery-plug-in-botones-css3-css3-buttons/#comments Tue, 11 Oct 2011 18:24:43 +0000 Rodrigo http://rd.entrebits.com.mx/?p=219 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

]]> http://rd.entrebits.com.mx/2011/10/11/jquery-plug-in-botones-css3-css3-buttons/feed/ 0 CSS Menu Builder: Creador de menús al estilo Web 2.0 http://rd.entrebits.com.mx/2008/09/02/css-menu-builder-creador-de-menus-al-estilo-web-20/ http://rd.entrebits.com.mx/2008/09/02/css-menu-builder-creador-de-menus-al-estilo-web-20/#comments Tue, 02 Sep 2008 15:41:20 +0000 Rodrigo http://rd.entrebits.com.mx/?p=150 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

]]> http://rd.entrebits.com.mx/2008/09/02/css-menu-builder-creador-de-menus-al-estilo-web-20/feed/ 0 Android: Interfaz probablemente superior al iPhone http://rd.entrebits.com.mx/2008/08/24/android-interfaz-probablemente-superior-al-iphone/ http://rd.entrebits.com.mx/2008/08/24/android-interfaz-probablemente-superior-al-iphone/#comments Sun, 24 Aug 2008 19:15:07 +0000 Rodrigo http://rd.entrebits.com.mx/?p=96 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.

]]> http://rd.entrebits.com.mx/2008/08/24/android-interfaz-probablemente-superior-al-iphone/feed/ 0 Dando estilos al Ampersand http://rd.entrebits.com.mx/2008/08/17/dando-estilos-al-ampersand/ http://rd.entrebits.com.mx/2008/08/17/dando-estilos-al-ampersand/#comments Mon, 18 Aug 2008 04:43:00 +0000 Rodrigo http://rd.entrebits.com.mx/?p=77 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

]]> http://rd.entrebits.com.mx/2008/08/17/dando-estilos-al-ampersand/feed/ 0 noobSlide: un Slide no tan noob (usando Mootools) http://rd.entrebits.com.mx/2008/06/13/noobslide-un-slide-no-tan-noob-usando-mootools/ http://rd.entrebits.com.mx/2008/06/13/noobslide-un-slide-no-tan-noob-usando-mootools/#comments Fri, 13 Jun 2008 21:13:45 +0000 Rodrigo http://rd.entrebits.com.mx/?p=64 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

]]> http://rd.entrebits.com.mx/2008/06/13/noobslide-un-slide-no-tan-noob-usando-mootools/feed/ 0