Css Font Özellikleri

Egemen Özbeyli 1 Yorum CSS3

Merhaba arkadaşlar,

Uzun zamandır işlerimin yoğunluğundan dolayı yapamadığım paylaşımlarıma somut olarak işlemler yapabileceğiniz ve web sayfalarının en önemli kısımlarından biri olan font ve özellikleriyle devam edeceğim.Bu paylaşımda css ile fontları nasıl ve ne şekillerde değiştirebiliriz onu öğreneceğiz.

İlk olarak Css’de font için kullanabileceğiniz özellikler aşağıdaki gibidir,

i . Color
ii . Font Family
iii . Font Size
iv . Font Weight
v . Font Style
vi . Font Variant
vii . Font

Şimdi adım adım yukarıdaki değelerin nasıl uygulanacağına geçebiliriz.

1 – Color :

Bu özellik sayesinde web sayfalarında yazılarımıza istediğimiz rengi tanımlayabiliriz.Örnekle açıklayacak olursak aşağıdaki satırlar net bir uygulama olacaktır.


p.header { color:#FF0000;} // Bu şekilde header bölümünde yazılarımız kırmızı olarak yazacaktır.

2 – Font Family :

Metinlerde kullanacağımız font ailelerini belirlemek için kullanacağımız özelliktir,Kullanımı hakkında aşağıdaki örneğe bakabilirsiniz.


p{

color:#FF0000;

 font-family:"Times New Roman", Times, serif; } // Bu durumda yazdığımız yazılar kırmızı ve Times New Roman ailesiyle yazılacaktır.

3 – Font Size :

Bu özellik yazdığımız yazıların boyutlarını belirlemekte kullanacağımız özelliktir,Kullanımının farklı çeşitleri vardır,Bu farklı kullanımlar aşağıdaki örnekte (daha&helliip;)

Devamını Oku

Css Background (Arkaplan) Özellikleri

Egemen Özbeyli 3 Yorum CSS3

Merhaba arkadaşlar, bu makalemizi geliştirdik. İsterseniz yeni haline buradan erişebilirsiniz.

Css derslerimin bir diğer paylaşımında sizlere css background özelliği hakkında bilmeniz gereken kısımları ve bu özelliğin nasıl kullanıldığını örneklerle anlatacağım.Background’ın kullanım şekli ve özellikleri farklılık gösterdiğinden adım adım tüm özellikleri anlatmanın en doğru yol olacağını düşündüm ve anlatım sırası aşağıdaki gibi olacaktır.

i . Background-color

ii . Background-image

iii . Background-repeat

iv . Background-position

v . Background-attachment

Css ile background özelliklerine ilk madde olan background-color ile başlıyoruz.

background-color:

Bu özellik sayesinde belirlediğimiz elementlerimize arkaplan rengi atayabiliriz,örnek kullanım aşağıdaki gibidir.

body { background-color:#FF0000; } // Bu kod satırı sayfamızın arkaplan rengini kırmızı olarak belirleyecektir.

Burada renk seçimi farklı şekillerde (rgb,rgba) tanımlanabilir,bu renk seçimleri hakkında ayrıntılı bilgiye buradan ulaşabilirsiniz. (daha&helliip;)

Devamını Oku

Css Web Sayfalarına Nasıl Eklenir

Egemen Özbeyli 9 Yorum CSS3

Merhaba arkadaşlar,

Geçen hafta yaptığım paylaşımımda Css’e Başlamak ve Css’in yapısı adlı paylaşımımda Css’e giriş yapmıştık,bu hafta ise Css’i web sayfamıza nasıl ekleyeceğimizi anlattıktan sonra artık Css üzerine somut çalışmalar yapmaya başlayacağız.

Bu paylaşımı sakın göz ardı etmeyin,Çünkü bundan önceki hafta yaptığım css’in temel yapısı ve bugünkü paylaşımım css’i web sayfasına entegre adlı paylaşımlarım Css’in temelini oluşturmaktadır,Bu 2 anlatımı kavramadan css’in temelini kavrayamayız,Neyse konuyu fazla uzatmadan paylaşımıma geçiyim.

1 – Css’i Satır İçinde Tasarıma Eklemek

Css’i direk olarak kod satırlarımıza dahil edebiliriz fakat bu fazla tercih edilen bir yöntem değildir,fakat yinede bilmenizde fayda olucağını düşünüyorum.Bunun nasıl yapıldığını merak ederseniz aşağıdaki örnekten faydalabilirsiniz.


<p style="color:#FF0000; font-size:15px;">Buraya paragraf geliyor</p>

(daha&helliip;)

Devamını Oku

Css’e başlamak ve Css’in yapısı

Egemen Özbeyli 1 Yorum CSS3

Merhaba arkadaşlar,

Bundan önce yaptığım bu paylaşımda Css’e ufak bir giriş yapmıştım ve css’i adım adım öğreticeğimi söylemiştim.Bu rehber niteliğindeki paylaşım serime bugün itibariyle başlamış bulunmaktayım.Amacım adım adım css bilgilerini sizlere sunmak ve öğrenmek isteyenler için ayrıntılı ve örneklerle süslenmiş paylaşımlar yaparak faydalı olmak isteğimdir.

Bu yazımda css’in genel yapısı,bize sağladığı kolaylıklar ve kullanımı hakkında faydalı bilgiler verip,bundan sonraki paylaşımlar için bir bilgi birikimi , temel oluşturmak istiyorum.

* Css’e Başlamak

CSS ( Cascading Style Sheets ) : Bir web sitesinin içeriğini ve tasarımını ayırmak için geliştirilen bir sistemdir.
Html dilinde görsellerin özelleştirilmesi için geliştirilen taglarla birlikte büyük tasarımcılar için zorluk oranı çok arttı çünkü çok sayıda sayfanın bulunduğu bir websitesinde her sayfadaki başlığı aynı ölçüde düzenlemek için her sayfaya ayrı ayrı tag tanımlaması yapmamız gerekiyordu ve bu bize iş yükü ve zaman kaybı olarak geri dönüyordu ve bu sorunun çözümü için the World Wide Web Consortium (W3C) tarafından CSS geliştirildi ve kaybedilen zaman kazanılmakla beraber ,iş yükümüz neredeyse dibe çekilmiş oldu.

* Css’in Yapısı

Css’in genel yapısına göz attığımızda iki ana bölümden oluştuğunu görebiliriz.

(daha&helliip;)

Devamını Oku

Photoshop Colorburned Efekti Uygulaması

Egemen Özbeyli 26 Yorum Efektler, Fotoğraf Efektleri, Photoshop Dersleri

Merhaba arkadaşlar,

Bu hafta ne tür bir paylaşım yapacağım konusunda çok kararsız kaldım ve evde uzun zaman geçiremediğim için düşünmek için fazla zamanda bulamadım,fakat bu sabah bir photoshop efektine rastladım ki,çok hoşuma gitti ve bu efektin yapılışını photoshopta deniye deniye hazır hale getirdim.Şimdi sırada ise bu uygulamayı ve nasıl yapıldığını sizlerle paylaşmak var. (daha&helliip;)

Devamını Oku

CSS ile Formlarımızı Renklendirelim

Egemen Özbeyli 8 Yorum CSS3

Merhaba arkadaşlar,

Bu paylaşımımda sizlere form elementlerimizi css ile nasıl renklendirip,kullanıcıların ilgilerini çekebilecek bir hale getireceğimizi anlatacağım.Eğer tasarım sitelerini takip ediyorsanız bu konuyla ilgili açılmış bir çok paylaşıma rastalayabilirsiniz,Özellikle dünyadan seçme olarak listelenmiş iletişim formları son zamanlarda çok ilgi görmekte.Ben bu paylaşımımda sizlere form elementlerini renklendirmek için temel bilgileri vereceğim,tabi ondan sonra farklılıklar yaratmak sizin yaratıcılığınıza kalmış.Lafı fazla uzatmadan paylaşıma geçelim,

1 – İlk olarak aşağıdaki kodlarla temel form elementlerimizi oluşturalım.


<form action="" method="get">
 <p>
 <label>Adınız<br />
 <input type="text" name="name" id="name" />
 </label>
 </p>
 <p>
 <label>Email Adresiniz<br />
 <input type="text" name="email" id="email" />
 </label>
 </p>
 <p>
 <label>Web Siteniz<br />
 <input type="text" name="website" id="website" />
 </label>
 </p>
 <p>
 <label>Yorum Yap<br />
 <textarea name="message" id="message" cols="45" rows="5"></textarea>
 </label>
 </p>
 </form>

(daha&helliip;)

Devamını Oku

Mini Sosyal Medya İkon Seti – Komodo Media

Egemen Özbeyli Yorum yazın Diğer Konular & İpuçları, Kaynaklar

Merhaba arkadaşlar,

Bu paylaşımımda özellikle webmasterların çok işine yarayacak güzel ve kaliteli bir ikon paketi paylaşmak istiyorum.Komodo Media tarafından hazırlanan bu ikon paketi tasarımcılar tarafından çok beğendildiği ve kullanıldığı için bilmeyen arkadaşlarada duyurmak istedim.

Koyu ve açık arkaplanda kullanıldığında nasıl göründüğünü merak eden arkadaşlar için görseli 2 arkaplan içinde ekledim.

Social Media Mini Icon Pack >> download

Devamını Oku

Photoshop ile Web Ribbon Yapımı

Egemen Özbeyli 7 Yorum Efektler, Fotoğraf Efektleri, Photoshop Dersleri, Yazı Efektleri

Merhaba arkadaşlar

Bu paylaşımımda uzun zamandır paylaşamadığım Photoshop derslerinden birini paylaşacağım. Dün attığım bir tweet’te bu paylaşımın sonucunda ulaşacağımız örneği tweetlemiştim. Beğendildiği için dersi hemen paylaşmak istedim. Son zamanlarda birçok sitede rastlamışsınızdır bu tür çalışmalara. Bende hem beğenilmesinden hem de çok kullanılmasından dolayı şimdi en basit ve kısa yoldan sizlere bu çalışmayı nasıl yapacağımızı anlatıcağım. (daha&helliip;)

Devamını Oku

Tynt ile İçeriğinizi Belli Ölçüde Koruyabilirsiniz

Egemen Özbeyli 5 Yorum Eklentiler, Güvenlik, WordPress

Merhaba arkadaşlar

Bu paylaşımımda genel anlamda profosyonel blog yazarlarının amatör yazarlardan duyduğu rahatsızlığa ufakta olsa bir çözüm bulacağımızı düşünüyorum.Dediğim gibi bu çözüm amatör hırsızlara çözüm olur ama profosyonel olarak içerik hırsızlığı yapmak isteyenin önüne geçmek imkansızdır 🙂

Gelelim uygulamanın amacına ve nasıl kullanıldığına ;

Uygulamamızın adı Tynt ve amacı blogumuzdan direk kopyala/yapıştır mantığıyla alınan içeriğe gizli link ekleyerek backlink kazanmak ve kaynağı bir nevi yazımıza gömmek.Uygulamayla ilgili ayrıntılı bilgiye bu adresten ulaşabilir,uygulama için hazırlanan videoyu izleyebilirsiniz. (daha&helliip;)

Devamını Oku