Etiket Arşivi

CSS Animasyonlu Bilgi Kartları – CSS Animasyonları Uygulama!

css2020

✎ CSS Animasyonlu Bilgi Kartları – CSS Animasyonları Uygulama! ✎ ➤ Bu videomuzda; Css animasyonları kullanmaya devam edeceğiz.Tek bir konudan ziyade birçok konuya değindiğimiz videomuzda konu başlıkları aşağıdaki gibidir. ● CSS inherit nedir? CSS inherit kullanımı ● CSS backface-visibility kullanımı ● CSS transform:rotateY() kullanımı ● CSS transition kullanımı ● CSS …

Daha Fazla

CSS Maximum ve Minimum Genişlik Belirleme – CSS max-width min-width Kavramları

css max-width

✎ CSS’de genişlik konusunda çokça karıştırılan width,max-width ve min-width konularını hazırladığım örnek doküman üzerinden basit bir halde ugulamasını yaptık. Kullanmış olduğumuz CSS özelliklerinde bahsettiklerimiz; ● Width ve Max-width aynı yerde tanımlıyken hangisi geçerli olur? ● Max-width hangi durumlarda kullanılır? ● Min-width hangi durumlarda kullanılır? gibi konulara değindiğimiz bu video’da konuları …

Daha Fazla

CSS Animasyon İşlemleri – Css Transform Olayları!

css transforrm

Bu videomuzda;CSS’de animasyon işlemleri için kullanılan Transform olaylarından bahsedeceğiz. Transform “Değişim dönüşüm” anlamında bir anahtar kelimedir.Kutular ve resimler üzerinden transform işlemleri nasıl yapılıyor bunlarla alakalı özellikler üzerine konuşacağız. Bahsettiğimiz özelliklerden bazıları aşağıdadır. ● translate(x,y):CSS’te özelliğin kullanıldığı nesnenin konumunu değiştirmek, nesneyi kaydırmak için kullanılır. ● scale(x): Uygulanan nesnenin boyutunu, ölçeğini değiştirmek …

Daha Fazla

FlexBox İçindeki Elemanların Düzenlenmesi – Flexbox Özellikleri!

Flexbox yapısı

➽▶▶▶▶▶▶▶▶▶▶▶▶▶▶ 🅕🅛🅔🅧🅑🅞🅧 ◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀◀ √ Bu videomuzda;Flexbox’da kapsayan elemanı değil kapsanan elemanlarla ilgili örnek uygulamalar yaptık.Değindiğimiz bazı konular; ● flex-direction Özelliği flex-direction özelliği öğelerin hangi yönde yerleştireleceğini belirler. Şu değerleri alabilir: ✔ row: Öğeler yazı yönü ile aynı yönde yerleştirilir. ✔ row-reverse: Öğeler yazı yönünün tersi yönünde yerleştirilir. ✔ column: Öğeler …

Daha Fazla

CSS FlexBox İle Esnek Kutu Modeli – Mobil Uyumlu Sitelere Giriş!

Css flexbox

Bu videomuzda; CSS’in en popüler özelliklerinden olan Esnek Kutu Modeli Flexbox yapısını inceleyeceğiz.Eskiden kullandığımız birçok şeyin artık tek bir satırla ve içeriği uyumlu hale getirmesinden bahsedeceğiz. İnternetin artık cep telefonlarına kaydığı günümüzde mobil ve tablet uyumlu sitelerin olması elzem ve kaçınılmazdır.Flexbox ile mobil ve tablet uyumlu siteler nasıl yapılır detaylıca …

Daha Fazla

CSS3 Transition Geçiş Efektleri – CSS Animasyonlarına Giriş!

transition css

Bu videomuzda CSS geçiş efektlerinden bahsedeceğiz.Bir durumdan diğer duruma geçiş olaylarının nasıl olduğunu, bu durumların üzerine geldiğinde,odaklandığında vb. durumlarda nasıl tetiklendiği ile ilgili anlatım yapılmıştır. Özellikle; transition, transition-property, trasition-duration, transition-timing-function, transition-delay özellikleri örnek uygulama üzerinde gösterilmiştir. Bu video’da ki örnek uygulamanın kaynak kodlarını aşağıdaki linkten indirebilirsiniz. https://drive.google.com/file/d/15Bpn_CJCdb49jB5OoWB6ULPF7Kh88lyz/view?usp=sharing ABONE Olmak için …

Daha Fazla

HTML Elementlerin Konumlandırılması – Position Durumları!

css position

Bu videomuzda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlayan position özelliğinden bahsettik. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.Bunun için incelediğimiz position komutları; -Static, -Relative, -Absolute, -Fixed şeklindedir. HTML ile şekiller oluşturmak, reklam alanları belirtmek gibi birçok …

Daha Fazla

CSS Resim Kaplama Uygulaması – Efektif Bilgi Kartları Oluşturma!

image overlay

Bu videomuzda pratik site uygulamaları serisinde web sayfalarında çokça görülen resmin üzerine gidildiğinde resim açıklamasını gösteren resim kaplama olayını anlattık. Bu videomuzda değinilen özellikler; rgba renk ayarlaması, box-shadow olayı, overflow:hidden, position:absolute, position:relative, hover olayları işlenmiştir. Özellikle kutu pozisyonlarının nasıl kullanılması gerektiği, absolute-relative-static pozisyonlara değinilmiştir.Sizde bu video’da anlatılanları kullanarak bilgi kart …

Daha Fazla

CSS Şık Kart Tasarımı – CSS Kutu-Text Gölgelendirme-Kenar Yuvarlama-Döndürme!

css kart tasarımı

Bu videomuzda HTML-CSS ile bir kart tasarımı yapacağız.Bunu yapabilmek için kullandıklarımız; CSS box-shadow (kutu gölgelendirme), border-radius (kenar yuvarlama), transform(rotate) (Döndürme) özelliklerini kullandık. Ayrıca burda kutuya uygulanabildiği gibi text üzerine de uygulanabilmektedir. Sizde bu videoyu izleyerek değişik güzel kart tasarımları yapabilirsiniz. Video’da yapılan uygulamanın kaynak kodlarını aşağıdaki linkten indirebilirsiniz. https://drive.google.com/file/d/1dN9nAYOz6OOmFELptnkkGIPug4AUjekl/view?usp=sharing ABONE …

Daha Fazla

CSS Nedir? CSS Nasıl Kullanılır? Web Sayfalarında Stil İşlemleri!

Css nedir

Özellikle Bir Web Sitesi Yaparken Olmazsa Olmaz İki Şeyden Biri HTML Diğeri CSS Konusudur.Biz Bu Videomuzda CSS Nedir? CSS Nasıl Kullanılır? Gibi Sorulara Cevap Verdik. Özellikle CSS yazımında dikkat edilecek hususlar ve; Etiket( tag ) içi stil yazımı, Sayfa içi stil yazımı, Harici dış css yardımıyla stil yazımı gibi konulara …

Daha Fazla