CSS3 - Kullanıcı Arayüzü
Kullanıcı arabirimi özelliği, herhangi bir öğeyi birkaç standart kullanıcı arabirimi öğesinden birine değiştirmenize olanak tanır.
Css3 Kullanıcı arayüzünde kullanılan ortak özelliklerden bazıları.
Sr.No. | Değer ve Açıklama |
---|---|
1 | appearance Kullanıcının öğeleri kullanıcı arabirimi öğeleri olarak yapmasına izin vermek için kullanılır. |
2 | box-sizing Kullanıcıların alandaki öğeleri net bir şekilde sabitlemesini sağlar. |
3 | icon Alandaki simgeyi sağlamak için kullanılır. |
4 | resize Alanda bulunan öğeleri yeniden boyutlandırmak için kullanılır. |
5 | outline-offset Anahattın arkasını çizmek için kullanılır. |
6 | nav-down Tuş takımında aşağı ok tuşuna bastığınızda aşağı hareket etmek için kullanılır. |
7 | nav-left Tuş takımında sol ok tuşuna bastığınızda sola hareket etmek için kullanılır. |
8 | nav-right Tuş takımında sağ ok tuşuna bastığınızda sağa hareket etmek için kullanılır. |
9 | nav-up Tuş takımında yukarı ok tuşuna bastığınızda yukarı hareket etmek için kullanılır. |
Yeniden boyutlandırma özelliği örneği
Yeniden boyutlandırma özelliği, aşağıda gösterildiği gibi üç ortak değere sahiptir -
- horizontal
- vertical
- both
Kullanımı both css3 kullanıcı arayüzünde yeniden boyutlandırma özelliğindeki değer -
<html>
<head>
<style>
div {
border: 2px solid;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<div>TutorialsPoint.com</div>
</body>
</html>
Aşağıdaki sonucu üretecektir -
CSS3 Anahat uzaklığı
Dış çizgi, sınırın dışındaki öğenin etrafına bir çizgi çizmek anlamına gelir.
<html>
<head>
<style>
div {
margin: 20px;
padding: 10px;
width: 300px;
height: 100px;
border: 5px solid pink;
outline: 5px solid green;
outline-offset: 15px;
}
</style>
</head>
<body>
<div>TutorialsPoint</div>
</body>
</html>
Aşağıdaki sonucu üretecektir -