13 Temmuz 2015
minimalcoding
1573 0

CSS3 Gradient Kullanımı Ve Özellikleri

CSS de arkaplan için tek bir renk veya gradient özelliğini kullanabilirsiniz. CSS3 ten itibaren kullanılmaya başlanan gradient özelliği resim kullanmak yerine ihtiyacınız olan alanda, geçişli renkler kullanmanıza olanak sağlar. (Renk geçişlerinde kullanımının yanı sıra farklı amaçlarla da kullanılabildiği için, renk geçişi olarak çevirmek doğru bir ifade olmayacaktır. )

Gradientler arkaplan resimleridir

Arkaplanda tek bir renk kullanmak istediğinizde background-color özelliğini kullanırken, gradientler için background-image özelliği kullanılır.

Devamı

Devamı
12 Temmuz 2015
minimalcoding
847 0

CSS :first-letter İle yazıların ilk harfini sitillendirme

Html yapısı içerisinde herhangi bir “span” yapısı kullanmadan yazılarımızın ilk harfini sözde eleman yapısı ile istediğimiz gibi düzenleye bilirsiniz. :first-letter sözde eleman yapısı , yazıların ilk harfine sanki bir etiket eklemiş gibi düzenlemenize yardımcı olacaktır.Bu kullanım yönetemi ile html içerisinde fazla kod yazımından da tasarruf etmiş sayılabilir. :first-letter kullanımına örnekler üzerinde inceleyelim.

Devamı

Devamı
11 Temmuz 2015
minimalcoding
1201 0

Css ile Üçgenler Oluşturmak

Çalışmanızda görsel kullanmayı düşünmeden, bir kaç satır kodla ihtiyacınız olan geometrik şekilleri oluşturabilirsiniz. “Üçgen” de bu şekillerden birisi. Duyar duymaz aklınızda bir stil canlanmasa da tasarımınızdaki diğer şekil ve bileşenleri birleştirmekte faydalanılan şekiller üçgenler. Css ile üçgenleri oluşturmada kullanılan özellik border özelliğidir. Borderlar, kesişim yerleri 45 derecelik açıyla birleşen kenarlıklar olarak düşünebilir. Normal bir border oluşturduğumuzda şeklin ortasında boş bir alan kalır. Genişlik ve yüksekliği sıfırlayarak ortadaki boş alanı kaldırmış oluruz ve “border-width”i eşit ölçülere getirdiğimizde 4 eşit büyüklükte üçgene bölünmüş bir şekile sahip oluruz. Border-width değerleri değiştirilerek css ile simetrik olmayan üçgenler elde edebiliriz. Değerlerden, istediğimiz yönde olanı 0px olarak değiştirdiğimizde diğer ölçüler aynı olmak koşuluyla önceki şekline göre 2 yarım 1 tam üçgeni saran bir (yarım) border oluşmuş olur. Yukarı, aşağı, sağ veya sola doğru üçgenler oluşturmak istediğimizde, üçgenin işaret ettiği yönün tersi istikameti border-bottom dır, taban genişliği buradan ayarlanır. Tooltip yapılarında , açılan menülerin belirginliğini arttırma yöntemlerinde sıklıkla kullanımını görmüşsünüzdür. Örneklerle kullanım methodlarına bakalım. 
Devamı

Devamı
9 Temmuz 2015
minimalcoding
2998 1

CSS Animasyon Nedir ve Nasıl Çalışır?

Sitelerin daha dinamik ve profesyonel gözükmesi için tasarımında farklılıklar yaratmak gerekir. CSS ile kısmı şekilde sitenizin stilinde değişiklik yapabilmek mümkündür. Her geçen gün biraz daha gelişen ve değişik animasyon yapılarını içerisinde barındıran CSS, CSS3 olarak daha işlevsel animasyon kodlarını yayınladı.

Artık java ve flash kullanmaya gerek kalmadan CSS3 ile dinamik animasyon figürleri yapabilmek mümkündür. Her ne kadar tüm tarayıcılar için yüzde yüz bir destek söz konusu olmasa da, CSS3 animasyon kodlarının yüzde 90 kadarını her tarayıcı sorunsuz çalıştırabilmektedir. Bu oranın her geçen zaman biraz daha artacağını söyleyebiliriz.

Devamı

Devamı
7 Temmuz 2015
minimalcoding
672 0

CSS Tüm Media (Medya) Tipleri

Farklı medya alanları için farklı CSS tanımlamları yapmak gerekebilir. Daha önceki yazılarımızdan hatırlayacağınız gibi mobil cihazlar ve print yapıları için ayrı CSS sitilleri tanımlamıştık, bu yazımıda CSS içerisinde kullanılan diğer medya tiplerinin ne olduğunu bir tablo üzerinde ifada etmeye çalışacağız.  Devamı

Devamı
6 Temmuz 2015
minimalcoding
1304 0

CSS Konumlandırma (Position) Özellikleri Nelerdir? Nasıl Kullanılır?

Tüm Html elementlere uygulaya bileceğiniz CSS 2.0 ile gelen  bu özellik sayesinde istediğiniz objenin konumlandırma özelliklerini değiştire bilirsiniz. İster block bir element olan div,form,p ve h1 vb isterseniz de inline element olan a,img,span vb objelere konumlandırma özelliklerini uygulaya bilirsiniz. Konumlandırma (position) yapısının aldığı değerlere bakacak olursak bunlar “static“,”relative“,”absolute”  ve “fixed” olarak tanımlayabiliriz. Div (kutu) modelleme yapsını ele alarak position kullanım yapısını örneklerle inceleyelim.

Devamı

Devamı
5 Temmuz 2015
minimalcoding
4132 0

CSS Responsive Media Query Nedir? Nasıl Kullanılır?

Artık günümüz teknolojisinde yaygın olarak kullanılan mobil cihazlar (Akıllı telefonlar, Tabletler vb.) internet erişimi sağlamsıyla birlikte kullanıcıların siteyi daha rahat dolaşabilmeleri için farklı ekran çözünürlüklerinde web sayfalarının, farklı görüntüleme modellerinin oluşması ihtiyacını doğurdu. Ülkemizde ve Dünyada en çok kullanılan arama motoru olan Google geçtiğimiz ay tüm iltişim kanallarından  responsive (mobil duyarlılık ) özelliğini üst sıralara çıkma kriteri olarak baz alacağını duyurdu. Yani responsive design artık olmazsa olmazlar arasında yer aldı. Peki oluşturulan web sitelerini mobil duyarlı hale nasıl getireceğiz? Html yapımızda oluşturmuş olduğumuz iskeleti farklı erkan modlarında CSS Media Query özelliği ile istediğimiz şekle ve formata sokma imkanımız mevcut. CSS sitil dosyasına ekleyeceğimiz @media yapısı ile belirtmiş olduğumuz genişlik aralıklarında Html yapımızda oluşturmuş olduğumuz taglere farklı davranış biçimleri atayabilir ve istemiş olduğumuz responsive görünümü elde edebiliriz. İşinizi dahada kolaylaştırmak adına oluşturulmuş bir çok front-end frameowrkü mevcut (Foundation,Bootstrap vb) bizim tavsiyemiz en yaygın olarak kullanılan Twitter Bootstrap’tır. İçerisinde hazır olarak gelen responsive grid yapısıyla daha hızlı mobil uyumlu websiteleri oluşturabilirsiniz. Şimdi resposnive yapı için @media özelliğinin nasıl kullanıldığını örneklerle inceleyelim.  Devamı

Devamı