-->
Ir a Epílogo
close

AVISOS:

SOBRE NAVEGADORES

Regresar a EpílogoEste sitio, lo mismo que mis otros blogs, se ven mejor con los navegadores más recientes.
Especialmente Firefox, que es el que uso.

¡¡NO FUNCIONA CON IE6!!! (creo...)

FirefoxInternet Explorer 7SafariOperaCaminoKonqueror



Top Panel
martes, 29 de enero de 2008

Shadowbox

Lightbox paea todo. Aquí debajo está el ejemplo "mixed" de la página del autor, mostrando contenidos de todas clases: imágenes, películas, animaciones flash, frames...
No está nada mal...

Mixed Content Gallery





Galería de imágenes con "talla" adaptada:



Estaciones


Cisne
Reflect

IFrame


sábado, 19 de enero de 2008

Gradient CSS

Y las vueltas que le he dado hasta encontrar la "pega"...
Y es que el artículo de Xyberneticos está incompleto: ofrece su CSS, el HTML del gradient y una corrección para IE6.

Pero así no me funcionaba, hasta que decidí ir a la página fuente del artículo Webdesignerwall, donde se muestra un download... y ahí ya me figuré que habría imágenes.

Efectivamente: todos los gradientes están hechos a base de imágenes... he tardado un congo en descargármelas todas, con resultados diversos: la mayoría se ven bien, salvo por el glossy link, que no lo veo por ningna parte; el gradient con query, que me mandaba a la porra la mitad de los hacks de este blog, de forma que paso...; y el Zebra, que se me ha quedado corto para la segunda palabra del ejemplo (con un content-Wrapper más ancho quedaba arreglado... pero no tengo ganas de ponerme a mover la plantilla sólo por la segunda palabra de un gradient).

Y se me ocurre que lo mismo vale para títulos en h1 que en cualquier otro, p.e. h2, que son los que suelen utilizar las plantillas de blogger.

En cuanto al código, ya digo que son un CSS que me he descargado y al que he añadido las correspondientes imágenes; un script query para el caso; y una corrección para que el gradient duncione en IE6...

Aparco el CSS para cuando tenga tiempo... en Epílogo.


CSS Gradient Text


How about Georgia?








Dark on Light Sample





Metallic shine


Doesn't this look cooler than Web 2.0?





Hello, I'm Shinely






Vertical Stripe





Horizontal Stripe





Wow, Zebra






It works on IE6 too!


Note: only this sample has applied IE6 PNG hack





jQuery prepend version


Note: in this sample the <span> tag is prepended by jQuery (it is not in the source code).





iPhone again?


Here is another sample intro banner




Apply on real design



See, it is very practical. Try it on your design today. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc euismod adipiscing magna. Quisque sollicitudin nisi a nisi feugiat suscipit. Praesent molestie. Curabitur laoreet, augue in pharetra adipiscing, ipsum lectus blandit leo, quis viverra odio purus eget lectus. Cras vitae libero. Duis sed pede id erat laoreet varius. Ut felis est, aliquet ut, dictum at, consectetuer sed, ante.


Another heading


Mauris aliquam leo at pede pharetra condimentum. Ut arcu mauris, blandit at, porttitor vel, scelerisque vitae, nunc. Vivamus consequat tellus. Vivamus sed magna ut urna dictum ultrices. Curabitur at libero molestie eros imperdiet semper. Maecenas eu est non nunc gravida laoreet. Vestibulum orci. Donec bibendum neque a dui.



miércoles, 16 de enero de 2008

Me ha costado...



NOTA: De lo dicho nada: Haciendo pruebas y abriendo el blog en varias ventanas, debí confundirme y mandar un script a la porra... ya no funciona nada. Tres días de trabajo a la porra... Pero los voy a recuperar: A cabezonería no me gana Blogger.

... pero lo he conseguido:

"Imitar" la librería de Joomia, para hacer algo parecido al sliderdraw (ha quedado algo chungo... pero llevo dos días qumándome las pestañas para hacerlo funcionar).

Lo que me ha quedado bien, sin discusión, es la barra del blog, así como el acordeón (que ha sido lo único fácil y rápido de hacer... más o menos: en comparación, digamos).

Encontrar las imágenes ha sido tarea de locos...

Seguiré haciendo pruebas... ahora con el carrusel y... no sé si aquí ya frenaré...

martes, 1 de enero de 2008

Fancy-Menú sin imágenes

Y así nos dejamos de tanto trabajo. Y queda también muy guapo. Lo podéis ver en el footer de mi blog de pruebas Imagen

Dejad los scripts como están y tan sólo eliminad todo el css del Fancy menú para colocar éste en su lugar:

#fancymenu {
position: relative;
width: 100%;
background:#2E5F6B;
padding: 15px;
margin: 10px 0;
overflow: hidden;}
#fancymenu ul{
padding: 0;
margin: 0;}
#fancymenu ul li {
float: left;
list-style: none;}
#fancymenu ul li a {
display: block;
float: left;
color:#fff;
padding:10px 20px;
position: relative;
overflow: hidden;
z-index:10;
text-decoration:none;
font-size:18px; }

#fancymenu li.background {
z-index: 8;
border-bottom:5px solid #18B3DB;
position: absolute;
visibility: hidden;
padding:0 0 0;
height:40px;
}

La solución la da Alvin en el foro del menú-fancy... y no puedo daros su URL porque... le han hackeado el blog. Mecachis...

Fancy-Menú

Sí... ya sé que queda muy mono... pero me ha costado un trabajo enorme implementarlo.
Para empezar, porque me ha costado un congo encontrar los scripts (si no es porque alguien del foro del autor del hack tuvo a bien colocar un zip para descargarlos... me quedo a uvas)

Para seguir, porque el autor usa imágenes de palabras, en lugar de las palabras tal cual... y menudo lío si hay que andar bajándose fuentes para construir los términos y ponerlos en el menú... de manera que, menos mal que un alma caritativa de ese mismo foro ofrece la solución para poner los términos tal cual, en lugar de las imágenes.

Y el background que da como ejemplo el autor: se me quedaba enano para todos los vínculos que quería poner... entre otras cosas por probar el ancho y que se ajustara a las cabeceras más anchas. Pues no hubo manera: su background (una cajita con esquinas redondeadas, de color naranja) es una monería... pero no cabe el ancho que prefiero, a menos que... me vuelva loca dentro del CSS y los scripts. Y no me apetece, francamente.

Al final, para que me salga tal cual lo véis, he optado por hacerme un "refrito" particularísimo con el CSS, con un link para el CSS principal del hack y otro CSS "a mano" dentro del skin, para incluir el texto "amanuense" y dejar abierta la posibilidad de incluir un día imágenes en el menú. Además, he pasado de la cajita tan mona y me quedo tan contenta añadiendo un color de fondo.

Total: un lío de órdago.

Pero lo he conseguido, je.

Ya lo comento otro día en Epílogo. Mientras tanto, si alguien quiere mirar el hack original y las contestaciones al mismo (donde encontré todas las soluciones que no da el autor) puede echar un vistazo a devthought.

Los zips para descargar los scripts y las imágenes, están en tangelo

Y, en cuanto a la solución para colocar texto, en lugar de imágenes de texto, la ha dado Michael en el mismo foro...

Me ha costado tanto trabajo... que ha dejado de resultar "divertido" el menú en cuestión... ufffff...

Por cierto: a quien no le guste andar con scripts, lo lleva claro: nada menos que cuatro...

También hay un formulario con selector de imagen para perfil, pero... yo doy las pautas y, mejor que lo pruebe otro, je. Yo ya he tenido bastante menú.

 
Sir John Tenniel"s illustrations
ALICE"S ADVENTURES IN WONDERLAND
sketch 01
sketch 02
sketch 03
sketch 04
sketch 05
sketch 06
sketch 07
sketch 08
sketch 09
sketch 10
sketch 11
sketch 12
sketch 13
sketch 14
sketch 15
sketch 16