Ev / DERSLER / Web Tasarım Dersler

Web Tasarım Dersler

Web Tasarımı İçin Gereken Temel Konulara Değinerek Sıfırdan Bir Web Sitesi Görüntüsü Elde Etmek İçin Temel Eğitim Dersleri

CSS3 Dersleri 4 box-shadow Kutuları Gölgelendirme

CSS3 ile birlikte gelen ve kutuya gölge verme için kullanılan box-shadow özelliği ve kullanımı ile ilgili bilgi vermeye çalışacağım. Hemen örneğimize geçerek uygulamalı şekilde box-shadow özelliğimizi inceleyelim. Basit bir gölge vermek için box-shadow özelliğine yatay gölge(10px) ve dikey gölge(10px) boyutu belirterek verebiliriz. .golgelendirme{ box-shadow: 10px 10px; } Oluşturduğumuz gölgeye renk verebiliriz. .renklendirme{ box-shadow: 10px 10px green; } …

Daha fazla oku & raquo;

CSS3 Dersleri 3 text-shadow Yazıları Gölgelendirme

CSS3 ile birlikte gelen text-shadow özelliği ile yazılara gölgelendirme verebiliyoruz. Hemen örneğimize geçerek uygulamalı şekilde text-shadow özelliğimizi inceleyelim. Basit bir gölge vermek için text-shadow özelliğine yatay (2px) ve dikey (3px) boyutu belirterek verebiliriz. .golgelendirme{ text-shadow: 2px 3px; } Oluşturduğumuz gölgeli yazılara renk verebiliriz. .renklendirme{ text-shadow: 2px 3px red; } Oluşturduğumuz ve renk verdiğimiz …

Daha fazla oku & raquo;

CSS3 Dersleri 2 border-radius Kenar Yuvarlama

CSS3 ile birlikte gelen border-radius özelliğimiz, HTML etiketlerinin kenarlarını yuvarlamak, oval yapmak için kullanılır. Web tasarımda artık bu özellik sıklıkla kullanılıyor, Daha önceleri bu özelliği javascript kütüphanesi ve eklentileriyle kenar yuvarlama işlemleri yapılıyordu.  Artık CSS3 ile gelen border-radius özelliğini kullanmamız yeterli oluyor. Hemen örneğimize geçerek uygulamalı şekilde border-radius özelliğimizi inceleyelim. CSS3 …

Daha fazla oku & raquo;

CSS3 Nedir? CSS3 İle Gelen Yenilikler Nelerdir?

CSS3 Görseli

Öncelikle CSS neydi onu hatırlayalım; CSS, HTML Kodlarımızdaki metin ve format etiketlerimize görsellikte zenginlik katmamızı olanak sağlayan web teknolojisidir. CSS3 Yeni bir teknolojimidir? CSS3 daha önceki sürümleri üzerine geliştirilmiş üçüncü sürümüdür. CSS3 Nasıl Kullanılır? CSS3 kodları CSS de olduğu gibi HTML kodlarının içine de yazılabilir veya ayrı bir CSS dosyası …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 18.Ders Canvas İle Metin Oluşturma )

Canvas Etiketimizle metin yazdırmak için 2 seçeneğe bakacağız biri dolgulu yazım biçimi FillText metodu diğeri içi boş strokeText metotlarıyla canvas alanımıza metin ekleyeceğiz. İlk Olarak Canvas alanımızı belirliyoruz. <canvas id="resimalani6" width="500" height="500" style="border:1px solid #000000"></canvas> Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor JavaScrip ile kodlarımızı bu alanda göstermek …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 17.Ders Canvas İle Renklendirmeler)

<canvas> Etiketimizle Renklendirmeler Yapacağız Bunun İçin 2 Metot Kullanacağız biri Düz Renk Geçişleri Sağlayacağımız createLinearGradient diğeri oval geçiş sağlayabileceğimiz createRadialGradient metotlarımızla renklendirmeler yapacağız. Fazla Uzatmadan hemen örneğimize bakarak nasıl renk geçişleri sağlayacağımıza bakalım.. Gradient Kullanımları createLinearGradient(x,y,x1,y1) createRadialGradient(x,y,r,x1,y1,r1) İlk Olarak Canvas alanımızda düz geçişleri sağlayacağımız createLinearGradient metodumuzu kullanalım bunun için Canvas İle Bir Çalışma Alanı …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 16.Ders Canvas İle Çember ve Oval Cizimler )

<canvas> Etiketimizle Çember ve Oval Çizimler İçin arc Metodumuzu Kullanıyoruz Bu Metotları JavaScript Derslerimizde Tekrar Ederek ve Çeşitli Metotları Öğrenerek Daha Güzel Tasarımlar Oluşturabiliriz. arc(x,y,r,start,stop) metodunda tanımlamamız bu şekilde olacak İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım <canvas id="resimalani3" width="500" height="500" style="border:1px solid #000000"></canvas> Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 15.Ders Canvas Yol Belirleme )

<canvas> Etiketimiz İçinde Çizim Yollarını Belirlemek için Hemen Örneğimize Geçelim İlk Olarak Canvas İle Bir Çalışma Alanı oluşturalım. <canvas id="resimalani2" width="500" height="500" style="border:1px solid #000000"></canvas> Oluşturduğumuz canvas alanına id=”” ile mutlaka tanımlayıcı bir isim oluşturmamız gerekiyor. JavaScrip ile kodlarımızı bu alanda göstermek için bu isimi kullanacağız. width=”” height=”” style=”” ile …

Daha fazla oku & raquo;

HTML5 Canvas Etiketi ( 14.Ders Canvas İle Çalışma Alanı Oluşturma)

Canvas İle Çalışma Alanı Oluşturma

<canvas> Etiketimiz web sayfalarında çeşitli grafikler oluşturmamıza ve geometrik çalışmalar yapabilmemiz için div gibi çalışma alanını belirleyen tutucudur . Canvas etiketimizi resim yapmak için kullandığımız boş bir sayfa olarak düşünebilirsiniz bunun üzerine resimi yapabilmek için bir ressama ihtiyacımız var buda javascript veya buna benzer kodlama dilleri olabilir. Javascrip Bildiğinizi varsayarak …

Daha fazla oku & raquo;

HTML5 Embed Etiketi ( 12.Ders İçerik Çekme )

bilgebank logo

<embed> Etiketimizle Sayfanız Dışında Başka Bir Sayfadan veya Alandan Kaynak, İçerik, Eklenti Gibi Birçok Özelliği Sayfamıza Dahil Etmemize Yarayan Etiketimizdir. Diyelim ki Bilgebank Sitemizin Logosunu Sayfanıza dahil etmek istiyorsun <embed> etiketimiz içinde src=” ile çekmek istediğiniz alanın url adresini belirliyorsunuz  height=”” width=”” Değerleri ile de boyutunu ayarlayabilirsiniz.

Daha fazla oku & raquo;

HTML5 Progress Etiketi ( 11.Ders Bar Göstergesi )

html gösterge alanı

<progress> Etiketimiz Bir görevin, işlemin ilerleme veya tamamlanma sürecini görsel olarak göstermemizi sağlayan çok kullanışlı bir etiketimizdir. Etiketimizde 2 Özellik Tanımlamamız Yeterlidir max=”” belitgecimizle Son Durum Değerini value=”” Değerinde İse Mevcut Değerini Belirtebilirsiniz.

Daha fazla oku & raquo;

HTML5 Video Etiketi ( 10.Ders Video Oynatıcısı )

html video oynatıcısı

<video></video> etiketimiz bir HTML belgesinde video elementini oynatmak için kullanılır.  Kullanımı Çok Basit ve Kullanışlıdır. src=”” İle İçeriğimizin Dosya Yolunu Belirtiriz. type=”” İle de Dosya Formatımızı Belirleriz controls=”controls” Komutumuz İle video Özelliğimizin Başlat, Durdur, Ses, İndirme, Tam Ekran Gibi Özelliklerinin Görünmesini Sağlar. autoplay=”autoplay” Komutumuz İle video Özelliğimizin Tarayıcı Açıldıktan Sonra Otomatik Olarak Başlamasını Sağlar. …

Daha fazla oku & raquo;

HTML5 Audio Etiketi(9.Ders Ses Dosyası Oynatıcısı)

mp3 Oynatıcı

Audio etiketimiz isminden de anlaşıldığı gibi ses dosyalarını web sayfalarımızda çalıştırmamıza yarar 3 ses formatını destekler. Ancak tarayıcılarda farklılık gösterebilir desteklediği ses formatları mp3, wav, ogg formatlarıdır mp3 formatı tüm tarayıcılarda sorunsuz çalışır. <audio > <source src="http://www.bilgebank.com/wp-content/uploads/2017/10/Ed-Sheeran-Shape-of-You.mp3" type="audio/mp3"> <p style="color:red;">Tarayıcınız Audio Etiketini Desteklememektedir.</p> </audio> src=”” İle Dosya Yolumuzu Belirtiriz. type=”” İle de Dosya …

Daha fazla oku & raquo;