bildirgec.org

Hayatı kolaylaştıracak CSS tekniği nasıl mı olur? İşte cevabı… CSS3 birçok yeni nesil tarayıcıda desteklenmeden önce CSS ile yapmaya uğraştığımız birçok efekt vardı. Örneğin Yuvarlak Köşeler (rounded corners) yapmak için ekstra bir imaj ya da javascript dosyası kullanmak zorundaydık. Lakin CSS3 ile beraber ,bu çok kullanılan ama yapılması biraz külfetli olan efektler, rahatça yapılmaya başlanacak. Bu yazıda CS3 desteği ile gelen ve kod yazma süresini oldukça aza indirecek efektleri göreceğiz.

1. Yuvarlak Köşeler
jquery eklentisini kullanarak, yada top şeklindeki bir imaj dosyasını CSS Sprite tekniği ile bölerek yapabildiğimiz yuvarlak köşeleri artık kısa bir kod ile yapabileceğiz.

rounded corners

border-radius: 10px;-moz-border-radius: 10px;-webkit-border-radius: 10px;

2. Eleman Gölgesi
Türkçe mealini eleman gölgesi olarak telaffuz edebileceğimiz Box Shadow’u aslında jQuery‘nin dropShadow eklentisi ile kolayca yapmak mümkündü. Şimdi ise sadece 3 satırlık bir kod ile yeni nesil tarayıcılarda bu özelliği kullanmak mümkün.

Firefox 3.5 ile web geliştiricilerinin yüzü gülecek

Mozillatarafından geliştirilmekte olan Firefox 3.5 sürümü web geliştiricilerinin yüzünü güldürecek cinsten yenilikler ile gelmeye hazırlanıyor. Birçok gelişmekte olan web standartını destekleyecek biçimde piyasaya çıkacak olan Firefox 3.5, tasarımcıların hünerlerini sergileyebilmesi için birçok olanak sunacak.

Firefox 3.5 ile desteklenecek standartlar ve yapılacak yenilikler aşağıda listelendi.

HTML5 desteği
Daha önce yeni html5 tag’leri ve kullanım şekilleri yazısında belirtilen özelliklerin bir kısmı firefox 3.5 ile kullanılabilir olacak.

• Audio ve video tag’leri desteklenecek.
• Siteler arasında sürükle ve bırak (drag & drop) özelliği etkin olacak.

CSS cephesinde gelişmeler

• @font-face desteklenecek. Sitelerdeki font’lar ziyaretçilerin bilgisayarlarına indirilip siteler her font ile sorunsuzca görünebilecek.
• ::before ve ::after geliştirilecek
• media sorgulamaları geliştirilecek
• -moz-opacity desteği kalkacak. opacity özelliği eklenecek
• text-shadow ile yazıları gölgelendirme desteklenecek
• word-wrap özelliği eklenecek
• ziyaretçinin bilgisayarında tanımlanan link bilgilerine ulaşım için -moz-nativehyperlinktext desteği gelecek
• -moz-window-shadow desteği gelecek
• -moz-transform desteği gelecek

Spry Framework

Merhabalar,

Bir önceki yazımda Spry’ı kulanma nedenleri ile birlikte efektleri işlemiştik. Şimdi ise Spry ile ipucu (tip) oluşturmayı deniyeceğiz. Önce Spry’ı bu adrestenindirelim .
Sonra sayfamıza şu dosyaları dahil(include) edelim.

1
2

<script src="http://arsiv.pilli.com/http://arsiv.pilli.com/js/SpryTooltip.js" type="text/javascript"></script>
<link href="css/oylesinebircssadresi.css" rel="stylesheet" type="text/css" />

Şimdi tooltip için Javascript kodumuzu yazıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12

var sprytooltip1 = new Spry.Widget.Tooltip("cssip", "#css", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip2 = new Spry.Widget.Tooltip("htmlip", "#html", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip3 = new Spry.Widget.Tooltip("phpip", "#php", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });
var sprytooltip4 = new Spry.Widget.Tooltip("aspip", "#asp", {
										   closeOnTooltipLeave: true, hideDelay: 1000,  followMouse: true, useEffect:"fade", showDelay:100
										   });

Şimdi kodu inceliyelim. varsprytooltip1 ile ipucunu tanımlıyoruz. şimdi “cssip” olan tarafın nedemek olduğunu anlayalım. Mouse cssip idsine sahip olan yere geldinde tooltipi gösterecek. “css” ise açıklanacak olan ipucunun içeriği. Şimdi setuplara ({ } arasına) bakalım.

CSS, websitelerini stillemek için iyi bilinen ve geniş kesimler tarafından kullanılan bir dildir. Halen üzerinde çalışılan üçüncü sürümü ile geliştiricilere zaman kazandıracak pek çok özellik CSS’ye dahil edilecektir. Her ne kadar sadece en modern tarayıcılar tarafından bu özellikler desteklense de, yakında geniş kesimler tarafından kullanılabilecek olan bu yeniliklerin neler olduğunu şimdiden görmek güzel. Bu rehberde size CSS3 ile hayatımıza girecek olan 5 tekniği göstereceğim.

1: Genel Biçimlendirme

Dersimize başlamadan önce gelin dersimiz süresince kullanacağımız genel biçimlendirmemizi oluşturalım.

1. Dikey hizalama Div’i (Vertical align div)

Content

html, body {
height: 100%;
margin: 0;
padding: 0;
}

• {
  margin:0px auto;
  padding:0;
  }

div#shim {
visibility: hidden;
width: 100%;
height: 50%;
margin-top: -200px;
float: left;
}

div#wrapper {
width: 1000px;
height: 400px;
clear: both;
background:red;
position: relative;
top: -200px;
/* IE4ever Hack: Hide from IE4 **/
position: static;
/** end hack */

}

/* Hide from IE5mac *//*/
div#shim {
display: none;
}