Kayıtlar

css-dersleri etiketine sahip yayınlar gösteriliyor

Javascript Oyun Yapma Dersleri HTML5+CSS3

Resim
Javascript ile oyun nasıl yapılır,   oyun nasıl programlanır   öğrenmek ister misin  ? Javascript class yapısı kullanarak nesne yönelimli modern kod yazımları  ile  sen de  kendi oyununu çok kolay programlayabilirsin   ve algoritma yeteneğin çok iyi gelişecek.
Yorum Gönder
Devamı Oku »

Html5 canvas animasyon dersleri Javascript Yilan Oyunu

Resim
Html5 canvas etiketi ve Javascript yardımı ile çok güzel animasyonlar yapabilir oyunlar programlayabilirsiniz.Sizlere bu yazımda  Udemy'de Yayınladığım harika kurs hakkında  bilgi vereceğim. Html5 Canvas Animasyon Dersleri  6 Saatlik eğitim sonunda  Html5 canvas  animasyonları ve oyunları çok kolay bir şekilde yapabilirsiniz.Öncelikle yılan oyunu yapımı ve kurs önizlemesini izleyelim. Eğer sıfırdan oyun geliştirmek istiyorsanız ve javascript ile aranız iyi ise hemen kendi oyununuzu programlamaya başlayın. Yılan oyununu yapmak sadece 1 saat 5 saat boyunca Html5 Canvas yolculuğuna çıkacağız. Javascript Yılan Oyunu Yapımı Diyeceksiniz ki çok basit bir oyun bu  ! Kesinlikle öyle basit  fakat normal bir oyun yapımında kullanılan neredeyse bütün algoritmalar sorgulamalar bu oyun içerisinde var.Javascript ve programlama gücünüz oyun yapmaya çalışırken maximum seviyeye çıkabilir.Ben denedim :) Udemy'deki Html5 Canvas Animasyon dersleri ve Javascript Oyun Yapımı k
Yorum Gönder
Devamı Oku »

HTML5 Canvas Oyun Yapımı Dersleri

Resim
Html5 canvas etiketi ve Javascript ile nasıl oyun yapılır ? Web oyunu geliştirme ve animasyon teknikleri nelerdir ? Javascript'te yılan oyunu nasıl yapılır ? Siz de kendi canvas oyununuzu geliştirmek istiyorsanız önce videoyu izleyelim . Html5 Canvas oyun yapımı ve Javascript Animasyon Dersleri  Bir web geliştiricisi ya da yazılımla uğraşıyorsanız eminim oyun yapımı ya da oyun programlama ve geliştirme ile ilgili mutlaka bir deneyiminiz  olmuştur.İşte oyun programlama ve Html5 canvas animasyon derslerimizden görüntüler.Bakalım beğenecek misiniz ? İyi seyirler.  "Bu yılan  başka yılan :)" Javascript ile kendi oyununu geliştirmeye hazır mısın ? 6 saatlik dolu dolu uygulamalı Canvas Oyun Yapımı kursuna sadece 24.99TL ye hemen kayıt yaptırabilirsiniz.Harika eğlenceli ve bilgi dolu kursu bitirip  yılan oyunu ile kendinizi ödüllendirin. Kursu içeriğini incelemek için Udemy HTML5 Canvas Animasyon Dersleri ve Javascript Oyun Yapımı   linkine tıklayın. Html5 canvas oyunu nası
Yorum Gönder
Devamı Oku »

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

Resim
Merhaba arkadaşlar bu yazımda  eski tarayıcılarda çalışmayan kodları nasıl gizleyebileceğimizi ve  uzunca yazılan  javascript kod satırlarını bölme yi öğreteceğim. Web tasarım ve kodlama dersleri adı altında  başlatmış olduğum javascript dersleri makalelerimin hepsini okumanızı istiyorum ve sizler için hazırlanan uygulamaların hepsini dikkatle uygulayarak öğrenin.Bir önceki yazımda javascript ile neler yapılabilir  konusunu işledim. Js de eski tarayıcılarda çalışma ve kod satırlarını gizleme Bazen web site yapmak istediğimizde  hangi programlama dilini kullanırsak kullanalım kodlar uzayabiliyor bu gibi durumlarda javascript kodlarını bölerek alt satıra rahatlıkla geçişler yapabiliriz.Aşağıdaki örnekte javascript kodunu  ters slash (\) ile bölerek rahatça kod yazımına devam edeceğiz.Örneği inceleyiniz. <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile kod satırını bölme</title
Yorum Gönder
Devamı Oku »

Javascript kodları nereye yazılır

Resim
Javascript kodlarını genel olarak 4 farklı yöntemle kullanabiliriz,istersek html sayfasının head bölümünde istersek body etiketinden önce ,harici bir dosyadan çağırarak yada tarayıcımızın console bölmesinde görüntülenmesini sağlayabiliriz.Unutmadan bir de eğer kullanıcıya uyarı vermek istiyorsak window nesnesinin alert metodunu kullanarak da javascript kodlarını çalıştırabiliriz. Javascript kodları nereye yazılır öğreneceğiz. Javascript kodları nerelerde kullanılır ve çalıştırma şekilleri Bu javascript dersi nde js kodlarını html sayfalarında farklı şekillerde çağırmayı öğreneceğiz. Alert metodu kullanarak görsel bir uyarı alacağız. Script kodunu harici bir dosyadan çağırarak kullanarak kullanacağız. Document nesnesinin write metodunu kullanarak örnek kod uygulaması yapacağız. Son olarak html belgesinin head bölümüne script tagları arasında kod yazıp çalıştıracağız. Tarayıcımızın console bölmesinde de js kodlarının çalışmasını öğrenmiş olacağız. html sayfalarının hea
Yorum Gönder
Devamı Oku »

Javascript ile neler yapılabilir

Resim
Javascripti web prokelerimizde hangi amaçlarla nasıl kullanabileceğimizi ve javascript ile neler yapılabilir bu yazımda bunları anlatmaya çalışacağım.Javascript  kullancı taraflı bir dildir.Öğrenilmesi en kolay  web programlama dilidir.Ve bir webmasterın öğrenmesi gereken temel 3 dilden biridir.Bu diller:Html,Css ve Javascripttir.
Yorum Gönder
Devamı Oku »

Javascript yapısı ve DOM nedir

Resim
Javascript yapısı denildiğinde ilk akla gelmesi gereken nesne yönelimli  program olduğudur.Object Oriented bir dilde denilebilir.Nesne yönelimli programlamada her şey bir nesneden oluşur.Nesnelerin özellikleri ve davranışları(metodlar) vardır. Javascript Nesne Yönelimli bir programlama dilidir. Şimdi aşağıdaki kodları incelemenizi istiyorum. Javascript ile bir yazı yazdırmak istediğimizde klasik olarak kullanılan bir kod var.Document nesnesinin  write metodu kullanılarak html dökümanına yazı yazdıracağız. <!DOCTYPE html> <!DOCTYPE HTML> <html lang="tr"> <head> <meta charset="UTF-8"> <title>Js ile yazı yazdırma metodu</title> </head> <body> <script type="text/javascript"> document.write("şu anda saat 18:53"); </script> </body> </html> Görüldüğü üzere DOM modelindeki document nesnesi'nin  write m
Yorum Gönder
Devamı Oku »

javascript ile aciklama satiri ve haftanın gunünü bulma

Resim
Javascript kodlarıyla haftanın hangi günü olduğunu nasıl yazabiliriz öğrenebiliriz? Küçük bir uygulama ile bunu hemen gösterelim. Javascript açıklama satırı makalesinden gelen arkadaşlar da koddaki açıklama satırı nı incelesin.Bu örnekteki kodları şuan anlayamadığınızı düşünüyorsanız dert etmeyin.Yinede açıklayarak anlatmaya çalışacağım. Javascript haftanın gününü bulma uygulaması <!DOCTYPE html> <html> <body> <p id="container"></p> <script> // Javascript ile bugünün tarihini yazdırıyorum var t = new Date(); var hafataningunleri = ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"]; document.getElementById("container").innerHTML = "Bugün günlerden " + "<b>" + hafataningunleri[t.getDay()] + "</b>" + " değilmi ?"; </script&
Yorum Gönder
Devamı Oku »

javascript açıklama satırı

Resim
Javascript  dersleri serimizde açıklama satırlarını inceleyeceğiz..Bir web sitesini kodlamaya kalktığınızda bir yerde kodlar birikiyor ve nerede hangi kodu uygulamıştık, niçin o kodu yazmıştık kafamız karışabilir.Bu gibi durumlarda  js uzantılı dosyamızda ya da html içerisindeki script tagları arasına  açıklama satırıları ve yorumlar yazabiliriz. javascript-aciklama-satiri Javascript açıklama satırı örneği   Diyelim ki ben bugünün günlerden ne olduğunu javascript ile yazmak istiyorum.Javascripti html içersine gömdüğüm için // çift slash işaretiyle bir açıklama satırı yorum bloğu ekleyebilirim.Sonradan çalışmama döndüğüm zaman ne işe yaradığını hızlıca anlayabilirim. // Javascript ile bugünün tarihini yazdıracağım var t = new Date(); Javascript derslerimizin ilerleyen safhalarında daha çok örneklerle ve uygulamalarla destekleyeceğiz. Javascript hakkında bir kaç hatırlatma Kullanıcı taraflı bir script dili olduğun
Yorum Gönder
Devamı Oku »

javascript yazım kuralları

Resim
Tekrardan merhaba arkdaşlar bu dersimizde javascript yazım kuralları nı inceleyeceğiz. İngilizce olarak karşımıza javascript syntax olarak da çıkabilir.
Yorum Gönder
Devamı Oku »

javascript ile hoşgeldin dünya örneği

Resim
Sayfa yüklenir yüklenmez dikkat ederseniz alert fonsiyonu ile uyari penceresi göstermesini sağlıyoruz. Javascript merhaba dünya uygulaması
Yorum Gönder
Devamı Oku »

Javascript Derslerine Giriş

Resim
Javascript ,kullanıcı taraflı(client) yani bilgisayarımızdaki tarayıcılarda çalışarak html kodlarını biçimlendiren,değiştirebilen ve dinamik web sayfaları üretmemizi sağlayan bir script dilidir. Javascript öğreniyorum
Yorum Gönder
Devamı Oku »

CSS transform animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { margin: 50px; border: 5px ridge pink; width: 250px; height: 150px; background-color: yellow; color: black; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; text-align:center; } @-webkit-keyframes animasyonismi { 50% {-webkit-transform: rotate(180deg);} } @keyframes animasyonismi { 50% {transform: rotate(180deg);} } </style> </head> <body> <strong>css transform animasyon örnek</strong> <br /> <p>Gradually rotate the DIV element 180 degrees, and back: <p> <div id="kutu-1"> <h2>HTML Dersleri <br />CSS Dersleri <br />Javascript Dersleri</h2> </div> <em style="color:red;"&
Yorum Gönder
Devamı Oku »

CSS vertical-align animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #smiley { vertical-align: 5px; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; } @-webkit-keyframes animasyonismi { 50% {vertical-align: 60px;} } @keyframes animasyonismi { 50% {vertical-align: 60px;} } </style> </head> <body> <strong>css vertical-align animasyon örnek</strong> <br /> <p><img id="smiley" src="http://1.bp.blogspot.com/-k6EFP00YgfE/VjfkqS_J-_I/AAAAAAAAA3s/mgB0RJlnmvM/s1600/pengu.jpg" width="50" height="50"> <u>css vertical align</u> özelliği ile düşeyde hizalama yapılabilir.<u>css vertical align</u> özelliği ile düşeyde hizalama yapılabilir.<u>css vertical align</u> özelliği ile düşeyde hizalama yapılabilir.<u>
Yorum Gönder
Devamı Oku »

CSS width animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { width: 100px; background-color: crimson; color: white; -webkit-animation: animasyonismi 4s infinite; animation: animasyonismi 4s infinite; border:3px ridge yellow; } @-webkit-keyframes animasyonismi { 50% {width: 300px;} } @keyframes animasyonismi { 50% {width: 300px;} } </style> </head> <body> <strong>css width animasyon örnek</strong> <br /> . <div id="kutu-1"> <h1>Genişleyecek kutu</h1> </div> <em style="color:red;">css width </em>özelliğini bir html elemanını genişliğini belirtmek için kullanılır. <br /> <u style="color:blue;"> css width</u> özelliğinin animasyon özelliği vardır. <p style="color:green;"><b&
Yorum Gönder
Devamı Oku »

CSS word-spacing animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> #kutu-1 { border: 3px ridge crimson; -webkit-animation: animasyonismi 6s infinite; animation: animasyonismi 6s infinite; background:yellow; padding:35px; } @-webkit-keyframes animasyonismi { 50% {word-spacing:30px;} } @keyframes animasyonismi { 50% {word-spacing: 30px;} } </style> </head> <body> <strong>css word-spacing animasyon örnek</strong> <br /> <div id="kutu-1"> css word-spacing özelliği ve <code>word-spacing:30px;</code> değerini uyguladığımızda kelimeler arası uzaklık "30px" olacaktır.css word-spacing özelliği ve word-spacing:30px; değerini uyguladığımızda kelimeler arası uzaklık "30px" olacaktır. </div> <em style="color:red;">css word-spacing </em>özell
Yorum Gönder
Devamı Oku »

CSS z-index animasyon

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <style> div {position: absolute;} #crcve div { background-color: yellow; border: 1px solid gray; width: 200px; height: 200px; opacity: 0.4; color:black; margin:100px; } div#kirmizikutu { opacity: 1; background-color: crimson; z-index: 1; -webkit-animation: animasyonismi 6s infinite linear; animation: animasyonismi 6s infinite linear; color:white; } @-webkit-keyframes animasyonismi { 50% {z-index: 5;} } @keyframes animasyonismi { 50% {z-index: 5;} } </style> </head> <body style="position:absolute;"> <strong>css z-index animasyon örnek</strong> <br /> <div id="crcve"> <div id="kirmizikutu">kirmizikutu</div> <div style
Yorum Gönder
Devamı Oku »

CSS3 text-overflow Örnek

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>css text-overflow özelliği ve örnek uygulama</title> <style> .kutu1 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: clip; border: 1px solid blue; } .kutu2 { white-space: nowrap; width: 180px; overflow: hidden; text-overflow: ellipsis; border: 1px solid blue; } </style> </head> <body> <p>İçerikler html elemanının boyutunu taştığı zaman (...) şeklinde gösterebiliriz. Örnekleri inceleyiniz..</p> <h3>text-overflow:clip uygulandığında</h3> <div class="kutu1">html ve css dersleri örnek uygulamalar dersler..</div> <h3>text-overflow:clip uygulandığında</h3> <div cla
Yorum Gönder
Devamı Oku »

JavaScript CSS3 animation-delay Örnek

Resim
javascript css3 animation-delay örnek uygulama Aşağıdaki animasyon kutucuğu 5 saniye sonra harekete geçecektir. Javascript ile animation-delay özelliğine animation-delay: 2s; değeri verildiğindeki etkisini görmek için aşağıdaki çalıştır tuşuna basınız ! Çalıştır
Yorum Gönder
Devamı Oku »

CSS transition-delay Özelliği

CSS transition-delay Css transition-delay özelliği ile css animasyonlarının gecikme süresi belirlenebilir. Örnek: Bu örnekte genişliği 90px olan bir div elemanının genişliği6 saniyede 360px olacaktır. Fakat transition-delay: 3s; değeri verildiği için 3 saniye gecikmeli başlayacaktır. div { width: 90px; height: 90px; background: yellow; border: 1px solid black; -webkit-transition-property: width; -webkit-transition-duration: 6s; -webkit-transition-delay: 3s; transition-property: width; transition-duration: 6s; transition-delay: 3s; overflow; auto; } div:hover { width: 360px; } Kendiniz deneyin » CSS transition-delay nedir nasıl kullanılır Css ile oluşturulan animasyonların gecikme süresi bu özellik ile tanımlanabilir. CSS transition-delay CSS transition-delay özellikleri &nbsp Varsayılan Değer: 0s  
Yorum Gönder
Devamı Oku »