CSS

CSS ve CSS3 Temel Dersleri İle CSS Kodlarının Ne İşe Yaradığını Ve Nasıl Kullanıldığının Temel Mantığını Öğreneceğiz.

CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım. Hemen örneğimize geçerek uygulamalı şekilde box-shadow özelliğimizi inceleyelim. Basit bir gölge vermek için box-shadow özelliğine yatay gölge(10px) ve dikey gölge(10px) boyutu belirterek verebiliriz. .golgelendirme{ box-shadow: 10px 10px; } Oluşturduğumuz gölgeye renk verebiliriz. .renklendirme{ box-shadow: 10px 10px green; } …

Daha fazla oku & raquo;

CSS3 Dersleri 3 text-shadow Yazıları Gölgelendirme

CSS3 ile birlikte gelen text-shadow özelliği ile yazılara gölgelendirme verebiliyoruz. Hemen örneğimize geçerek uygulamalı şekilde text-shadow özelliğimizi inceleyelim. Basit bir gölge vermek için text-shadow özelliğine yatay (2px) ve dikey (3px) boyutu belirterek verebiliriz. .golgelendirme{ text-shadow: 2px 3px; } Oluşturduğumuz gölgeli yazılara renk verebiliriz. .renklendirme{ text-shadow: 2px 3px red; } Oluşturduğumuz ve renk verdiğimiz …

Daha fazla oku & raquo;

CSS3 Dersleri 2 border-radius Kenar Yuvarlama

CSS3 ile birlikte gelen border-radius özelliğimiz, HTML etiketlerinin kenarlarını yuvarlamak, oval yapmak için kullanılır. Web tasarımda artık bu özellik sıklıkla kullanılıyor, Daha önceleri bu özelliği javascript kütüphanesi ve eklentileriyle kenar yuvarlama işlemleri yapılıyordu.  Artık CSS3 ile gelen border-radius özelliğini kullanmamız yeterli oluyor. Hemen örneğimize geçerek uygulamalı şekilde border-radius özelliğimizi inceleyelim. CSS3 …

Daha fazla oku & raquo;

CSS3 Nedir? CSS3 İle Gelen Yenilikler Nelerdir?

CSS3 Görseli

Öncelikle CSS neydi onu hatırlayalım; CSS, HTML Kodlarımızdaki metin ve format etiketlerimize görsellikte zenginlik katmamızı olanak sağlayan web teknolojisidir. CSS3 Yeni bir teknolojimidir? CSS3 daha önceki sürümleri üzerine geliştirilmiş üçüncü sürümüdür. CSS3 Nasıl Kullanılır? CSS3 kodları CSS de olduğu gibi HTML kodlarının içine de yazılabilir veya ayrı bir CSS dosyası …

Daha fazla oku & raquo;

CSS İle Açılır Menü Yapımı (12. Ders Açılır Menü)

html menü

Css ile açılır menü yapımını adım adım resimli bir şekilde nasıl yapıldığını anlatmaya çalışacağım olayın  mantığını anladıktan sonra istediğiniz gibi çeşitli tasarımlar yapabilirsiniz. Öncelikle örnek sayfamız aşağıdaki örnekteki gibi olacaktır.   <div class="menu"> <ul> <li><a href="#">Menü Başlığı 1</a></li> <li><a href="#">Menü Başlığı 2</a> <ul> <li><a href="#">Alt Menü Başlığı 1</a></li> <li><a href="#">Alt Menü …

Daha fazla oku & raquo;

CSS İle Pozisyon Konumlandırma (11. Ders Position Fixed Kullanımı)

Position Fixed Kullanımı

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız. Position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız. Position: Fixed; Kullanımı Position:Fixed; özelliğimiz ise diğerlerinden farklı olarak alanımıza bağımlılık kazandırır. Şöyle ki: Position: …

Daha fazla oku & raquo;

CSS İle Pozisyon Konumlandırma (10. Ders Position Absolute Kullanımı)

Position Absolute Kullanımı

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız. Position: Absolute; Kullanımı Position:Absolute; özelliği Relative özelliği gibi kullanıldığında alanlar için bağımsızlık özelliği verir, ancak absolute …

Daha fazla oku & raquo;

CSS İle Pozisyon Konumlandırma (9. Ders Position Relative Kullanımı)

position relative kullanımı

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız. Position: Relative; Kullanımı Position:Relative; özelliğini kullandığımız alanlara bağımsızlık özelliğini vermiş oluyoruz örnekte de göreceğiniz gibi …

Daha fazla oku & raquo;

CSS İle Menü Yapımı (7. Ders Css İle Yatay Menü)

yatay menü

Css ile Sayfamıza menü yapımının mantığını kısaca öğrenelim. Bu dersimizde basit bir menü yapımını öğreneceğiz, çünkü işin temel mantığını öğrenmeniz çok önemli. İlerleyen derslerimizde daha kapsamlı açılır efektli menüler yapımını elimden geldiğince öğretmeye çalışacağım. CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma) Dersimizde ki Sayfa Şablonumuza basit bir menü yapalım …

Daha fazla oku & raquo;

CSS İle Pozisyon Konumlandırma (8. Ders Position:Static; ve Float: Left; Kullanımı)

static

Css ile alanlarımızda düzenlemeler yaparken position özelliğini kullanırız position özelliğinin 4 farklı değeri vardır; Static, Relative, Absolute, Fixed değerlerini alarak çeşitli konumlamalar elde edebiliriz. Position Kullanımı iyi kavrayabilmeniz için 4 ayrı ders halinde anlatmaya çalışacağız. Position: Static; Kullanımı Eğer alanlarımıza herhangi bir position değeri belirtilmemiş veya float özelliği verilmemiş ise alanlarımız position static özelliğini varsayılan olarak okur ve …

Daha fazla oku & raquo;

CSS Resim Ekleme Ve Düzenleme (6. Ders Css İle Resimleri Düzenleme)

türk bayrağı

Css ile sayfamıza resimler ekleyerek ve düzenlemeler yaparak çeşitli görsel tasarımlar yaparız. Css ile resim eklemek için background-image: url(“resimler/resimadı.jpg“) ; kodunu ekleyerek sayfamıza resmimizi tanıtabiliriz. Ancak resimlerin boyutları veya tarayıcı farklılıklarından oluşacak hatalardan dolayı birkaç tanımlama ve özellikler vermemiz gerekir. Hemen örneğimize geçerek genel çalışma alanımızı yani body alanımıza birkaç kodla …

Daha fazla oku & raquo;

CSS Font Özellikleri (5. Ders Yazı Metinlerini Düzenleme)

css yazı özellikleri

Sayfanızda oluşturmuş olduğunuz içerik alanlarında ki yazılarınızı bir kaç ufak değişiklikle daha görsel hale getirebilirsiniz. Bu dersimizde en çok kullanılan font özelliklerini örnekte anlatacağız ve örnekleme yapmadığım birçok özelliği de zamanla diğer deslerimiz de yapacağız ve hemen örnek yazı şablonumuza bakalım. body{ margin:0; padding:0;} Komutumuz ile alanımızın boşluklarını sıfırladık. İlerleyen …

Daha fazla oku & raquo;

CSS Genel Tasarım Yapısı (4. Ders Alan Oluşturma)

Css ile Sayfa İskeleti Oluşturma

Artık Css ile eğleneceğiniz, sinirleneceğiniz, olmuyor diye isyan edeceğiniz kısımlara başladık ama pratiğiniz arttıkça geriye dönüp baktığınızda, “ben bunda mı takıldım” diyeceğiniz dersler bundan sonra başlıyor. Html ve Css ile artık bir web sayfası iskeletini hazırlama zamanımız geldi. Bir web sayfası tasarımı yapmaya başlarken kafanızda nasıl bir site olmasını planlayın, …

Daha fazla oku & raquo;

CSS Alan Belirleme (3. Ders Etiket, İd, Class Alanları)

css alan belirleme

Css dosyamız üzerinde Html sayfamızdaki alanların seçicilerini belirlemek için 3 farklı yöntemimiz vardır. Html in bize sunmuş olduğu etiket isimlerini yazarak p, span, h1, h2 …. vb gibi hazır etiketlerin isimlerini kullanarak css de seçici alanına sade etiketi yazarak seçicisini belirleyebiliriz. h1 {  } Seçeceğimiz alana <h1 id=“buyukyazi”> gibi id değeri atayarak …

Daha fazla oku & raquo;