Bootstrap 4.0
·
Se acerca la llegada de Bootstrap 4 a nuestros hogares web y es hora de ver algunos elementos a favor y contra de lo que ya conocíamos. Read More →
CSS
-
-
CSS 3 object-fit: cover y contain
·
Sin duda CSS3 nos va a permitir hacer cosas que hasta ahora eran bastante complejas de hacer, al menos si se querían hacer bien. Aunque todavía casi ningún navegador le da soporte (yo lo he probado con Opera 12a), me gusta mucho las funciones de object-fit que permiten, de forma sencilla, integrar imágenes o incluso vídeos dentro de un espacio determinado, o adaptarlo a unos tamaños a los que hasta ahora estábamos forzados. He hecho la prueba en Internet Explorer 9.0, Google Chrome 16.0, Mozilla Firefox 9.0 y Opera 12a y sólo en este último he conseguido que esto funcione…… Read More →
-
Data URI mejor que CSS Sprites
·
Una de las cosas que más a bombo y platillo se nos ha intentado meter en la cabeza en los últimos tiempos es que era mejor usar los CSS Sprites que no un montón de imágenes. Y es cierto, es mejor lo primero que lo segundo… ¿pero es lo óptimo? No. En alguna ocasión he hablado ligeramente sobre las peticiones HTTP y lo que afectan en cuanto a la velocidad de carga de un sitio; una de esas cosas que comenté en su momento fue la de usar los Data URI. Y es que el uso de los CSS Sprites… Read More →
-
Crear un efecto «desbloquear» de iPhone
·
Seguro que en alguna ocasión te gustaría hacer una versión de tu web para dispositivos móviles y añadir un toque iPhone. Es por esto que Chris Coyier ha creado un efecto «slide to unlock» en el que podemos apreciar, sobretodo en motores WebKit, el efecto a todo rendimiento. Entre otras cosas, hay ese efecto degradado y gracias a jQuery también la posibilidad de hacer ese efecto slide. El sistema aprovecha códigos CSS como el -webkit-animation: slidetounlock 5s infinite; y la función -webkit-keyframes slidetounlock. El ejemplo funciona en motores Webkit al 100% (Safari y Chrome), aunque se pueden analizar los códigos… Read More →
-
Reproductor HTML 5 para vídeo
·
Estamos muy mal acostumbrados a que nuestros vídeos se alojen en FLV en sitios como Youtube o Vimeo. Hoy en día teniendo en cuenta que el ancho de banda está tirado de precio, no entiendo porqué no se tiende a la calidad y a alojar la propia información si que otros decidan. Con HTML 5 y su nuevo elemento <video> tenemos la posibilidad de incluir muchos formatos de vídeo con muchas opciones… y para hacerlo ya todo más sencillo, además de hacerlo compatible con versiones anteriores que no soportan los nuevos formatos, están apareciendo algunos sistemas que permiten estos reproductores… Read More →
-
CSS hacks para Internet Explorer 6 y 7
·
En muchas ocasiones nos encontramos que necesitamos aplicar algún tipo de estilo específico a Internet Explorer 6 o 7, que son los navegadores que menos funcionalidades CSS soportan pero que aún tienen una cantidad elevada de usuarios. En estos casos, y debido a algunos errores en el funcionamiento del navegador, tenemos la posibilidad de ejecutar un pequeño hack que no afecta al resto. El sistema es sencillo. Internet Explorer tiene un fallo y es que los atributos de los CSS permiten los símbolos «*» y «_» delante. Tomando de ejemplo este código a continuación, podemos ver algunos detalles: .fondo {… Read More →
-
HTML 5: las pseudo-clases para mayor interactividad
·
Está claro que hoy en día el HTML no es nada sin los CSS, y hay algunos elementos que tienen algunas pseudo-clases que permiten algunas mejoras a la hora de interactuar con los estilos o diseños. Con la nueva versión, el HTML 5 tiene algunas clases que en las versiones anteriores no existían… aquí la lista de clases: : link: Son enlaces (o elementos) que no hayan sido visitados. : visited: Son enlaces (o elementos) que sí han sido visitados. : active: Son enlaces (o elementos) que están activados (por ejemplo, en el momento en el que hace clic en… Read More →
-
CSSTidy: optimizar CSS es fácil
·
Una de las cosas por las que no solemos preocuparnos mucho es por los CSS. Solemos hacer un CSS más o menos bien formado, pero a partir de ahí nos limitamos a subirlo al servidor y poco más. Pero… si os digo que se puede ahorrar hasta un 25% en un CSS, ¿no sería interesante aplicarlo? La idea es que los CSS, al ser un elemento de los que se han de cargar antes que «se pinte» el HTML interesa que sea rápido en descargar. Además, es un elemento que suele estar en todas las páginas, y aunque el navegador… Read More →
-
Open Standard Media (OSM) Player
·
Uno de los poyos que siempre me he encontrado a la hora de poner un reproductor de vídeo en la web es que en la mayoría de casos sólo aceptaba vídeos flash (.flv). La cosa es que con el HTML 5 y con jQuery se han montado un reproductor llamado Open Standard Media que tiene muy buena pinta, es código abierto y gratuito. Entre otras cosas, permite el uso de HTML 5, soporta los nuevos elementos audio y video del HTML 5 con los formatos estándar, para el resto de formatos monta un reproductor Flash, se le puede cambiar el… Read More →
-
font dragr: prueba tus fuentes sólo arrastrándolas
·
Aunque hago un parón en cuanto a publicar de HTML 5, he encontrado esta herramienta, web o como queramos llamarlo que tiene su gracia, sobretodo si te dedicas a maquetar o eres diseñador. El sitio se llama font dragr y básicamente es una página en la que arrastrando un fichero de tipo de letra -truetype (ttf), opentype (otf), scalable vector graphics (svg) o Web Open Font Format (WOFF)- te actualizará los textos de la página con esa fuente. Además, el contenido original de la página es editable, por lo que puedes poner un texto de ejemplo y así ver cómo… Read More →
-
CSS Reset para HTML 5
·
Llevo varios días intentando encontrar un CSS Reset pero para HTML 5. Hasta ahora usaba el de Yahoo! YUI, pero incluso la versión 3 no da soporte a las nuevas etiquetas. Por eso me he decidido a revisar un poco los elementos que hay hasta ahora e intentar ofrecer una primera versión del CSS Reset para HTML 5. html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,hr,iframe,embed,object,legend{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup,a,small,q,time,samp,kbd,sup,sub,mark,col,colgroup,tbody,thead,tfoot,tr,td,th,label,input,button,textarea,select,optgroup,option,label,output{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;font-variant:normal;}i{font-style:italic;}b{font-weight:bold;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:»;}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select{*font-size:100%;}header,article,section,aside,footer,nav,hgroup,address,figure,figcaption,video,audio,legend,datalist,optgroup,details,summary,command,menu{display:block;margin:0;padding:0;} Se puede descargar el CSS Reset para HTML 5. NOTA: Que conste que es una propuesta personal, basándome en la mayoría de los elementos que propone el HTML 5. ACTUALIZACIÓN: Me han pasado este de Rich Clark. Read More →
-
Para qué navegador he de programar
·
En muchas ocasiones escucho una grandiosa frase del estilo: es que eso que me dices no funciona en Internet Explorer 6. A parte de que Explorer 6 es un producto caducado, y no lo digo yo, lo dice la propia Microsoft con una página sobre el upgrade a Explorer 8 que me parece especialmente divertida por la imagen que ofrece (verdad que no beberías leche caducada hace 9 años?), creo que vale la pena hacer cosas para cumplir el Principio de Pareto, también conocido como la regla del 80-20. ¿Esto que significa? Pues que, como en muchas ocasiones, Yahoo! dispone… Read More →
-
Usa el tipo de letra que quieras en tu sitio
·
Estos días hablando con mi diseñadora favorita, Ana, hemos cruzado algunas cosas sobre la posibilidad de «incrustar tu fuente» en los sitios web. Ella últimamente hace diseños para algunos hoteles, y estos siempre quieren cosas especiales. Al final de hablar sobre ello, comenzamos a ver el tema del @font-face del CSS3. Pero, claro está, nos encontramos con el asunto de que no funciona en todos los navegadores. Así que me he puesto a investigar y he encontrado un código, un poco extraño, pero que parece ser la solución a la compatibilidad con todos los navegadores, incluido Internet Explorer. <!DOCTYPE html>… Read More →
-
Cómo precargar elementos CSS, JS y similares
·
Seguro que alguna vez habéis pensado cómo hacer que vuestro sitio vaya todavía más rápido. Pues hay forma de hacerlo, sobretodo si la gente suele visitar vuestra página principal y luego sigue navegando. La cuestión es que en muchas ocasiones los CSS y JavaScript de las páginas principales de los sitios difieren mucho del resto de la web… ¿qué hacer para mejorar esto? Pues tener un CSS y JS específico sólo para la página principal y pre-cargar los CSS y JS del resto de la página en la caché del navegador. Para esto, que puede ser un poco complejo, podemos… Read More →
-
Tanto va el webmaster a la fuente…
·
…que al final: Verdana. Seguramente si eres de los que habitualmente hace sitios web te planteas usar tipos de letra estándar para que todo el mundo lo vea correctamente, en Windows, Linux, Mac, etc… El otro día, por un proyecto que estoy desarrollando, tuve que ponerme a investigar y he sacado «estas familias»: Arial, Helvetica style=»font-family: Arial, Helvetica, sans-serif;» Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in… Read More →
-
HTML5 en Internet Explorer 8
·
Hace cosa de 2 años comencé a publicar alguna cosilla sobre HTML5. La verdad es que no era gran cosa, pero lo suficiente para hacernos una idea de que en SEO la cosa no iría nada mal. Y como hace ya 3 meses que puse este sitio web en HTML5 me he decidido ha hacer algún repaso poco a poco sobre los cambios. Antes de nada comentar que «los buscadores» parece que ya leen el HTML5 y le están dando ya peso a las cosas como se las tiene que dar. Al cabo de las 4 semanas, sin cambios aparentes… Read More →
-
Eliminar el borde cuando haces clic
·
Seguro que en más de una ocasión te has encontrado que al hacer clic en algún enlace o similar aparece una especie de borde con línea discontinua y que, a veces, te desmonta incluso todo el sitio web… ¿Sabes que eso se puede arreglar de una forma muy sencilla? Pues sí, se hace con CSS y con el parámetro outline. La idea es que en el CSS añadas en 2 sitios esta propiedad: body { outline: none; } a { outline: none; } Tan sencillo y tan tonto como esto… en fin, a veces es cuestión de que alguien te… Read More →
-
AntiSpam de correo vía CSS
·
Uno de los grandes problemas que en muchas ocasiones me encuentro es cómo poner una dirección de correo en una página web… Hace un tiempo que un amigo me mandó un sistema que utilizaba y que he estado buscando y he encontrado de dónde podría haber salido, y la verdad es que la idea es muy buena, ya que hoy en día todos venimos utilizando XHTML y CSS… incluso, sólo con CSS ya sería posible hacerlo. La idea es usar el sistema con un ID de estilo: parte CSS /* \40 se convierte en «@» */ #email:after { content: »… Read More →