Basit mail gönderme butonu

Birçok  websitesinde mutlaka görmüşsünüzdür mailto yada iletişim gibi  linklere tıklandığında linke eklenmiş olan mail sayesinde bilgisayar posta kutusunun açılması gerektiğini  algılayıp masa üstü posta hizmetini devreye sokardı. Bu özelliğin hala kullanılıp kullanılmadığını bilmiyorum ve bilgisayarımda gereksiz  bir hizmet olduğu içinde kullanmıyorum. Böylece masaüstünde nasıl çalıştığını bilmiyorum desem yeridir.

Neyseki cep telefonu sayesinde  örneği denemek kısmet oldu. Dokunmatik cihazlarda  mektup resmine tıkladığınıza ceptelefonunuz ile tanımlanmış olan posta kutusu devreye giriyor. Windows bilgisayarlarda microsoft mail hizmeti devreye girerken android cihazlarda gmail devreye giriyor ve mailtodan sonra sayfada yaılmış olan mail adresi android cihazın posta hizmetinde alıcı olarak görünüyor.

Abdullah Helayel tarafından hazırlanmış olan bu Css3 demo örneğinde mektup sürekli küçülüp büyüyor. Küçülürken rengi koyu yeşi,büyüdüğünde ise açık yeşil oluyor.  Css3 demo örneğinde kullanılan resim Font Awesome ile eklendiğinden demoda herhangi bir resim dosyası bulamazsınız. Olurda resmi değiştirmek isterseniz buradan  Font Awesome ikonlarına göz atabilirsiniz.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Font Awesome adresi : 

<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

 Css : 

/*------------------------------------*
                $RESET
            v2.0 | 20110126
https://meyerweb.com/eric/tools/css/reset
*------------------------------------*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a{
	text-decoration: none;
}

/*------------------------------------*
				$STRUCTURE
*------------------------------------*/
body {
	background: #2C3E51;
	font-size: 256px;
}

main {
	position: fixed;
	top: 50%;
	left: 50%;
	margin-top: -140px;
	margin-left: -128px;
	font-size: 100%;
}

a {
	color: #009484;
	text-shadow: 0 6px 0 rgba(0,0,0,0.25);
}

a:active {
	color: #007B6B;
}

/*------------------------------------*
				$ANIMATION
*------------------------------------*/
.pulse {
	animation-name: pulse;
	-webkit-animation-name: pulse;	

	animation-duration: 1.5s;	
	-webkit-animation-duration: 1.5s;

	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.9);
		opacity: 0.7;		
	}
	50% {
		transform: scale(1);
		opacity: 1;	
	}	
	100% {
		transform: scale(0.9);
		opacity: 0.7;	
	}			
}

@-webkit-keyframes pulse {
	0% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;		
	}
	50% {
		-webkit-transform: scale(1);
		opacity: 1;	
	}	
	100% {
		-webkit-transform: scale(0.95);
		opacity: 0.7;	
	}			
}

•  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

  	<main class=pulse>
		<a href="mailto:[EMAIL ADRESINIZ]">
			<i class="icon-envelope"></i>
		</a>
	</main>