I love this CSS3

Merhaba arkadaşlar bu sefer biraz css3 ile ilgili gördüğüm javascript ile güzelce harmanlanmış dinamik bir uygulamanın sadece css3 kısmını baz alarak sizlere bir örnek hazırladım css3 javascript jquery ve html5 bunlar bizim artık yeni gözdelerimiz olduğuna göre es geçmemek gerek artık 🙂

style.css dosyamız

/* css sıfırlama */
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, font, 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 {
   margin: 0;
   padding: 0;
   border: 0;
   outline: 0;
   vertical-align: baseline;
}

body{
	background-color:#909090;
}

/* gradient radial modunda background oluşturup genişlik ve yüksekliğini ayarlıyoruz */
.radial{
	background:-webkit-gradient(radial, center center, 0, center center, 500, from(transparent), to(rgba(0, 0, 0, 1)));
	background:-moz-radial-gradient(center 45deg, circle closest-side, transparent 0, black 500px);
	background:-o-radial-gradient(center 45deg, circle closest-side, transparent 0, black 500px);
	width:100%;
	height:100%;
        position:fixed;
}	

/* yazılarımızın geldiği alan box-shdow ile gölgelendirme yaparak ve positiona absolute değerini verip gradientimizin arka planı haline getiriyoruz */
.yazi{
	box-shadow:0px -10px 60px #000000;
	-webkit-box-shadow:0px -10px 60px #000000;
	-o-box-shadow:0px 10px 60px #000000;
	-moz-box-shadow:0px 10px 60px #000000;
	width:100%;
	height:395px;
	position:absolute;
	margin:300px 0 0 0;
}

/* burda ise yazılarımızın font ayarlarını vererek yazılarımızada hoş duracak şekilde ınner shadow uyguluyoruz */
.yazi a,p{
	font:17px tahoma;
	font-weight:bold;
	text-shadow:1px 1px #898989;
	cursor:default;
	color:#222;
	margin:50px 0 0 0; 
	line-height:2;
}

/* başlık alanının arka planı ve text ayarları */
.baslik{
	width:100%;
	margin:230px 0 0 0;
	position:absolute;
	font:70px tahoma;
	font-weight:bold;
	text-shadow:10px -15px 30px #000000;
}

.baslik a{
	text-decoration:none; color:#696969;
}

style.css dosyamıza gerekli kodlarımızı yazdıktan sonra bunları index.html sayfamızda çalıştıralım 🙂

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bulutüzer</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="radial">
<div class="yazi">
<center>
<p>Bu Paylaşımımda Elimden Geldiğince CSS3'ün Nimetlerinden :)<br/>Bize Sunduğu Güzellikleri Nasıl Kullanacağımızdan ve<br/> Bizlere Ne Tür Kolaylıklar Sağlayacağından
Bahsettim<br/>Umarım Faydalı Olmuştur.<a href="http://bulutuzer.com/i-love-this-css3/">Bulut Üzer.</a></p>
</center>
</div>
<div class="baslik">
<center>
<a href="http://bulutuzer.com/">
BULUTÜZER.COM
</a>
</center>
</div>
</div>
</body>
</html>

örneğin demo linki DEMO  burda arkadaşlar gerekli açıklamalar kodlar içerisinde mevcut zaten basit bir yapı takıldığınız kısımlarda belirtiniz

Yayınlayan

Bulut Üzer

Web ortamında gelişmesine yardımcı olan Yusuf Doru sayesinde şuan web developer olarak ilerlemekte.Web ve mobil ortamlarda uygulama geliştirmeye çalışmak da.Ayrı yeten de kişisel blogunda web ve php ile ilgili çalışmalarını ve deneyimlerini paylaşmayı hedeflemekte.

“I love this CSS3” üzerine 2 yorum

  1. Eline sağlık çok güzel olmuş sanada bu yakışır 🙂 cumartesi gittiğimizdede bir kaç birşey gösterirler dimi js ile ilgili ? 🙂

Bir Cevap Yazın

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