mail
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
http://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>

Bu Yazıyı Paylaş

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ÜYE GİRİŞİ

Arkadaş ekleme, özel mesaj, kişisel yazı paylaşmak için siteye giriş yapın

Şifremi unuttum? Kayıt Ol!
  • Ali:

    Pardon Yuyyu olacaktı...

  • Ali:

    Tamam yuyu da olsun :)...

  • Arkadaşlık Uygulaması:

    Yuyyu Online Arkadaşlık Sitesi – Sohbet Et ve Yeni İnsanlarla Tanış Yuy...

  • Ali:

    Üşenmeden web arşivi linkini arayıp bulmuşsun teşekkürler :)...

  • ibrahim:

    türkiyeden de bırakan olmuş oyunu. dünya geneli de bırakan epey olmuş. wi...

  • Araç çubuğuna atla