[ un desarrollo de PATAGONIA CREATIVE ]
  • CSS

    23 /09 / 2007 - 2:54 am

    Publicado por Nikko.

    • 8
    • 11.067

    Social Link

    Bonita técnica para lograr fondos desvanecidos o degradados

    fadebottom

    Por medio de Horacio (granimpetu) veo un tip bastante interesante, sencillo y agradable. Fade Out Bottom, una técnica muy sencilla que nos servirá para realizar en nuestro pie de pagina un efecto desvanecimiento o degradado. Básicamente lograremos esto mediante una imagen PNG diseñada previamente y la cual poseerá transparencia, un poco de CSS para crear el fixed (flotamiento) en la imagen, y el DIV que utilizaremos para llamarlo desde nuestra pagina.
    Si quieren ver lo que lograremos con esto: ejemplo 1 y Ejemplo 2

    1. #bottom_fade {
    2. width: 600px;
    3. height: 200px;
    4. z-index: 99;
    5. position: fixed;
    6. bottom: 0%;
    7. background-image: url("bottom-fade.png");
    8. }

    La llamada desde nuestra pagina

    1. <div id="bottom_fade"></div>

    Ya hemos hablado más de una vez de los problemas que existen con las imágenes PNG con transparencia e Internet Explorer. Por lo tanto si deseamos que este efecto se vea en todos los navegadores ha excepción de Internet Explorer 6 y versiones más antiguas, al selector #bottom_fade le agregaremos:

    1. visibility: visible !important;
    2. visibility: hidden;

  • Diseño | Photoshop

    23 /09 / 2007 - 2:09 am

    Publicado por Nikko.

    • 10
    • 26.488

    Social Link

    6000 gradientes para Photoshop

    Cuando hablamos de recursos para diseño sin lugar a dudas los gradientes ocupan un lugar importante en ellos. Son muy utilices par ala terminación de un proyecto web, la personalización de una determinada sección, la creación de logos, en fin. Hace tiempo atrás nombramos dos pack de gradientes con estilo 2.0 aquí, aquí y aquí realmente muy bellos y útiles. Pero si aun gozando de ellos no estaban conforme, o creías que faltaban algunos estilos para algún proyecto que llevas adelante, les dejo ahora unos 6000 gradientes para que instalen en su photoshop. En cuanto a estilo el pack esta bastante categorizado, en gradientes con estilo metal, dark, buttom, gold, etc etc. Cada uno de los archivos posee una buena cantidad de gradientes que podremos ver al instalar. En caso de instalarlos todos obtendremos unos 6000 gradientes con los cuales podremos contar a la hora de diseñar.

    DESCARGAR

    Instalar los gradientes: Click en cada imagen para ver los pasos.

    paso1 Paso2 paso3

     

  • Iconos

    22 /09 / 2007 - 6:25 pm

    Publicado por Nikko.

    • 9
    • 817

    Social Link

    Iconos by devilcry

    Por medio de diariothc descubro un bonito blog que es devilcry.org, un blog ruso donde podremos encontrar una buena cantidad de recursos, pero de todos ellos, los que mas destaco son los iconos que nos ofrece, que sin bien no son tantos, son todos realmente extraordinarios. A la hora de descargar los ficheros deberemos tener en cuenta solo lo siguiente: puede suceder que al hacer click en el link de descarga luego solo veamos una página en blanco y la descarga sin iniciar. Para evitar esto, las descargas deberemos hacerlas con la opción “guardar enlace como” de nuestro menú contextual.

    Les dejo el enlace a la categoría My Art (encontraremos mas iconos) y dejo alguno de los iconos que me han gustado a mí.

    MicroBLOG: Un bonito pack de 47 iconos png e ico. Ideales para utilizarlos en proyectos web y a su vez complementarlos con los que solemos usar habitualmente que son los de famfam. Descarga (“Guardar como”)

    Light Blog icons: Pack de solo 5 iconos pero que también podrán servir para tus proyectos web. Descarga (“Guardar como”)

    FreshIcons: iconos sobre aplicaciones, feed y demás. Descarga (“Guardar como”)

  • BM Custom Login – Plugin wordpress para personalizar nuestros tablero login

    Seguramente recordaras el post donde explicábamos lo fácil que es personalizar nuestro tablero de login en wordpress. Aun siendo un proceso muy fácil donde solo necesitábamos dar una mirada a la carpeta “wp-admin/ images”, y en ella modificar dos archivos “GIF” titulados .

    Puede que temas tocar algo de más, o prefieras brindarles a tus clientes otra forma de realizarlo sin temor a dañar algo.

    BM Custom Login Plugin es un plugin que nos permitirá realizar esta personalización de una manera quizás mas practica o por lo menos mas segura. Y lo genial es que posee dentro de la carpeta un archivo PSD que te hará aun más fácil la creación de tus propias imágenes utilizando Photoshop o Fireworks.

    Instalacion:

    1. Descargar plugin
    2. Descomprimir y alojar todo el contenido en tu carpeta /wp-content/plugins (la carpeta entera debe estar allí)
    3. Activar el plugin desde panel de Administración
    4. Crear tu imagen – puedes utilizar el archivo PSD que se encuentra en la carpeta image-templates, sin duda hará mas fácil la creación de tu pantalla
    5. Bask in the glow of your brand new shiny custom login screen

    Enlaces prácticos:

    Ver el grupo flickr para inspirarte mirando otras pantallas personalizadas.
    Via | vikiworks

  • Scripts

    19 /09 / 2007 - 6:28 am

    Publicado por Nikko.

    • 2
    • 2.852

    Social Link

    Efecto de enrollamiento en imágenes mediante JavaScript

    Luego de las ya recomendadas Glossy.js 1.3 y Instant.js 1.0, veo en ajaxian que Christian Effenberger nos trae otro nuevo script con nuevo efecto para que utilices en tus sitios web. Curl.js esta vez nos permitirá agregarle a nuestras fotos un efecto de enrollamiento animado al pasar el mouse o fijo si lo desearamos asi, con lo que básicamente evitaremos tener que realizar este efecto de forma manual utilizando siempre un editor de imágenes.
    Curl.js funciona muy bien con todos los navegadores “importantes” – Mozilla Firefox 1.5+, ópera 9+ y safari. Pero en IE viejos no se vera ninguna modificación, lo que nos es problema ya que los usuarios no notaran ninguna diferencia, simplemente verán la imagen de forma normal.
    Instalación:

    Primero descargamos la librería Curl.js y la alojamos en nuestro servidor.
    Hacemos el llamado a la librería agregando en nuestro encabezado, antes de la etiqueta < / HEADER > lo siguiente:

    1. <script type="text/javascript" src="curl.js"></script>

    NOTA: Verificamos bien en “src” que la localización del script sea la correcta.
    Modo de uso:
    Cuando deseamos usarla agregamos a nuestras imágenes la clase “curl”
    EJ:

    1. <img class="curl" src="images/foto.jpg"/>


    Otros Parámetros:

    isize: nos permite variar del efecto el tamaño del enrollamiento, en caso de que deseamos hacerlo agregamos el parametro “ isize” seguido por el tamaño deseado en porcentaje: De forma default es 33.
    Ej

    1. <img class="curl isize75" src="images/foto.jpg"/>


    icolor: Nos permite cambiar el color del enrollamiento que acompaña a la imagen. Lo hacemos agregando “ icolor” seguido por el color expresado en hexadecimal. minimo=000000 maximo=ffffff default=0
    Ej:
    1. <img class="curl icolor33240A" src="images/foto.jpg"/>


    Ishadow: nos permite variar la opacidad de la sombra. Para cambiarla lo haremos agregando la clase “ishadow” seguido por la opacidad en porcentaje:
    minimo=0 max=100 default=66
    Ej
    1. <img class="curl ishadow30" src="images/foto.jpg"/>


    Combinar mas de un parámetro a la vez:
    En caso de desearlo así, podremos usar todos los parámetros a la misma vez.
    Ej:
    1. <img class="curl icolor33240A  ishadow30 isize44" src="images/foto.jpg"/>


    Con Animación
    Si deseas flexibilidad, puedes utilizar “cvi_curl_lib.js” en vez de “curl.js”. Con ella puedes hacer que tus enrollamientos responden a las acciones del usuario (e.g. cambiando el tamaño del enrollamiento cuando se asoma la imagen encima). Demo

  • Agregar curvas a las fotos

    Muchos quizás no le den importancia a las imágenes que introducen en cada uno de los post, pero muchos de ustedes se que si. Pues aquí Hongkiat acaba de publicar un tutorial muy ilustrativo para conseguir agregar curvas a las fotos, que desde ya es un efecto que le da a las fotos un estilo muy agradable. Podrán seguir el tutorial para por paso y si desean descargar el archivo PSD del mismo.

    Enlace tutorial y descarga PSD: Create Photo Curves

  • CSS | Diseño Web

    18 /09 / 2007 - 3:22 am

    Publicado por Nikko.

    • 0
    • 796

    Social Link

    Flotador secundario a la derecha de los títulos de tus post

    flotador

    Un simple truco para agregar un flotador secundario con contenido a la derecha de los títulos de tus post. Básicamente esto lo podrás utilizar para variedad de propósitos, por ejemplo introducir un icono con el feed de cada post específico, el icono de comentarios, iconos de votación, Link hacia artículo completo, etc
    Democssglobe

    1. <h2>Titulo de post</h2>
    2. <p class="floater"><a href="#">Seguir leyendo...</a></p>

    El margen superior del flotador depende de la altura del título, por lo tanto, primero necesitaremos ajustar eso.

    1. h2 {
    2. height:24px;
    3. line-height:24px;}

    Ahora si el código CSS de nuestro flotador

    1. .floater {
    2. margin:0;
    3. float:right;
    4. margin-top:-24px;
    5. height:24px;
    6. line-height:24px;}