(Ver Imagen)

(Ver Imagen)

Artículos relacionados

• Twig, un flexible, potente y seguro motor de plantillas en PHP
• 33 plantillas para WordPress
• Lista de Motores de Plantillas en PHP
• Más de 200 plantillas para Blogger
• Smarty, CheatSheet

(Ver Imagen)

Implementación

Añadimos los ficheros Javascript necesarios

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.min.js"></script>

Escribimos nuestro formulario

<form class="jqtransform">
  <div class="rowElem">
    <label for="name">Name: </label>
    <input type="text" name="name" />
  </div>
  <div class="rowElem"><input type="submit" value="send" /><div>
</form>

Indicamos el formulario anterior debe ser más elegante :D

<script type="text/javascript">
$(function() {
    $("form.jqtransform").jqTransform();
});
</script>

Descargar

Artículos relacionados

• Mejora la presentación de los formularios con jLook y jQuery
• MooTools FormCheck, validador de formularios con MooToos
• VanadiumJS, validación de formularios en el cliente
• Validar formularios con Javascript
• Soluciones modernas a los formularios 2.0

Artículos relacionados

• Themes perfectos para portfolios y fotologs
• Los mejores 100 trailers que nunca fueron de películas

1. Transparent CSS Menu Drop-down
2. Return of the image maps
3. CSS 3D puzzle
4. CSS scrolling image map
5. CSS Decorative Gallery
6. Playing Cards with CSS
7. Homer CSS
8. CSS House
9. “Secret Message” with CSS Positioning and Transparency
10. How to create light-weight drop shadows
11. Multi-position shadow boxing
12. Complexspiral
13. DVD Recorder Remote
14. Drawing the line
15. CSS Text Shadows
16. CSS Flashy Links
17. Map Pop
18. Pure CSS Popups
19. CSS Sticky Footer
20. Scalable Star
21. CSS: Menu Descriptions
22. CSS Gradients Demo
23. Scaled Background Image
24. CSS Vertical Bar Graphs
25. CSS Gradient Text Effect

Artículos relacionados

• Generador de excusas técnicas
• Técnicas WCAG 2.0 por Olga Carreras
• 37 técnicas de navegación
• 7 técnicas para mejorar tu javascript
• 53 técnicas ultramodernas en CSS

Artículos relacionados

• Más de 7500 iconos para tus aplicaciones
• 7500 iconos para tus aplicaciones
• Iconos sociales para nuestros blogs
• 25 galerías de iconos gratuitos
• La navidad llega a los iconos RSS

Artículos relacionados

• Recopilación de iconos (+7500) nuevos.
• 7500 iconos para tus aplicaciones
• Cantidad de iconos y botones para nuestras aplicaciones
• 25 galerías de iconos gratuitos
• 55 sets de iconos de alta calidad completamente gratis

Artículos relacionados

• iMeneame.net ahora más móvil que nunca
• jQuery 1.2 disponible
• Quintura se lava la cara
• ¿Cual es el tamaño máximo de las URL’s?
• iMeneame.net se lava la cara

La primera regla de oro que debes saber que lo tuyo no es la manufactura. No te dan cajas plegadas de cartón e instrucciones para que las armes, encoles y apiles, para luego enviarlas a determinado sitio. Tu trabajo es el de creación, sólo eso. Tu creas, tu ayudas a transmitir. La industrialización es otro rubro que no tiene nada que ver con el de diseño. Por ello, debes valorar tu trabajo basándote en una línea imaginaria, que traza tu creatividad, tu don de diseño, tu gusto por las cosas, tu conocimiento en el lenguaje visual. Nunca debes cobrar por hacer una tarea mecánica y te diré luego por qué.

Artículos relacionados

• 20 consejos para ser un gran diseñador web
• +130 herramientas para convertirte en un diseñador mejor
• 10 puntos de control que todo diseñador debe tener en cuenta
• Optimiza el CSS sin usar PHP
• Problemas con ajax y quirksmode

Artículos relacionados

• Soluciones modernas a los formularios 2.0
• Otro generador de formularios
• MooTools FormCheck, validador de formularios con MooToos
• 8 utilidades para mejorar tus formularios
• Formularios con estilos

HTML

<form name="form" class="searchbox" action="" method="post">
<p>
    <input type="text" name="s" value="" class="search"/>
    <input type="reset" name="reset" value="Reset" />
    <input type="submit" value="Enviar" />
</p>
</form>

CSS

.searchbox .resetButton  {
	background: white url("i/srch_r.gif") no-repeat scroll left top;
	width: 19px;
	height: 19px;
	border:0;
	text-indent:-5000;
	position:absolute;
	margin-left:-18px;
}
.searchbox .delete {
	background: white url("i/srch_r_f2.gif") no-repeat scroll left top;
}

.searchbox .submitButton {
		background: white url('i/srch_l.gif') no-repeat top left;
		width: 19px; height: 19px;
		text-indent:-5000;
		border:0;
		position:absolute;
}

.searchbox input.search {
	height:19px;
	padding-left:10px;
	width:600px;
}

Javascript

$.extend({
    searchbox: function() {
        var isSafari = /Apple/.test(navigator.vendor);
        var isOpera = window.opera;
        var input = $("form.searchbox input:text");
        var submit = $("form.searchbox input:submit");

        $("form.searchbox input:reset").each(function(x, el){
                $(el).addClass("resetButton");
                $(el).bind("click", function(){
                        $(this).removeClass("delete");
                });
        });

        $("form.searchbox input:submit").each(function(x, el){ $(el).addClass("submitButton");});

        input.css({
                "height": (isOpera || isSafari)?"13px":"14px",
                "padding-left" : (isOpera || isSafari)?"15px":"10px",
                "outline":"none"
                });
        var corrector = (isOpera || isSafari)?29:21;
        $("input.submitButton").css("margin-left", "-" + input.width() - (corrector) + "px");


        input.bind("keyup", function(){
            if($(this).val() != '') $(this).parent().find("input:reset").addClass("delete");
            else $(this).parent().find("input:reset").removeClass("delete");
        });
    }
});
// Activamos al cargar la página.
$(document).ready(function(){
        $.searchbox();
})

Ventajas

Problemas

Demo

Artículos relacionados

• Los formularios accesibles tambien pueden ser bonitos
• 25 reglas para hacer CSS accesibles
• Crea un eclipse al estilo Heroes
• fleXcroll, Scroll Bars Felxibles y Accesibles
• Cómo evitar causar ataques fotosensitivos de epilepsia.