Recursos para crear bordes redondeados

ByLuis March 30, 2006

Para aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.

Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.

Otra opción, quizá más sencilla y que nos gusta especialmente, es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.

Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.

Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.

Apache | Grafismo | How to | PHP

Ponle copyright a tus imágenes mediante PHP

ByLuis April 4, 2006

Muchas veces queremos que las personas se descarguen las imágenes que tenemos en nuestras páginas web, pero también queremos que quede bien claro quién es el autor. Para ello podemos editar todas las imágenes que tengamos, o bien que el propio entorno se encargue de poner el copyright por nosotros.

El método es sencillo, modificamos las opciones del Apache para que cuando se acceda a una imagen, lo redireccionemos a un script que se encargará de escribir el texto que queramos.

Grafismo

Color toy: generador de esquemas de color

ByLuis October 19, 2006

Ya hemos hablado en otras ocasiones de aplicaciones que nos ayudan a generar esquemas de colores. Ayer mismo yo necesitaba una, pero por problemas de conexiÃ³n durante todo el dÃa no pude acceder a ninguna para que me ayudara.

Â¿QuÃ© tiene de especial Color Toy?, su sencillez, no tiene rueda de colores, ni puedes elegir si quieres colores anÃ¡logos o en contraste. Simplemente introduces un color y te da un esquema de colores, rÃ¡pido y sencillo.
Color Toy
VÃa / Infected-FX

Javascript | XHTML

fleXcroll: scroll bars personalizados para tu web

ByLuis July 27, 2006

LibrerÃa que nos permite usar scrolls personalizados en nuestras pÃ¡ginas web, ya sean verticales u horizontales. Aunque hay que intentar que no aparezcan en nuestra pÃ¡gina, en caso de que sea necesario, porque los hay que son totalmente necesarios, quizÃ¡s se puedan personalizar con este script.

Por lo poco que he visto del cÃ³digo (que no estÃ¡ fÃ¡cil de seguir porque estÃ¡ ofuscado), veo que fija el tamaÃ±o de la capa y con la propiedad overflow muestra los scrolls. Dibuja los scrolls personalizados encima y mediante ellos realiza el scroll de la capa, usando scrollTop y scrollLeft (que creo que antes no funcionaba del todo bien en Opera 8 y en la versiÃ³n 9 lo han solucionado). Algo que yo no solÃa hacer y que he visto como lo hace aquÃ, es capturar el evento selectstart y hacer que devuelva false, para que cuando se haga el drag del scroll no se seleccione la imagen que usamos para personalizar el control.
FleXcroll, Flexible and Accessible Custom Scroll Bars
VÃa / aNieto2K

css | Quicklinks

Transparent Borders with background-clip

ByLuis September 17, 2010

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat. You might think it would be as simple as this:#lightbox { background: white; border: 20px solid rgba(0,0,0,0.3); }Howe …

Post original

css | Curiosidades

Recursos CSS para principiantes

ByLuis July 3, 2006

No todo el mundo conoce las hojas de estilo, incluso gente que trabaja a diario con ellas, suele pasarles que solo saben cambiar lo que necesitan y poco mÃ¡s. Para aquellos que se encuentran en esas circustancias o simplemente son unos vagos, aquÃ tres recursos para ayudarnos a crear tablas, definir el formato del texto y seleccionar colores.

La primera de las utilidades nos permite darle estilos a una tabla, pudiendo jugar con los colores, grosores y demÃ¡s de las tablas, filas y celdas.
La siguiente utilidad nos ayuda con el texto: la fuente, negrita, itÃ¡lica, tamaÃ±o, separaciÃ³n de letras, alineamiento, …
Y por Ãºltimo una lista de colores y su correspondencia RGB.

TambiÃ©n es curiosa la utilidad para crearnos nuestro favicon, aunque supongo que la gente que llega a este nivel, quizÃ¡s si sepa usar un editor grÃ¡fico.

Web development

VÃa / dzone

XHTML

Opciones de una SELECT agrupadas

ByLuis November 20, 2006

Algo que no mucha gente suele conocer es que en una select de un HTML se pueden agrupar opciones. Algunos pensarÃ¡n que esto es una tonterÃa y que es imposible no saberlo, pero conozco bastantes casos de gente que usa selects y que no se fija en toda su especificaciÃ³n, lo cual no me extraÃ±a, porque yo jamÃ¡s he tenido que crear una select agrupada, y supongo que es porque la “opciÃ³n” que agrupa no es seleccionable.

Para agrupar opciones se necesita la etiqueta optgroup, la cual encerrarÃ¡ las opciones que pertenecen al mismo grupo, y dispondrÃ¡ de un atributo label que serÃ¡ el texto que aparecerÃ¡ agrupando las opciones.

<select name="prueba">
<option value="1">OpciÃ³n 1</option>
<optgroup label="OpciÃ³n 2">
<option value="2.1">OpciÃ³n 2.1</option>
<option value="2.2">OpciÃ³n 2.2</option>
<option value="2.3">OpciÃ³n 2.3</option>
</optgroup>
<option value="3">OpciÃ³n 3</option>
<optgroup label="OpciÃ³n 4">
<option value="4.1">OpciÃ³n 2.1</option>
<option value="4.2">OpciÃ³n 4.2</option>
</optgroup>
</select>

A la hora de modificar los estilos de optgroup, hay que tener cuidado que algunos los heredarÃ¡n las opciones que contenga, por ejemplo el color de la letra.

Ejemplo

Similar Posts