Kraken Image Optimizer A Handful Of CSS Trends And How To Use Them There are a handful of CSS and CSS3 trends that are making their way across the web. Find out how to use them on your site… As I make my daily web travels, I’m constantly keeping an eye out for any trends or cool effects that other blogs are taking advantage of. Some of the examples below are taking advantage of CSS3 and may not work in all browsers. Text Selection Color This is kind of a neat one. Just add the following CSS to your stylesheet and you’ll be in business. Gradual Fading Links Here is another great way to add a nice subtle effect to your site. 99% of the time when you hover over any link, it will change right? Add the following CSS to your stylesheet to take advantage of the effect. The 1px Click Give your links a little style with the 1px click effect. Intro Paragraphs Are Easy I wrote about intro paragraphs in an earlier post, but didn’t go into depth on how to use them on your site. Box Shadow with RGBA on Hover Whoa, we’re getting a little deep here! Wrapping Things Up
CSS 2.1: Posiciones En el siguiente ejemplo podemos ver como actúa este atributo, explicándose los detalles en cada caso. Se expone sólo el código para el último caso, pues los demás se configuran en tal como se detalla en el texto. Veáse como el elemento está posicionado de forma absoluta con respecto al elemento de bloque exterior, cuyo posicionamiento es relativo para que las posiciones absolutas interiores se hagan con respecto a él. Resultado: Sin recorte: En este primer ejemplo tenemos un elemento sin recorte alguno. Recorte vacío: Ahora aplicamos clip:rect(0, 104px, 29px, 0) al elemento span de forma que se recorta 0px por arriba, ancho 104-104=0px por la derecha, alto 29-29=0px por abajo, 0px por la izquierda, en definitiva no se recorta nada. Recorte superior: Ahora aplicamos clip:rect(5px, 104px, 29px, 0) al elemento tal que se recorta 5px por arriba, ancho 104-104=0px por la derecha, alto 29-29=0px por abajo, 0px por la izquierda.
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 Dive Into HTML5 Centrar un DIV vertical y horizontalmente | luigix.com Para los que usamos HTML a menudo y queremos hacer las cosas bien según marca la W3C, sabemos que no siempre las cosas son tan fáciles como pueden parecer, y algo tan simple como centrar una caja, recuadro o contenido en medio del navegador puede parecer fácil, sin embargo si se quiere hacer mediante un DIV no es tan sencillo como parece. En muchas ocasiones he estado tentado de usar el viejo método de poner una tabla que ocupe 100% de alto y 100% de ancho y poner el contenido de la celda todo a “center” (align y valign), pero pese a que a veces cueste… hay que hacer las cosas bien y usar un DIV para poder centrarlo mediante un par de técnicas que he encontrado en un genial artículo de la web ProgramacionWeb.net, dónde se explica de forma muy fácil y sencilla como centrar contenido mediante un DIV y CSS. A continuación os dejo una adaptación mía del artículo antes mencionado, dónde he extraído la parte puramente técnica para hacer lo que nos interesa, centrar un DIV.
CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines If you have a new pattern to submit, please send a pull request. Does it present a new technique? Learn CSS Positioning in Ten Steps: position static relative absolute float 1. position:static The default positioning for all elements is position:static, which means the element is not positioned and occurs where it normally would in the document. Normally you wouldn't specify this unless you needed to override a positioning that had been previously set. 2. position:relative If you specify position:relative, then you can use top or bottom, and left or right to move the element relative to where it would normally occur in the document. Let's move div-1 down 20 pixels, and to the left 40 pixels: Notice the space where div-1 normally would have been if we had not moved it: now it is an empty space. It appears that position:relative is not very useful, but it will perform an important task later in this tutorial. 3. position:absolute When you specify position:absolute, the element is removed from the document and placed exactly where you tell it to go. Let's move div-1a to the top right of the page: What I really want is to position div-1a relative to div-1. Footnotes 10.
Tutoriales de HTML5 Aquí tenemos ahora varios enlaces que pueden ayudar a quienes desean empezar a trabajar con HTML5. Seguramente falta mucho para que Adobe Flash sea reemplazado, si es que sucede, pero mientras tanto nada mejor que aprender del HTML5 y su futuro poderío. No importa el nivel de conocimientos, exceptuando las cosillas de CSS3 y otros fundamentos con los que se debería contar, hay opciones para todos los gustos: 1. HTML5 Boilerplate 3.0 Para no iniciar desde cero, HTML5 Boilerplate ofrece una excelente herramienta de aprendizaje en forma de plantilla, con montones de posibilidades y la documentación suficiente para realizarlas. 2. En Chrome Experiments se albergan muchos de los mejores experimentos (tests) para navegadores, con la peculiaridad de que han sido desarrollados esencialmente mediante HTML5, Canvas, SVG y WebGL. 3. Casi lo mismo, sólo que cambiando Google por Mozilla, y Chrome por Firefox. 4. 5. 6. 7. 8.
Designing Websites for All Screen Resolutions Tutorial on Designing for 800 x 600, 1024 x 768, 1280 x 1024 and higher Designing web sites to fit all resolutions is a very important web design principle. Try out the Entheos site in all resolutions higher than 800 x 600 and you will find that it is designed to fit the page exactly. Therefore, visitors who have higher resolution can see more content in one page which reduces scrolling. Most web sites are designed for only one resolution. From our research we have found that majority of our viewers are on the 1024x768 resolutions and higher. Step 1: Decide on the lowest Screen Resolution Before you start you need to decide on your lowest screen resolution. Step 2: Design Your Web Site On This Resolution Once you decide on your lowest screen resolution you need to design your web site for that resolution This means that all your graphics will be designed for this resolution. Step 3: While converting your design to HTML make sure all your tables are measured in terms of percentages Notes:
Tutorial de HTML 5 de Armando Sosa Un video tutorial de HTML 5 desde cero, para principiantes, si quieres aprender lo nuevo de HTML5 sin el dolor de la migración, míralo entero. Es un poco largo, pero vale la pena. El creador es un diseñador que admiro, Armando Sosa. Es de Guadalajara lo he visto crear cosas geniales y emprender varios proyectos que siempre he querido resaltar. ¿Sabes SQL?
Standardista Enlaces en html. Direcciones absolutas y relativas. Etiqueta <a>. mailto. target. anclas. Los enlaces nos permiten de una manera muy cómoda redirigir al usuario a otra parte, cuando éste pinche en dicho enlace. Podemos hacer que el usuario se vaya a otra url distinta a la que está, o podemos hacer que vaya a otra parte pero dentro del mismo archivo en el que está, dentro de la misma url. Esta explicación la entenderás más fácilmente cuando te presentemos los tipos de enlaces que hay y veas sus características. Así pues, vamos a ello: La etiqueta <a> Es dentro de esta etiqueta y de su cierre (</a>) dónde encontraremos el enlace. Atributo href Para que un enlace esté activo debemos indicar dentro de él el destino del mismo. <a href=“enlace”>Pincha aquí para ir al destino del enlace</a> Las urls pueden tener dos tipos de rutas o direcciones: Las urls con dirección relativa y las urls con dirección absoluta. Direcciones absolutas y relativas: Las direcciones absolutas son aquellas que contienen la url completa. <a href=" de enlaces html</a>