İçindekiler:
- Artık CSS'ye elemanların üzerine gölge gölgeleri eklemek mümkündür - başka bir çok güzel etki. CSS3'ten önce, yarı şeffaf gölgeler yalnızca bitmap görüntüde mümkündür, özellikle şeffaflığı destekleyen PNG formatını kullanarak.
- Aşağıdaki şekilde, yeni CSS3 border-radius özelliğinin bir eylem örneği gösterilir. Bu mülk için bir değer tanımlayarak - değerin 10 piksele ayarlandığı CSS kodunun son iki satırını kontrol edin - köşe eğrisinin ne kadar büyük görüntüleneceğini kontrol edin. Border-radius özelliğinin kullanılmasından önce, yuvarlatılmış köşe efektleri yalnızca bitmap grafikleri kullanılarak mümkün olmuştur.
- CSS3'ü kullanarak, şimdi dönüşüm özelliğini kullanarak birçok serin 2B ve 3B animasyon efekti uygulayabilirsiniz. Bu özellik, animasyonunuzu çeşitli şekillerde etkilemek üzere tanımlayıp birleştirebileceğiniz ölçeklendirme, döndürme, eğriltme ve perspektif gibi bir dizi işlev içerir.
Video: BİLİNÇALTI NEDİR? NASIL TEMİZLENİR? (Hayatımızı Nasıl Etkiler) 2025
Cascading Style Sheets'in son baskısı olan CSS3, tasarım işlemedeki gelişmeleri tanıtır. Bunlardan, renk değişimlerini, şeffaflığın derecelerini ve hatta yansımaları tanımlayan bazı yeni yetenekler kesinlikle kontrol edilmeye değer!
Geçmişte, bir renk degrade istiyorsanız, bu amaçla bitmap görüntüleri tasarlamanız gerekiyordu. Şimdi CSS, konteynırları bir renkten diğerine veya bir renkten birkaç renge bile geçiş yapan doğrusal ve radyal degradelerle doldurmanıza olanak tanır. Degradenin konteyneri nasıl doldurduğunu da denetleyebilirsiniz.
En ilginç olan, artık CSS gradyanlarını alfa kanalı şeffaflığını içeren görüntü maskeleri olarak kullanabilmenizdir. Maske olarak kullandığınız görüntüyü tanımlayarak - ve bu görüntüyü bir öğeyle ilişkilendirerek veya tanımı 'ın bir parçası olarak başka bir görüntüyle ilişkilendirerek - o öğenin kademeli olarak görünüşte soldurmasını sağlayarak arka planı ortaya koymuş olursunuz altına gizlenmiş. Bu özellik, web sitenizin tasarımında bazı ilginç katmanlı efektler sağlar.
Yalnızca CSS kullanarak bir yansıma oluşturmak için (görüntünün aşağıda yüzeyden yansıyan görüntüye benzediğini görüyorsanız), dönüşüm ayarları ve kaplar kombinasyonunu kullanmanız gerekir, ancak net etki bunun yansımasıdır Efekt. Esasen, iki tane konteyner yaratırsınız - birincisi ana resim için ve diğeri yansıma için. Önce yansımayı ters çeviren yansıma kabına dönüştürme efektleri uygulayarak, yüksekliğini boşaltın ve sonra bir saydamlık maskesi ekleyin, aşağıdaki resimde gösterildiği gibi ikna edici bir yansıma bulacaksınız. Güzellik, bu teknikle, Photoshop'tan hiç vazgeçmeden bir yansıma - dinamik olarak yapılandırılabilen bir yansıma - içeren bir normal grafiğe sahip olmanızdır.
Artık CSS'ye elemanların üzerine gölge gölgeleri eklemek mümkündür - başka bir çok güzel etki. CSS3'ten önce, yarı şeffaf gölgeler yalnızca bitmap görüntüde mümkündür, özellikle şeffaflığı destekleyen PNG formatını kullanarak.
Basitçe renkleri ve ofset ve bulanıklığı ayarlayarak çok farklı efektler yaratabilirsiniz. Kutunun gölgesinde (aşağıdaki resimde üçüncü resim) hemen sonra iki satırlık bir kod bulundurmanız gerektiğine dikkat edin - bir tanesi WebKit için diğeri Moz için. Bunlar sırasıyla Safari ve Firefox tarayıcılarını desteklemektedir.
Yalnızca CSS kullanarak, hem metin hem de kutu öğelerinde çeşitli bitmap benzeri gölge efektleri elde edebilirsiniz.
Aşağıdaki şekilde, yeni CSS3 border-radius özelliğinin bir eylem örneği gösterilir. Bu mülk için bir değer tanımlayarak - değerin 10 piksele ayarlandığı CSS kodunun son iki satırını kontrol edin - köşe eğrisinin ne kadar büyük görüntüleneceğini kontrol edin. Border-radius özelliğinin kullanılmasından önce, yuvarlatılmış köşe efektleri yalnızca bitmap grafikleri kullanılarak mümkün olmuştur.
Kredi: © Zwartwit Media
CSS3'ü kullanarak, şimdi dönüşüm özelliğini kullanarak birçok serin 2B ve 3B animasyon efekti uygulayabilirsiniz. Bu özellik, animasyonunuzu çeşitli şekillerde etkilemek üzere tanımlayıp birleştirebileceğiniz ölçeklendirme, döndürme, eğriltme ve perspektif gibi bir dizi işlev içerir.
nesnesinin nasıl dönüştüğünü ve ne kadar sürececeğini kontrol etmek için geçiş efektleri bile tanımlayabilirsiniz. Geçiş efektleri normal bağlantılara da uygulanabilir. Örneğin, normalde bir bağlantının üzerine gelip bir vurguyu görürseniz, bir kerede vurgulanır. Geçiş özelliği ve geçiş süresi olarak adlandırılan özellikleri kullanarak, vurguyu yavaş yavaş solmasını sağlayabilir ve bunu yapmak için kaç saniye gerektireceğini belirtebilirsiniz.
3D efektlere gelince, şehirlerinizi yapılandırmanıza izin vermek için "döndürülen" görülen iPhone Weather uygulamasını gördüyseniz, CSS3 efektlerinin harekete geçtiğine tanık oluyorsunuz demektir. Perspektif özelliğini kullanarak ve perspektif, döndürme, eğriltme ve ölçek gibi farklı dönüştürme işlevleri için değerler belirterek, kullanıcı arayüzünüzün sunumuyla çok yaratıcı olabilirsiniz.
