TheDavis Blog » Archivo para la etiqueta `css´ http://arpaneting.es Bienvenido a TheDavis Blog, un sitio un tanto especial... Mon, 23 Jan 2012 09:11:30 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Validación de comentarios en WordPress con jQuery http://arpaneting.es/2011/06/29/validacion-de-comentarios-en-wordpress-con-jquery/ http://arpaneting.es/2011/06/29/validacion-de-comentarios-en-wordpress-con-jquery/#comments Wed, 29 Jun 2011 13:02:27 +0000 thedavis http://arpaneting.es/?p=828

¡Ya era hora de aplicarlo al blog! :)

Con un poco de jQuery y algo de CSS se consigue una fácil validación por parte de cliente de los datos del formulario.

]]> http://arpaneting.es/2011/06/29/validacion-de-comentarios-en-wordpress-con-jquery/feed/ 0 Cinco técnicas CSS/jQuery muy útiles http://arpaneting.es/2011/06/29/cinco-tecnicas-cssjquery-muy-utiles/ http://arpaneting.es/2011/06/29/cinco-tecnicas-cssjquery-muy-utiles/#comments Wed, 29 Jun 2011 06:34:22 +0000 thedavis http://arpaneting.es/?p=823

Hace unos días publicaron en Smashing Magazine cinco técnicas muy útiles basadas en CSS y jQuery.

  1. Efectos de texto animados,
  2. Animar imágenes sin GIFs,
  3. Menús drop-down,
  4. Navegación Slideshow,
  5. Iconos animados en botones sobre el evento hover.

Personalmente el mejor tip de todo el post es el número 2, el animar un fondo sin usar un gifs, es impressive.

Que disfrutéis ;)

Vía: Smashing Magazine

 

]]> http://arpaneting.es/2011/06/29/cinco-tecnicas-cssjquery-muy-utiles/feed/ 0 9 de abril, CSS Naked Day http://arpaneting.es/2009/04/09/9-de-abril-css-naked-day/ http://arpaneting.es/2009/04/09/9-de-abril-css-naked-day/#comments Wed, 08 Apr 2009 22:01:30 +0000 thedavis http://arpaneting.es/?p=753

Hoy 9 de abril se celebra el día internacional sin CSS o lo que es lo mismo, el CSS Naked Day. Un día en el que nos deshacemos de nuestros estilos y mostramos realmente lo que debe tener relevancia en toda web, el contenido.

El objetivo de esta iniciativa es promover los estandars Web tal y como explican en la web de la iniciativa:

The idea behind this event is to promote Web Standards. Plain and simple. This includes proper use of (x)html, semantic markup, a good hierarchy structure, and of course, a good ‘ol play on words. It’s time to show off your <body>.

]]> http://arpaneting.es/2009/04/09/9-de-abril-css-naked-day/feed/ 0 CSS Naked Day 2009 http://arpaneting.es/2009/02/26/css-naked-day-2009/ http://arpaneting.es/2009/02/26/css-naked-day-2009/#comments Thu, 26 Feb 2009 19:11:21 +0000 thedavis http://arpaneting.es/?p=733 El 9 de Abril se celebra el CSS Naked Day, este año se celebrará por 4a vez. Se trata de una iniciativa para promover los estandartes web y confirmar así, que lo importante son los contenidos de una web.

Si te animas a participar puedes seguir los pasos que comenta anieto2k para ello.

Fuente: anieto2k

]]> http://arpaneting.es/2009/02/26/css-naked-day-2009/feed/ 0 Comentarios en WordPress 2.7 y los CSS http://arpaneting.es/2009/01/08/comentarios-en-wordpress-27-y-los-css/ http://arpaneting.es/2009/01/08/comentarios-en-wordpress-27-y-los-css/#comments Thu, 08 Jan 2009 18:20:07 +0000 thedavis http://arpaneting.es/?p=697 Chriss Harrison ha aislado los estilos CSS que afectan a los comentarios default de nuestro WordPress 2.7. Con el parámetro callback podemos personalizar nuestros comentarios, pero si no lo pasamos WordPress nos genera una estructura “default” que es con la que Chris ha trabajado.

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} - (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Estas 63 líneas hacen que cada elemento del sistema de comentarios pueda tener un aspecto personalizado. Para los desarrolladores de themes estas líneas pueden servirles como base para maquetar desde el CSS el theme para WordPress 2.7.

Fuente: anieto2k

]]> http://arpaneting.es/2009/01/08/comentarios-en-wordpress-27-y-los-css/feed/ 0 Easy Slider, jQuery Plugin http://arpaneting.es/2009/01/08/easy-slider-jquery-plugin/ http://arpaneting.es/2009/01/08/easy-slider-jquery-plugin/#comments Thu, 08 Jan 2009 06:30:49 +0000 thedavis http://arpaneting.es/?p=686

Un nuevo plugin para nuestro querido jQuery que cada día me sorprende más, por lo menos a mi. En este caso Easy Slider nos permite hacer slides de tantas imágenes como queramos verticalmente y horizontalmente. Es fácil configurarlo por CSS y es muy vistoso.

Demos

[Descarga]

Fuente: Xyberneticos

]]> http://arpaneting.es/2009/01/08/easy-slider-jquery-plugin/feed/ 2 10 técnicas de reset de CSS http://arpaneting.es/2009/01/04/10-tecnicas-de-reset-de-css/ http://arpaneting.es/2009/01/04/10-tecnicas-de-reset-de-css/#comments Sun, 04 Jan 2009 10:49:30 +0000 thedavis http://arpaneting.es/?p=673 
* { 
 
padding: 0; 
 
margin: 0; 
 
border: 0; 
 
}

10 técnicas Reset CSS que te serán muy útil a la hora de diseñar tus plantillas web. Estas técnicas para resetear CSS te permitirán evitar que los elementos que componen tu web descuadren la página por completo, cuando visiten tu sitio utilizando diferentes Navegadores. Recomendado.

]]> http://arpaneting.es/2009/01/04/10-tecnicas-de-reset-de-css/feed/ 0 jQuery Alert Dialogs, reemplazo para alert(), prompt() y confirm() http://arpaneting.es/2009/01/02/jquery-alert-dialogs-reemplazo-para-alert-prompt-y-confirm/ http://arpaneting.es/2009/01/02/jquery-alert-dialogs-reemplazo-para-alert-prompt-y-confirm/#comments Fri, 02 Jan 2009 09:28:19 +0000 thedavis http://arpaneting.es/?p=642 jQuery Alert Dialogs, es un reemplazo muy elegante para las funciones alert(), prompt() y confirm() de javascript.

Uso

Simplemente hay que añadir estas líneas al <head>:

&lt;script src="/path/to/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="/path/to/jquery.ui.draggable.js" type="text/javascript"&gt;&lt;/script&gt;
 
&lt;script src="/path/to/jquery.alerts.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;link href="/path/to/jquery.alerts.css" rel="stylesheet" type="text/css" media="screen" /&gt;

Una vez cargados los ficheros necesarios podremos llamar a las funciones personalizadas:

Alert()

jAlert es el sustituto de alert() y nos muestra alerta básica con un botón de aceptar para que el usuario acepte que ha visto el aviso.

jAlert('This is a custom alert box', 'Alert Dialog');

jPrompt()

Sustituto de prompt() que nos da la opción de introducir un valor desde la ventana.

jPrompt('Type something:', 'Prefilled value', 'Prompt Dialog', function(r) {
    if( r ) alert('You entered ' + r);
});

jConfirm()

Alternativa a confirm() en la que ofrecemos al usuario la opción de aceptar o cancelar una acción.

jConfirm('Can you confirm this?', 'Confirmation Dialog', function(r) {
    jAlert('Confirmed: ' + r, 'Confirmation Results');
});

Demo

Los chicos de jQuery Alert Dialogs han publicado una demo para que podamos ver que tal funciona este sistema.

Consejo de Uso

anieto2k ha propuesto utilizar estas modificaciones de las funciones clásicas de javascript utilizando un sistema que convierta esta opción en una alternativa y que en caso de fallar nos muestre su funcionalidad original, pienso que es muy buena idea:

//alert()
var oAlert = alert;
function alert(txt, title) {
    try {
        jAlert(txt, title);
    } catch (e) {
        oAlert(txt);
    }
}
alert("Hola", "Prueba");
 
//confirm()
var oConfirm = confirm;
function confirm(txt, title, func) {
    try {
        jConfirm(txt, title, func);
    } catch (e) {
        if (oConfirm (txt, title)) func();
    }
}
confirm("Hola", "Prueba", function(){
	alert("Prueba", "Superada");
});
 
//prompt()
var oPrompt = prompt;
function prompt(txt, input, title, func){
    try {
        jPrompt(txt, input, title, func);
    } catch(e) {
        func(prompt(txt, input, title));
    }
}
prompt("Hola", "Valor", "Prueba", function(r) {
	if (r) alert(r);
});

Fuente: anieto2k

]]> http://arpaneting.es/2009/01/02/jquery-alert-dialogs-reemplazo-para-alert-prompt-y-confirm/feed/ 0 Selectores CSS y Especificidad CSS http://arpaneting.es/2008/08/15/selectores-css-y-especificidad-css/ http://arpaneting.es/2008/08/15/selectores-css-y-especificidad-css/#comments Fri, 15 Aug 2008 10:06:06 +0000 thedavis http://arpaneting.es/?p=313 anieto2k ha escrito una gran guía para entender los selectores CSS de forma simple y con muchos ejemplos.

Un selector CSS es el conjunto de reglas en nuestro CSS nos permite dar estilos a un elemento u otro de nuestro HTML.

]]> http://arpaneting.es/2008/08/15/selectores-css-y-especificidad-css/feed/ 0