|
sábado, 21 de abril de 2007 |
|
Cualquiera que haya utilizado Flickr alguna vez debe conocer la opción para agregar notas dentro de una imagen (Add Note), esta opción muchas veces es ideal para señalar o comentar dentro de la foto. Con un poco de CSS se puede lograr algo similar, funcional en Internet Explorer, Firefox y Opera. 
[ Ver Ejemplo Final ] Para poder crear cada zona activa se usaran varios divs anidados. A su vez estos estarán dentro de uno mayor, el cual contendrá a la imágen principal de fondo. La idea es que el usuario al acercarse a una zona activa, se muestre el correspondiente comentario. En el caso del ejemplo, tendremos que realizar 4 notas diferentes (una por cada integrante). Por lo tanto el body del HTML tendrá la siguiente apariencia: HTML <div class="texto">Charlie Watts </div> </div> </a> </div> <div class="texto">Keith Richards </div> </div> </a> </div> <div class="texto">Mick Jagger </div> </div> </a> </div> <div class="texto">Ron Wood </div> </div> </a> </div> </div> </body> Por otro lado el CSS será: CSS #imagen { width: 400px; height: 300px; position: relative; /*Muy Importante*/ background:url(image.jpg) no-repeat; } a { color:#000; text-decoration:none; position: absolute; /*Muy Importante*/ width: 100px; /*Tamaño de todos los rectangulos*/ height: 120px; /*Tamaño de todos los rectangulos*/ } a:hover { border: 1px solid #fff;/*Borde interior Blanco*/ cursor: hand; } /*Borde exterior amarillo*/ .contorno{ display: block; width: 104px; height: 124px; position: absolute; top: -3px; left: -3px; } a:hover .contorno { border: 1px solid #D4D82D; } /*Posicion de cada nota*/ .uno a{ top: 25px; left: 8px; } .dos a { top: 30px; left: 102px; } .tres a { top: 10px; left: 195px; } .cuatro a { top: 25px; left: 280px; } /*Reglas para mostrar el texto de cada nota*/ .texto { position: absolute; left: -10000px; text-align:center; background-color:#FFFFD3; width: 100px; bottom: -20px; -moz-border-radius: 8px; /*Bordes redondeados, solo FF*/ } a:hover .texto{ left: 0; }
La clave del código es el parámetro position, estando este en absoluto podemos manejar el lugar donde queremos que aparescan las cajas activas. Lo mismo sucede con el texto que funciona de nota. A este último se le agregó el parámetro -moz-border-radius para tener bordes redondeados (solo para Firefox y navegadores con motor de renderizado Gecko) [ Ver Ejemplo ]
Tags: tutoriales css flickr |
|
|
lunes, 09 de abril de 2007 |
|
 Segunda parte del tutorial sobre como crear un template para Joomla!
En esta continuación me enfocaré a hablar sobre el CSS de la plantilla. Pensaba explicar también la creación de ' TemplateDetails.xml ' pero debido a lo largo que es este capítulo preferí dejar la explicación para la tercera parte. La apariencia de la plantilla cuando terminemos será:
Está inspirado en Sangre Brillante, una plantilla de Jonathan Lewenhaupt (que seguramente adaptaré más adelante). El CSS de Joomla! A diferencia de otros CMS, en Joomla! no queda elemento que no podamos modificar a través de CSS. Esto es porque posee clases y estilos específicos para cada módulo, componente, mambots, los que ya vienen por default y los que podemos crear nosotros en la administración. Dependiendo del punto de vista esta inmensa cantidad de información puede ser un poco desorientadora o convertirse en una ventaja. De cualquier forma, Gustavo enlista todas las clases y elementos de Joomla! (podrán ver que es bastante). Por eso lo que vamos a hacer es poner a punto la maquetacion que teniamos y luego explicar los elementos y clases más importantes de este CMS [ Leer más ]
Tags: tutoriales joomla |
|
|
lunes, 26 de marzo de 2007 |
|
Primera parte sobre como crear un template para Joomla! A diferencia de otros tutoriales que explican como crear un template para Joomla!, en este, no sera necesario ningún programa del tipo Dreamweaver, ni nada por el estilo, tan solo un editor de textos y conocimiento básico de HTML, CSS y PHP (no mucho). La estructura básica de un template de Joomla! consta de: - 'Index.php' el cual contendrá el HTML y las directivas PHP;
- 'TemplateDetails.xml', esencial para la instalación del template y su reconocimiento en la administración;
- Una carpeta llamada 'css' que contendrá el estilo en cascada 'template_css.css';
- Una carpeta llamada 'images' que contendrá las imágenes utilizadas para el diseño de la plantilla;
- 'Template_thumbnail.png', una pequeña imagen que funcionará como previsualizacion del template en la administración.
Por lo tanto un template en Joomla! tendrá la siguiente apariencia:
Todos las plantillas van alojadas en la carpeta 'templates', dentro del directorio raiz de Joomla!. En este caso la plantilla será de tres columnas, header y footer [ Ver Layout ] [ Descargar ]. No es la esencia de esta guia explicar cómo crear el layout, existen varios sitios para descargarlos y ahorrar trabajo. Creación del index.php. Con tan solo saber como se desempeñan tres funciones PHP y dos variables ya se puede empezar con la creación del index...
Tags: tutoriales otros joomla template |
|
|
lunes, 19 de marzo de 2007 |
|
 La posibilidad de usar distintos motores de búsqueda (o search plugins) para realizar consultas no es ninguna novedad en navegadores como Firefox u Opera. Pero si lo es en Internet Explorer, el cual permite agregar estos motores desde su última versión.
Con la salida de Firefox 2.0 e IE 7 hubo algunos acuerdos mutuos como la utilización de los iconos para identificar la sindicación . Otro de los acuerdos fue la de usar una misma forma para la creación de los Search Plugins. A diferencia de los creados para Firefox 1.5, estos serán un XML y se basan en las especificaciones de OpenSearch.org . Por lo tanto ahora es posible crear motores de búsquedas compatibles con Firefox 2.0 y Internet Explorer 7. Creación del XML. La forma básica del archivo será: XML <?xml version="1.0" encoding="UTF-8"?> <OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"> <ShortName>Nombre del motor</ShortName> <Description>Descripción del motor</Description> <Image width="16" height="16">http://www.misitio.com/favicon.ico</Image> <InputEncoding>UTF-8</InputEncoding> <Url type="text/html" template="http;//www.misitio.com/buscar={searchTerms}"/> </OpenSearchDescription>
Si tomamos a Flickr como ejemplo, el archivo queda [ seguir leyendo ]
Tags: tutoriales firefox explorer |
|
|
miércoles, 14 de febrero de 2007 |
Sencilla porque se utiliza lo básico de CSS. La idea es tener cinco DIVs anidados. 3 de ellos tendrá un tono de gris. Luego se los distribuirá para formar la sombra. Por lo tanto el esquema es:
Y el resultado:
Entonces dentro de <body> en el HTML creamos los 5 DIVs:
HTML <div id="contenedor"> <div class="sombra1"> <div class="sombra2"> <div class="sombra3"> <div class="caja"> El contenido va aqui </div> </div> </div> </div> </div>
En el estilo en cascada coloreamos a cada uno y los distribuimos:
CSS *{ position: relative; /*Importante*/ } #contenedor .sombra2, #contenedor .sombra3, #contenedor .caja { left: -2px; /*Posicionamiento de los DIVs*/ top: -2px; } #contenedor .sombra1 { background-color: #CCC; /*Coloreamos el fondo*/ } #contenedor .sombra2 { background-color: #999; } #contenedor .sombra3 { background-color: #666; } #contenedor .caja { background-color: #FFF; border: 1px solid #CCC; /*Le damos borde a la caja y padding*/ padding:10px; }
Testeado en FF 2.0 y IE 6 Resultado final
Tags: tutoriales css otros |
|
|
<< Inicio < Anterior 1 2 3 4 5 6 7 Siguiente > Final >>
|
| Resultados 6 - 10 de 32 |
