24.08.2015 ,
yorum yapılmadı ,
2.942 kez okundu.
Çalışmalarımda en çok sevdiğim CSS kodları yazmak. Çünkü işimi çok kolaylaştırıyor. Eskiden güzel bir tasarım kullanabilmek için photoshop olmazsa olmazdı. Fakat şimdi css ile birçok şeyi yapabiliyoruz. Örneğin üçken bir div oluşturma, divin üstünde sağında solunda bilmem neresinde üçken gösterme, yuvarlak resimler, yuvarlak kenarlıklar falan. Yuvarlak kenarlık mesela yeni kullanılmaya başladığında baya zorlanıyorduk :). Photoshopta önce bir tasarım yapıp sonra köşeleri tablo içerisinde kullanıyorduk falan baya uğraşıyorduk yani :). Şimdi iş bir border-radiusa bakar.
Neyse efendim bugün CSS ile transform özelliğini kullanacağım. İster yazılarınızı isterseniz de nesneleri transform özelliği ile istediğiniz kadar çevirebileceksiniz. Önce bir kare oluşturalım:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>anarsamadov.net</title>
</head>
<body>
<div class="kare">
Deneme yazısıdır
</div>
</body>
</html>Şimdi CSS kodlarımızı yazarak 200px genişliğinde ve 200px yüksekliğinde bir kare elde edeceğiz. Ardından karemizi 25 derece çevirerek işlemi tamamlayacağız:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>anarsamadov.net</title>
<style type="text/css">
body
{
margin:100px;
}
.kare
{
background-color:#FF0004;
width:200px;
height:200px;
-ms-transform: rotate(25deg); /* IE 9 */
-webkit-transform: rotate(25deg); /* Chrome, Safari, Opera */
transform: rotate(25deg);
text-align:center;
font-size:24px;
padding:15px;
}
</style>
</head>
<body>
<div class="kare">
Deneme yazısıdır
</div>
</body>
</html>CSS kodlarımızı açıklamak gerekirse transform: rotate (25deg); diyerek karemizi 25 derece çevirmiş olduk. İsterseniz burada 25 değerini (-) eksi işareti kullanarak da kullanabilirsiniz. Tabiki 25 değeri yerine 0-360 değerleri arasında istediğiniz değeri kullanabilirsiniz. Bunun dışında tüm tarayıcılarda çalışması için -ms-transform ve -webkit-transform özelliklerini kullanmanız gerekir.
Kaynak: w3schools
Yorum yapın..