Efecte CSS3 pe imagini


Am fost incitat de articolul CSS3 Image Styles de pe WebDesignerWall.com (pasionaţii de subiect sigur îl cunosc) şi m-am gândit să şi testez cât de uşoare sunt efectele prezentate acolo. Pagina lor de demonstraţie se găseşte aici (trebuie văzută!!!), dar teoretic şi la sfârşitul acestui articol, printr-un iframe, ar trebui să vedeţi un demo propriu (dacă îl vreţi în pagină nouă mergeţi aici). Adevărul e că… foarte greu mi-a ieşit. Sau foarte uşor. În prima etapă totul a mers brici până la testarea în navigatoare diferite. Şi totuşi exemplul original mergea şi în IE, al meu nu… După multe ore nu am găsit o explicaţie ci doar problema: referirea imaginilor. Când am folosit imaginile din alt director decât cel cu pagina HTML de referinţă a mers. Subliniez: mă depăşeşte problema, nu pot explica, dar cum necum a mers. Evident, în Chrome sau Firefox nu sunt probleme deloc, oriunde ar fi imaginea. Dar aşa măcar merge şi în IE (ultim).

Bun. Am să pun în continuare codul meu, simplificat, dar nu uitaţi de articolul original cu mai multe şi interesante efecte. După cum puteţi observa în cod, marea şmecherie pentru a aplica efecte CSS3 pe imagini este să fie folosite ca… fundal. Cu jQuery e mai simplu fără să afectăm un eventual cod HTML existent, unde imaginile sunt puse, normal, ca imagini.

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("img").load(function() {
		$(this).wrap(function(){
			return '<span class="image-wrap ' + $(this).attr('class') + '" style="position:relative; display:inline-block; background:url(' + $(this).attr('src') + ') no-repeat center center; width: ' + $(this).width() + 'px; height: ' + $(this).height() + 'px;" />';
		});
		$(this).css("opacity","0");
	});
});
</script>
<style>
body{
	margin: 20px;
}
.image-wrap {
	margin-right: 10px;
}
.box {
	margin: 0 0 50px;
}
.circle .image-wrap {
	-webkit-border-radius: 50em;
	-moz-border-radius: 50em;
	border-radius: 50em;
	-webkit-transition: .5s;
	-moz-transition: .5s;
	transition: .5s;
}
.circle .image-wrap:hover {
	position: relative;
	top: -8px;
}

.reflection .image-wrap {
	-webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
	-moz-box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
	box-shadow: inset 0 0 1px rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.5);
	-webkit-transition: .5s;
	-moz-transition: .5s;
	transition: .5s;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.reflection .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 30px;
	bottom: -31px;
	left: 0;
	-webkit-border-top-left-radius: 20px;
	-webkit-border-top-right-radius: 20px;
	-moz-border-radius-topleft: 20px;
	-moz-border-radius-topright: 20px;
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
	background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0)));
	background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%);
}
.reflection .image-wrap:hover {
	position: relative;
	top: -8px;
}

.morphing-tinting .image-wrap {
	position: relative;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}
.morphing-tinting .image-wrap:hover {
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
	position: relative;
	top: -8px;
}
.morphing-tinting .image-wrap:after {
	position: absolute;
	content: ' ';
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	border-radius: 30em;
}
.morphing-tinting .image-wrap:hover:after  {
	background: -webkit-gradient(radial, 50% 50%, 30, 50% 50%, 100, from(rgba(171,191,212,0)), to(rgba(101,143,185,1)));
	background: -moz-radial-gradient(50% 50%, circle, rgba(171,191,212,0) 30px, rgba(101,143,185,1) 100px);
}
</style>
</head>
<body>
<span class="box reflection"><img src="http://www.cnet.ro/wp-content/uploads/tutoriale/diverse/decupare/monster.jpg"></span>
<span class="box circle"><img src="http://www.cnet.ro/wp-content/uploads/tutoriale/diverse/decupare/monster.jpg"></span>
<span class="box morphing-tinting"><img src="http://www.cnet.ro/wp-content/uploads/tutoriale/diverse/decupare/monster.jpg"></span>
</body>
</html>

Şi acum demonstraţia:


Apreciază articolul:

1 stea2 stea3 stea4 stea5 stea (6 evaluări, media: 4,67 din 5)
Loading...Loading...

2 comentarii

  1. Cosmin spune:

    Wow, chiar nu am vazut astfel de eye-candy implementat pe vreun site pana acum. Unul static cu o umbra si care ii conferea pozei un colt ridicat e singurul exemplu pe care l-am retinut.

    Intr-un site pe wordpress cum ar trebui sa organizez codul de mai sus?
    Adica in ce fisiere ar intra elementele de referire din script type=”text/javascript” src…… si restul care si-ar avea locul in style.css banuiesc.

  2. radu.capan spune:

    Nu am încercat integrarea în WordPress. În principiu ce e CSS într-un fişier CSS separat sau în cel al temei, ce e JavaScript în header.php al temei cu consideraţiile de rigoare privind WordPress+jQuery.

    http://www.cnet.ro/2008/08/04/wordpress-si-librariile-javascript/


Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile necesare sunt marcate *