Video # 034'te kaldığımız yerden devam ediyoruz ve arama alanını oluşturmaya devam ediyoruz.
Bu sefer, gerçek form öğelerini kendileri oluşturarak, aramanın "açık" durumuna odaklanıyoruz. Arama alanının kendisi, genellikle kendisiyle ilişkilendirilmiş bazı özel stillere sahip olan "arama" HTML5 form öğesi türünü kullanır, ancak Normalize (Video # 011) kullandığımız için bu bizim için bir sorun değildir.
Site genelinde düğmelerin stilini belirlerken kendi kullanımımız için yeni bir modüler CSS parçası (_buttons.scss) oluşturuyoruz. Orada ne yaptığımızı gördün mü? Zihinsel olarak izole edilmesi mantıklı olan herhangi bir stil, için yeni bir dosya oluşturuyoruz. Bunu istediğimiz kadar endişe duymadan yapabiliriz, çünkü dosyalar yine de Sass ile birlikte birleştirilir.
Üç boyutlu düğme görünümü, virgülle ayrılmış bir dizi kutu gölgesiyle oluşturulur. Renkleri değiştirmek kolaydır, çünkü değişkenleri kullanın (tahmin ettiniz!).
$bottomSide: #3852b1; $rightSide: #203891; .button, #rcp_submit ( border: 0; // kill default styling background: #4e68c7; box-shadow: // right side // bottom 1px 0px 1px $rightSide, 0px 1px 1px $bottomSide, 2px 1px 1px $rightSide, 1px 2px 1px $bottomSide, 3px 2px 1px $rightSide, 2px 3px 1px $bottomSide, 4px 3px 1px $rightSide, 3px 4px 1px $bottomSide, 5px 4px 1px $rightSide, 4px 5px 1px $bottomSide, 6px 5px 1px $rightSide; )Aynı stili giriş öğesinde (dışarıdan ziyade sadece içeride) yansıtıyor ve 3B görünümü tamamlıyoruz. Gölgelerin ofset miktarı, $ ofset değişkenimizle eşleşir ve bu da bir miktar tasarım tutarlılığına yol açar.
Bu videoda değil, ancak daha sonra, girdilerdeki iç gölgelerin, tüm gölgeler yerine sadece iki kenarlıkla yapılmasının çok daha kolay olduğunu anlıyoruz (sınırlar bir açıda birbiriyle buluşuyor). Maalesef butonda mümkün değil.
Bu içsel giriş stili, site genelindeki tüm giriş stillerine iyi veya kötü şekilde nüfuz eder.