Etiket: CSS
-
Javascript ve CSS ile Analog Saat Yapımı
Yukarıda videosu izleyebileceğiniz bu örnek web geliştirmeye yeni başlayanlar için güzel bir pratik olacaktır. Örneğin kodlarına buradan erişebilirsiniz. Her zaman olduğu gibi HTML etiketleri ile başlıyoruz. frame sınıflı bir div ile bütün diğer etiketleri sarıyoruz. Bu div‘in içine üç göstergemiz için stick sınıflı ve göstergeyi belirten minute hour ve second sınıflı elementler ekliyoruz. Ayrıca saat…
-
Sadece CSS Kullanarak 3 Boyutlu Gösterge Çubuğu Yapmak
Güzel bir CSS/transform pratiği olan bu örneği yukarıdaki videoda izleyebilirsiniz. Kodlara da buradan erişebilirsiniz. Öncelikle HTML elementlerini yazalım. Her yüz için ayrı bir element ve sağ ve sol yüz hariç süreci gösteren birer çocuk element ekleyeceğiz. Öncelikle bar-wrapper sınıfında bir element oluşturuyoruz. Bu sınıfa perspective stilini vereceğiz ki bu CSS için 3 boyutlu çalışmalarda çok…
-
HTML, CSS ve Javascript ile Matrix Wall Yapımı
Yukarıda videosunu izleyebileceğiniz bu örneğin kodlarına da buradan erişebilirsiniz. Bu örnekte meşhur Matrix filminde kullanılan akan yeşil yazıları simüle etmeye çalışacağız. DOM olarak HTML tarafında bir element yazmadan tüm elementler javascript ile yönetilecek. Javascript tarafında kolon ve satır sayılarını hesapladık ve iç içe iki döngü ile elementlerimizi yerleştirmeye başladık. Burada kolon genişliğini 30px vererek…