catrin-adas.::. Creando Buenas Nuevas .::.

Me llamo la atención lo que encontré en una pagina de cursos para adquirir mas conocimientos y lo quisiera compartir con todos los lectores que están interesados o involucrados con el Software Libre (SL); Así es que escribo tal cual esta la nota:
e-Ghost, un grupo de alumnos de la Facultad de Ingeniería de la Universidad de Deusto, pondrán en marcha este verano cursos de introducción al software libre. En concreto, sobre el desarrollo de aplicaciones con Eclipse, XHTML y CSS para torpes (literal), introducción a PHP, Voz sobre IP y Asterik o introducción a GNU/Linux. Además, celebrarán charlas sobre seguridad en redes WiFi, Data Mining, actualidad de los lenguajes xbase o Webpreinscribirse. +INFO: www.e-ghost.deusto.es/cursillosjulio

Vía | Aprendemas

Otro grandioso efecto que me he preguntdo, como lograr que una imagen que tiene un enlace hacia otro sitio o artículo se muestre como en estado de off(mas opaca), y al pasar el Mouse se muestre el color original de la misma. Como el efecto que veras pasando el mouse sobre la imagen que se encuentra arriba:
Como logramos este efecto en las imágenes?
Simplemente copiamos este código en nuestra hoja de estilo (Style.css)

1. a.linkopacity img {
2. filter:alpha(opacity=50);
3. -moz-opacity: 0.5;
4. opacity: 0.5;}
5. a.linkopacity:hover img {
6. filter:alpha(opacity=100);
7. -moz-opacity: 1.0;
8. opacity: 1.0;
9. }

y cada vez que queramos darle este efecto a una imagen agregamos la clase “linkopacity” ejemplo:

1. class=”linkopacity” href=”http://catrin-adas.blogspot.com/”> img src=”direccion de la imagen.png” style=”border:1px solid black;”>

Lograremos el efecto de la imagen de arriba.^_^

Nota: no olviden Poner el signo de menor que “<" al antes de la "a" y antes de IMG; yo no los puse porque blogger no es apto para poner etiquetas de CODIGO y si lo pongo correctamente muestra la imagen.!

Via | Xyberneticos

Aqui puedes añadir una pequeña referencia de la foto

Hola que tal, pues adentrandome un poco mas al diseño he estado llegando a conocer un poco acerca de CSS y pues tambien he estado jugando un poco con el para aprender algo y compartirlo con los Catrines.
Tengo que reconocer que con css se pueden llegar a lograr cantidad de cosas(inimaginables). Y cada una de ellas útiles para algo que deseemos hacer en un determinado momento. En este caso veremos como con css se logra mostrar una imagen miniatura (thumbnails) pero que al pasar el mouse sobre ella nos mostrara el tamaño original de la imagen, logrando con esto, el efecto popup. Este efecto puede ser tan simple pero ORIGINAL.
Comencemos, solo pasa el Mouse sobre la foto el post, y veras como muestra el tamaño original, con una pequeña descripción de la foto.
Lo primero que hacemos para lograr esto es introducir este código en nuestra hoja de estilo.

PLAIN TEXT
CSS:

1. .thumbnail{
2. position: relative;
3. z-index: 0;
4. }
5. .thumbnail:hover{
6. background-color: transparent;
7. z-index: 50;
8. }
9. .thumbnail span{ /*CSS for enlarged image*/
10. position: absolute;
11. background-color: lightyellow;
12. padding: 5px;
13. left: -1000px;
14. border: 1px dashed gray;
15. visibility: hidden;
16. color: black;
17. text-decoration: none;
18. }
19. .thumbnail span img{ /*CSS for enlarged image*/
20. border-width: 0;
21. padding: 2px;
22. }
23. .thumbnail:hover span{ /*CSS for enlarged image on hover*/
24. visibility: visible;
25. top: 0;
26. left: 60px; /*position where enlarged image should offset horizontally */
28. }

HTML:

Agregamos la direccion de la imagen que tendra el efecto y le agregamos la CLASE (class=”thumbnail”) y obtendremos ese grandioso efecto