Currently browsing: trucos

Rota texto usando sólo CSS

Beware: This post was published 6 years ago and its content may be outdated.

Vía Anieto2k descubro un método muy sencillo para rotar texto usando CSS. Básicamente debemos usar las propiedades “-webkit-transform“, “-moz-transform“, “filter: progid:DXImageTransform.Microsoft.BasicImage()” para Webkit (y Safari), Firefox 3.5 (o posterior) e Internet Explorer, respectivamente.

Lamentablemente no son propiedades que forman parte del estándar de CSS 2, así que éste método sólo funcionará en navegadores que usen Webkit (como Safari o Google Chrome), Firefox 3.5 e Internet Explorer.

Finalmente el código que usaríamos sería el siguiente:

<div class="example-date">
<span class="day">31</span>
<span class="month">July</span>
<span class="year">2009</span>
</div>
.year {
/* WebKit, Safari */
-webkit-transform: rotate(-90deg);
/* Firefox 3.5+*/
-moz-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Obteniendo este resultado:

Rotar textos

Consejos para diseñar los links "Sigue leyendo"

Beware: This post was published 6 years ago and its content may be outdated.

Ayer publicaron en Smashing Magazine una serie de ejemplos y consejos para diseñar bonitos links de “Sigue leyendo”, el típico link que encontraremos en cualquier blog. Podremos ver ejemplos de links simples y otros más complejos y bonitos, unos sin imágenes y otros con ellas.

Personalmente, me gustan mucho los links que utilizan imágenes, aunque prefiero ver el artículo entero sin necesidad de cargar una página más, como se puede hacer en casi todos los artículos de este blog.

Aprende a instalar Mac OS X desde un dispositivo extraíble

Beware: This post was published 6 years ago and its content may be outdated.

Hoy han publicado en Applesfera una guía para instalar Mac OS X Leopard (aunque en teoría se debería de poder usar el mismo método para otras versiones de Mac OS X, como Tiger o Snow Leopard) desde cualquier dispositivo de almacenamiento extraíble.

Con este método, además, podremos reducir el tamaño del instalador y no será necesario usar un DVD de doble capa o un dispositivo con 8 GB de memoria, sino que podremos llegar a reducir esas 8 GB a la mitad, con lo que podremos guardar el instalador en un DVD de una sola capa o en un pendrive (o una memoria flash).

Podéis leer el tutorial aquí.

Comparte la conexión de Internet de tu Mac vía Wi-Fi

Beware: This post was published 6 years ago and its content may be outdated.

Muchos de nosotros no tenemos Internet vía Wi-Fi en casa, con lo que para conectarnos dependemos totalmente del cable. Esto no es muy importante si usamos un sobremesa o un portátil (que suelen tener una ranura para el cable de red), pero, ¿qué ocurre con dispositivos como el iPod Touch (o iPhone) que no disponen de renura para el cable de red?

Preferencias del Sistema

Preferencias del Sistema

Preferencias del Sistema - Compartir

Preferencias del Sistema - Compartir

Pues bien, compartir la conexión de red en Mac OS X es realmente fácil. Primero abrimos Preferencias del Sistema, y allí hacemos clic en Compartir.

Seleccionamos la opción compartir, y tendremos una ventana como la de la imagen de la derecha. Cada número de la imagen corresponde a:

  1. El menú deplegable que nos permite elegir qué conexión a Internet compartimos. En mi caso comparto Ethernet.
  2. A través de qué conexión la comparto. En mi caso uso AirPort para compartirla con mi iPod.
  3. Las Opciones de AirPort permiten elegir el nombre de la red y establecer contraseña.
  4. Marca la casilla para comenzar a compartir Internet. Cuando está marcada no se puede modificar la configuración anterior.
Icono de AirPort

Icono de AirPort

Si lo hemos hecho bien veremos que el icono de AirPort se parecerá al de la imagen de la izquierda. Y en la lista de redes Wi-Fi que detectará nuestro iPod, veremos la red que hemos creado.

Ajustes del iPod Touch

Ajustes del iPod Touch

Guía para pasar de Windows a Mac OS X

Beware: This post was published 6 years ago and its content may be outdated.

Curioseando por varios blogs sobre el mundo Mac he encontrado una serie de artículos en AppleWeblog para nuevos usuarios de Mac OS X (concretamente para Leopard) donde explican las cosas básicas que se deben saber sobre el sistema operativo. Cosas cómo la forma de grabar CDs/DVDs, qué programas hay para Mac OS X que reemplazen los que antes usabas en Windows, etc.

He estado leyendo unos cuantos y son realmente interesantes (y eso que no tengo un Mac 😉 ). Si no te aclaras con Mac OS X, estos tutoriales te serán de mucha ayuda.

Añade un link al RSS Feed de tus categorías

Beware: This post was published 6 years ago and its content may be outdated.

Antes y despuésCurioseando por el Codex de WordPress he descubierto que la función wp_list_categories también nos permite mostrar un link hacia el RSS Feed de cada categoría.

Este link está por defecto deshabilitado, pero basta con añadir el parámetro feed o feed_image para que aparezca el link o una imagen en su lugar.

El parámetro feed indica el texto a mostrar en caso de que no esté el parámetro feed_image o el título del enlace en caso de que sí que esté definido feed_image. Por su parte, el parámetro feed_image indica la URL hacia la imagen a mostrar en el ink.

Aquí tenéis un ejemplo de la función que solemos usar hasta ahora:

wp_list_categories('title_li=&depth=1');

Ahora añadimos ambos parámetros (o uno sólo), dejando el código anterior de la siguiente forma:

wp_list_categories('title_li=&depth=1feed=RSS Feed&feed_image=feed.png');

Y obtendremos el mismo resultado que en la imagen que podéis ver a la izquierda del artículo.

Crea estilos personalizados con Stylish

Beware: This post was published 6 years ago and its content may be outdated.

Stylish es un complemento de Firefox que nos añade una función muy curiosa: nos permite añadir estilos personalizados tanto a páginas web como al mismo navegador.

Con Stylish podemos darle un look más bonito a Firefox, eliminar la publicidad de nuestras webs favoritas o cambiar el estilo de cualquier web. Los estilos de Stylish se diseñan con código CSS, con lo que podemos lograr darle un estilo totalmente diferente a cualquier web.

StylishAsí que voy a explicar cómo crear un estilo para cualquier página web usando Stylish. Comenzamos descargando el complemento, en esta página. Una vez tengamos activado Stylish, abrimos la ventana de complementos y veremos una nueva pestaña: Estilos de usuario.

StylishEn esta ventana tenemos un botón que nos permite escribir nuevos estilos (en la parte inferior derecha de la ventana). Este botón nos abrirá una nueva ventana, que nos pedirá un nombre para el estilo (usad uno que sirva para identificarlo más adelante), una etiqueta (opcional) y el código a aplicar.

El código básico para personalizar una web es el siguiente:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("URL DE LA WEB SIN HTTP://") {
CÓDIGO CSS A APLICAR
}

Por ejemplo, si queremos ver Google con las capas (div) de color negro, basta con usar el siguiente código:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("google.es") {
div { background:#000; }
}

Realmente sencillo y útil para aquellos que conozcan CSS. Se acabó el tener que “aguantar” un diseño feo, ahora puedes rediseñar completamente cualquier página web con Stylish.

Pero no es necesario saber usar CSS para tener estilos personalizados. En Userstyles.org podemos encontrar una gran cantidad de estilos personalizados para las web más populares, como Google o Facebook.

Consejos para diseñar ventanas modales

Beware: This post was published 6 years ago and its content may be outdated.

Ayer publicaron en Smashing Magazine un interesante artículo sobre cómo diseñar bonitas ventanas modales que a la vez sean útiles y accesibles.

Para los no sepáis qué son las ventanas modales, son esas “ventanitas” que, por ejemplo, contienen imágenes de mayor tamaño y aparecen al hacer clic sobre las miniaturas de éstas. En este mismo blog se usan estas ventanas para mostrar imágenes a mayor tamaño.

Mejora el aspecto de los formularios con Javascript

Beware: This post was published 6 years ago and its content may be outdated.

A finales de enero comenté un método para mejorar nuestros formularios mediante Javascript y algo de CSS (aquí tenéis el artículo del que hablo). Pues bien, ayer en Anieto2k comentaron un método similar para mejorar los formularios, y he pensado que no estaría mal hacer una pequeña lista con diferentes métodos para darle un estilo nuevo a nuestros formularios.

Ryanfait.com Sexy Forms Niceforms jQuery Nice Form FancyForm
Compatible con: Internet Explorer 7 Internet Explorer 8 Firefox Opera Safari Google Chrome Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Firefox Opera Safari Google Chrome Internet Explorer 7 Firefox Opera Safari Google Chrome Internet Explorer 6 Internet Explorer 7 Internet Explorer 8 Firefox Opera Safari Google Chrome Internet Explorer 7 Internet Explorer 8 Firefox Opera Safari Google Chrome
Múltiples diseños: No No No
Elementos desactivados: No No No No
¿Cambia cuando se selecciona un elemento? No No No
Framework: Ninguno Mootools (también jQuery en el futuro) Ninguno jQuery Mootools
Elementos a los que se aplica: Casillas de verificación, botones de radio y listas de selección Cajas de texto, listas de selección, botones de radio, casillas de verificación, areas de texto y botones Cajas de texto, listas de selección, botones de radio, casillas de verificación, areas de texto, botones y subida de archivos Cajas de texto, listas de selección, botones de radio, casillas de verificación y botones Botones de radio y casillas de verificación
Capturas de pantalla: Ryanfait Sexy Forms Niceforms jQuery Nice Form FancyForm
Página oficial: Ryanfait.com Sexy Forms Niceforms
jQuery Nice Form FancyForm