RibosoMatic Blog

Son impresionantes los diseños que podemos lograr tan solo con CSS en nuestras aplicaciones web, y pues esta galería ó presentación de imágenes no escapa a ello. Con un agregado muy conocido, la paginación ó numeración, esta galería sí que llama nuestra atención!

Las puedes ver en CSSPlay.

Con la ayuda de CSS es posible resaltar el color de fondo de un elemento HTML en este caso una celda, fila ó columna de una tabla. Con la ayuda de la propiedad :hover, soportado en la mayoría de navegadores (salvo IE6, grrrr!). Pero David Walsh nos explica una forma de lograr el resaltado de color con la ayuda de Mootools.

Tabla XHTML

<table id="highlight-table">
       <colgroup></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
       <colgroup class="slim"></colgroup>
    <thead>
       <tr>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
           <th></th>
       </tr>
    </thead>
        <tbody>
                <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                </tr>
                <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                </tr>
                <!-- MORE ROWS -->
        </tbody>
</table>

CSS

table               { border-collapse: collapse; width: 100%; margin-top:10px; }
td                  { border: 1px solid #ccc; padding: 10px; }
thead               { width: 100%; height: 109px; background: url(header.png) no-repeat; }
.slim               { width: 88px; }
.column-hover           { background:#eee; }
.row-hover                      { background:#ddd; }
.cell-hover                     { background:#fffea1; }

Código JavaScript

window.addEvent('domready',function(){
/*  METHOD 2:  Better  */
var table = document.id('highlight-table');
var rows = table.getElements('tr');

//for every row...
rows.each(function(tr,trCount){
        //we don't want the header
        if(tr.getParent().get('tag') == 'thead') { return false; }
        //add the row class to the row
        tr.addClass('row-' + trCount);
        //add the row listener
        tr.addEvents({
                'mouseenter': function(){
                        tr.addClass('row-hover');
                },
                'mouseleave': function(){
                        tr.removeClass('row-hover');
                }
        });
        //for every cell...
        tr.getElements('td').each(function(td,tdCount) {
                //remember column and column items
                var column = 'col-' + tdCount;
                var friends = 'td.' + column;
                //add td's column class
                td.addClass(column);
                //add the cell and column event listeners
                td.addEvents({
                        'mouseenter': function(){
                                $$(friends).erase(td).addClass('column-hover');
                                td.addClass('cell-hover');
                        },
                        'mouseleave': function() {
                                $$(friends).erase(td).removeClass('column-hover');
                                td.removeClass('cell-hover');
                        }
                });
        });
});     
});

Sitio : David Walsh

Demo : http://davidwalsh.name/dw-content/mootools-table-columns.php

Desde CSSPlay dos interesantes menús profesionales en forma de lista desplegable.

Professional image droplist menu

Professional droplist menu v2

Aunque los diseños de CSSPlay requiere una donación y el permiso del autor, no quiere decir eso que no podamos inspirarnos en estos para desarrollar nuestro propio menu si tenemos conocimiento de CSS.

Interesante tab pages ó panel con pestañas hecho con CSS. Funciona perfectamente sobre: IE6, IE7, IE8, Safari(PC), Firefox, Opera y Google Chrome.

Nota: Los diseños de CSSPlay son para uso personal enlazando al sitio, para uso comercial enviar un e-mail. Si no te agrada la idea pues te puede servir de inspiración para un diseño propio.

Vía CSSPlay

Con CSS (Hojas de estilo en cascada) también se habla de Cross-Browser, desarrollo de páginas web que se ven exactamente igual en cualquier navegador. Existen algunas técnicas CSS con ese objetivo. Veamos algunas:

Resetear CSS

La mayoría de navegadores definen por defecto diferentes estilos para los elementos HTML. Por ello lo primero a realizar en nuestro diseño es resetear nuestra hoja de estilos.

html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;}
ul,ol {list-style:none;}
fieldset,img,hr {border:none;}
caption,th {text-align:left;}
table {border-collapse:collapse; border-spacing:0;}
td {vertical-align:top;}

Internet Explorer hacks

Podemos usar atributos con sus valores para versiones especificas del navegador.

.class {
  width:200px; /* All browsers */
  *width:250px; /* IE */
  _width:300px; /* IE6 */
  .width:200px; /* IE7 */
}

Enfocado a Opera

Establecer estilos CSS para este navegador.

@media all and (min-width: 0px){
    .classname {}
}

Enfocado a Safari

Aunque es raro, pero siempre es bueno saber establecer estilos CSS para este navegador.

html:lang(en)>body  .classname {}

Enfocado a Google Chrome

Finalmente lo mismo que Opera y Safari para referirnos a Chrome.

body:nth-of-type(1) p{
   color: #333333;
}

Ver más técnicas y herramientas en CatsWhoCode

SlickMap CSS en una sencilla hoja de estilo para mostrar sitemaps directamente desde una lista de navegación HTML estándar. Se adapta a la mayoría de sitios web, con capacidad de hasta 3 niveles de páginas de navegación y otros links de utilidad. Es personalizable para satisfacer nuestras propias exigencias, estilos ó preferencias.

Enlaces | Info, demo y descarga