Blackinci » CSS » CSS3 Kutu Elementlerine Gölge Verme Box-shadow

Kayıt Ol Şifremi Unuttum?

CSS Hayat İşte Genel Photoshop MyBB Temalar Özgür Yazım

«    Mart 2010    »
PtSaÇrPrCuCtPz
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

MyBB için css ile al... Blackinci Seri 4 MyB... Blackinci Seri 5 MyB... MyBB Admin Paneli Te...

2. Versiyon Temasını Nasıl Buldunuz?
Mükemmel
Çok İyi
İyi
Eh İşte
Beğenmedim

admin paneli, ajax, background, css, CSS3, dle, F1, form, forum, giris paneli, gölge, gölgeli yazı, highslide, iphone, md, mybb, mybbdestek, novaboard, oval, Seri 5, seri2, tasarim, tema, transform, vbulletin, Yarış, özellik

Eylül 2010 (3)
Ağustos 2010 (1)
Haziran 2010 (1)
Mart 2010 (4)
Şubat 2010 (2)
Ocak 2010 (1)
Makale Detayları
blackinci
1 Mart 2010
CSS
Yazdır
1338 Kez Okunmuş
7 Yorum Yapılmış
 (Oy Sayısı: 8)

Etiketler
css, gölge

Benzer Konular

CSS3 Kutu Elementlerine Gölge Verme Box-shadow


CSS3 Kutu Elementlerine Gölge Verme Box-shadow


CSS Makalelerini çok boşladım biliyorum ama vaktim olsa durmadan yazarım heralde CSS3 ü popüler tarayıcılar bütün kodları olmasada kısmen bazı kodları artık destekliyorlar yada yada desteklemeye çalışıyorlar bugun kutu modellerine gölge nasıl verilir bunu görücez.

Öncelikle Bir div layer oluşturalım adınıda "golgeli-kutu" koyalım

<div class="golgeli-kutu">
merhaba gölgeli kutu
</div>


Kutumuzu oluşturduk geçelim css kısmına

box-shadow: #555 0px 0px 8px;  
-moz-box-shadow: #555 0px 0px 8px;  
-webkit-box-shadow: #555 0px 0px 8px;  


Bu şekilde gölgemizi verdik kodumuzun nasıl işlediğini görelim

box-shadow: #555 0px 0px 8px;
box-shadow: renk | sol sağ | Yukarı Alt | Gölge Derinliği;

peki ya neden 3 satırlık kod yazdık evet aslında ilk satırdaki kod bütün işimizi görüyor ama CSS3 ü tarayıcılar yeni desteklemeye başladığı için haliyle tarayıcılara özel olarak kod yazıyoruz tabi bunu özellikle kasıtlı olarakta yazabiliriz ama zamanla bize ilk satırdaki kod yeterli olacaktır

-moz-box-shadow Gecko ailesi için özel olarak yazılmış bir kod birliğidir

-webkit-box-shadow Webkit ailesi için özel olarak yazılmış bir kod birliğidir

Demo
box-shadow.rar [43.38 Kb] (İndirme: 97)
28 Mart 2010 19:33 7CraCkEr-16 demiş ki:
Teşekkürler
9 Mart 2010 13:24 6Palyaço demiş ki:
Tşekkür ederim Blackinci yeni temalarda kullanmayı düşünüyorum emeğine sağlık.
4 Mart 2010 23:34 5Abdurrahman Mert demiş ki:
ie amcam yine reddedmiş :)
2 Mart 2010 18:59 4blackinci demiş ki:
Ben teşekkür ederim nedemek
yazmamışmıyım ben z-indexi sanki yazdım gibi geliyor bana ama yanlışta hatırlıyor olabilirim
2 Mart 2010 17:37 3Nuh demiş ki:
Paylaşımlarınız Gerçekten Güzel Oluyor Ellerinize Sağlık
2 Mart 2010 11:39 2Doğuhan Fidan demiş ki:
Paylaştığınız bu güzel bilgi için teşekkür ederim. Tasarımlarımda artık bunu kullanacağım. Gerçekten göze hoş geliyor. Tekrardan teşekkür ederim.
2 Mart 2010 06:41 1SoniQuake demiş ki:
Anlatım için teşekkürler. Ben alternatif olarak Firefox'un yanında Opera da kullanıyorum. Opera, text-shadow özelliğini destekliyor ancak box-shadow özelliğini desteklemiyor sanırım henüz.

İlerleyen günlerde z-index anlatımı da yapabilir misin?

Sessiz Kalma Sende Yorum Yap

Son Yapılan 10 Yorum
  • Konu
  • Yazar
  • Yorum
  • MyBB Admin Paneli Teması Seri 2
  • sledgeab demiş ki 
  • Eline sağlık Davut Hocam,
  • MyBB Admin Paneli Teması Seri 2
  • bomfile demiş ki 
  • Teşekkürler Davut Hocam.
    Kullanacam bu temayı...
  • blackinci 1 (MD V3) MyBB 1.4 ve 1.2
  • blackinci demiş ki 
  • Kısa zamanda 1.6 güncellemesini yaparım
  • blackinci 1 (MD V3) MyBB 1.4 ve 1.2
  • demiş ki 
  • Arkadaşım. Tema hoş. Biz resim felan değiştirince güzel oluyor ama bir sorun var.
    1.6 versiyonu için de hazırlarmısınız ?
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Tekrar Çok Teşekkür Ediyorum... Başarılarının Devamı Dilerim Hayır Bayramlar...
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • SystemTR,
    Enine Demişsiniz ama resimde okla boyu işaretlemişsiniz ben resimdeki işaretli için anlatım yapayım
    ilk önce css kısmında stil-genel.css dosyasını açın
    .logo-sol ve .logo-sol .logo-orta a kısmında bulunan
    background: url(blackinci-5/logo-bg.png) top left repeat-x;
    üstteki kodu alttaki kalın ile belirlediğim şekilde düzenle
    background: #7abcff url(blackinci-5/logo-bg.png) bottom left repeat-x;

    .logo-orta a{ kısmında bulunan width: 55px; height: 121px; kısmına logo büyüklüğene göre ayarla fakat uzunluk diğer logo sol ve logo sağ ile orantılı olsun şimdiki gibi
    css kısmı bukadar gelelim şablondaki yere
    Header şablonundan logo-sol ve logo-sağ logo-orta a kısmındaki height="84" 84 olan kısmı yapmak istediğiniz uzunluğa gere düzeltirsin bu kısım logo ile aynı orantıda olmasına dikkat et
    bundan sonra grafik olarak yeni logonuzun uzunluğunuda ayarlayınca istediğin görünümü elde etmiş olursun
    kolay gelsin
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Enine büyütmek istiyorum hocam bu resimdeki gibi "http://www.system-tr.com/123.jpg"
  • Blackinci Seri 5 MyBB teması
  • blackinci demiş ki 
  • ÖMER,
    Bilemiyorum bu soruyu MTR ye sormanız gerekir
    Ama kendi acımdan MTR ye bir kinim yok kızgınlığım yok küs veya dargın değilim sadece biraz kırgınım oda çok önceleri temamı kopyalayıp dağıtmışlardı ve birleşme veya barışma gibi birşeyler olmuştu siteler arası ozamanlar ozan arkadaşımız bunun MTR tarafından yapıldığını söylemişti sadece bukadar ama bunuda unuttum gitti.
    Belki hani çok eskiden MD de yönetici idim belki bundandır bilemiyorum ama benim MTR kurucularından yada yöneticilerinden böyle bir talebim olmadı kesinlikle
    sonuç olarak temalarımı yayınlayıp yayınlamamaları sorun değil onlarda MyBB için birşeyler yapıyor ve katıyorlar canları sağolsun benim açımdan sorun yok.

    SystemTR,
    Teşekkür ederim genişleyebilir ama enine mi yoksa boyuna mı ?
    genişletmek istiyorsunuz önce onu bilmem gerekir
  • Blackinci Seri 5 MyBB teması
  • demiş ki 
  • Merhaba,

    Öncelikle Tema İçin Teşekkür Ediyorum Gerçekten Çok Güzel.
    Bende Kullanmaktayım Ama Bir Sıkıntım Var. İznin Olursa Dile Getiricem Logonun Olduğu Kısmı Genişletebiliyor muyuz ?

Yukarı İletişim RSS Takip İstatistikler Site İçeriği

Copyright © 2007 - 2010 DLE Blackinci Edition Seri 2