tag:blogger.com,1999:blog-39267278271989081022013-05-18T18:21:53.515+02:00Por una web con mucho estilo para Argonautas con buen gusto.Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.comBlogger246125http://2.bp.blogspot.com/-Ycpx_Jl2zBc/UG5BMFNpZWI/AAAAAAAACGo/ikysNYg5_q0/s1600/k.jpgKsesocsshttp://feedburner.google.comSubscribe with My Yahoo!Subscribe with FeednessSubscribe with NewsGatorSubscribe with BloglinesSubscribe with NetvibesSubscribe with GoogleSubscribe with PageflakesSubscribe with PlusmoSubscribe with The Free DictionarySubscribe with Bitty BrowserSubscribe with Live.comSubscribe with Excite MIXSubscribe with WebwagSubscribe with Podcast ReadySubscribe with WikioSubscribe with Daily Rotationtag:blogger.com,1999:blog-3926727827198908102.post-76580597081507764892013-05-17T01:15:00.000+02:002013-05-17T01:19:18.005+02:002013-05-17T01:19:18.005+02:00El servicio de google fonts se ha vuelto cuasi imprescindible para la mayoría de creadores de webs que desean utilizar tipografías "no sáfety fonts" o "fuentes no seguras" de una forma sencilla y económica. Como complemento a este servicio y supliendo una carencia que creo imperdonable e incomprensible a estas alturas por parte de Google, We Love Icon Fonts hace lo mismo pero con tipografías de...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/gRS_5EMqc1k" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3http://ksesocss.blogspot.com/2013/05/evita-problemas-font-face.htmltag:blogger.com,1999:blog-3926727827198908102.post-4346984633581339552013-05-14T23:23:00.000+02:002013-05-15T22:49:30.230+02:002013-05-15T22:49:30.230+02:00La mejor manera de descubrir los fallos es poner en funcionamiento y dejar que todos escrudiñen la plantilla. Así que aquí tenéis un espacio para ir descubriendo qué tengo que arreglar a la vez que voy adaptando este nuevo tema al blog. Os agradecería me los indiquéis en comentarios. Ampliado y tema licenciado Con los créditos y reconocimientos y mi ofrecimiento del tema para quien desee...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/5mZaLYtwgOU" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com18http://ksesocss.blogspot.com/2013/05/plantilla-multicolumnas-css-blogger.htmltag:blogger.com,1999:blog-3926727827198908102.post-10166399479445061792013-05-09T14:10:00.000+02:002013-05-14T23:55:42.469+02:002013-05-14T23:55:42.469+02:00El grupo de las propiedades appearance son utilizadas por los navegadores para lograr que una serie de elementos se presenten de idéntica forma y sean fácilmente reconocidos como tales por el usuario con independencia de dónde los encuentre. Y en alguno de ellos, a su vez, se puede observar que los componen varias partes o piezas. Como en este input tipo rango Que dependiendo de tu navegador y...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/GXO0WIu6RG4" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3http://ksesocss.blogspot.com/2013/05/apariencia-appearance-pseudoelementos-privativos.htmltag:blogger.com,1999:blog-3926727827198908102.post-22448098762162305482013-04-26T00:13:00.000+02:002013-04-26T00:14:38.009+02:002013-04-26T00:14:38.009+02:00Si haces diseños RWD y aún mantienes el gusto por el desaparecido "pixel pefect" posiblemente te hayas encontrado con cierta discrepancia según en qué navegador diseñes y compruebes. Discrepancia que se manifiesta cuando coinciden la barra de scroll vertical y marcas un punto de inflexión en la anchura del la ventana del navegador (el viewport, no la la anchura de la página). En código la...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/lsUatmKnBCs" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1http://ksesocss.blogspot.com/2013/04/rwd-scrollbars-navegador.htmltag:blogger.com,1999:blog-3926727827198908102.post-41376403243354792552013-04-21T19:57:00.001+02:002013-04-22T18:00:05.005+02:002013-04-22T18:00:05.005+02:00Al revuelo que se ha armado con la "buena nueva" de los comentarios de G+ y su integración en las páginas, voy a sumarme también yo. Así que aquí va otra manera de meterlos en cualquier página, también en blogger, sin anular los comentarios preesistentes o tener que renunciar a la forma clásica de hacerlos: la caja tradicional. Y a esto añade que si usas blogger no es necesario vincular tu...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/W9DSgRzl4uo" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com2http://ksesocss.blogspot.com/2013/04/comentarios-googleplus-blogger-compatibles.htmltag:blogger.com,1999:blog-3926727827198908102.post-4423387903914082192013-04-17T22:52:00.001+02:002013-04-21T19:09:48.469+02:002013-04-21T19:09:48.469+02:00No hay nada más sencillo de construir que un menú desplegable. Y más sencillo aún hacerlo plénamente funcional sólo con Css. Y dicho lo anterior me adelanto a la pregunta que ya estás lanzando: por recuerdos atávicos y experiencias arcaicas. Para realizarlos sólo se necesita un grupo de elementos ocultos que se mostrarán tras realizar alguna acción sobre otro. Un evento :hover, por...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/aGhghT8GFGk" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com4http://ksesocss.blogspot.com/2013/04/drop-down-css.htmltag:blogger.com,1999:blog-3926727827198908102.post-81274580666777787182013-04-14T21:40:00.000+02:002013-04-14T21:48:39.010+02:002013-04-14T21:48:39.010+02:00Un par de realizaciones para mantener limpio de polvo y paja tu Css. csscss csscss: su creador lo define como: A CSS redundancy analyzer that analyzes redundancy. csscss analiza los archivos CSS que se le indican y permite saber qué conjuntos de reglas han duplicado declaraciones. csscss en Github es una realización de zmoazeni Helium-Css Helium-Css es una herramienta en js para escanear...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/58GGEWCgdts" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3http://ksesocss.blogspot.com/2013/04/herramientas-css-limpio.htmltag:blogger.com,1999:blog-3926727827198908102.post-77066563083356535302013-04-07T16:02:00.000+02:002013-04-12T18:54:17.404+02:002013-04-12T18:54:17.404+02:00¿Usas checkboxes y dejas que cada navegador los muestre a su manera o prefieres darle una apariencia acorde con tu diseño?. Si optas por lo primero estás excusado de seguir leyendo. Pero si también quieres tener el control sobre estos elementos sigue adelante. A su sencillez se une que el límite al resultado obtenido lo pones tú. El típico marcado marcado Html de de este elemento es algo...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/fZPG0SQ9J50" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3http://ksesocss.blogspot.com/2013/04/checkbox-personalizado-css.htmltag:blogger.com,1999:blog-3926727827198908102.post-53018849314518875182013-04-04T23:09:00.000+02:002013-04-04T23:54:32.916+02:002013-04-04T23:54:32.916+02:00Si tienes un elemento que te resulta demasiado grande y quieres usar sólo una parte del mismo Css te lo pone en bandeja con sus propiedad clip y asociada. Lo que hacen estas propiedades es recortar el elemento dejando a la vista la parte indicada, pero sin destruirlo. Dicho de otra forma: aplica una suerte de display: none a la parte del elemento que indicamos. Recortes en Css2.1 La propiedad...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/FdFX2Q3u9ew" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0http://ksesocss.blogspot.com/2013/04/propiedades-clip-clippath.htmltag:blogger.com,1999:blog-3926727827198908102.post-18788043236906137652013-04-04T13:11:00.001+02:002013-04-08T23:56:43.998+02:002013-04-08T23:56:43.998+02:00No se si estamos ante una nueva batalla de la olvidada guerra de los navegadores. Pero lo que sí se es que de nuevo estamos ante cambios profundos y simultáneos en los principales navegadores. Y dudo que la coincidencia en el tiempo sea sólo eso, coincidencias o fruto de la colaboración cruzada entre ellos Mozilla y Samsung Un resumen muy sencillo y no cronológico por si te perdiste algo....<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/xsNtjqezf-0" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1http://ksesocss.blogspot.com/2013/04/Firefox-servo-Chrome-blink.htmltag:blogger.com,1999:blog-3926727827198908102.post-81640119868045201062013-03-31T18:39:00.000+02:002013-03-31T18:39:04.323+02:002013-03-31T18:39:04.323+02:00Básicamente hay dos formas de hacer la llamada a las hojas de estilos desde el head del documento. Y una de ellas no deberías usarla. Con la etiqueta &lt;link href> tal que así: &lt;link href="estilos.css" ...> O con el elemento &lt;style> para importarlos usando la regla @import: @import url("estilos.css") &lt;/style> Y siempre que existen varias opciones surge la duda o pregunta:...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/7G7124-z_8Y" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0http://ksesocss.blogspot.com/2013/03/la-llamada-los-estilos-y-los-peligros.htmltag:blogger.com,1999:blog-3926727827198908102.post-6335614689325346972013-03-27T18:37:00.000+01:002013-03-28T18:27:24.045+01:002013-03-28T18:27:24.045+01:00Repaint y Reflow son dos expresiones habituales y muy comunes en cualquier artículo. Posíblemente la primera (repaint) más veterana y conocida que la segunda (reflow). Se viene utilizando desde hace mucho. El segundo término, reflow, es de aparición y uso más reciente. Y aunque parecidas en cuanto a qué implican, quizás para unos cuantos no esté muy clara la diferencia entre ellas. De eso va...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/JP0qD1MdjlU" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3http://ksesocss.blogspot.com/2013/03/Repaint-Reflow-diferencia.htmltag:blogger.com,1999:blog-3926727827198908102.post-91177691140179856552013-03-25T18:24:00.000+01:002013-03-25T19:26:48.514+01:002013-03-25T19:26:48.514+01:00Que la propiedad border-radius es una vieja conocida y que con un poco de imaginación al declarar los valores para las 8 variables por valor que admite logran efectos de lo más llamativo y curiosos es de sobra conocido. A nadie descubro a estas alturas figuras como los huevos o limones css que salen con sólo un mínimo trabajo. Pero esta propiedad tiene una limitación: que "el recorte" siempre...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/5oEr4W5skWE" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1http://ksesocss.blogspot.com/2013/03/border-corner-shape.htmltag:blogger.com,1999:blog-3926727827198908102.post-11786822566679275712013-03-20T17:38:00.001+01:002013-03-20T18:38:21.320+01:002013-03-20T18:38:21.320+01:00Sliding figure: Mostrar figcaption animado. Pequeño juego Css para mostrar de forma animada la leyenda o figcaption de una imagen al hacer :hover sobre ella, desplazando la mitad de la imagen hacia un lado y la otra mitad hacia el opuesto, quedando el texto entre ambas. En esta ocasión para ahorrar trabajo, cálculos previos y código css sobre la imagen la propiedad que aporta la "miaja...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/Ne0q9rFgSao" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1http://ksesocss.blogspot.com/2013/03/sliding-figure.htmltag:blogger.com,1999:blog-3926727827198908102.post-13996587373860104492013-03-17T22:02:00.000+01:002013-03-18T02:19:28.748+01:002013-03-18T02:19:28.748+01:00La propiedad hyphens, incluida en el documento CSS Text Level 3, ayuda a introducir cortes dentro de la palabra para forzar que una parte aparezca en una línea y la sobrante en la siguiente. Añade un guión medio (-) para indicarlo. Así de sencillo y así de funcional. Símplemente sólo necesitas declarar el idioma del documento (vía via HTML lang or XML xml:lang para que el agente de usuario (aka...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/G6UY34icvUk" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0http://ksesocss.blogspot.com/2013/03/CSS-Hyphens-Extendido.htmltag:blogger.com,1999:blog-3926727827198908102.post-78815978417052309062013-03-15T23:55:00.000+01:002013-03-16T01:20:03.863+01:002013-03-16T01:20:03.863+01:00Una pequeña introducción al "CSS Writing Modes" o la orientación de los textos en aquellos aspectos aplicables a nuestra forma de escribir: de izquierda a derecha y de arriba a abajo es lo habitual en nuestro modo latino. Pero ahí fuera existen otros: Modos de escritura o writting mode. Origen: W3c El modo o forma de la escritura en Css se controla con tres propiedades que actúan sobre los...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/MOVrSVFI79c" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1http://ksesocss.blogspot.com/2013/03/escritura-vertical-writing-mode.htmltag:blogger.com,1999:blog-3926727827198908102.post-88633376339232020552013-03-10T15:31:00.000+01:002013-04-03T14:13:43.022+02:002013-04-03T14:13:43.022+02:00¿A que estaría bien en muchos casos no tener que echar cuentas de antemano para los tamaños (width&height) de los elementos?. Porque hasta ahora excepto el max/min, poco más había. Firefox y Chrome le dan soporte. Cada uno con su prefijo. Sin embargo, como apuntaba en el artículo previo sobre "Centrar elementos flotados..." los nuevos valores para los tamaños traen novedades para controlar el...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/pEg-umKhmlU" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com3http://ksesocss.blogspot.com/2013/03/anchura-altura-condicionada-contenido.htmltag:blogger.com,1999:blog-3926727827198908102.post-66984227787976864242013-03-07T22:24:00.000+01:002013-03-08T02:29:47.923+01:002013-03-08T02:29:47.923+01:00El último documento del W3c sobre el modelo de caja básico CSS basic box model viene con nuevos valores, como es lógico, para algunas propiedades como las anchuras y alturas, entre otras. Esto a nadie sorprenderá. La sorpresa es que algunos de esos valores ya son soportados por Firefox y Chrome. Con sus prefijos correspondientes. Centrado horizontal de elementos flotados sin importar cuántos...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/QPo15YXy2Kk" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com8http://ksesocss.blogspot.com/2013/03/centrar-flotados-fit-content.htmltag:blogger.com,1999:blog-3926727827198908102.post-35132518546780805722013-03-06T17:30:00.000+01:002013-03-11T11:44:58.136+01:002013-03-11T11:44:58.136+01:00W3Schools induce a errores W3Schools es una página veterana utilizada por muchas personas como referente. Acuden a ella en busca de información o para resolver sus dudas. A menudo se cita y enlaza como verificación de opiniones o sustento de afirmaciones con la buena voluntad de creer que estás refrendado por una página "oficial" del consorcio W3c. Quizás tu seas uno más de los muchos...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/JA4owxt1zqI" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1http://ksesocss.blogspot.com/2013/03/W3Schools-NO-gracias.htmltag:blogger.com,1999:blog-3926727827198908102.post-64025462873364171992013-02-27T16:40:00.000+01:002013-02-27T20:59:29.138+01:002013-02-27T20:59:29.138+01:00Gráfico Circular puro Css. La representación de datos en gráficos siempre es una ayuda para comprender y asimilar la información. Y los ejemplos realizados con puro Css, tanto los de barras como lineales, son ya veteranos. Quizás de los que no haya tantas realizaciones sean de los gráficos circulares (en quesitos) hechos en puro Css. Así que este artículo va de un par de demos para hacer estos...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/bYsilIIQ6JE" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com4http://ksesocss.blogspot.com/2013/02/grafico-circular-css.htmltag:blogger.com,1999:blog-3926727827198908102.post-41511699262329076092013-02-24T19:32:00.000+01:002013-02-28T15:53:44.947+01:002013-02-28T15:53:44.947+01:00Collapsed margins ¿Te ha pasado? Tienes un contenedor principal y dentro tu h1 con un margen superior. Vas al navegador y te encuentras que el background del body deja un hueco en la parte superior. Descubres que el margen del h1 en vez de afectarle a él separándolo de su contenedor afecta a un abuelo suyo (el body). Esta es una situación que suele desquiciar un poco a quien se está iniciando...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/vHGTg7LK6hE" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com2http://ksesocss.blogspot.com/2013/02/margin-collapsed-margenes-cerrados.htmltag:blogger.com,1999:blog-3926727827198908102.post-2195512971731583882013-02-23T17:39:00.000+01:002013-02-23T21:23:58.740+01:002013-02-23T21:23:58.740+01:00IDplus: identificación digital ID+ (IDplus) Se trata de un almacén de información personal (protegida) que por un lado permite usar el teléfono móvil como sistema de identificación e intercambio de datos de una manera sencilla, y por otro contiene un sistema de emergencias con el que tus dos contactos de emergencia reciben un mensaje y si estás fuera de tu domicilio añade tu posición en el mapa...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/7X3nLpnjNQ4" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com1http://ksesocss.blogspot.com/2013/02/IDplus-identificacion-gestion-informacion.htmltag:blogger.com,1999:blog-3926727827198908102.post-34822652966919680972013-02-22T16:03:00.001+01:002013-02-22T20:05:49.100+01:002013-02-22T20:05:49.100+01:00Logo "Css con estilo" "Css con estilo" es una nueva comunidad en G+. Abierta e igualitaria a quienes deseen charlar sobre Css. Pesada para opinar en un espacio neutro y sin las limitaciones o cortapisas que pueden darse en otros espacios como blog, foros... en los que quizás algunos se puedan sentir cohibidos por el mero hecho de pertenecer a alguien, el enfoque o la idoneidad de qué dices y...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/TzU5nomEQJY" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com0http://ksesocss.blogspot.com/2013/02/comunidad-css-Gplus-.htmltag:blogger.com,1999:blog-3926727827198908102.post-29112944360121683602013-02-20T11:21:00.000+01:002013-02-20T18:46:19.501+01:002013-02-20T18:46:19.501+01:00El típico problema: tienes un elemento de bloque para alojar algún elemento de altura desconocida, i.e. un div y una imagen, y al visualizarlo te encuentras con un espacio en la parte inferior, entre la imagen y el div. Y por más que pones a 0 los bordes, márgenes y paddings no hay manera. Posíblemente hayas terminado por declarar como bloque la imagen. Pero si tienes más de una en la misma...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/-Hf7ENe0GUQ" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com2http://ksesocss.blogspot.com/2013/02/solucion-css-espacio-extra-divs-sin-altura.htmltag:blogger.com,1999:blog-3926727827198908102.post-62404618982736851802013-02-19T19:28:00.001+01:002013-02-19T19:28:45.083+01:002013-02-19T19:28:45.083+01:00Desde siempre he tenido una guerra interna con los sidebar o columnas laterales. Los diseños multicolumnas, una principal o de contenido y una o más para alojar elementos secundarios. Entiendo que estos son necesarios y ayudan en muchos aspectos, tanto a la página como a los visitantes. Pero a la vez restan espacio al contenido de la página, hacen crecer su altura (en ocasiones kilómetros) y la...<br/> <br/> Gracias por tu interés. Puedes ver el artículo completo en el blog<img src="http://feeds.feedburner.com/~r/Ksesocss/~4/4f4fo3Clvm4" height="1" width="1"/>Ksesohttp://www.blogger.com/profile/00598600993523690588noreply@blogger.com2http://ksesocss.blogspot.com/2013/02/toggle-sidebar-blogger.html