Çarşamba , 20 Eylül 2017
Anasayfa » 2016 » Mayıs

Aylık Arşivler: Mayıs 2016

Rengarenk CSS3 Butonlar Oluşturma

google fonts, text-shadow, box-shadow ile zenginleştirilmiş birbirinden güzel 20 tane buton. Temel buton tasarımında .button{ padding:5px 15px 5px 15px; text-decoration: none; display: inline-block; -border-radius: 10px; tanımlamalarının yanında her bir buton için ek bir kaç düzenleme daha yapacağız. Aşağıda adım adım butonlar oluşturulmuştur. DEMO Adım 1: Head Etiketinin Oluşturulması Head etiketleri arasında tasarımda kullanacağımız tasarim.css dosyasını ve google fonts sitesinden sitemize dahil …

Devamını oku »

AngularJS Özel Filtre Oluşturma

Bu yazıda angularjs ile özel filitre oluşturmayı inceleyeceğiz. Oluşturacağımız filtre bir fonksiyon olacak. Filtreleme ifadesine göre ekranda gösterilecek olan özel değerleri belirleyeceğiz. Örneğimiz aşağıdaki resimden de anlaşılacağı gibi modelimizde bulunan cinsiyet değerleri veritabanından geldiğini düşünelim. Bu değerleri süzüp Kadın, Erkek, Seçilmedi olarak ekrana yazdıracağız.     Modülün filter fonksiyonu kendisine gönderilen 0, 1, 2 değerlerini sırasıyla Seçilmedi, Kadın, Erkek olarak …

Devamını oku »

AngularJS Arama Filtresi 2

Daha önceki yazımızda angularjs ile basit arama işlemi yapmıştık. Bu yazıda birden fazla özelliğe göre arama filitrelemesi nasıl oluşturulacağını inceleyeceğiz. Aşağıdaki örnekte arama yapmak için iki tane textbox kutumuz mevcut. Birinci kutuda isme göre arama, ikinci kutuda da cinsiyete göre arama yapılmaktadır. İki textboxa da değer girişi olduğunda tüm eşleşen satırlarlara göre süzme işlemi yapılmış olacaktır.   Tam Eşleştir işlemi yapan …

Devamını oku »

CSS ile Doğal Etiketler Oluşturma

Etiketler bir çok web sitesi için gerekli özelliklerin başında gelir. Bu yazıda hiç resim kullanmadan CSS3 kullanarak web 2.0 etiketleri oluşturacağız. DEMO Yapılacak işlem süreci şu şekilde olacaktır. HTML etiketilerinin oluşturulması Temel etiketlerin biçimlendirilmesi Etiketlerin köşelerinin biçimlendirilmesi Linklerin biçimlendirilmesi Etiketlere deliklerin eklenmesi ve biçimlendirilemesi   Adım 1: Head Etiketinin Hazırlanması Hadi ile head etiketini ekleyerek uygulamaya başlayalım. Head etiketine iki tane style dosyalarının …

Devamını oku »

Java: Faktöriyel Hesaplama Örneği

Programlama çalışanların sıklıkla çözdüğü programlama örneklerinden biridir faktöriyel hesaplama. Aşağıdaki kod örneği java ile faktöriyel hesaplama örneğidir. [crayon-59c20244e0619630294582/]    

Devamını oku »

JavaScript: Farenin Konumunu Öğrenme

JavaScript ile farenin pozisyonunu öğrenmek için gerçekleşen olayın clientX ve clientY özellikleri kullanılmaktadır.   Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe farenin konumunu ekrandaki div etiketlerine yazdıran uygulama örneği mevcuttur. [crayon-59c20244e0843608094985/] Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe ekrandaki div etiketinin genişliğini değiştiren örnek mecvuttur. [crayon-59c20244e084a215947774/]   Aşağıdaki örnekte tarayıcı ekranında fare hareket ettirildikçe ekrandaki div etiketini hareket ettiren örnek mecvuttur. …

Devamını oku »

JavaScript: Küpün Hacmini Hesaplama

Text kutusuna bir kenar uzunluğu girilen küpün hacmini hesaplayan program:   Nesneye olay atayarak javascript ile küpün hacmini  hesaplama; document.getElementById ile nesne oluşturulduktan sonra oluşturulan nesnenin onclick niteliğine fonksiyon tanımlaması yaparak kullanma [crayon-59c20244e0e70062411304/] HTML etiketinin onclick özelliğine fonksiyon tanımlayarak javascript ile küpün hacmini  hesaplama; Etiketin onclick niteliğine fonksiyon yazılarak kullanma [crayon-59c20244e0e77330081433/] AddEventListener kullanarak javascript ile küpün hacmini  hesaplama; Nesne document.getElementById ile oluşturulduktan sonra nesnenin addEventListener işlevi …

Devamını oku »

JavaScript: Üçgenin Alanını Hesaplama

Text kutusuna taban uzunluğu ve yüksekliği  girilen üçgenin  alanını hesaplayıp ekrana uyarı olarak veren program: Nesneye olay atayarak javascript ile üçgenin  alanını hesaplama; document.getElementById ile nesne oluşturulduktan sonra oluşturulan nesnenin onclick niteliğine fonksiyon tanımlaması yaparak kullanma [crayon-59c20244e3280228675197/] HTML etiketinin onclick özelliğine fonksiyon tanımlayarak javascript ile üçgenin  alanını hesaplama; Etiketin onclick niteliğine fonksiyon yazılarak kullanma [crayon-59c20244e328a180923951/] AddEventListener kullanarak javascript ile üçgenin  alanını hesaplama; Nesne document.getElementById ile …

Devamını oku »

JavaScript: Dikdörtgenin Çevresini ve Alanını Hesaplama

Text kutusuna uzun ve kısa kenarı girilen dikdörtgenin çevresini ve alanını hesaplayıp ekrana uyarı olarak veren program:   Nesneye olay atayarak javascript ile dikdörtgenin çevresini ve alanını hesaplama; document.getElementById ile nesne oluşturulduktan sonra oluşturulan nesnenin onclick niteliğine fonksiyon tanımlaması yaparak kullanma [crayon-59c20244e3a26696635827/] HTML etiketinin onclick özelliğine fonksiyon tanımlayarak javascript ile dikdörtgenin çevresini ve alanını hesaplama; Etiketin onclick niteliğine fonksiyon yazılarak kullanma [crayon-59c20244e3a2e251936640/] AddEventListener kullanarak …

Devamını oku »

C# DİNAMİK DİZİLER

Dinamik dizi;Boyutu sabit olmayan, değişebilen dizi demektir. Dinamik diziye elemanlar eklenebilir, diziden elemanlar silinebilir; dizinin boyutu azaltılabilir ve arttırılabilir. Bazı programlama dillerinde vektör adı ile bilinir. Dinamik dizilerde bazı kısıtlamalar vardır. Bu kısıtlamaların en başında da dizilerin boyutları gelmektedir. Dizinin boyutu dizi tanımlanırken belirlenir ve program çalışırken daralttırılıp-genişletilemezler. Dizilerde sıkça karşılaşılan bu kısıtlamalar ArrayList sınıfı ile çözümlenir. Öncelikle ArrayList ne demek …

Devamını oku »

CSS ile Esnek Resimler

Esnek tasarımlı sitelerde sabit genişlikteki resimler sitenin tasarımının üzerine çıkarak görüntüde hoş olmayan bozulmalara neden olmaktadır. Em ölçüsünü kullanarak genişliği orantılı yapmak da mümkün ancak bununda kendine göre dezavantajları var. Bu yazıda zemine resim ekleyerek sitedeki resimlerin esnek bir şekilde görüntülenmesini sağlayacağım. DEMO    HTML kodları: [crayon-59c20244e416b450996138/]   CSS Kodları: [crayon-59c20244e4173850560609/]   İçerik alanının tarayıcıda esnek görünmesi için  genişlik değerini %50 …

Devamını oku »

JavaScript: Butona Tıklayınca Sayıyı Arttırma / Azaltma

Web sayfasında artı butuna tıklayınca sayıyı bir arttıran, eksi butonuna tıklayınca sayıyı bir azaltan javascript örneği…   DEMO   JS & HTML [crayon-59c20244e451e224855956/] CSS(resimdeki tasarımı elde etmek için) [crayon-59c20244e4524970552955/] HTML & JS & CSS Kodlarının tümü [crayon-59c20244e4528976867287/]  

Devamını oku »

Etkili Birkaç CSS3 Özelliği

Css web teknolojileri gerliştirmenin en kolay ve etkili yolu olduğunu biliyorsunuzdur. CSS3 ile gelen bir çok güzel özellik Photoshop gibi grafik programı kullanmadan yapmak mümkündür. İşte bu yazıda bu etkili CSS özelliklerinin bir kaç tanesinden bahsedeceğim. Border Radius Box Shadow Text Shadow Çoklu Arkaplan   Bu özelliklerin her birini geçmişte Photoshop grafik programını kullanarak hazırlayabiliyordum. CSS3 ile HTML etiketlerine daha rahat …

Devamını oku »

AngularJS Arama Filitresi

AngularJS serach filter kullanarak arama işlemlerinin nasıl yapıldığını inceleyeceğiz.   Yukarıdaki arama kutucuğuna yazı girişi olduğunda, sadece tabloda eşleşen satırları göstermesi beklenir.  Daha fazla açıklama yapmadan uygulamamızı yazmaya başlayalım.   SCRIPT: Yine eski makalelerde kullandığım personel modelini kullanarak bu örneği açıklayacağım. [crayon-59c20244e5359218603651/]   HTML: Arama için bir tane textbox ekledim. Text kutusuna model olarak arama ifadesini parametre olarak geçtim. arama ifadesini ng-repeat …

Devamını oku »

JavaScript: Sayıyı Yazıya Çevirme

Text kutusuna sayı olarak girilen değerin yazı ile karşılığını yazdırma örneği; DEMO Örnek kodumuzun çalışması şu şekildedir. 125 değerini text kutusuna girdiğimizi varsayalım. Div etiketi içine YüzYirmiBeş yazacaktır. Örneğimiz için gerekli olan HTML kodları [crayon-59c20244e743c328773020/]   Örneğimizin CSS kodları [crayon-59c20244e7445273630370/]   Örneğin JavaScript Kodları 🙂 Not: Script içi olay kullandığım için script kodlarını yazarken body kapatma etiketinin hemen üzerin koymayı …

Devamını oku »

Dizi Kopyalama

Java dili üzerinde bir dizinin kopyasını başka bir diziye alabilmek için .clone() metodundan faydalanabilirsiniz.

Devamını oku »

Float ile Responsive Tasarım

Bu yazıda CSS float özelliği kullanarak çok kolay bir responsive web sayfası tasarımı yapacağız. Float başlangıçta yapısal tasarımlar için kullanılan bir CSS kodu değildi. Akışkan tasarımlar yapmak için bazı zorlukları da yapısında barındırmaktaydı. Bu yazımızda float kullanarak bir basit responsive web sayfası tasarımı yapacağız.

Devamını oku »