2. CSS: Bordes redondeados
Bores redondeados CSS
Continuando con mi aventura de intentar diseñar una web, me topé con la necesidad de utilizar los típicos "bordes redondeados" o "rounded borders" que desde la Web 2.0 se utilizan mucho. Y para los que se encuentren con la misma duda de cómo hacerlo, aquí os dejo un método muy fácil, solo hay que tener las 4 esquinas redondeadas y un punto del tamaño del grosor de las esquinas en formato de imagen.
Luego identificar cada esquina con algún nombre y utilizar el siguiente style:
<style>
.arriba {background: url(./punto.gif) 0 0 repeat-x; width: 15em}
.abajo {background: url(./punto.gif) 0 100% repeat-x}
.izquierda {background: url(./punto.gif) 0 0 repeat-y}
.derecha {background: url(./punto.gif) 100% 0 repeat-y}
.abajoizquierda {background: url(./abajoizquierda.gif) 0 100% no-repeat}
.abajoderecha {background: url(./abajoderecha.gif) 100% 100% no-repeat}
.arribaizquierda {background: url(./arribaizquierda.gif) 0 0 no-repeat}
.arribaderecha {background: url(./arribaderecha.gif) 100% 0 no-repeat; padding:10px}
</style>
Y luego en el div que le queremos dar este formato lo tendremos que hacer en el siguiente orden:
<div class="arriba"><div class="abajo"><div class="izquierda"><div class="derecha"><div class="abajoizquierda"><div class="abajoderecha"><div class="arribaizquierda"><div class="arribaderecha"> Esto es una prueba </div></div></div></div></div></div></div></div>
Aquí dejo un ejemplo donde se puede ver con mas facilidad.
<style> .arriba {background: url(./punto.gif) 0 0 repeat-x; width: 15em} .abajo {background: url(./punto.gif) 0 100% repeat-x} .izquierda {background: url(./punto.gif) 0 0 repeat-y} .derecha {background: url(./punto.gif) 100% 0 repeat-y} .abajoizquierda {background: url(./abajoizquierda.gif) 0 100% no-repeat} .abajoderecha {background: url(./abajoderecha.gif) 100% 100% no-repeat} .arribaizquierda {background: url(./arribaizquierda.gif) 0 0 no-repeat} .arribaderecha {background: url(./arribaderecha.gif) 100% 0 no-repeat; padding:10px} </style>
Muebles para ahorra espacio
El otro día navegando me encontré con la siguiente web y el siguiente vídeo en la que enseñan muebles que tiene por función ahorrar espacio y la verdad que me resulto muy interesante y por eso hoy le dedico una entrada. El vídeo en resumen es este:
Y si quieren mas información la web es la siguiente.
PD: El efecto de "Vuvuzela" en los videos de Youtube es bastante gracioso suena igual de agradable que en todos los partidos del mundial.
1. CSS: Cambiar tamaño fuente Verdana
Tengo un poco abandonado esto, pero intentar volver de a poco y cuando el tiempo me deje. El calor sinceramente no incita mucho a estar con el ordenador, por lo menos a mí.
Volviendo al tema.. el otro día intentando diseñarle una Web desde 0 a un conocido me di cuenta que la fuente que había elegido para tal "obra maestra" no le podía cambiar el tamaño de la fuente. En concreto la fuente era “Verdana”, Geneva, sans-serif según CSS y la mejor forma que encontré para cambiarla fue la siguiente:
#menu{
font-family: “Verdana”, Geneva, sans-serif;
font-size-adjust: 0.62;
}
Por lo visto el tamaño por defecto para esta fuente es 0.58 aquí dejo un tabla con algunas fuentes comunes y sus respectivos valores:
| Fuente | Valor |
| Bernhard Modern | 0.4 |
| Caflisch Script Web | 0.37 |
| Comic Sans MS | 0.54 |
| Flemish Script | 0.28 |
| Georgia | 0.5 |
| Gill Sans | 0.46 |
| Minion Web | 0.47 |
| Myriad Web | 0.48 |
| Times New Roman | 0.46 |
| Trebuchet MS | 0.53 |
| Verdana | 0.58 |
Feria Marbella 2010. Fuegos Artificiales.
Espectáculo pirotécnico organizado por el ayuntamiento de Marbella 2010 con motivo de la celebración del inicio de la feria de San Bernabé. Para todos aquellos que estuvieron fuera. Desde donde se lanzaron este año me pareció un sitio muy bueno y de paso aprovecharon la reforma hecha en el paseo marítimo. Espero que lo desfruten.