No he visto, hasta ahora, una lightbox más sencilla y efectiva que ésta. Quien quiera ir echando un vistazo, puede hacerlo Aquí y, por supuesto, en la página de su autor... Mañana lo cuento...



Lista



Prueba Lista:

Relleno.



Bordes redondeados y esquinas transparentes

Css con alguna imagen y javascript.
La lástima es que se me queda estrecho el "content"·, pero... no voy a desgraciar la plantilla por ensancharlo.





Transparent custom corners and borders, version 2


This page demonstrates different uses of the technique described in the article Transparent custom corners and borders, version 2. Please read that article for more info on how this technique works. Should you want to link to this, please link to the related article instead of to this demo page. Thanks!


To create your own corners and borders, follow the instructions in Customising custom corners and borders. For an example of how easy doing stuff like this will be once all browser vendors get with the times and update their CSS support, check out Custom borders with advanced CSS.


The CSS and JavaScript are free to use, but please create your own graphics. Thanks!





A default box, nothing special


This is the most basic type of custom box. It uses the default styling and is not positioned or floated, and does not contain other custom boxes.





  • You can also turn a list into a custom box. This is an unordered list.


  • List item number two.

  • List item number three.




This box contains another box



This box is contained by another box.



There used to be a problem with this.



But now you can put custom boxes inside other custom boxes with no problems.





This is an absolutely positioned box



It will shrinkwrap to fit its content in all browsers but IE.





You can also use this technique to turn links into buttons. These are floated left and shrinkwrap to fit their content:



Unfortunately you need to specify a width for Internet Explorer since it doesn't shrinkwrap.




This box is floated


It is also styled the same way all boxes will be styled in IE 6 and below. IE 7 supports PNG images with alpha transparency and will display the same images as other browsers.






This box is floated and contains another box that is also floated



This box is floated and is contained by another floated box


As you can see, floats can now contain floats.



The CSS used to float this box is applied with an id selector to show that if an id attribute exists, the script moves it to the new container.





A la vista está que la sombra se aplica a todos los bordes (superiores e inferiores), pero el "redondeo" de la esquina es sólo superior. Pero queda guapo...


Listas con CSS

Un poquito de CSS... y así de guapas quedan:


1


Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.






2


Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.







3


Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.






4



Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.






5


Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.







6


Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.






7


Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.







8


Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.






9



Typi tation gothica quis sollemnes eum. Consequat magna ex usus lectores lectorum. Lectores etiam eorum est diam assum. Commodo consequat legere volutpat dynamicus eleifend. Doming possim illum legere ad quis. Facilisi claram notare doming claritas consequat. Enim eleifend molestie possim nobis luptatum. Eum vero et delenit feugait accumsan. Hendrerit tincidunt vero vel eorum claritatem. Soluta legunt quod qui dolore typi.







"Titles"

He eliminado, por el momento, los "sweet Titles" de esta plantilla, puesto que la "Milkbox" los confunde con los "title" del texto que acompaña a cada imagen y, por tanto, éstos no se visualizan junto a la caja de navegación.
Como lo que pretendo es que se vean todas las funcionalidades de la MilkBox, pues... habrá que sacrificar los primeros, qué remedio (no me apetece un pimiento ponerme a modificar el script para modificar la acepción "title", con objeto de separarla y distinguirla de las sweetTitles"... paso... que ya es tarde y me da mucha pereza.)


Plantilla

En cuanto la termine la pongo por Epílogo:
Es la plantilla "shawshank" de Milo, y contiene en el zip, por vez primera, el script font swifr.


Milkbox

Es la lightbox más sencillina que he conocido hasta ahora. Me gusta...












Entradas


◊ Copyright 2008 Junio | Created by miloIIIIVII | Entradas RSS | Comentarios RSS