como se hace este efecto opacity

[vani18]

hola todo bien , quiero saber como se hace esta imagen






1. el fondo es una imagen...
2. el div medio amarillo tiene los bordes redondeados , se hace con css3.. creo
3- me interesa mucho los div. esos medio transparente. los que tienen texto blanco . como se hacen .
por que si tienen opacidad... yo intente hacerlo y el texto tambien se me hace opaco.como borroso. y no sale bien
.....

yo quiero que el div, se vea medio transparente....

bueno por el momento me interesa eso...

[C2am]

1- sí, es una imagen

2- sí la caja con bordes redondeados es posible hacerla con css3, y ya no necesita de prefijos:

Código CSS:

.borderedondos{border-radius:10px}
 

.
En cuanto a como se hizo en el ejemplo, usó imágenes para los bordes redondeados, lo cual ya no es necesario.
En cuanto al título CSSZENDGARDEN es una imagen usada como fondo en un <h1>, aunque se podría hacer con text-shadow, junto con font-face

3- prueba con rgba para el fondo: http://www.w3schools.com/cssref/tryi...css_color_rgba
En cuanto al ejemplo, también uso imágenes para lograr ese efecto, aunque usó jpg, yo hubiera usado un png con transparencias.

Supongo que la página es bastante viejita, digo, de hace 3 años por lo menos, ya que de no ser así, es bastante decepcionante que en csszendgarden, un icono del css, no se use css puro para estos efectos, más allá de la conveniencia y del soporte que le puedan dar los navegadores

Para ver el ejemplo que presenta vani18.

Saludos

[flashmax]

hola yo colocaría una imagen del color semi transparente png de 1x1 px como fondo del div para rellenarlo.

[pzin]

No sabía ni que ZenGarden seguía existiendo. Yo lo recordaba en blanco y negro.

flashmax, como ya dijo C2am ya no hace falta usar png's transparentes ni pirulas con opacity. Con RGBa hay soporte por parte de todos los navegadores —incluso IE9.

[kreil]

Se basa en diferentes capas para la opacidad.
Puedes usar opacity:0.7; por ejemplo para poner un nivel de opacidad a un div.

Los bordes redondeados se pueden hacer con border-radius:14px; por ejemplo.

[C2am]

Kreil, sí lees el post de vani18 dice:

por que si tienen opacidad... yo intente hacerlo y el texto tambien se me hace opaco.como borroso. y no sale bien

Que es el inconveniente de opacity, que actúa sobre el div y su contenido, de ahí las sugerencias de rgba y/o png.

Saludos