La propiedad overflow

0 COMENTARIOS -  Publicado hace 38 meses -  Clasificado en: ,

Si el contenido dentro de un div es muy largo y no contiene espacios (como una url) o está, por ejemplo, dentro de unas etiquetas <pre>, puede ocurrir que éste se exceda del div que lo contiene y se superponga con otro contenido. La propiedad overflow nos puede ayudar en estos casos. Imaginemos que tenemos un bloque de código. Lo que deberíamos hacer es fijar la propiedad overflow como scroll: <pre style="overflow:scroll;"> 

mousePosition = event.clientX + calculatePosicionRaton + document.body.scrollLeft + varInerciaX;
mousePosition = event.clientY + calculatePosicionRaton + document.body.scrollTop + varInerciaY;

NOTA: El navegador ha de soportar esta propiedad.

Algunas entradas relacionadas:

 

CSS Spy: Editor CSS gratuito

1 COMENTARIO -  Publicado hace 39 meses -  Clasificado en: , ,

Jonatan Moleiro me envia un mail indicandome una herramienta -CSS Spy- que viene desarrollando y que la verdad es que tiene muy buena pinta. En su web podemos leer una introducción de la misma:

Editar plantillas de estilo CSS puede ser algo complicado, en particular si uno no conoce la especificación bien. ¿Cuantas veces se ha preguntado que parámetros admite determinada propiedad? ¿Cuantas veces perdió mucho tiempo queriendo saber como se ve el item que esta editando en navegador, grabando subiendo y probando?

CSS Spy, le permite de forma sencilla y rápida editar todas las propiedades soportadas por la especificación CSS 1 y 2 y las extensiones documentadas de MSIE, Mozilla y Opera. Además puede visualizar en tiempo real el item editado en Internet Explorer y en Mozilla

CSS Spy » »

 

CSS Princess y otros showcases

0 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en: , ,

CSS Princess is project with the main idea for promoting and supporting beautiful and interesting css sites made by woman's hand or woman's touch. It's well known that women designers have special sensibility which they always put in their work, and main idea of web site gallery created by cssprincess.com is to show the best web sites worldwide which have a woman?s touch in their design.

CSS Princess

Loable idea la de promocionar el trabajo de las diseñadoras mediante este 'showcase'. Ha llegado un momento en que la cantidad de 'showcases' o galerias de webs que se dedican a recopilar coolsites es tan grande que gusta esta diferenciación o valor añadido. Por ejemplo, también sería interesante alguna galeria que se dedicase a recopilar trabajos de diseñadores españoles por comunidades autónomas. Sería muy útil ver los trabajos de compañeros de profesión y vecinos geográficamente. La única pega que le veo a este CSS Princess es que es demasiado arquetípico tanto su diseño -sobre todo el uso del color rosa- como su nombre. En cualquier caso, me parece un buen proyecto. Otras galerías CSS que podemos consultar en busca de inspiración son:

Best Web Designs of World CSS Galleries CSS Vault
Best Web Gallery CSS Hazard CSS Zen Garden
CSS Beauty CSS Heaven CSSDesign.se
CSS Blast CSS Import CSSElite
CSS Bloom CSS Mania CSSGalaxy.com
CSS Collection CSS Nightingale CSS Love
CSS Demo CSS Reboot CSS Tux
CSS Drive CSS Remix CMDer
CSS Empire CSS thesis DarkEye
Design Melt Down Design Snack Favourite Website Awards
InspirationKing Light on Dark Liquid Designs
Netzfrühling Pajatti.net Refresh
Screenspire Showcase GR Standards Reboot
Styleboost Stylegala Submit CSS
Tom.ma | Screenblog Unmatched Style W3C Sites
Web Creme WithStyle  

Algunas entradas relacionadas:

 

Template World: plantillas gratuitas para webs

0 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en: , , ,

Otro sitio desde el que podemos descargar algunas plantillas gratuitas para sitios web. Las plantillas están realizadas con XHTML y lo cierto es que los diseños están bastante logrados. Las plantillas están distribuidas bajo licencia Creative Commons Attribution 2.5.

TemplateWorld

 

Six Shooter Media: Plantillas web gratuitas

0 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en: , , ,

Colección de plantillas distribuidas bajo licencia Creative Commons, realizadas con css y xhtml, y que por tanto son válidas en xhtml 1.0. Varias de las plantillas también están disponibles para varios CMS.
No hay una gran cantidad pero sí de una calidad más que aceptable.

Plantillas web gratuitas

Algunas entradas relacionadas:

 

Top 10 tutoriales de galerias de imágenes con CSS

0 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en:

Existen multitud de tutoriales que explican como crear una galeria de imágenes con CSS. Los hay desde los que explican como crear una galeria sencilla únicamente con CSS, hasta los que explican creaciones más complejas con CSS y Javascript. En esta web hacen una recopilación con, los que creen, 10 mejores tutoriales para realizar galerias de imágenes.

Photo Album

Algunas entradas relacionadas:

 

Crear un style switcher o alternador de estilos

0 COMENTARIOS -  Publicado hace 40 meses -  Clasificado en: , ,

En un post anterior vimos como "Cambiar de clase CSS de un elemento con DOM". En este vamos a ir un poco más allá y crear un "style-switcher" o alternador de estilos. Lo primero que debemos tener es 2 o más estilos, cada uno de ellos con su propio titulo. Uno de ellos con rel="stylesheet", que será el que coja por defecto y los otros dos con rel="alternate stylesheet": 

<link href="css1.css" rel="stylesheet" type="text/css" title="css1"/>
<link href="css2.css" rel="alternate stylesheet" type="text/css" title="css2"/>

Posteriormente debemos tener una función Javascript que se encargue de cambiar de estilo, pasándole como parámetro el título del mismo: 

function EstablecerCSS(title) {
      var i, a, main;
      for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
            if(a.getAttribute("rel").indexOf("style") != -1 &&
                  a.getAttribute("title")) {
                  a.disabled = true;
            if(a.getAttribute("title") == title)
	        a.disabled = false;
            }
      }
}

Y ahora tan sóllo queda llamar a la función en el HTML: 

<div id="enlaces">
<a href="javascript:EstablecerCSS('css1');">Estilo 1</a>
<a href="javascript:EstablecerCSS('css2');">Estilo 2</a>
</div>

Ver ejemplo en funcionamiento » »

Algunas entradas relacionadas:

 
Páginas: < Anterior 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 Siguiente >