<![CDATA[MyBB Depo Forum - Css]]> https://mybbdepo.com/ Fri, 01 May 2026 18:36:17 +0000 MyBB <![CDATA[CSS ile kutu oluşturmak]]> https://mybbdepo.com/css-ile-kutu-olusturmak-konusu.html Fri, 18 Jan 2019 20:06:13 +0300 https://mybbdepo.com/css-ile-kutu-olusturmak-konusu.html CSS kutu modeli elemanları şu şekildedir; 
resim

  • Content: Görüntülenecek içerik 
  • bölümü.Padding: Content etrafında bir boşluk. Daima saydam.
  • Border: Sınır çizgisi.
  • Margin: Sınırın dışı. Daima saydam.
Peki nasıl kullanacağız ?

1. Html bazlı bir dosya oluşturun. 

2. Şu kodları girin; 

Alıntı:
<html> <head> <style> div { background-color: lightpink; width: 400px; padding: 30px; border: 22px solid navy; padding: 25px; } </style> </head> <body> <div>İçerikte ne görüntülemek istersiniz?</div> </body> </html> 

Çıkan sonuç şu şekilde olacaktır ;

resim
]]> CSS kutu modeli elemanları şu şekildedir; 
resim

  • Content: Görüntülenecek içerik 
  • bölümü.Padding: Content etrafında bir boşluk. Daima saydam.
  • Border: Sınır çizgisi.
  • Margin: Sınırın dışı. Daima saydam.
Peki nasıl kullanacağız ?

1. Html bazlı bir dosya oluşturun. 

2. Şu kodları girin; 

Alıntı:
<html> <head> <style> div { background-color: lightpink; width: 400px; padding: 30px; border: 22px solid navy; padding: 25px; } </style> </head> <body> <div>İçerikte ne görüntülemek istersiniz?</div> </body> </html> 

Çıkan sonuç şu şekilde olacaktır ;

resim
]]> <![CDATA[Gradient Kullanımı]]> https://mybbdepo.com/gradient-kullanimi-konusu.html Thu, 17 Jan 2019 03:20:02 +0300 https://mybbdepo.com/gradient-kullanimi-konusu.html resim
Merhaba,

Bu konumda css'de gradient kullanımını detaylı bir şekilde göstereceğim. 

Kodlarımız şunlar:

Kod:
background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#866400), to(#FF4E28))


Şimdi gelelim, ney ne işe yarıyor.

"linear" = Merkezden gelen ışık

"80%" = Yatay başlangıç noktası

"20%" = Dikey başlangıç noktası

"10%" = Yatay bitiş noktası

"21%" = Dikey bitiş noktası

from(#renkkodu) = Başlangıç rengi

to(#renkkodu)) = Bitiş rengi

Benim size ilk verdiğim kod nasıl görünüyor?

resim
]]> resim
Merhaba,

Bu konumda css'de gradient kullanımını detaylı bir şekilde göstereceğim. 

Kodlarımız şunlar:

Kod:
background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#866400), to(#FF4E28))


Şimdi gelelim, ney ne işe yarıyor.

"linear" = Merkezden gelen ışık

"80%" = Yatay başlangıç noktası

"20%" = Dikey başlangıç noktası

"10%" = Yatay bitiş noktası

"21%" = Dikey bitiş noktası

from(#renkkodu) = Başlangıç rengi

to(#renkkodu)) = Bitiş rengi

Benim size ilk verdiğim kod nasıl görünüyor?

resim
]]> <![CDATA[a href renk değiştirme]]> https://mybbdepo.com/a-href-renk-degistirme-konusu.html Tue, 02 Oct 2018 18:45:22 +0300 https://mybbdepo.com/a-href-renk-degistirme-konusu.html Ben localhostta mybb forum kısmında eklediğim linkin renginde oynama yapmak istiyorum fakat bir türlü halledemedim , internette edindiğim bilgilerlerde bir işe yaramadı . a.hover olayı tüm forumu etkilediği için footerda kullanamıyorum . Siz ne önerirsiniz . Sadece footerde ekleyecegim link için beyaz olan rengin tıklamadan önce ki rengini belirlemek istiyorum]]> Ben localhostta mybb forum kısmında eklediğim linkin renginde oynama yapmak istiyorum fakat bir türlü halledemedim , internette edindiğim bilgilerlerde bir işe yaramadı . a.hover olayı tüm forumu etkilediği için footerda kullanamıyorum . Siz ne önerirsiniz . Sadece footerde ekleyecegim link için beyaz olan rengin tıklamadan önce ki rengini belirlemek istiyorum]]> <![CDATA[CSS ve jQuery kullanarak lightbox yapımı]]> https://mybbdepo.com/css-ve-jquery-kullanarak-lightbox-yapimi-konusu.html Wed, 19 Apr 2017 23:28:29 +0300 https://mybbdepo.com/css-ve-jquery-kullanarak-lightbox-yapimi-konusu.html


]]>


]]> <![CDATA[CSS Alt Elementler #5 - CSS Linkler ve Özellikleri (CSS Links)]]> https://mybbdepo.com/css-alt-elementler-5-css-linkler-ve-ozellikleri-css-links-konusu.html Tue, 25 Aug 2015 16:19:00 +0300 https://mybbdepo.com/css-alt-elementler-5-css-linkler-ve-ozellikleri-css-links-konusu.html
]]>
]]> <![CDATA[HTML Giriş, Başlangıç ve Temel]]> https://mybbdepo.com/html-giris-baslangic-ve-temel-konusu.html Sun, 23 Aug 2015 23:25:40 +0300 https://mybbdepo.com/html-giris-baslangic-ve-temel-konusu.html


Sorularınız varsa sorabilirsiniz
]]>


Sorularınız varsa sorabilirsiniz
]]> <![CDATA[CSS Giriş, Başlangıç ve Temel]]> https://mybbdepo.com/css-giris-baslangic-ve-temel-konusu.html Sun, 23 Aug 2015 23:24:20 +0300 https://mybbdepo.com/css-giris-baslangic-ve-temel-konusu.html


Videolu derslerim var flood yapmadan paylaşmaya çalışacağım umarım yararım olur
]]>


Videolu derslerim var flood yapmadan paylaşmaya çalışacağım umarım yararım olur
]]> <![CDATA[Ufufuk Daktilo Şeklinde Yazı Kodlama]]> https://mybbdepo.com/ufufuk-daktilo-seklinde-yazi-kodlama-konusu.html Mon, 01 Jun 2015 08:24:54 +0300 https://mybbdepo.com/ufufuk-daktilo-seklinde-yazi-kodlama-konusu.html
Kod:
p{
font:16px Georgia, 'Sans Serif';
color: blue;
}


.ukdktlo{
border-right: .1em solid green;
-webkit-animation: typing 5s steps(28, end);
width: 10em;
width: 13ch;
white-space: nowrap;
overflow: hidden;
transition: 1s;
}
.ukdktlo:hover {
color: green;
transition: 1s;
opacity: 0.3s;
}


@-webkit-keyframes typing {
from {
width:0;
}


Html Kodları

Kod:
<p class="ukdktlo"><b>Çanakkale-1915</b></p>

Css kodundaki 

width: 13ch; 
'ü yazının uzunluğuna ayarladım ch ile Gülümseme
13 rakamını yazacağının yazının boyunu yazın Çanakkale-1915 13 rakamlı olduğu için 13 rakamına ayarladım.


Sonuna çizgi ekliyor çünkü Gülümseme


İyi kullanımlar.




Demo adresi kapatmıştım.En yakında zamanda eklemeyi düşünüyorum.]]>
Kod:
p{
font:16px Georgia, 'Sans Serif';
color: blue;
}


.ukdktlo{
border-right: .1em solid green;
-webkit-animation: typing 5s steps(28, end);
width: 10em;
width: 13ch;
white-space: nowrap;
overflow: hidden;
transition: 1s;
}
.ukdktlo:hover {
color: green;
transition: 1s;
opacity: 0.3s;
}


@-webkit-keyframes typing {
from {
width:0;
}


Html Kodları

Kod:
<p class="ukdktlo"><b>Çanakkale-1915</b></p>

Css kodundaki 

width: 13ch; 
'ü yazının uzunluğuna ayarladım ch ile Gülümseme
13 rakamını yazacağının yazının boyunu yazın Çanakkale-1915 13 rakamlı olduğu için 13 rakamına ayarladım.


Sonuna çizgi ekliyor çünkü Gülümseme


İyi kullanımlar.




Demo adresi kapatmıştım.En yakında zamanda eklemeyi düşünüyorum.]]> <![CDATA[Sadece CSS ile Kodlanmış Manşet]]> https://mybbdepo.com/sadece-css-ile-kodlanmis-manset-konusu.html Fri, 17 Apr 2015 16:53:06 +0300 https://mybbdepo.com/sadece-css-ile-kodlanmis-manset-konusu.html

CSS'de nth-child mantığını kullanarak yaptığım manşettir.

HTML Kodları :
Kod:
<div id="slider">
<div>
<a href="#">
<img src="http://i.hizliresim.com/4ZpqLq.jpg">
<div class="baslik">Sniper Ghost Warrior 2 inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/LYvgpV.jpg">
<div class="baslik">Call of Duty Ghosts inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/vQa85D.jpg">
<div class="baslik">Hitman Absolution inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/89621d.jpg">
<div class="baslik">Call of duty black ops inceleme #Bölüm<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/4Zpq10.jpg">
<div class="baslik">Battlefield 3 inceleme #Bölüm 1<br>
</div>
</a>
</div>
</div>

Wordpress Kullananların Eklemesi Gereken Kod :

PHP Kod:
<div id="slider">
        <?php query_posts('posts_per_page=5'); while(have_posts()) : the_post(); ?>
 <div>
            <a href="<?php the_permalink(); ?>">
 <?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?>
            <div class="baslik"><?php the_title(); ?><br/></div>
            </a>
        </div>
 <?php endwhile; wp_reset_query(); ?>
</div> 


CSS Kodları :
Kod:
/* MANŞET KODLARI */
#slider{
margin-top: 49px;
}
#slider div a:hover{
opacity:0.6;
cursor:pointer;
transition: opacity .15s ease-in-out;
}
#slider div a{
transition: opacity .15s ease-in-out;
}
/* 1. SLİDER */
#slider div:nth-child(1){
width: 502px;
height: 317px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(1) img{
width: 100%;
height: 100%;
}
#slider div:nth-child(1) .baslik{
width: 100%;
margin-top: -50px;
padding: 13px;
height: 19px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 15px;
text-decoration: none;
border: medium none;
margin-left: 0px;
line-height: 21px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 2. MANŞET */
#slider div:nth-child(2){
width: 235px;
height: 154px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(2) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(2) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 3. MANŞET */
#slider div:nth-child(3){
width: 236px;
height: 154px;
margin-left: 9px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(3) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(3) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 4. MANŞET */
#slider div:nth-child(4){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(4) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(4) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 5. MANŞET */
#slider div:nth-child(5){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(5) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(5) .baslik{
width: 235px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* MANŞET KODLARI BİTİŞ */

Manşet'i indirmek isteyen alt taraftaki linkten indirebilir.

Slider Kodlarını İndir :
Kod:
http://s5.dosya.tc/server2/3touur/Sadece_CSS_ile_Kodlanmis_Manset.zip.html


Canlı Demo :

Kod:
http://jsfiddle.net/KadirKC/s8cz4m2c/
]]>

CSS'de nth-child mantığını kullanarak yaptığım manşettir.

HTML Kodları :
Kod:
<div id="slider">
<div>
<a href="#">
<img src="http://i.hizliresim.com/4ZpqLq.jpg">
<div class="baslik">Sniper Ghost Warrior 2 inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/LYvgpV.jpg">
<div class="baslik">Call of Duty Ghosts inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/vQa85D.jpg">
<div class="baslik">Hitman Absolution inceleme #Bölüm 1<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/89621d.jpg">
<div class="baslik">Call of duty black ops inceleme #Bölüm<br>
</div>
</a>
</div>
<div>
<a href="#">
<img src="http://i.hizliresim.com/4Zpq10.jpg">
<div class="baslik">Battlefield 3 inceleme #Bölüm 1<br>
</div>
</a>
</div>
</div>

Wordpress Kullananların Eklemesi Gereken Kod :

PHP Kod:
<div id="slider">
        <?php query_posts('posts_per_page=5'); while(have_posts()) : the_post(); ?>
 <div>
            <a href="<?php the_permalink(); ?>">
 <?php if ( has_post_thumbnail() ) {the_post_thumbnail();} ?>
            <div class="baslik"><?php the_title(); ?><br/></div>
            </a>
        </div>
 <?php endwhile; wp_reset_query(); ?>
</div> 


CSS Kodları :
Kod:
/* MANŞET KODLARI */
#slider{
margin-top: 49px;
}
#slider div a:hover{
opacity:0.6;
cursor:pointer;
transition: opacity .15s ease-in-out;
}
#slider div a{
transition: opacity .15s ease-in-out;
}
/* 1. SLİDER */
#slider div:nth-child(1){
width: 502px;
height: 317px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(1) img{
width: 100%;
height: 100%;
}
#slider div:nth-child(1) .baslik{
width: 100%;
margin-top: -50px;
padding: 13px;
height: 19px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 15px;
text-decoration: none;
border: medium none;
margin-left: 0px;
line-height: 21px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 2. MANŞET */
#slider div:nth-child(2){
width: 235px;
height: 154px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(2) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(2) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 3. MANŞET */
#slider div:nth-child(3){
width: 236px;
height: 154px;
margin-left: 9px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(3) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(3) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 4. MANŞET */
#slider div:nth-child(4){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(4) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(4) .baslik{
width: 236px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* 5. MANŞET */
#slider div:nth-child(5){
width: 236px;
height: 154px;
margin-top: 8px;
margin-left: 8px;
overflow:hidden;
float:left;
background:#F90;
}
#slider div:nth-child(5) img{
width: 100%;
height: 100%;
overflow:hidden
}
#slider div:nth-child(5) .baslik{
width: 235px;
height: 18px;
margin-top: -49px;
padding: 13px;
opacity: 0.9;
color: #FFF;
background: url(img/sefo.png)repeat;
font-family: Tahoma;
font-size: 12px;
text-decoration: none;
border: medium none;
margin-left: 0px;
box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.3) inset, 0px -16px 16px rgba(0, 0, 0, 0.1) inset;
}
/* MANŞET KODLARI BİTİŞ */

Manşet'i indirmek isteyen alt taraftaki linkten indirebilir.

Slider Kodlarını İndir :
Kod:
http://s5.dosya.tc/server2/3touur/Sadece_CSS_ile_Kodlanmis_Manset.zip.html


Canlı Demo :

Kod:
http://jsfiddle.net/KadirKC/s8cz4m2c/
]]> <![CDATA[CSS Çakışmasını önlemek?]]> https://mybbdepo.com/css-cakismasini-onlemek-konusu.html Sun, 15 Feb 2015 15:57:31 +0200 https://mybbdepo.com/css-cakismasini-onlemek-konusu.html En çok çakışan CSS tanımlı kodlar ul,ol,li
Kod:
ol,ul {margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;}

diğer yerde ise
Kod:
ol,ul {
    list-style:none;
}

olduğunda liste önündeki numaralandırma yada işeratler kaybolmaktadır.Her iki css kodlarınıda kullanmam şart fakat bu seferdede çakışma olduğundan allta verdiğim kodu ilk olarak kabul ediyor.
CSS kodlarını dışardan çağırıyorum bu arada aynı yerde değiller.
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />

Umarım anlatabilmişimdir.]]> En çok çakışan CSS tanımlı kodlar ul,ol,li
Kod:
ol,ul {margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 0;}

diğer yerde ise
Kod:
ol,ul {
    list-style:none;
}

olduğunda liste önündeki numaralandırma yada işeratler kaybolmaktadır.Her iki css kodlarınıda kullanmam şart fakat bu seferdede çakışma olduğundan allta verdiğim kodu ilk olarak kabul ediyor.
CSS kodlarını dışardan çağırıyorum bu arada aynı yerde değiller.
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/style1.css" />

Umarım anlatabilmişimdir.]]> <![CDATA[Sosyal Paylaşım Butonları [CSS]]]> https://mybbdepo.com/sosyal-paylasim-butonlari-css-konusu.html Wed, 12 Nov 2014 02:01:03 +0200 https://mybbdepo.com/sosyal-paylasim-butonlari-css-konusu.html resim
Örneği Görüntüle

Sosyal Paylaşım Butonları İndir

Kurulum: Kopyalanacak kodlar açıklama satırı ile belirtilmiştir. HTML kodlarını butonların görünmesini istediğiniz yere yapıştırın. Css kodlarını global.css'nin en altına ekleyebilirsiniz. "images" klasörünü forum ana dizinine atınız.]]> resim
Örneği Görüntüle

Sosyal Paylaşım Butonları İndir

Kurulum: Kopyalanacak kodlar açıklama satırı ile belirtilmiştir. HTML kodlarını butonların görünmesini istediğiniz yere yapıştırın. Css kodlarını global.css'nin en altına ekleyebilirsiniz. "images" klasörünü forum ana dizinine atınız.]]> <![CDATA[Orion İndex [CSS]]]> https://mybbdepo.com/orion-index-css-konusu.html Fri, 17 Oct 2014 18:52:48 +0300 https://mybbdepo.com/orion-index-css-konusu.html resim

Orion İndex [CSS]

Merhaba arkadaşlar, yaklaşık 3 index çalışmasından sonra neredeyse 2 – 3 hafta önce yapmış olduğum bu indexi sizlere sunuyorum. Tasarımda yazılım kısmı da bana ait arkadaşlar. Bu işlerde çok iyi değilim, tasarım değilde yazılım işinde. Kodlar çok karmakarışık hatalı oldu sanırsam. Fakat tarayıcılarda güzel ve verimli çalışıyor. Umarım işinize yarar.

resim

resim

Boyut: 814 KB
indir-download
Kod:
http://www.mediafire.com/download/bz4vo6ce7v5eemd/orion_-_grafikbook.net.rar

DEMO:
Kod:
http://www.grafikbook.net/orion/

Kaynak:
Kod:
http://www.grafikbook.net/grafikbook-orion-index/
]]> resim

Orion İndex [CSS]

Merhaba arkadaşlar, yaklaşık 3 index çalışmasından sonra neredeyse 2 – 3 hafta önce yapmış olduğum bu indexi sizlere sunuyorum. Tasarımda yazılım kısmı da bana ait arkadaşlar. Bu işlerde çok iyi değilim, tasarım değilde yazılım işinde. Kodlar çok karmakarışık hatalı oldu sanırsam. Fakat tarayıcılarda güzel ve verimli çalışıyor. Umarım işinize yarar.

resim

resim

Boyut: 814 KB
indir-download
Kod:
http://www.mediafire.com/download/bz4vo6ce7v5eemd/orion_-_grafikbook.net.rar

DEMO:
Kod:
http://www.grafikbook.net/orion/

Kaynak:
Kod:
http://www.grafikbook.net/grafikbook-orion-index/
]]> <![CDATA[Mybb Logo Efek Nasıl Verilir ?]]> https://mybbdepo.com/mybb-logo-efek-nasil-verilir-konusu.html Sat, 11 Oct 2014 21:28:23 +0300 https://mybbdepo.com/mybb-logo-efek-nasil-verilir-konusu.html
Sa Arkadaşlar http://tr.mybbdepo.com Yani Bu Sitedeki Logo Efekti Nasıl Yapa Bilirim ?


Şimdiden Herkeze Teşşekür Ederim...
]]>
Sa Arkadaşlar http://tr.mybbdepo.com Yani Bu Sitedeki Logo Efekti Nasıl Yapa Bilirim ?


Şimdiden Herkeze Teşşekür Ederim...
]]> <![CDATA[BossTR CSS Kullanımı [Makale + Döküman]]]> https://mybbdepo.com/bosstr-css-kullanimi-makale-dokuman-konusu.html Sat, 15 Mar 2014 20:47:32 +0200 https://mybbdepo.com/bosstr-css-kullanimi-makale-dokuman-konusu.html CSS Gösterme & Gizleme

Bazen HTML elementlerini kullanıcıdan gizlemek gerekebilir. Bir nesnenin görünme şekli ve gizlenmesini display komutu kullanarak yaparız.


Bir Elementi Gizlemek/Göstermemek

Bunun için kullanabileceğimiz iki kalıp ifade var:

visibility: hidden; - Element gizlenir ancak elementin sahip olduğu alan boşluk şeklinde sayfada görünecektir.
display: none; - Element gizlenir ve sahip olduğu alan da sayfada gösterilmez ve yer kaplamaz.
Block (Kutu) ve Inline (Satıriçi) İfadeler

Bir HTML elementi kutu yapısında olabilir. Bu durumda sayfada bulabildiği tüm genişliği kullanan bir kare alan kaplayacaklardır. DIV, P, H1 elementleri bu tarz elementlerdir.

Bazı elementler ise satır içinde sadece başladığı ve bittiği yere kadar alan kaplar. Bunlarsa satıriçi (inline) elementlerdir.


Bir Elementin Kutu Ya Da Satır İçi Olmasını Sağlamak

Element stiline display'ı kullanarak ekleyeceğimiz şu özellikler HTML elementinin kutu mu yoksa satır parçası mı olacağını belirtmemizi ve değiştirmemizi sağlar:

display: block; - Element kutu şeklinde alan kaplayacaktır. Kullanıldığı anda yeni bir satırdan başlar.
display: inline; - Element satır içinde yer alacaktır. Kullanıldığı satırda devam edecektir.
Element özelliklerini değiştirmekle ilgili iki örnek verelim. İlk örneğimizde aslında BLOCK (kutu) tarzı olan LI elementini satır içi ifadeye dönüştürüyoruz:


Kod:
.kutu { li { display: inline; } span { display: block; } }
Yukarıdaki ikinci örnekte ise aslında satır içi özelliğe sahip SPAN elementi BLOCK (kutu) yapısına dönüştürülmüştür.

CSS Hizalama (Align)

Kutu Özellikli Elementlerin Hizalanması

Kutu özellikli nesnelerde hizayı ayarlamak için kullanılabilir.

Fakat bu dersimizde farklı yollardan nasıl hizalama yapılır bundan bahsedeceğiz.


Margin Kullanarak Ortalamak

Kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı ortalanacaktır. Ancak bu durumda genişlik yani width hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:



Kod:
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }


Yukarıdaki örnek çalıştırıldığında tarayıcı otomatik olarak 15% sola 15% sağa boşluk verir ve genişliğe göre bunu oranlar.


Position Kullanarak Sağa ve Sola Yaslamak

Normal akıştan farklı olacak bir position: absolute; kodu kullanarak belirttiğimiz genişlikte bir kutunun sağa ya da sola yaslanmasını sağlayabiliriz. Örneğin 500 piksellik bir kutuyu sağa yaslamak isteseydik:



Kod:
.center { position: absolute; right; 0px; width: 500px; background-color:#b0e0e6; }


Sağdan 0 piksel boşluk bırakılacağını right: 0px; ile belirtmiş olduk.


Float Kullanarak Sağa ve Sola Yaslamak

Float HTML elementlerini sağa veya sola kaydırarak listelememizi sağlar. Kaydırma özelliğini hizalamak için kullanabiliriz:



Kod:
.right { float: right; width: 300px; background-color:#b0e0e6; }

CSS İçten Boşluk (Padding)

padding özelliği bir HTML elementinin kenarlarının içinde bir boşluk yaratmamızı sağlar.

Kenardan içerdeki bu boşlukları belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca belirlenebilir.

Tüm padding komutları:

padding - Hızlı kullanım
padding-top - Üstten boşluk
padding-right - Sağdan boşluk
padding-bottom - Alttan boşluk
padding-left - Soldan boşluk
Alabileceği değerler:

genişlik belirtme - px, em, pt gibi ölçülerle genişliği belirtme
yüzde kullanma (%) - İçerik genişliğine göre oranlar
Ayrı Ayrı İç Boşlukları Ayarlamak

Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için padding komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.


Kod:
.stilim { padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; }
Yukarıdaki örnekte üst ve alt boşluklar içerden 10 piksel yüksekliğinde, sağ ve sol boşluklar içerden 20 piksel genişliğinde olacaktır.


İç Boşlukları Ayarlamanın Kısa Yolu

Sadece padding kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:


Kod:
.stilim { /* Açıklama: padding: [üst] [sağ] [alt] [sol] */ padding: 10px 20px 10px 20px; }
Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:


Kod:
.stilim { /* Açıklama: padding: [üst|alt] [sağ|sol] */ padding: 10px 20px; }
CSS Arkaplanlar..

CSS'de Renk İfadeleri

CSS dosyamızda yer yer renkleri belirtmemiz gerekebilir. Bunun için çeşitli yollar var. Bunlardan en çok kullanılan üç tanesi:

Onaltılık (Hex) Renkler
RGB (Kırmızı, Yeşil, Mavi) Renkler
Tarayıcı Renk İsimleri
Onaltılık (Hex) Renkler: #000000 şeklinde önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen sembollerden oluşur. Örneğin #404040 bir rengi ifade etmektedir.

Bu renk kodlarına resim işlem programlarınız yardımıyla (photoshop, paint shop pro gibi) ulaşabilirsiniz.

RGB (Kırmızı, Yeşil, Mavi) Renkler: Bir renk oluştururken kırmızı, yeşil ve mavinin tonlarını belirterek renk oluşturmamızı sağlar. Örneğin rgb( 0, 0, 0 ) siyah rengi belirtir. Mavi bir renk elde etmek istediğimizde Red - Green - Blue üçlemesinde en sonda yer alan mavinin değerini arttırmamız yeterli olur. Yani rgb( 0, 0, 255 ) mavi rengi verir. Windows'daki Paint Brush (MS Paint) programı ve diğer resim editörleri yardımıyla RGB değerlerini alarak renk oluşturabilirsiniz.

Tarayıcı Renk İsimleri: İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz. Örneğin white beyaz, black siyah, blue mavi rengini verecektir.

Aşağıda renklerle ilgili örnek bir kullanım var:


Kod:
/* Koyu kırmızı */ p { color: #CC0000; } /* Yeşilin bir tonu */ div { color: line; } /* Mavi renk */ code { color: rgb( 0, 0, 255 ); }

background-color: Arkaplan Rengi

Bir elementin arkaplan rengini belirlememizi sağlar.


Kod:
div { background-color: #EFEFEF; }

background-image: Arkaplan Resmi

Bir element içinde arkaplan resmi kullanmamızı sağlar.


Kod:
body { background-image: url('resim.jpg'); }
Yukarıdaki gibi url('') yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı resim.jpg olarak gösterilmiştir.


background-repeat: Arkaplan Tekrarı / Döşeli

Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi sağlar. Dört kullanımı vardır:

no-repeat : Tekrar edilmeyecektir
repeat : Tekrarlanacaktır / döşenecektir
repeat-x : Sadece sağa doğru tekrar edecektir
repeat-y : Sadece aşağı doğru tekrar edecektir
Aşağıdaki kullanım örneğini inceleyelim:


Kod:
body { background-image: url('resim.jpg'); background-repeat: no-repeat; }
Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.


background-attachment: Arkaplan Sabitliği

Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliği kullanırız.


Kod:
body { background-image: url('resim.jpg'); background-attachment: fixed; }


background-position: Resmin Nereye Hizalanacağı

Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.


Kod:
body { background-image: url('resim.jpg'); background-repeat: no-repeat; background-position: right top; }

Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru hizalanacağını bildirir.


background: Arkaplan Belirlemenin Kısa Yolu

Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün. Bunun için kullanacağımız kod:background.


body { background: #000000 url('resim.jpg') no-repeat right top; }

CSS Pozisyon Belirleme (Position)

CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:

static - Hiçbir özellik belirtilmediyse
fixed - Sabit, tarayıcıya göre hareket etmeyen element
relative - Normal olması gereken pozisyona göre konum belirlemek
absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek
static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.


fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).


Kod:
p.fixed { position: fixed; top: 30px; right: 5px; }

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.


relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.


Kod:
h2 { position: relative; left: -20px; }

Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.


absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:


Kod:
h2 { position: absolute; left: 100px; top: 150px; }

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.


z-index: Elementin Önceliğini Belirlemek

Nasıl Photoshop tarzı programlarda katmanlarla çalışılıyor ve katmanların sırası belirlenebiliyorsa, CSS'de de z-index özelliği ile bunu belirleyip bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz.


Kod:
img { position: absolute; left: 0px; top: 0px; z-index: -1; }

Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır) olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul edilecektir.

Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder. Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha büyük olan -2 özelliğine sahip element daha üstte görünecektir.

CSS Sınırlamaları.

Genişlik ve Yükseklik

Bir nesnenin genişliğini width, yüksekliğini height kodu kullanarak belirleriz. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır.


Kod:
.kutu { width: 400px; height: 400px; }

Bu stili kullandığımız element 400x400'lük bir alanda yer alacaktır.


En Düşük Genişlik ve Yükseklik Değeri

Bir nesnenin minimum yani en düşük sahip olmak zorunda olduğu genişlik için min-width, yükseklik için min-height kodlarından faydalanırız.


Kod:
.kutu { min-width: 100px; min-height: 100px; }

Yukarıdaki örnekte elementin sahip olduğu yükseklik ve genişlik 100 pikselden düşük olursa otomatik olarak 100 piksele büyütülecektir.


En Yüksek Genişlik ve Yükseklik Değeri

Bir nesnenin maksimum yani en fazla sahip olabileceği genişlik için max-width, yükseklik içinmax-height kodlarından faydalanırız.


Kod:
.kutu { max-width: 500px; max-height: 200px; }

Örneği incelersek bu stile sahip bir HTML elementinin genişliği 500 pikseli, yüksekliği 200 pikseli aşamaz. Aşarsa özelliklerin uygulanmadığı başka bir alana taşacaktır. İstenirse sonraki konularda göreceğiniz overflow özelliği ile taşan kısmın gösterilmesi engellenebilir.

CSS Gruplama ve Üzerine Yazma

Gruplama

Birden fazla stilde sıklıkla kullanılan CSS komutları varsa, bunları toplu olarak yazıp özelliği bir kez yazma şansına sahibiz. Buna gruplama diyoruz. Örneğe bakalım:


Kod:
h1 { color: green; } h2 { color: green; } p { color: green; }

Yukarıda görüldüğü gibi üç element için de tek bir özellik belirtilmiş. Bu da rengin yeşil olması. Bu kodu kısaltmak için element ve stil adlarını aralara virgül gelecek şekilde sıralayabiliriz. Şöyle ki:


Kod:
h1, h2, p { color: green; }

Verdiğimiz elementlerin tamamı yeşil renkli görünecektir.


Üzerine Yazma

Bazen tüm elementleri kapsayacak kodlar yazarız. Ancak bir ya da birkaç element bundan farklı olmalıdır. İşte bu durumda tüm elementlerde geçerli olan özellikleri değiştirmemiz gerekebilir.

Şu şekil bir HTML kodumuz olsun:


Kod:
<p>Bu bir paragraf</p> <p>Bu da bir paragraf ancak farklı bir stili olacak</p> <p>Bu da bir paragraf ve 1. paragraf ile aynı olacak</p>

Tüm P elementleri için genel özellikleri belirledikten sonra, farklı olmasını istediğimiz 2. paragraf özelliklerini yeni bir stil adı oluşturarak yazıyoruz. Geriye kalan ilgili paragrafa class="stil_adı"eklemek olacaktır.


Kod:
p { font: 10pt Tahoma; color: gray; } .kirmizi p { color: red; }

Yukarıdaki kısım incelendiğinde tüm <P> elementleri 10 punto Tahoma ve gri olacaktır. Ancak class belirtip kirmizi yazdığımız P diğerlerinden farklı olarak kırmızı renkli olacaktır.


Alıntı:<p>Genel stile sahip paragraf</p> <p class="kirmizi">Kırmızı renkli olacak paragraf</p> <p>Diğer bir genel stile sahip paragraf</p>

CSS ile Kod Yazma Prensipleri

Kod Yazma Prensipleri ? Nedir ?
Öncelikle herhangi bir grafik programında hazırlanmış olan bir arayüzü, tarayıcı diline uygun hale getirmek için belirli standartlar kullanabiliriz.
Bu standartlar sayesinde daha iyi ve sağlıklı kodlar yazarız. Projeye daha sonradan gelecek geliştirici, bu taslak çalışma üstünde çalışabilir ve hızlı şekilde düzenleme yapmaya başlayabilir.
Fakat siz kod yazmayı bilmiyorsanız, bu iş feci şekilde bozulur. Kodlarınızı kimse okuyamaz ve yaptığınız iş bir daha geliştirilemez.
O yüzden her arayüz geliştirici kendine bir standart kod yazma tekniği oluşturmalıdır.

Faydası Nedir
Profesyonel anlamda bu tarz teknikler kullanılmaktadır. Hiçbir yorum satırının olmadığı css'ler oluşturmanızı tavsiye etmiyorum. Eğer şuan hobi olarak geliştirme yapıyorsanız, acilen kod yazma tekniğinizi geliştirmeniz gerekmektedir.

1-) Renk ve Tipografi
Öncelikle stilimizi yaratmadan önce arayüzde sıklıkla kullanacağımız, renkleri ve tipografimizi yorum sat[html]ırımıza almamız bize fayda sağlayacaktır.

PHP Kod:
/*------------------------------------------------------------------
# [Color codes]
 
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
 
/*------------------------------------------------------------------
[Typography]
 
Body copy:  1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers:  2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
 
Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/ 

2-) İçindekiler Sayfası Tarzında Index Hazırlama
Kodumuzun yapısını ileride daha hızlı anlayabilmek ve daha hızlı müdahale yapabilmek için bu tarzda bir index oluşturmalıyız. Burada ileride kullanmak isteyeceğimiz anahtar kelimeler belirleyebiliriz. Böylece ileride kodlar arasında daha hızlı bir tarama yapabilir ve daha düzenli kodlama yapabiliriz.

PHP Kod:
/*------------------------------------------------------------------
[Table of contents]
 
1. Body
 2. Header / #header
  2.1. Navigation / #navbar
 3. Content / #content
  3.1. Left column / #leftcolumn
  3.2. Right column / #rightcolumn
  3.3. Sidebar / #sidebar
   3.3.1. RSS / #rss
   3.3.2. Search / #search
   3.3.3. Boxes / .box
   3.3.4. Sideblog / #sideblog
   3.3.5. Advertisements / .ads
 4. Footer / #footer
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
 
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer 

3-) Açıklama Satırları
Kodlarımızın içinde açıklama satırı doldururken de dikkat etmemiz gereken bazı şeyler olduğunu düşünüyorum. Örneğin açıklama satırlarını derecelendirebiliriz.

PHP Kod:
/* Basit açıklama satırı / yorum */
 
/*
 * Grup halinde açıklama
 * Birden fazla satır açıklama içeren yorum.
 */
 
/* ==========================================================================
   Üst seviye öneminde açıklama satırı diyebiliriz sanırım :)
   ========================================================================== */ 

4-) Seçici Kullanımı
Daha kolay okunabilmesi için bu tarz seçicileri alt alta yazmayı, ve kodların bir blok girintisi olarak kaydııılmasını öneriyorum.

PHP Kod:
.selector-1,
.selector-2,
.selector-3 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    color: #000;
    background: #fff;
} 

Tanımlama yaparken sıralamayı alfabetik listeye göre yapabiliriz. Aradığımızda daha çabuk ulaşabiliriz fakat bir dezavantajı bulunuyor. Tanımlamalar ilişkili css özellikleri ayrılınca kodun anlamı bozulabiliyor.
Örneğin pozition-display, width-height, padding-margin, color-background gibi birbirleri ile ilişkili özellikleri bir arada tutmak daha avantajlıda olabilir. Okuduğum makalelerde her iki yöntemide kullanıyorlar. Fakat ilişkili özellikleri bir arada tutulması öneriliyor genellikle.

PHP Kod:
body {
/* Css tanimlamalarini alfabetik siraya gore yaparsak... */
 background: #fdfdfd;
 color: #333;
 font-size: 1em;
 line-height: 1.4;
 margin: 0;
 padding: 0;
}
 
/* Birbirleri ile iliskili ozellikler bir arada... */
.selector {
    position: relative;
    display: block;
    width: 50%;
    height: 100px;
    padding: 10px;
    border: 0;
    margin: 10px;
    color: #fff
    background: #000;
} 


Diğer Kurallar;

- Hex değeri tanımlamalarında küçük karakter kullanılmalı. #ccc , #000 gibi.
- Seçicilerde özellileri tırnak içine almalıyız. input[type="checkbox"]
- Mümkün olduğunca 0 değeri vermekten kaçınalım. margin: 0
- Olabildiğince İngilizce değerler kullanılmalıdır. ana-kapsül, altin_ustu, ana, baba, kardes, kapsül gibi saçma kelimeler kullanmaya gerek yok.
- Kısa isim vermekten kaçınmalı ve açıklayıcı olmalıyız. Örneğin .cb yerine column_body etiketini kullanabiliriz.
- Büyük karakterlere gerek olmadığını düşünüyorum.
- Test ve sürümlendirme için Grunt adında bir araç varmış.
Sizlerde bu tarzda oluşturduğunuz teknikler var ise konu altında paylaşıp, bu şablonu hep birlikte geliştirebiliriz.


Makale şahsıma aittir paylaşıldığında BossTR'den alıntıdır yazılırsa sevinirim sıradakı makalede görüşmek üzere...]]> CSS Gösterme & Gizleme

Bazen HTML elementlerini kullanıcıdan gizlemek gerekebilir. Bir nesnenin görünme şekli ve gizlenmesini display komutu kullanarak yaparız.


Bir Elementi Gizlemek/Göstermemek

Bunun için kullanabileceğimiz iki kalıp ifade var:

visibility: hidden; - Element gizlenir ancak elementin sahip olduğu alan boşluk şeklinde sayfada görünecektir.
display: none; - Element gizlenir ve sahip olduğu alan da sayfada gösterilmez ve yer kaplamaz.
Block (Kutu) ve Inline (Satıriçi) İfadeler

Bir HTML elementi kutu yapısında olabilir. Bu durumda sayfada bulabildiği tüm genişliği kullanan bir kare alan kaplayacaklardır. DIV, P, H1 elementleri bu tarz elementlerdir.

Bazı elementler ise satır içinde sadece başladığı ve bittiği yere kadar alan kaplar. Bunlarsa satıriçi (inline) elementlerdir.


Bir Elementin Kutu Ya Da Satır İçi Olmasını Sağlamak

Element stiline display'ı kullanarak ekleyeceğimiz şu özellikler HTML elementinin kutu mu yoksa satır parçası mı olacağını belirtmemizi ve değiştirmemizi sağlar:

display: block; - Element kutu şeklinde alan kaplayacaktır. Kullanıldığı anda yeni bir satırdan başlar.
display: inline; - Element satır içinde yer alacaktır. Kullanıldığı satırda devam edecektir.
Element özelliklerini değiştirmekle ilgili iki örnek verelim. İlk örneğimizde aslında BLOCK (kutu) tarzı olan LI elementini satır içi ifadeye dönüştürüyoruz:


Kod:
.kutu { li { display: inline; } span { display: block; } }
Yukarıdaki ikinci örnekte ise aslında satır içi özelliğe sahip SPAN elementi BLOCK (kutu) yapısına dönüştürülmüştür.

CSS Hizalama (Align)

Kutu Özellikli Elementlerin Hizalanması

Kutu özellikli nesnelerde hizayı ayarlamak için kullanılabilir.

Fakat bu dersimizde farklı yollardan nasıl hizalama yapılır bundan bahsedeceğiz.


Margin Kullanarak Ortalamak

Kutu özellikli elementler sağ ve sol dış boşluk (margin) değerleri auto yapılarak ortalanabilir. Tarayıcı bu durumda sağ ve sol boşlukları kendi ayarlayacağı için yazı ortalanacaktır. Ancak bu durumda genişlik yani width hiçbir zaman 100% olmamalıdır. Aksi takdirde kenarlık tarayıcı tarafından ayarlanamaz. Örneğe bakalım:



Kod:
.center { margin-left:auto; margin-right:auto; width:70%; background-color:#b0e0e6; }


Yukarıdaki örnek çalıştırıldığında tarayıcı otomatik olarak 15% sola 15% sağa boşluk verir ve genişliğe göre bunu oranlar.


Position Kullanarak Sağa ve Sola Yaslamak

Normal akıştan farklı olacak bir position: absolute; kodu kullanarak belirttiğimiz genişlikte bir kutunun sağa ya da sola yaslanmasını sağlayabiliriz. Örneğin 500 piksellik bir kutuyu sağa yaslamak isteseydik:



Kod:
.center { position: absolute; right; 0px; width: 500px; background-color:#b0e0e6; }


Sağdan 0 piksel boşluk bırakılacağını right: 0px; ile belirtmiş olduk.


Float Kullanarak Sağa ve Sola Yaslamak

Float HTML elementlerini sağa veya sola kaydırarak listelememizi sağlar. Kaydırma özelliğini hizalamak için kullanabiliriz:



Kod:
.right { float: right; width: 300px; background-color:#b0e0e6; }

CSS İçten Boşluk (Padding)

padding özelliği bir HTML elementinin kenarlarının içinde bir boşluk yaratmamızı sağlar.

Kenardan içerdeki bu boşlukları belirlerken üst, sol, alt ve sağ için ayrı ayrı belirlenebileceği gibi tek bir css koduyla da bunlar hızlıca belirlenebilir.

Tüm padding komutları:

padding - Hızlı kullanım
padding-top - Üstten boşluk
padding-right - Sağdan boşluk
padding-bottom - Alttan boşluk
padding-left - Soldan boşluk
Alabileceği değerler:

genişlik belirtme - px, em, pt gibi ölçülerle genişliği belirtme
yüzde kullanma (%) - İçerik genişliğine göre oranlar
Ayrı Ayrı İç Boşlukları Ayarlamak

Üst, sağ, alt ve sol boşlukları ayrı ayrı ayarlanabilir. Bunun için padding komutuna araya tire (-) koyarak ilgili yönün ingilizcesini yazıyoruz.


Kod:
.stilim { padding-top: 10px; padding-bottom: 10px; padding-left: 20px; padding-right: 20px; }
Yukarıdaki örnekte üst ve alt boşluklar içerden 10 piksel yüksekliğinde, sağ ve sol boşluklar içerden 20 piksel genişliğinde olacaktır.


İç Boşlukları Ayarlamanın Kısa Yolu

Sadece padding kullanarak hepsi için geçerli tek bir tane değer yazabildiğimiz gibi sırasıyla üst, sağ, alt, sol şeklinde değerler girerek de yukarıdaki dört kodun tamamını tek kodda yazabiliriz:


Kod:
.stilim { /* Açıklama: padding: [üst] [sağ] [alt] [sol] */ padding: 10px 20px 10px 20px; }
Yukarı ve alt değeri ile Sağ ve sol değeri aynı olan ifadelerde şu şekilde de kullanabileceğimizi unutmayalım:


Kod:
.stilim { /* Açıklama: padding: [üst|alt] [sağ|sol] */ padding: 10px 20px; }
CSS Arkaplanlar..

CSS'de Renk İfadeleri

CSS dosyamızda yer yer renkleri belirtmemiz gerekebilir. Bunun için çeşitli yollar var. Bunlardan en çok kullanılan üç tanesi:

Onaltılık (Hex) Renkler
RGB (Kırmızı, Yeşil, Mavi) Renkler
Tarayıcı Renk İsimleri
Onaltılık (Hex) Renkler: #000000 şeklinde önce diyez sonra 6 adet 0-9 ve A-F değerleri alabilen sembollerden oluşur. Örneğin #404040 bir rengi ifade etmektedir.

Bu renk kodlarına resim işlem programlarınız yardımıyla (photoshop, paint shop pro gibi) ulaşabilirsiniz.

RGB (Kırmızı, Yeşil, Mavi) Renkler: Bir renk oluştururken kırmızı, yeşil ve mavinin tonlarını belirterek renk oluşturmamızı sağlar. Örneğin rgb( 0, 0, 0 ) siyah rengi belirtir. Mavi bir renk elde etmek istediğimizde Red - Green - Blue üçlemesinde en sonda yer alan mavinin değerini arttırmamız yeterli olur. Yani rgb( 0, 0, 255 ) mavi rengi verir. Windows'daki Paint Brush (MS Paint) programı ve diğer resim editörleri yardımıyla RGB değerlerini alarak renk oluşturabilirsiniz.

Tarayıcı Renk İsimleri: İngilizce olarak belirlenmiş bazı renk adlarını yazarak renk elde edebilirsiniz. Örneğin white beyaz, black siyah, blue mavi rengini verecektir.

Aşağıda renklerle ilgili örnek bir kullanım var:


Kod:
/* Koyu kırmızı */ p { color: #CC0000; } /* Yeşilin bir tonu */ div { color: line; } /* Mavi renk */ code { color: rgb( 0, 0, 255 ); }

background-color: Arkaplan Rengi

Bir elementin arkaplan rengini belirlememizi sağlar.


Kod:
div { background-color: #EFEFEF; }

background-image: Arkaplan Resmi

Bir element içinde arkaplan resmi kullanmamızı sağlar.


Kod:
body { background-image: url('resim.jpg'); }
Yukarıdaki gibi url('') yazılarak arasında resmin adı veya yolu yazılır. Örnekte resmin adı resim.jpg olarak gösterilmiştir.


background-repeat: Arkaplan Tekrarı / Döşeli

Kullandığımız arkaplan resminin tekrar edip etmeyeceğini belirtmemizi sağlar. Dört kullanımı vardır:

no-repeat : Tekrar edilmeyecektir
repeat : Tekrarlanacaktır / döşenecektir
repeat-x : Sadece sağa doğru tekrar edecektir
repeat-y : Sadece aşağı doğru tekrar edecektir
Aşağıdaki kullanım örneğini inceleyelim:


Kod:
body { background-image: url('resim.jpg'); background-repeat: no-repeat; }
Yukarıdaki css kodu resmin tekrarlanmayacağını tarayıcıya bildirir.


background-attachment: Arkaplan Sabitliği

Bu kod kullandığımız arkaplanın sabit kalıp kalmayacağı hakkında ayar yapmamızı sağlar. Eğer özellik değerinin sabit kalmasını (yani sayfanın yerine göre değişmemesini) istiyorsak fixed özelliği kullanırız.


Kod:
body { background-image: url('resim.jpg'); background-attachment: fixed; }


background-position: Resmin Nereye Hizalanacağı

Eğer background-repeat özelliğini no-repeat olarak belirlediysek bu kod yardımıyla onun hizalanma şeklini belirleme şansına sahip oluruz.


Kod:
body { background-image: url('resim.jpg'); background-repeat: no-repeat; background-position: right top; }

Yukarıda yer alan kod arkaplan resminin right (sağ) ve top (üst) tarafa doğru hizalanacağını bildirir.


background: Arkaplan Belirlemenin Kısa Yolu

Yukarıdaki tüm özellikleri tek bir kodda kullanmanız mümkün. Bunun için kullanacağımız kod:background.


body { background: #000000 url('resim.jpg') no-repeat right top; }

CSS Pozisyon Belirleme (Position)

CSS aynı zamanda HTML elementlerinin diğer elementlere göre konumunu belirlemenizi sağlar. Bir HTML elementini diğerinin altına ya da üstüne alabilir ve bir HTML elementi fazla büyükse ne yapılacağına karar verebilirsiniz.

Tüm elementler üst (top), alt (bottom), sağ (right) ve sol (left) özelliklerine sahiptir. Ancak bu özellikler CSS'deki position özelliği belirtilmemişse işe yaramayacaktır. Ayrıca birbirinden farklı dört pozisyon belirleme yöntemi vardır. Bunlar:

static - Hiçbir özellik belirtilmediyse
fixed - Sabit, tarayıcıya göre hareket etmeyen element
relative - Normal olması gereken pozisyona göre konum belirlemek
absolute - Koordinat belirleyerek sayfada bir yere yerleştirmek
static: Olması Gerektiği Gibi Bırakmak

Eğer position CSS kodunu hiç kullanmadıysak HTML nesneleri olduğu gibi sıralanacaktır. Bu şekilde olursa HTML elementinin alt, üst, sağ ve sol özellikleri belirlenemez.


fixed: Sabitlemek

Bir HTML elementini tarayıcı ekranına sabitlemek. Kaydıracı (scroll) kullansanız bile o element orada yer alacaktır (hareket etmez).


Kod:
p.fixed { position: fixed; top: 30px; right: 5px; }

Yukarıdaki kod çalıştırılırsa "fixed" özelliğine sahip P elementinin sağdan 5 piksel üstten 30 piksel noktasında sabit bir şekilde kaldığını göreceğiz.

Bu tarz elementler bir diğerinin üzerine geçebilir ve diğerini kapatabilir.


relative: Normal Pozisyona Göre Konumlama

Bir HTML elementini sahip olduğu pozisyondan yukarı, aşağı, sağa ve sola doğru ayarlamamızı sağlar. Elementin kapladığı alan tarayıcı tarafından tutulmuştur, dolayısıyla bunda bir değişiklik olmaz. Ancak biz sağ, sol, alt ve üst tarafa doğru hareket ettirebiliriz.


Kod:
h2 { position: relative; left: -20px; }

Yukarıdaki örnekte H2 elementi kullanıldığı yerden 20 piksel sola kayacak ve oradan başlayacaktır. Bu durumda diğer elementlerin alanına girebilecektir.


absolute: Herhangi Bir Konum Belirleme

Herhangi bir elemente göre ya da element belirtilmediyse tüm HTML sayfasına göre yer alacağı konum piksel olarak ifade edilir. Örneğin H2 elementinin sayfanın başlangıç noktasının (0, 0) 100 piksel sağında ve 150 piksel altında (100, 150) olmasını istiyorsak:


Kod:
h2 { position: absolute; left: 100px; top: 150px; }

Bu tarz belirlenen pozisyonlar RELATIVE'den farklı olarak alan kaplamazlar. Yani sayfamızdan soyutlanmışlardır. Bağımsız hareket eden ve sadece tek bir başlangıç noktasını dikkate alan elementler gibi düşünülebilir.

"Absolute" özellikli elementler diğer elementlerin üzerine geçebilir ve onları kapayabilir.


z-index: Elementin Önceliğini Belirlemek

Nasıl Photoshop tarzı programlarda katmanlarla çalışılıyor ve katmanların sırası belirlenebiliyorsa, CSS'de de z-index özelliği ile bunu belirleyip bir HTML elementinin diğerinin üzerinde ya da altında görünmesini sağlayabiliriz.


Kod:
img { position: absolute; left: 0px; top: 0px; z-index: -1; }

Yukarıda -1 değeri ile belirttiğimiz resim diğer tüm elementlerin altında görünecektir. Çünkü diğer elementlerde bu değer belirtilmediyse 0 (sıfır) olarak algılanacaktır. Buna karşın bu element -1 olduğu için alt katman kabul edilecektir.

Negatif değerler en alt katmanı pozitif değerler üst katmanları ifade eder. Örneğin biri -2 biri -5 olan iki z-index özelliğine sahip elementten daha büyük olan -2 özelliğine sahip element daha üstte görünecektir.

CSS Sınırlamaları.

Genişlik ve Yükseklik

Bir nesnenin genişliğini width, yüksekliğini height kodu kullanarak belirleriz. Alacağı değer piksel, punto, Yüzde gibi bir ölçü değeri olacaktır.


Kod:
.kutu { width: 400px; height: 400px; }

Bu stili kullandığımız element 400x400'lük bir alanda yer alacaktır.


En Düşük Genişlik ve Yükseklik Değeri

Bir nesnenin minimum yani en düşük sahip olmak zorunda olduğu genişlik için min-width, yükseklik için min-height kodlarından faydalanırız.


Kod:
.kutu { min-width: 100px; min-height: 100px; }

Yukarıdaki örnekte elementin sahip olduğu yükseklik ve genişlik 100 pikselden düşük olursa otomatik olarak 100 piksele büyütülecektir.


En Yüksek Genişlik ve Yükseklik Değeri

Bir nesnenin maksimum yani en fazla sahip olabileceği genişlik için max-width, yükseklik içinmax-height kodlarından faydalanırız.


Kod:
.kutu { max-width: 500px; max-height: 200px; }

Örneği incelersek bu stile sahip bir HTML elementinin genişliği 500 pikseli, yüksekliği 200 pikseli aşamaz. Aşarsa özelliklerin uygulanmadığı başka bir alana taşacaktır. İstenirse sonraki konularda göreceğiniz overflow özelliği ile taşan kısmın gösterilmesi engellenebilir.

CSS Gruplama ve Üzerine Yazma

Gruplama

Birden fazla stilde sıklıkla kullanılan CSS komutları varsa, bunları toplu olarak yazıp özelliği bir kez yazma şansına sahibiz. Buna gruplama diyoruz. Örneğe bakalım:


Kod:
h1 { color: green; } h2 { color: green; } p { color: green; }

Yukarıda görüldüğü gibi üç element için de tek bir özellik belirtilmiş. Bu da rengin yeşil olması. Bu kodu kısaltmak için element ve stil adlarını aralara virgül gelecek şekilde sıralayabiliriz. Şöyle ki:


Kod:
h1, h2, p { color: green; }

Verdiğimiz elementlerin tamamı yeşil renkli görünecektir.


Üzerine Yazma

Bazen tüm elementleri kapsayacak kodlar yazarız. Ancak bir ya da birkaç element bundan farklı olmalıdır. İşte bu durumda tüm elementlerde geçerli olan özellikleri değiştirmemiz gerekebilir.

Şu şekil bir HTML kodumuz olsun:


Kod:
<p>Bu bir paragraf</p> <p>Bu da bir paragraf ancak farklı bir stili olacak</p> <p>Bu da bir paragraf ve 1. paragraf ile aynı olacak</p>

Tüm P elementleri için genel özellikleri belirledikten sonra, farklı olmasını istediğimiz 2. paragraf özelliklerini yeni bir stil adı oluşturarak yazıyoruz. Geriye kalan ilgili paragrafa class="stil_adı"eklemek olacaktır.


Kod:
p { font: 10pt Tahoma; color: gray; } .kirmizi p { color: red; }

Yukarıdaki kısım incelendiğinde tüm <P> elementleri 10 punto Tahoma ve gri olacaktır. Ancak class belirtip kirmizi yazdığımız P diğerlerinden farklı olarak kırmızı renkli olacaktır.


Alıntı:<p>Genel stile sahip paragraf</p> <p class="kirmizi">Kırmızı renkli olacak paragraf</p> <p>Diğer bir genel stile sahip paragraf</p>

CSS ile Kod Yazma Prensipleri

Kod Yazma Prensipleri ? Nedir ?
Öncelikle herhangi bir grafik programında hazırlanmış olan bir arayüzü, tarayıcı diline uygun hale getirmek için belirli standartlar kullanabiliriz.
Bu standartlar sayesinde daha iyi ve sağlıklı kodlar yazarız. Projeye daha sonradan gelecek geliştirici, bu taslak çalışma üstünde çalışabilir ve hızlı şekilde düzenleme yapmaya başlayabilir.
Fakat siz kod yazmayı bilmiyorsanız, bu iş feci şekilde bozulur. Kodlarınızı kimse okuyamaz ve yaptığınız iş bir daha geliştirilemez.
O yüzden her arayüz geliştirici kendine bir standart kod yazma tekniği oluşturmalıdır.

Faydası Nedir
Profesyonel anlamda bu tarz teknikler kullanılmaktadır. Hiçbir yorum satırının olmadığı css'ler oluşturmanızı tavsiye etmiyorum. Eğer şuan hobi olarak geliştirme yapıyorsanız, acilen kod yazma tekniğinizi geliştirmeniz gerekmektedir.

1-) Renk ve Tipografi
Öncelikle stilimizi yaratmadan önce arayüzde sıklıkla kullanacağımız, renkleri ve tipografimizi yorum sat[html]ırımıza almamız bize fayda sağlayacaktır.

PHP Kod:
/*------------------------------------------------------------------
# [Color codes]
 
# Dark grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light blue (top navigation) #CCCCFF
# Mid grey: #666666
# */
 
/*------------------------------------------------------------------
[Typography]
 
Body copy:  1.2em/1.6em Verdana, Helvetica, Arial, Geneva, sans-serif;
Headers:  2.7em/1.3em Helvetica, Arial, "Lucida Sans Unicode", Verdana, sans-serif;
Input, textarea: 1.1em Helvetica, Verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, Trebuchet MS, Arial, sans-serif;
 
Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/ 

2-) İçindekiler Sayfası Tarzında Index Hazırlama
Kodumuzun yapısını ileride daha hızlı anlayabilmek ve daha hızlı müdahale yapabilmek için bu tarzda bir index oluşturmalıyız. Burada ileride kullanmak isteyeceğimiz anahtar kelimeler belirleyebiliriz. Böylece ileride kodlar arasında daha hızlı bir tarama yapabilir ve daha düzenli kodlama yapabiliriz.

PHP Kod:
/*------------------------------------------------------------------
[Table of contents]
 
1. Body
 2. Header / #header
  2.1. Navigation / #navbar
 3. Content / #content
  3.1. Left column / #leftcolumn
  3.2. Right column / #rightcolumn
  3.3. Sidebar / #sidebar
   3.3.1. RSS / #rss
   3.3.2. Search / #search
   3.3.3. Boxes / .box
   3.3.4. Sideblog / #sideblog
   3.3.5. Advertisements / .ads
 4. Footer / #footer
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]
 
1. Body
2. Header / #header
3. Navigation / #navbar
4. Content / #content
5. Left column / #leftcolumn
6. Right column / #rightcolumn
7. Sidebar / #sidebar
8. RSS / #rss
9. Search / #search
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer 

3-) Açıklama Satırları
Kodlarımızın içinde açıklama satırı doldururken de dikkat etmemiz gereken bazı şeyler olduğunu düşünüyorum. Örneğin açıklama satırlarını derecelendirebiliriz.

PHP Kod:
/* Basit açıklama satırı / yorum */
 
/*
 * Grup halinde açıklama
 * Birden fazla satır açıklama içeren yorum.
 */
 
/* ==========================================================================
   Üst seviye öneminde açıklama satırı diyebiliriz sanırım :)
   ========================================================================== */ 

4-) Seçici Kullanımı
Daha kolay okunabilmesi için bu tarz seçicileri alt alta yazmayı, ve kodların bir blok girintisi olarak kaydııılmasını öneriyorum.

PHP Kod:
.selector-1,
.selector-2,
.selector-3 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    color: #000;
    background: #fff;
} 

Tanımlama yaparken sıralamayı alfabetik listeye göre yapabiliriz. Aradığımızda daha çabuk ulaşabiliriz fakat bir dezavantajı bulunuyor. Tanımlamalar ilişkili css özellikleri ayrılınca kodun anlamı bozulabiliyor.
Örneğin pozition-display, width-height, padding-margin, color-background gibi birbirleri ile ilişkili özellikleri bir arada tutmak daha avantajlıda olabilir. Okuduğum makalelerde her iki yöntemide kullanıyorlar. Fakat ilişkili özellikleri bir arada tutulması öneriliyor genellikle.

PHP Kod:
body {
/* Css tanimlamalarini alfabetik siraya gore yaparsak... */
 background: #fdfdfd;
 color: #333;
 font-size: 1em;
 line-height: 1.4;
 margin: 0;
 padding: 0;
}
 
/* Birbirleri ile iliskili ozellikler bir arada... */
.selector {
    position: relative;
    display: block;
    width: 50%;
    height: 100px;
    padding: 10px;
    border: 0;
    margin: 10px;
    color: #fff
    background: #000;
} 


Diğer Kurallar;

- Hex değeri tanımlamalarında küçük karakter kullanılmalı. #ccc , #000 gibi.
- Seçicilerde özellileri tırnak içine almalıyız. input[type="checkbox"]
- Mümkün olduğunca 0 değeri vermekten kaçınalım. margin: 0
- Olabildiğince İngilizce değerler kullanılmalıdır. ana-kapsül, altin_ustu, ana, baba, kardes, kapsül gibi saçma kelimeler kullanmaya gerek yok.
- Kısa isim vermekten kaçınmalı ve açıklayıcı olmalıyız. Örneğin .cb yerine column_body etiketini kullanabiliriz.
- Büyük karakterlere gerek olmadığını düşünüyorum.
- Test ve sürümlendirme için Grunt adında bir araç varmış.
Sizlerde bu tarzda oluşturduğunuz teknikler var ise konu altında paylaşıp, bu şablonu hep birlikte geliştirebiliriz.


Makale şahsıma aittir paylaşıldığında BossTR'den alıntıdır yazılırsa sevinirim sıradakı makalede görüşmek üzere...]]> <![CDATA[Font Awesome Kullanımı]]> https://mybbdepo.com/font-awesome-kullanimi-konusu.html Sun, 13 Oct 2013 21:53:54 +0300 https://mybbdepo.com/font-awesome-kullanimi-konusu.html Font Awesome Nedir?

Font awesome fontla yapılmış icon sistemi diyebiliriz, günümüzde bir çok çalışma ve projelerde yoğun olarak kullanılıyor ve her geçen gün kullanımı artıyor. ( Detaylı bilgi )

Font Awesome Nasıl Kullanılır?

Font awesome iconlarını kendi web sitemize eklememiz için aşağıdaki adımları uygulayınız;
  • “font-awesome.css” css dosyasını web sitemize eklemek. Burada belirtmek isterim ki css kullanmayanlar için less (Less Nedir? Nasıl kullanılır ?) veya sass (Sass Nedir?) versiyonlarıda mevcuttur.
  • “font-awesome.css” dosyasındaki @font-face olarak belirttiğimiz fontların konumlarını ayarlamak.

Font Awesome Kullanımında Teknik Bilgiler:
  • İconların boylarını büyütmek istiyorsanız yapmanız gereken tek şey i tagına önceden tanımlanmış boy class’ları eklemek. Önceden tanımlanmış boylar (icon-large, icon-2x, icon-3x, icon-4x);
Kod:
<i class="icon-cloud-download icon-large"></i>
  • İconlara animasyon vermek için yapmanız gereken tek şey i tagına “icon-spin” classını eklemek. Bu özellik ie7,ie8,ie9 tarayıcılarında çalışmamaktadır.
Kod:
<i class="icon-cloud-download icon-spin"></i>
  • Eklediğimiz icona border vermek için;
Kod:
<i class="icon-cloud-download icon-border"></i>

indir-download

Font Awesome İndir

Kaynak: mdtrdl.com
Kaynak: mybbturko.com]]> Font Awesome Nedir?

Font awesome fontla yapılmış icon sistemi diyebiliriz, günümüzde bir çok çalışma ve projelerde yoğun olarak kullanılıyor ve her geçen gün kullanımı artıyor. ( Detaylı bilgi )

Font Awesome Nasıl Kullanılır?

Font awesome iconlarını kendi web sitemize eklememiz için aşağıdaki adımları uygulayınız;
  • “font-awesome.css” css dosyasını web sitemize eklemek. Burada belirtmek isterim ki css kullanmayanlar için less (Less Nedir? Nasıl kullanılır ?) veya sass (Sass Nedir?) versiyonlarıda mevcuttur.
  • “font-awesome.css” dosyasındaki @font-face olarak belirttiğimiz fontların konumlarını ayarlamak.

Font Awesome Kullanımında Teknik Bilgiler:
  • İconların boylarını büyütmek istiyorsanız yapmanız gereken tek şey i tagına önceden tanımlanmış boy class’ları eklemek. Önceden tanımlanmış boylar (icon-large, icon-2x, icon-3x, icon-4x);
Kod:
<i class="icon-cloud-download icon-large"></i>
  • İconlara animasyon vermek için yapmanız gereken tek şey i tagına “icon-spin” classını eklemek. Bu özellik ie7,ie8,ie9 tarayıcılarında çalışmamaktadır.
Kod:
<i class="icon-cloud-download icon-spin"></i>
  • Eklediğimiz icona border vermek için;
Kod:
<i class="icon-cloud-download icon-border"></i>

indir-download

Font Awesome İndir

Kaynak: mdtrdl.com
Kaynak: mybbturko.com]]> <![CDATA[Renkli 3'Lü Duyuru [CSS]]]> https://mybbdepo.com/renkli-3-lu-duyuru-css-konusu.html Thu, 05 Sep 2013 01:14:24 +0300 https://mybbdepo.com/renkli-3-lu-duyuru-css-konusu.html Kodu,
AdminCp=>Temalar Şablonlar=>Kullandığınız tema=>Global.css en altına ekle
Alıntı:.duyuru1 {
background: #00b9f2;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
}

.duyuru2 {
background: #f5f99a;
text-align: center;
border-bottom: 5px dashed #dedefe;
border-left: 5px dashed #dedefe;
border-right: 5px dashed #dedefe;
border-radius: 10px;
}

.duyuru3 {
background: red;
text-align: center;
border-bottom: 5px dashed #dedefe;
border-left: 5px dashed #dedefe;
border-right: 5px dashed #dedefe;
border-radius: 10px;
}

AdminCp=>Temalar Şablonlar=>Şablonlar=>Kullandığınız tema=>index şablonu:
[$header] in altına [$forums] un üstüne ekleyin
Alıntı:<div class = "duyuru1"><font color = "red" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
<div class = "duyuru2"><font color = "green" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
<div class = "duyuru3"><font color = "blue" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
resim
Not:Bu kod üçlü kullanıım için yazılmıştır.Tek eklemek için

Mavi Duyuru:
CSS
Alıntı:.maviduyuru {
background: #00b9f2;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
}
HTML
Alıntı:<div class = "maviduyuru"><font color = "red" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
---------------------------------------
Sarı Duyuru
CSS
Alıntı:.sariduyuru {
background: #f5f99a;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
text-align: center;
}

HTML
Alıntı:<div class = "sariduyuru"><font color = "green" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>

----------------------------------------
Kırmızı Duyuru
CSS
Alıntı:.kirmiziduyuru {
background: red;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
text-align: center;
}

HTML
Alıntı:<div class = "kirmiziduyuru"><font color = "blue" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
]]> Kodu,
AdminCp=>Temalar Şablonlar=>Kullandığınız tema=>Global.css en altına ekle
Alıntı:.duyuru1 {
background: #00b9f2;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
}

.duyuru2 {
background: #f5f99a;
text-align: center;
border-bottom: 5px dashed #dedefe;
border-left: 5px dashed #dedefe;
border-right: 5px dashed #dedefe;
border-radius: 10px;
}

.duyuru3 {
background: red;
text-align: center;
border-bottom: 5px dashed #dedefe;
border-left: 5px dashed #dedefe;
border-right: 5px dashed #dedefe;
border-radius: 10px;
}

AdminCp=>Temalar Şablonlar=>Şablonlar=>Kullandığınız tema=>index şablonu:
[$header] in altına [$forums] un üstüne ekleyin
Alıntı:<div class = "duyuru1"><font color = "red" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
<div class = "duyuru2"><font color = "green" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
<div class = "duyuru3"><font color = "blue" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
resim
Not:Bu kod üçlü kullanıım için yazılmıştır.Tek eklemek için

Mavi Duyuru:
CSS
Alıntı:.maviduyuru {
background: #00b9f2;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
}
HTML
Alıntı:<div class = "maviduyuru"><font color = "red" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
---------------------------------------
Sarı Duyuru
CSS
Alıntı:.sariduyuru {
background: #f5f99a;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
text-align: center;
}

HTML
Alıntı:<div class = "sariduyuru"><font color = "green" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>

----------------------------------------
Kırmızı Duyuru
CSS
Alıntı:.kirmiziduyuru {
background: red;
text-align: center;
border: 5px dashed #dedefe;
border-radius: 10px;
text-align: center;
}

HTML
Alıntı:<div class = "kirmiziduyuru"><font color = "blue" size="5"><span style="text-shadow: 0px 0px 8px ;">DENEME DUYURU</span></font></a></div>
]]> <![CDATA[Son Eklenen Konular [CSS]]]> https://mybbdepo.com/son-eklenen-konular-css-konusu.html Thu, 15 Aug 2013 17:35:04 +0300 https://mybbdepo.com/son-eklenen-konular-css-konusu.html

Kod:
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="200" align="left" valign="top" background="http://img.webme.com/pic/g/grafikdizayn/cgp_11.png"><table width="500" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="34" height="30">&nbsp;</td>
        <td width="426">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">1. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">2. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">3. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">4. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">5. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">6. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">7. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">8. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
]]>

Kod:
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td height="200" align="left" valign="top" background="http://img.webme.com/pic/g/grafikdizayn/cgp_11.png"><table width="500" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="34" height="30">&nbsp;</td>
        <td width="426">&nbsp;</td>
        <td width="40">&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">1. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">2. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">3. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">4. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">5. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">6. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">7. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td height="19">&nbsp;</td>
        <td align="left" valign="middle"><a href="http://$Link Buraya"><span style="font-family: 'Calibri'; "><span style="font-size: 13px; ">8. Konunun İsmi Buraya</span></span></a></td>
        <td>&nbsp;</td>
      </tr>
    </table></td>
  </tr>
</table>
]]> <![CDATA[Google Tarzı Menü İstek]]> https://mybbdepo.com/google-tarzi-menu-istek-konusu.html Wed, 14 Aug 2013 12:30:00 +0300 https://mybbdepo.com/google-tarzi-menu-istek-konusu.html <![CDATA[CSS3 - Animasyonlu ve Hover Efektli Menü Tasarımı]]> https://mybbdepo.com/css3-animasyonlu-ve-hover-efektli-menu-tasarimi-konusu.html Tue, 13 Aug 2013 18:44:32 +0300 https://mybbdepo.com/css3-animasyonlu-ve-hover-efektli-menu-tasarimi-konusu.html Sadece CSS ve HTML öğelerini kullanacağız.
Başlamadan önce demo adresini verelim, ekran görüntüsünde menünün özellikeri görünmez çünkü.

Demo Link Demo :
Kod:
http://teknolojio.com/dosyalar/onizleme/css3-animasyon-menu/

Açıklama-Detay Kurulum
Temalar Şablonlardan, temanızını seçtikten sonra global.css ' ye girin. Gelişmiş düzenlemeye tıkladıktan sonra en alta aşağıdaki kodları ekleyin ve kapatın.

Kod:
<style type="text/css">
            body{background-color:#EEEEEE;font-family:arial;font-size:13px;margin:0;padding:0;}
            a:hover{color:white;}
            #catmenu{background-color:#e5e5e5;margin:20px 0px 0px 20px;box-shadow:2px 2px 3px #AAAAAA;display:inline-block;}
            a{text-decoration:none;color:black;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;}
            #catmenu ul{margin:0;padding:0;}
            #catmenu ul li{list-style:none;float:left;border-right:1px solid #EEEEEE;}
            #catmenu ul li#son{border-right:none;}
            #catmenu ul li a#teknoloji{background:url(images/teknoloji.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#teknoloji:hover{background:url(images/teknoloji-beyaz.png)no-repeat center 10px;background-color:red;}
            #catmenu ul li a#internet{background:url(images/internet.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#internet:hover{background:url(images/internet-beyaz.png)no-repeat center 10px;background-color:blue;}
            #catmenu ul li a#bilgisayar{background:url(images/bilgisayar.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#bilgisayar:hover{background:url(images/bilgisayar-beyaz.png)no-repeat center 10px;background-color:green;}
            #catmenu ul li a#yazilim{background:url(images/yazilim.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#yazilim:hover{background:url(images/yazilim-beyaz.png)no-repeat center 10px;background-color:gray;}
            #catmenu ul li a#donanim{background:url(images/donanim.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#donanim:hover{background:url(images/donanim-beyaz.png)no-repeat center 10px;background-color:orange;}

        </style>

Şablonlardan temanızı seçtikten sonra, Ana Sayfa Şablonlar=> index şablonunu açın ve {$header} ' ın altına aşağıdaki kodları ekleyin.

Kod:
<div id="catmenu">
            <ul>
                <li><a id="teknoloji" href="#">Teknoloji</a></li>
                <li><a id="internet" href="#">İnternet</a></li>
                <li><a id="bilgisayar" href="#">Bilgisayar</a></li>
                <li><a id="yazilim" href="#">Yazılım</a></li>
    
            </ul>
        </div>

Son olarak resimlerimizi eklemek kaldı.

Hover efekti için, bir siyah birde beyaz icon kullanacaksınız. Kullanmak istemiyorsanız aynı iconun adını resimadı-beyaz.png olarak kaydedip images klasörüne atmak zorundasınız.

Ekte teknoloji,internet,bilgisayar,yazılım siyah ve beyaz ikonları mevcut. İndirerek images'e attıktan sonra yeni animasyonlu menünüzü kullanabilirsiniz.

Kolay gelsin.

.zip   animasyonmenu.zip (Dosya Boyutu: 26.78 KB / İndirme Sayısı: 23)

* Kodların asıl yaratıcısı Sinan Yorulmaz'dır.]]> Sadece CSS ve HTML öğelerini kullanacağız.
Başlamadan önce demo adresini verelim, ekran görüntüsünde menünün özellikeri görünmez çünkü.

Demo Link Demo :
Kod:
http://teknolojio.com/dosyalar/onizleme/css3-animasyon-menu/

Açıklama-Detay Kurulum
Temalar Şablonlardan, temanızını seçtikten sonra global.css ' ye girin. Gelişmiş düzenlemeye tıkladıktan sonra en alta aşağıdaki kodları ekleyin ve kapatın.

Kod:
<style type="text/css">
            body{background-color:#EEEEEE;font-family:arial;font-size:13px;margin:0;padding:0;}
            a:hover{color:white;}
            #catmenu{background-color:#e5e5e5;margin:20px 0px 0px 20px;box-shadow:2px 2px 3px #AAAAAA;display:inline-block;}
            a{text-decoration:none;color:black;transition:.2s ease-in-out;-webkit-transition:.2s ease-in-out;}
            #catmenu ul{margin:0;padding:0;}
            #catmenu ul li{list-style:none;float:left;border-right:1px solid #EEEEEE;}
            #catmenu ul li#son{border-right:none;}
            #catmenu ul li a#teknoloji{background:url(images/teknoloji.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#teknoloji:hover{background:url(images/teknoloji-beyaz.png)no-repeat center 10px;background-color:red;}
            #catmenu ul li a#internet{background:url(images/internet.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#internet:hover{background:url(images/internet-beyaz.png)no-repeat center 10px;background-color:blue;}
            #catmenu ul li a#bilgisayar{background:url(images/bilgisayar.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#bilgisayar:hover{background:url(images/bilgisayar-beyaz.png)no-repeat center 10px;background-color:green;}
            #catmenu ul li a#yazilim{background:url(images/yazilim.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#yazilim:hover{background:url(images/yazilim-beyaz.png)no-repeat center 10px;background-color:gray;}
            #catmenu ul li a#donanim{background:url(images/donanim.png)no-repeat center 10px;text-align:center;padding:43px 10px 10px 10px;display:inline-block;}
            #catmenu ul li a#donanim:hover{background:url(images/donanim-beyaz.png)no-repeat center 10px;background-color:orange;}

        </style>

Şablonlardan temanızı seçtikten sonra, Ana Sayfa Şablonlar=> index şablonunu açın ve {$header} ' ın altına aşağıdaki kodları ekleyin.

Kod:
<div id="catmenu">
            <ul>
                <li><a id="teknoloji" href="#">Teknoloji</a></li>
                <li><a id="internet" href="#">İnternet</a></li>
                <li><a id="bilgisayar" href="#">Bilgisayar</a></li>
                <li><a id="yazilim" href="#">Yazılım</a></li>
    
            </ul>
        </div>

Son olarak resimlerimizi eklemek kaldı.

Hover efekti için, bir siyah birde beyaz icon kullanacaksınız. Kullanmak istemiyorsanız aynı iconun adını resimadı-beyaz.png olarak kaydedip images klasörüne atmak zorundasınız.

Ekte teknoloji,internet,bilgisayar,yazılım siyah ve beyaz ikonları mevcut. İndirerek images'e attıktan sonra yeni animasyonlu menünüzü kullanabilirsiniz.

Kolay gelsin.

.zip   animasyonmenu.zip (Dosya Boyutu: 26.78 KB / İndirme Sayısı: 23)

* Kodların asıl yaratıcısı Sinan Yorulmaz'dır.]]> <![CDATA[Size Yardımcı Olacak Genel Css Kodları]]> https://mybbdepo.com/size-yardimci-olacak-genel-css-kodlari-konusu.html Wed, 07 Aug 2013 16:40:48 +0300 https://mybbdepo.com/size-yardimci-olacak-genel-css-kodlari-konusu.html Css'de en sık kullanılan kodlardır. Css bilmeyen birisi için hazır css kodlarını editlemek için yardımcı olacak kodlardır.
İşinize yaraması dileklerimle


BACKGROUND(ARKA PLAN)
background-color: Arka plan rengini değiştirmek için kullanılır
background-image:url(resim.gif): Arka plana resim ekler
background-repeat: Resmin tekrar edip etmeyeceği belirler
background-size: Arka plan resminin büyüklüğü ayarlar
BORDER(SINIR)
border-style: Tablonun kenarlarlarının stilini belirler
border-width: Tablonun genişliğini belirler
border-color: Tablo kenarının rengini belirler
border-image: Tabloya resim ekler
border-bottom-color: Tablonun alt kısmının rengini değiştirir
border-left-color: Tablonun sağ kısmının rengini değiştirir.
border-radius: Tablonun kenarlarının ne kadar oval olacağını belirler
border-top-right-radius: Tablonun sadece sağ üst köşesinin oval olacağını belirtir
FONT(YAZI)
font-size: Yazının büyüklüğünü belirler
font-style: Yazı stilini belirler
font-weight: Yazının ağırlığını(bold:kalınlık) belirler
BOX(KUTU)
clear: Belirtilen bir paragrafın sol veya sağ tarafında izin olmayabilir.Bu alana resim vb. şeyler eklenir
display :Ekranda neyin nasıl gösterileceğini belirler
float: Sağa yada sola hizalar
height: Yükseklik belirtir
width: Genişlik belirtiriz
margin: kenar,sınır demektir. Örneğin bir 2 tablo arasında boşluk bırakmak için kullanılır
margin-bottom: alt kısmın kenarında oynama yapılır
margin-left: sol kısmın kenarında oynama yapılır
margin-top: üst kısmın kenarında oynama yapılır
padding: (iç kısım) Örneğin tablo içerisini biraz genişletmek için kullanırız
padding-top: Üst tarafın iç kısmında oynama yapılır
padding-left: Sol tarafın iç kısmında oynama yapılır
overflow: Yazının sağa doğru taşmaması için bu özellik kullanılır.
rotation: Elemanın ne derece döneceğini belirler
TEXT(METİN)
text-align: Yazının ne tarafa hizalanacağını belirtir
letter-spacing: İki karakter arası boşluğu belirler
text-decoration: Metne stil vermemizi sağlar
text-shadow: Metne gölge vermeyi sağlar
COLOR(RENK)
opacity :Saydamlık ayarlarını belirler
TABLE(TABLO)
border-spacing: Hücreler arası boşluğu belirler
LIST(LİSTE)
list-style: Liste stilini belirler
list-style-position: Liste pozisyonu belirler
list-style-type: Liste tipini belirtir
POSITION(POZİSYON)
z-index: sadece konumlandırılmış öğeler de kullanılır
top: üstten ne kadar mesafe bırakıp bırakmayacağımızı belirler
left: soldan ne kadar mesafe bırakacağımızı belirler
right: sağdan ne kadar mesafe bırakacağımızı belirler
bottom: alttan ne kadar mesafe bırakacağımızı belirler]]> Css'de en sık kullanılan kodlardır. Css bilmeyen birisi için hazır css kodlarını editlemek için yardımcı olacak kodlardır.
İşinize yaraması dileklerimle


BACKGROUND(ARKA PLAN)
background-color: Arka plan rengini değiştirmek için kullanılır
background-image:url(resim.gif): Arka plana resim ekler
background-repeat: Resmin tekrar edip etmeyeceği belirler
background-size: Arka plan resminin büyüklüğü ayarlar
BORDER(SINIR)
border-style: Tablonun kenarlarlarının stilini belirler
border-width: Tablonun genişliğini belirler
border-color: Tablo kenarının rengini belirler
border-image: Tabloya resim ekler
border-bottom-color: Tablonun alt kısmının rengini değiştirir
border-left-color: Tablonun sağ kısmının rengini değiştirir.
border-radius: Tablonun kenarlarının ne kadar oval olacağını belirler
border-top-right-radius: Tablonun sadece sağ üst köşesinin oval olacağını belirtir
FONT(YAZI)
font-size: Yazının büyüklüğünü belirler
font-style: Yazı stilini belirler
font-weight: Yazının ağırlığını(bold:kalınlık) belirler
BOX(KUTU)
clear: Belirtilen bir paragrafın sol veya sağ tarafında izin olmayabilir.Bu alana resim vb. şeyler eklenir
display :Ekranda neyin nasıl gösterileceğini belirler
float: Sağa yada sola hizalar
height: Yükseklik belirtir
width: Genişlik belirtiriz
margin: kenar,sınır demektir. Örneğin bir 2 tablo arasında boşluk bırakmak için kullanılır
margin-bottom: alt kısmın kenarında oynama yapılır
margin-left: sol kısmın kenarında oynama yapılır
margin-top: üst kısmın kenarında oynama yapılır
padding: (iç kısım) Örneğin tablo içerisini biraz genişletmek için kullanırız
padding-top: Üst tarafın iç kısmında oynama yapılır
padding-left: Sol tarafın iç kısmında oynama yapılır
overflow: Yazının sağa doğru taşmaması için bu özellik kullanılır.
rotation: Elemanın ne derece döneceğini belirler
TEXT(METİN)
text-align: Yazının ne tarafa hizalanacağını belirtir
letter-spacing: İki karakter arası boşluğu belirler
text-decoration: Metne stil vermemizi sağlar
text-shadow: Metne gölge vermeyi sağlar
COLOR(RENK)
opacity :Saydamlık ayarlarını belirler
TABLE(TABLO)
border-spacing: Hücreler arası boşluğu belirler
LIST(LİSTE)
list-style: Liste stilini belirler
list-style-position: Liste pozisyonu belirler
list-style-type: Liste tipini belirtir
POSITION(POZİSYON)
z-index: sadece konumlandırılmış öğeler de kullanılır
top: üstten ne kadar mesafe bırakıp bırakmayacağımızı belirler
left: soldan ne kadar mesafe bırakacağımızı belirler
right: sağdan ne kadar mesafe bırakacağımızı belirler
bottom: alttan ne kadar mesafe bırakacağımızı belirler]]>