http___qqbilisim.com_yuvarlak-koseli-tablo-veya-kutu-olusturma__replytocom_9_1.xml
1.1 2.1 2.2 3.1 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 17.1 18.1 19.1 20.1 22.1 23.1 24.1 25.1 26.1 27.1 28.1 30.1 31.1 33.1 34.1 35.1 35.2 36.1 37.1
The purpose for this document is to establish guideslines and show visual examples of how we would like our user interface to look. All speci cations and examples are not concrete and exibility for the developer is granted. The goal is to provide consistency in information hierarchy and layout. This document is broken up into three sections: This section is to provide the foundation for all graphical elements contained within our user interface. The goal is to establish a hierarchy of information by di erentiating elements using size and color and organizing content using lines, shadows and color. Size: 24px Color: #196dea Font-Weight: 500 Font-Family: Helvetica Size: 14px Color: #7a7a7a Font-Weight: Normal Font-Family: Helvetica Size: 18px Font-Weight: Normal Font-Family: Helvetica All squares and rectangles have rounded corners with a radius of 2px. Body Background Color All Other Areas Background Color #ffffff Header has a white background with a 2px light grey drop shadow background-color: #ffffff; border-radius: 2px; border-style: solid 1px; -webkit-box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15); -moz-box-shadow: 2px 2px 0px 0px box-shadow: 2px 2px 0px 0px rgba(0,0,0,0.15); This section shows the element/page specifications as examples for how to assemble the user interface in our mock-up/skins pages. These are not pixel perfect and slight modifications are expected. Once again consistency is paramount. The task flow illustrates the most common user objective. Each task is a page that has been mocked up for visual reference for the final product based on our style guide and redlines/page specs.
1.1 2.1 3.1 4.1 5.1 7.1 9.1 10.1 11.1 12.1 13.1 14.1 15.1 16.1
Kutu veya tabloların köşelerini yuvarlama Aşağıdaki örnekte oluşturulan id seçici istenen table veya div elemanına uygulanarak, köşeleri yuvarlak hale getirilebilir. İçinde radius geçen satırlarda (kırmızı renkle gösterilen), köşeleri yuvarlama miktarı ayarlanmıştır. Shadow geçen satırlarda (turuncu gösterilen) ise tablo veya kutuya gölge verilmiştir. Yuvarlama ve gölge verme işi farklı tarayıcılar için, farklı kodlar ile yapılmıştır. Dolayısıyla her tarayıcıda aynı görüntüyü elde etmek için 3 satırı da yazmak gereklidir. Tarayıcıların eski versiyonlarında bu css kodları işe yaramayacaktır. #kutu1 background-color:#ffffff; width: 360px; padding: 7px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -moz-box-shadow: 0 0 5px #779900; -webkit-box-shadow: 0 0 5px #779900; box-shadow: 0 0 5px #779900;