CSS ile Yatay Açılır Menü Yapımı

Css ile Yatay Açılır Menü

Bu dersimizde de css ile yatay açılır menü yapacağız. Daha önceki dersimizde css ile dikey açılır menü yapmıştık, bu menünün tek farkı sadece dikey olarak değilde aynı menünün yatay olarak açılmasıdır.
Css ile Yatay Açılır Menü
İlk olarak yine aynı şekilde css ile yatay açılır menümüzün html kodlarını oluşturalım. Html kodlarımızı yine öğrendiğimiz gibi body tagları arasına yazıyoruz. Okumaya devam et “CSS ile Yatay Açılır Menü Yapımı”

Html ve Css ile Uygulama Örneği

Web tasarım ve programlama (Anadolu Teknik Lisesi – 11.Sınıf – Bilişim Teknolojileri Bölümü – Web Programlama Alanı) dersinde gösterilmiş olan CSS(style) modülü için genel olarak tüm gördüğümüz derslerin bir içeriği niteliği taşıyan uygulama örneğimizin şekli aşağıdaki resimde görülmektedir.

Uygulamada ulaşılması istenen amaç: Öğrencileri özellikle div mantığını anlaması ve tablo kullanmadan web sayfalarının tasarımını yapabilmesini sağlamaktır. Bunun yanı sıra CSS özellikleri örnek uygulamalarda kullanarak pekiştirmelerini sağlamaktır. Okumaya devam et “Html ve Css ile Uygulama Örneği”

Harika CSS Buttonum

Css ile Button

butonMerhaba bazı sitelerde görmüş olduğum butonlar ilgimi çekti ben nasıl yaparım diye biraz düşündükten sonra hemen işe koyuldum ve bir örnek yaptım kendime.  Ortaya bence güzel bir örnek çıktı geliştirilirse web sitelerine çok güzel görsellikler katmaya devam edebilir. Şu an için ben tek renk yaptım. Sizler geliştirerek daha çok renk katabilirsiniz. Butonu hiç bir resim kullanmadan sadece CSS kullanarak yaptım ve Google Chrome tarayıcısında denedim. Ortaya sol resimdeki gibi bir görüntü çıktı. Buton normalde gri üzerine geldiğinde siyah tona yakın bir renk alır. Okumaya devam et “Harika CSS Buttonum”

CSS ile Renk Değişimi

CSS ile renk değişimi uygulamasını yapacağız. Bu uygulamamızda farklı olan yapı ise istediğimiz bir zaman aralığında rengin bir renkten diğer renge geçişini kullanıcının görmesidir. Bu uygulamayı ben sizlere bir link üzerinde nasıl yapıldığını göstereceğim.
[css]
a{
text-decoration:none;
color:#f00;
}
[/css]
Linkimin alt çizgisini kaldırdım. Linkimin renginide kırmızı olarak ayarladım.
[css]
a:hover {
color:#00f;
-webkit-transition:color 500ms ease-in;
-moz-transition:color 500ms ease-in;
-o-transition:color 500ms ease-in;
transition:color 500ms ease-in;
}
[/css] Okumaya devam et “CSS ile Renk Değişimi”