Css İle Çift-Tek İndisli Elemanları Seçmek

Bazen çift-tek indisli elemanlara farklı stiller vermek istiyoruz. ve hemen jQuery ile odd seçicisini kullanarak stil veriyoruz.

Şimdi css nin bize sunmuş olduğu niteliklerle çift ve tek indisli elementlerimizi seçmeyi görelim.
Şöyle bir html yapımız olsun.

<ul>
	<li> bordo</li>
	<li> mavi</li>
	<li> bordo</li>
	<li> mavi</li>
	<li> bordo</li>
	<li> mavi</li>
	<li> bordo</li>
	<li> mavi</li>
	<li> bordo</li>
	<li> mavi</li>
	<li> bordo</li>
	<li> mavi</li>
</ul>

Css Kodumuz:



ul li {
		width:200px;
		padding:5px;
		list-style: none;
		text-align: center;
		font:16px arial;
		color:#fff;
}
ul li:nth-child(2n + 1) {
	background: #A70529;
}
ul li:nth-child(2n) {
	background: #2CB0E9;
}

Css Kodlarımızı açıklayacak olursak;

nth-child() çocuk elementleri seçmemize yarar. örn: ul li:nth-child(3) gibi.

Bizim yaptığımız işlem çocuk seçicileri biraz daha genelleştirmek oldu yani direk 2-3-5 gibi sayılar vermek yerine genel tanım yaptık.
matematiktende bileceğiniz gibi 2n çift sayıyı temsil eder bizde çift indisli çocukları 2n ile seçtik.
2n çift olduğuna göre 2n+1 kesin tektir bunuda matematik bize söylüyor 🙂 bizede tek indisli çocukları seçmek için 2n+1 yazmak kalıyor 🙂

Demo :

bordo
mavi
bordo
mavi
bordo
mavi
bordo
mavi
bordo
mavi
bordo
mavi

Bol Kodlu Günler 🙂

Css-Css3 Html-Html5

Nisan 8, 2015 Vehbi Akdoğan

Css3 Animation kullanımı

Merhaba arkadaşlar sizlere css3 ile gelen bir özellik olan animation özelliğinden bahsetmek istiyorum.
animation özelliği sayesinde artık sitemizde flasha ihtiyaç duymadan animasyon yapabiliyoruz.

Nasıl yapılır diye bakacak olursak:

@keyframes animation_name

@keyframes ile css kodumuzda animasyon ile ilgili bilgiler yazılır.


@keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}
		/* firefox için */
		@-moz-keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}
		/* safari ve chrome için */
		@-webkit-keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}
		/* opera için */ 
		
		@-o-keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}

Açıklayacak olursak renkDegistir adında bir keyframes oluşturduk ve animasyonun yarısındayken renk #f00 biterken de #000 olmasını söyledik.

Keyframes in iki türlü kullanımı mevcut bir diğeri ise from do (başlangıç bitiş) mantığı onada bir örnek verecek olursak

@keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}
		@-moz-keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}
		@-webkit-keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}
		@-o-keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}

arkaplanDegistir adında keyframes oluşturduk ve rengini başlangıçta #ddd bitişte #bbb olmasını belirttik.

Evet Arkadaşlar animasyonumuzu oluşturduk sıra geldi kullanmaya kullanmak için önce bir yapı hazırlayalım


<!DOCTYPE html>
<html>
<head>
	<title>Vehbi Akdoğan Css3 animation kullanımı </title>
	<meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="keyword" content="" />
	<meta name="author" content="Vehbi Akdogan" />

</head>
<body>
<div class="rengiDegisenYazi"> Bu Yazının rengi değişecek </div>
<div class="arkaplaniDegisenYazi"> Bu Yazının Arkaplanı değişecek </div>



</body>
</html>

Evet daha sonra animasyonlarımızı uygulamak için css nin animation özelliğine göz atalım şimdi.

Animation Kullanımı

animation-name: Oluşturduğumuz keyframesin adını burda yazıyoruz.
animation-duration: Animasyonumuzun tamamlanma süresini yazıyoruz. (örn: 2s)
animation-delay: Animasyonunun gecikme süresidir. 1s dersek animasyonumuz 1s sonra başlar.
animation-iteration-count: Animasyonun kaç kere tekrarlanacağını belirtiriz. alabileceği değerler (1,2,3,4,….,infinite). infinite dersek sonsuz kere tekrar eder.

animation-direction: Animasyonunun yönünü belirtmemizi sağlar.
animation-play-state: Animasyonunun çalışma özelliğini burda veriyoruz alabileceği değerler: running,paused varsayılan olarak running yanı çalışsın şeklindedir.
Tabiki bu kadr çok kod 1 animasyon için kullanırsak o işin içinden çıkılmaz 🙂 bunun için sadece animate kullanarak tüm özellikleri tanımlayacağız

tam Örneğimizi verecek olursak :

 

<!DOCTYPE html>
<html>
<head>
	<title>Vehbi Akdoğan Css3 animation kullanımı </title>
	<meta charset="utf-8">
	<meta name="description" content="" />
	<meta name="keyword" content="" />
	<meta name="author" content="Vehbi Akdogan" />
	
	<style type="text/css">
		*,body {
			padding:0;
			margin:0;
		}
	
		@keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}
		/* firefox için */
		@-moz-keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}
		/* safari ve chrome için */
		@-webkit-keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}
		/* opera için */ 
		
		@-o-keyframes renkDegistir {
			50% {
				color:#f00;
			}
			100% {
				color:#000;
			}
		}
		/* diğer bir kullanım */
		@keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}
		@-moz-keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}
		@-webkit-keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}
		@-o-keyframes arkaplanDegistir {
			from{
				background:#ddd;
			}
			do {
				background: #bbb;
			}
		}
		
		.rengiDegisenYazi,.arkaplaniDegisenYazi {
			color:#343434;
			padding:5px 10px;
		}
		.rengiDegisenYazi {
			-webkit-animation:renkDegistir .5s linear .5s infinite alternate;
			-moz-animation:renkDegistir .5s linear .5s infinite alternate;
			-o-animation:renkDegistir .5s linear .5s infinite alternate;
			animation:renkDegistir .5s linear .5s infinite alternate;
		}
		.arkaplaniDegisenYazi {
			animation:arkaplanDegistir .5s linear .5s infinite alternate;
			-webkit-animation:arkaplanDegistir .5s linear .5s infinite alternate;
			-moz-animation:arkaplanDegistir .5s linear .5s infinite alternate;
			-o-animation:arkaplanDegistir .5s linear .5s infinite alternate;
		}
		body {
			animation:arkaplanDegistir 1s linear 1s infinite alternate;
			-moz-animation:arkaplanDegistir 1s linear 1s infinite alternate;
			-webkit-animation:arkaplanDegistir 1s linear 1s infinite alternate;
			-o-animation:arkaplanDegistir 1s linear 1s infinite alternate;
		}
		
	</style>
	
	
	
</head>
<body>
<div class="rengiDegisenYazi"> Bu Yazının rengi değişecek </div>
<div class="arkaplaniDegisenYazi"> Bu Yazının Arkaplanı değişecek </div>



</body>
</html>

Demo

Css-Css3 Html-Html5

Kasım 21, 2014 Vehbi Akdoğan

Css Ve Script Dosyalarına Neden Parametre Verilir

Sizde benim gibi önünüze gelen sitenin kodlarını karıştırıyorsanız size css dosyasına parametre verenleri illaki görmüşsünüzdür.
Bende bu parametre veren arkadaşlar neden parametre vermişler onu araştırdım.

Css Dosyası tarayıcı üzerinden yorumlanarak çalışan dosyalardır ve bu dosyalar tarayıcının önbelleğine kaydedilir.
Biz css dosyamızda herhangi bir güncelleme yaptığımızda da tarayıcının geçmişini silmeden yaptığımız değişikliği göremiyoruz. Bu yüzden css dosyasına parametre vererek sitede herhangi bir güncelleme olduğunda tarayıcının bunu hemen algılamasını sağlamış oluyoruz.

örneğin :

ilk başlangıçta css dosyamız:
style.css?v=1.0
olsun.
Güncelleme yapınca Css dosyamızın paarametresini
style.css?v=1.1
yaparsak tarayıcıda dosyanın değiştiğini anlayıp güncelleme yapacaktır.

Aynı işlemleri script dosyaları içinde uygulayabilirsiniz.

Css-Css3 Html-Html5 Javascript-jQuery

Ekim 27, 2014 Vehbi Akdoğan

Kodlama Yaparken Sürekli Gerekli Olan Bazı Kodlar

Genelde site yaparken kullandığımız bazı kodlar vardır. bende bu kullandığım kod bloklarını bir demo sayfada paylaşacağım güncelledikçe burdan bakabilirsiniz.

şuan içinde bulunanlar :

Kelime Ve karakter saydırma.
border radius oluşturucu

Önizleme
Elimden Geldiğince güncellemeye çalışacağım.

Css-Css3 Html-Html5 Javascript-jQuery Sorun Ve Çözümler

Ekim 20, 2014 Vehbi Akdoğan

Css İle Bir Yazının Seçilmesini Engelleme

Uzun süredir paylaşım yapamadım öncelikle kusura bakmayın.

Css ile yazının kopyalanması nasıl engelelnir onu inceleyeceğiz.

Css Kodlarımız

-webkit-user-select: none; /* chrome */
-khtml-user-select: none; /* mobil */
-moz-user-select: none; /* mozilla */
-o-user-select: none; /* opera */
user-select: none;

Demo

Css-Css3

Eylül 26, 2014 Vehbi Akdoğan

css float left yapınca arkaplanın kaybolması sorunu

Merhaba arkadaşlar kodlarımızda genelde float:left yani sola yasla yada float:right sağa yasla gibi komutlar yazarız. eğer bu özellikleri verdiğmiz divin dışında bir div varsa arkaplanının kaybolduğunu göreceksiniz. bunun nedeni float left veya right dediğimizde height:auto; kodumuz çalışmıyor şimdi çözümüne bakalım.

Hatalı CSS kodumuz

 .ust_div {  
 width:100%;  
 height:auto;  
 background-color:#555;  
 }  
 .solayasla{  
 float:left;  
 margin-left:20px;  
 border:1px solid #ddd;  
 }

html kodumuz

 <div class="ust_div">  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 <div class="solayasla" metin </div>  
 </div>

Yuardaki kodu çalıştırdığınızda hatalı çıkacakdır doğru css kodumuz :

Doğru CSS Kodu

 .ust_div {  
 overflow:hidden; /* overflow ekleyerek sorunu düzelttik */  
 width:100%;  
 height:auto;  
 background-color:#555;  
 }  
 .solayasla{  
 float:left;  
 margin-left:20px;  
 border:1px solid #ddd;  
 }

Css-Css3

Mart 11, 2014 Vehbi Akdoğan

reset.css nedir

Reset.css Nedir?

İyi günler arkadaşlar bu yazımda sizlere öğrendiğim kadarıyla reset.css stil dosyasından bahsedeceğim. css bildiğiniz üzere site tasarımda kullandığımız stil dosyalarıdır.
sizde dikkat etmişsinizdir elimizdeki bir psd yi html ye dökerken yani html ile kodlarken tarayıcıda açtığımızda sağda ve üst kısımda boşluklar olur bu boşlukar her tarayıcıda farklı oluyor neyse reset.css dosyamız bu boşlukları kaldırmaya yarıyor.

Reset.css kulanmazsam birşey olur mu ?

Reset.css dosyası kullanmasakta birşey olmaz reset.css mizi kendimiz normal style.css yada işte stil dosyanızın adı neyse onun içinde kendimiz yazabiliriz. ama genellikle reset.css kullanılır.

reset.css dosyasının içeriği

reset.css dosyasının içeriğini kendiniz belirleyebilirsiniz ama bu konuda uzman kişilerin kodlamış olduğu reset.css dosyalarını kullanmanız daha sağlıklı olacaktır.
ben sizlere benimde kullandığım Eric Meyer’in reset.css dosyasını vereceğim internettende Eric Meyer reset.css yazarak bu dosyaya ulaşabilirsiniz.

RESET.CSS DOSYASI

 /* http://meyerweb.com/eric/tools/css/reset/   
   v2.0 | 20110126  
   License: none (public domain)  
 */  
 html, body, div, span, applet, object, iframe,  
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,  
 a, abbr, acronym, address, big, cite, code,  
 del, dfn, em, img, ins, kbd, q, s, samp,  
 small, strike, strong, sub, sup, tt, var,  
 b, u, i, center,  
 dl, dt, dd, ol, ul, li,  
 fieldset, form, label, legend,  
 table, caption, tbody, tfoot, thead, tr, th, td,  
 article, aside, canvas, details, embed,   
 figure, figcaption, footer, header, hgroup,   
 menu, nav, output, ruby, section, summary,  
 time, mark, audio, video {  
      margin: 0;  
      padding: 0;  
      border: 0;  
      font-size: 100%;  
      font: inherit;  
      vertical-align: baseline;  
 }  
 /* HTML5 display-role reset for older browsers */  
 article, aside, details, figcaption, figure,   
 footer, header, hgroup, menu, nav, section {  
      display: block;  
 }  
 body {  
      line-height: 1;  
 }  
 ol, ul {  
      list-style: none;  
 }  
 blockquote, q {  
      quotes: none;  
 }  
 blockquote:before, blockquote:after,  
 q:before, q:after {  
      content: '';  
      content: none;  
 }  
 table {  
      border-collapse: collapse;  
      border-spacing: 0;  
 }

reset.css dosyamızı sayfamıza normal bir stil dosyası dahil eder gibi dahil ediyoruz bilmeyenler için
Çağırma şekli 1:

 <style type="text/css">  
 @import "reset.css";  
 </style>

Çağırma Şekli 2

 <link rel="stylesheet" type="text/css" href="reset.css" />

Birdahaki yazımızda görüşmek üzere …

Css-Css3

Ocak 2, 2014 Vehbi Akdoğan

Seo Uyumlu Logo Kodlamak

Arkadaşlar film sitem için seoyu biraz geliştirmek istedim ve neresine neler ekleyebilirim diye düşünürken araştırmaya başladım ve logomuzu da seolu yapabiliyormuşuz bunu öğrendim ve sizlerle paylaşayım dedim 🙂

Öncelikle size nasıl ypacağımızı kısaca anlatayım ve ardından kodlamaya başlayalım
sizinde bilfiğiniz üzere google h taglarına pragraf yani p etiketlerine oldukça önm veriyor bizde logomuzun arkadasına h ve p taglarını gizleyeceğiz yani ziyaretçi siteye baktığında sitemizin logosunu görecek ama google botları sitemize girdiğinde sitemizdeki h ve p tagını görebilecek
evet şimdi kodlamaya başlayalım

Öncelikle css yani tasarım dosyamızı açalım ve içine aşağıdaki kodları ekleyelim


#logo {
float:left;
width:200px;
height:71px;
}

#logo h1 a{
display:block;
width:200px;height:71px;
background: url(resimler/logo.png) no-repeat;
text-indent: -999em;
}
#logo p{
display:none;
}

Zaten Css bilgisi olan yukarıdaki kodu anlar anlamayanlar içinde bahsedecek olursak
logo adında bir id tanımladık ve bu id ye arkaplan olarak logomuzun yolunu verdik mesela div class=”id” ŞEklinde bir kullanım yaptığımızda arkada logomuz çıkar diyeyim anlayın 🙂
şimdi içinizden o kadarda aptal değiliz anlıyoruz diyorsunuz ama hiç bilmediğinizi farzederek yazıyorum o yüzden kusura bakmayın oldukça basitleştirip anlatıyorum 🙂
evet css dosyamızı kaydediyoruz ve kapatıyoruz
Ardından Sıra geliyor html sayfamıza yada php aspnet falan neyle yazıyosanız artık işte logo kısmına aşağıdaki kodları ekliyoruz

</p> <div> <h1><a href="http://vehbiakdogan.com/" title="film">Film indir</a></h1> <p>Bedava film indir</p> </div> <p>

Evet Yukarıdaki kodu yazıp kaydettip sitemize giriyoruz bakıyoruz aa sitemizde değişiklik yok hemen üzülüyoruz olmadı vehbi yanlış bilgi paylaşmış diyoruz 🙂 ardından aklımıza kaynağa bakmak geliyo kaynağa bakıyorsunuzki aaa h1 tagı varr biraz bi satır aşağı iniyorsunuz p tagı da var ve sitenizin logosuna seo yapmış bulunuyorsunuz 🙂
Hadi hayırlı olsun

Css-Css3 Seo İpuçları

Ekim 18, 2013 Vehbi Akdoğan

Ders2 – CSS’in Yapısı

CSS’in yapısı iki ana kısımdan oluşur. Seçiciler(Selector) ve Bildirim Bloğu(Declaration Block). Bildirim Bloğuda iki ye ayrılır. Özellik(Property) ve Değer(Value).

Tüm HTML elementleri potansiyel Seçicilerdir. Seçiciler ismini de buradan alır, HTML seçilen element anlamındadır. Bildirim bloğu süslü parantezle açılır ve kapanır. Bildirimler arasında ” ; ” noktalı virgül kullanılır. özellik ve değerler birbirinden ” : ” iki nokta üstüste ile ayrılır.

h1 {
    font: medium Arial;
}

şeklinde arada boşluk verilerekde bildirm yapılabilir. Burada ilki font’un boyutunu ikincisi ise font ismini gösterir.

Gruplama

Yukarıda hep bir Seçici’yi sadece bir HTML elementine atamayı gösterdim, Birden fazla HTML elementine de atama yapabiliriz, buna gruplama denir. Gruplama Seçicilerde yapıldığı gibi Bildirmlerde de yapılabilir.

p, h3 {
    font-family: Arial;
}

Burada düküman içindeki paragraflarda(p) ve başlıklarda(h3) fontların Arial olacağını tek bildirim ile belirttik. Gruplama yapılan Seçicileri ayırmak için ” , ” virgül kullanılır. Sınırsız sayıda Seçici gruplanabilir. Gruplama tasarımcılara büyük kolaylıklar sağlar. Bildirim’lerimizi de gruplayabiliriz, bununla ilgili yukarıda örnekler mevcut. Bir veya daha fazla Seçiciye bir den fazla bildirim ekleye biliriz.

p, h3{
    font-family: Arial;
    font-size:2;
    font-weight: bold;
}

Seçiciler ikiye ayrılır. Sınıf Seçicisi ve Id Seçicisi. CSS ile işlenmemiş bir dökümanda başlangıçta bir plan yaparak hangi içeriğin Sınıf Seçicisi hangi Seçicicinin Id Seçicisi olacağını planlamalıyız.

Sınıf Seçicileri

Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız. Bir örnek verecek olursak; hazırlayacağımız dökümanda iki adet paragraf tanımlaması yapacağımızı planlıyoruz. Bunlardan biri sağa dayalı, diğeri ise ortalı olmasını istiyoruz

p.sagadaya {
    text-align: right
}

p.ortala {
    text-align: center
}

Bu Seçicileri Sayfamıza Eklemek İçin

<p class="sagadaya">Aynı HTML elementine farklı özellikler atamak için Sınıf Seçicisini kullanırız.</p>
<p class="ortala">Yukarıdaki bilgiyi dikkatlice okumalısınız</p>

Id Seçecileri

Id Seçicileri Sınıf Seçicisinden farklıdır. Sınıf Seçicisi sayfada birden fazla elemente atanırken Id Seçicisi sadece bir tane elemente atanır. Seçicisi adının başında # işareti olan Seçiciler Id Seçicisidir.

#mavi{
    background:blue;
}

#kirmizi{
    background:red;
}

Html De kullanırken

<p id="mavi">Bu yazının arkafon rengi mavi</p>
<p id="kirmizi">Bu yazının arkafon rengi kırmızı</p>

Css-Css3

Eylül 25, 2013 Vehbi Akdoğan

Css Font-family Font aileleri

Arkadaşlar Genelde Lazım olduğu için Font-family yani font isimlerini burda Hem Bana not olarak paylaşmak hemde size Belki faydası olur diye paylaşmak istedim 🙂
Öncelikle font-family Nedir ondan Bahsedeyim

Font-Family : Css de font tanımlamak için kullanırız.

Burda Fontların Sırasıyla Önizlemelerini Görebilirsiniz

Css De Kullanım Şekli


p.arial{font-family: Arial;}
p.courier_new{font-family: Courier New;}
p.jokerman{font-family: Jokerman;}
p.serif{font-family: serif;}
p.roman{font-family: roman;}
p.goudy_stout{font-family: Goudy Stout; font-size:17px;}
p.impact{font-family: impact;}
p.script{font-family: script;}
p.comic_sans{font-family: 'Comic Sans MS', 'comic sans ms', 'comic sans';}
p.magneto{font-family: Magneto;}
p.maiandra_gd{font-family:Maiandra GD;}
p.matura_mt_script_capitals{font-family:Matura MT Script Capitals;}
p.mistral{font-family: Mistral;}
p.pristina{font-family: Pristina;}
p.ravie{font-family: Ravie;}
p.showcard_gothic{font-family: Showcard Gothic;}
p.wst_swed{font-family: WST_Swed;}
p.viner_hand_itc{font-family: Viner Hand ITC;}
p.sylfaen{font-family: Sylfaen;}
p.rockwell_condensed{font-family: Rockwell Condensed;}
p.rage_italic{font-family: Rage Italic;}
p.papyrus{font-family: Papyrus;}
p.modern{font-family: Modern;}

Css-Css3

Eylül 22, 2013 Vehbi Akdoğan