Eğer bir menü yapıyorsanız ve bu menünün üstüne geldiğinizde;

Renginin

.menu{
background:#cc3333;
}

.menu:hover {
background:#000000;
}

Gelen aramalar :

• css hover kullanımı
• hover nedir
• css hover nedir
• hover kullanımı
• a:hover nedir

The post Css hover uygulaması first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

The post Asp de Videolu Css Ders Anlatımı first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Bu dersimizde Html tagları arasında css kullanmayı öğrenelim.

Örneğin bir div html tagında css kullanalım.

<div style="width:200px; height:100px; background-color:
#333333; color:#FFFFFF; text-align:center;">barisozcan.Net | Html içerisinde Css kullanımı</div>

Yukarıdaki uygulamamızda div’e css ile özellik verdik.Genişlik ve yüksekliğini belirledik,arkaplanını gri yaptık,yazı rengini beyaz yaptık ve yazıları ortaladık.

not_ : basit bir örnek uygulama başlangıç seviyesindedir.

The post Html de Css nasıl kullanılır first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Css ile aklınaıza gelebilecek her türlü soru ve bilgi için ihtiyacınız olan herşeyi bulabileceğiniz bir css kitabı indirmek için download sayfamızı ziyaret ediniz…

Gelen aramalar :

• web tasarım uygulama örnekleri
• örnek css uygulamaları
• css örnek uygulamaları

The post css dersleri ve örnek uygulamaları first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

CSS kullanımının önemli avantajlarından bazıları:
1.2.1. Görünüm Avantajları
CSS HTML’e göre birçok stil özelligine sahiptir. CSS’in sayfa içerigi
ögelerinin sayfa görünümü ögelerinden ayrılması için gelistirildigini
düsünürsek avantajı bastan anlasılmıs olur.
<h1>CSS’e Giris</h1>
HTML’de bu elemanın(h1) kalın, altı çizili, Artalan rengi kırmızı olarak
atama gibi çesitli özellikler verebiliriz. Ancak bu özellikleri atamak içinde
ayrı HTML elemanları kullanmak zorundayız (<strong>, <u>), ancak
CSS’de bunu tek bir elemanla yapabiliriz ve ayrıca daha fazla stil özellikleri
de atayabiliriz.(örn: kenarlık, rollover vs stillerini ekleyebiliriz.)
h1 {
color: white;
font: italic 11px Arial, serif;
text-decoration: underline;
background: yellow url(titlebg.gif) repeat-x;
border: 1px solid red;
margin-bottom: 0;
padding: 5px;}1.2.2. Kullanım Kolaylıgı
HTML’de her etikete artı özellikler eklemek için baska bir etiket ve/veya
özellik eklememiz gerekmektedir. Bu islemi genis çaplı bir sitede
yaptıgımızı düsünürseniz çok büyük zaman kaybı ve ugras gerektigini
göreceksiniz.
<h1><font color=”blue”>Baslık</font></h1>
Bunun gibi onlarca veya yüzlerce baslıgınız oldugunu düsünün, gerçekten
çok zor. CSS’de aynı islem için
h1 {color: blue}
Kodunu yazmamız yeterli. Bu elemanın özelliklerinde degisiklik yapmak
istedigimizde sadece burada degistirerek tüm sitede bu elemanın
özelliklerini degistirmis olacagız. Ayrıca bu islemi sadece bu etiket için
degil diger etiketlere de uygulayabiliriz.
h1, h2 {color: blue}
Ayrıca tek bir CSS dosyası ile sitenin tamamını yönetmek web
kodlamacıları için çok büyük kolaylıktır. Sadece bir dosyada degislik
yaparak tüm sitemizi ara yüzünü yönetebiliriz isterse yüzlerce sayfa olsun.
1. CSS’E GRS 9
1.2.3. Tasarım Tutarlılıgı
Tek CSS dosyası ile tüm sitenizi yönetebilirsiniz, bu özellik sayesinde
siteniz tutarlılık kazanacaktır. Web sayfanızdaki ilk sayfadan son sayfaya
kadar tutarlılıgınızı koruyarak ziyaretçinize düzenli bir içerik sunmus olacak
ve sitenizin kendine has özelliklerini ziyaretçiye benimsetmis olacaksınız.
Sayfalarımız hızlı yüklenecektir, çünkü aynı elemanları diger sayfalarda
tekrar yüklemeyecek ve bu ziyaretçiye zaman kazandıracaktır.
1.2.4. Daha az Dosya Boyutları
CSS yardımı ile kodlanmıs HTML’in normal HTML kodlamasına göre
%50Vye varan performans ve hız artısları oldugu belirlenmistir. CSS
HTML’de kullanılan görünüm özelliklerini(iskeleti olusturan tablolar, bos
resimler, süsleyici resimler, yazı tipleri, renkler, genislikler, yükseklikler ve
Artalan resimleri) azaltacagı için dokümanlarınızın boyutunu ciddi oranda
azaltacaktır.
1.2.5. Gelecek Vaat ediyor
HTML giderek islevselligini kaybedecegi ve XML ve dolayısı ile XHTML’in
islevselligini artıracagı düsünülürse, CSS gibi tümlesik bir standardın
önemi daha çok anlasılıyor.
XHTML ile daha temiz kodlar üretilecek, farklı platformlara(pda, cep
telefonu vs.) uyum sayesinde bilgi dolasımı kolaylasacak, sayfalarımız
arama motorları programları tarafından daha anlasılır olacaktır. CSS,
XHTML teknolojisi ile tümlesik olarak çalısarak bizlere gelecek vaat ediyor.

Gelen aramalar :

• css kullanmanın avantajları

The post Css Dersleri – Css Avantajları first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

CSS (Cascading Style Sheets – Stil Sablonları), Web dokümanlarına stil
eklemek için kullanılan basit ve güçlü bir dildir.
Web sayfalarının yapılarını düsündügümüzde 3 kısma ayıra biliriz. İçerik
kısmı, biçimlendirme kısmı ve dinamik kısım.
İçerik kısmı, HTML kodlarını içeren sayfa asıl içerigini olusturan birimleri
olusturma kısımdır. Bu kısım genelde metinlerden olussa da, resim,

animasyon ve video gibi elemanlarıda içerir.
Biçimlendirme kısmı, içerik kısmını kullanıcıya nasıl görüntülenecegini
gösteren kısımdır. Sayfanın biçimini belirler. Kullanıcıya daha okunaklı ve
kullanıslı sayfa sunmak için gerekli elemanları içerir.
Dinamik kısım, Javascript ile yapılan dinamik islemleri içerir. Etkilesimli
sayfalar olusturmak için kullanılır.
Eskiden ki hala bu sekilde kodlama yapanlar mevcut. İçerik kısmı ve
biçimlendirme kısmı içi içe kodlama yapardık, örnegin yazıtipi tanımı için
<font> etiketini kullanırdık. Eski kodlama yöntemi ile zaman, hız ve
erisebilirlik açısından büyük kayıplarımız vardı.
CSS biçimlendirme kısmının yönetimini saglamak için kullanılır. İçerik
kısmı ile biçimlendirme kısmının ayrılmasını saglayan CSS bize birçok
avantajlar saglar. Örnegi 10.000 sayfası olan bir siteyi tek css dokümanı
yardımı ile biçimlendirmemizi saglar.
CSS 1996Vda W3C tarafından duyuruldu. Son olarak(Ocak 2003’den beri)
CSS2.1 sürümü yürürlüktedir. CSS3.0Vda çalısmaları devam etmektedir.
CSS3.0 için ayrıntılı bilgiye http://www.w3c.org/Style/CSS/current-work
adresinden ulasabilirsiniz.
Tablosuz Web Sayfası kodlama teknigini kullanmayanlar CSS’in
ehemmiyetini tam olarak anlayamayacaktır.

The post css dersleri -1 css nedir ? first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Büyük bir merakla beklediğimiz CSS 3.0; web standartlarına bir yenisini ekleyerek daha da kullanışlı hale geldi. Örneğin yıllardır dikdörtgen kutuların kenarlarını yumuşatmak için binbir türlü zahmete girip, dört adet yuvarlak köşeyi grafik programımızda tasarlayıp HTML kodlarımız arasına gömmekle uğraşıyorduk.

Bu yeniliklerle beraber CSS’ de şu özellikleri yapmamız mümkün oluyor:

1. Yuvarlak Köşeler
2. Gölge (Shadow)
3. Font Arayüzü (Font Face)
4. Renk Geçişi (Gradient)
5. Obje Çevirme (Rotation)

Bunlar arasında benim tutmuş olduğum en güzel özellik gömülü font özelliği. Daha önce bu işlemi yapmış olduğum web sitelerde jQuery sIFR eklentisini kullanarak yapıyordum. Mantığı flash yapısında (swf uzantılı) fontu javascript ile site içine entegre etmek şeklindeydi. CSS 3.0’da ise @font-face stil tanımlaması içinde fontumuzu belirtip bu fontu dilediğimiz gibi kullanabilme şansımız var.

Tabii yine Internet Explorer’ı sevmeyen birisi olarak; yine yapmış yapacağını. Bu konuda sadece “Nedir bu IE’ den çektiğimiz!” diyorum…

Aşağıdaki tabloda @font-face’i hangi tarayıcının hangi formatta desteklediğini görmektesiniz. IE 4.0 ve sonraki versiyonları sadece .eot formatlı fontları okuyabiliyorken, Firefox; .ttf ve .otf formatlı fontları okuyabiliyor.

Bunun için ilk yapacağımız işlem ücretsiz bir font bulup bu fontun hem ttf yada otf ile eot formatlılarını bulmaktır. Eğer herhangi birini bulmuşsanız aşağıdaki adresten fontu dönüşüm yapabilirsiniz:
http://ttf2eot.sebastiankippe.com/

Şimdi ise hemen pratik uygulamaya geçip işlemin nasıl olduğunu göreceğiz. Elimizdeki fontun adının “Museo700.otf” olduğunu varsayalım (ttf’de olabilirdi). (Tabii bu durumda IE için olan fontumuz da “Museo700.eot”)

Aşağıdaki gibi bir HTML kodu oluşturuyoruz:

<html>
<head>
<style type="text/css">
@font-face {
	font-family: 'Museo700';
	src: url('Museo700.eot');
	src: local('Museo700 Regular'),
		 local('Museo700'),
		 url('Museo700.otf') format('opentype');
}

h2 {
    border-bottom: 1px solid #999;
    margin: 23px 0 11px 0;
    padding: 5px 0 6px 0;
    font-weight: normal;
    font-family: Museo700, Arial, serif;
    font-size:  24px;
}

</style>
</head>

<body>
<h2>Yaşasın! CSS 3.0'da artık istediğimiz font ile çalışabiliyoruz!</h2>
</body>
</html>

Ve sonuç… Artık özgürce istediğiniz fontu sitenizde kullanabilirsiniz. Örnek uygulamayı kaynak linkten örnek dosyayı indirmeniz mümkündür.

Başarılar dilerim.

The post Gömülü font özelliği first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

CSS kodu ile kolay bir şekilde kaydırma çubuğu (Scrollbar) rengini değiştirebiliyoruz.

<style type="text/css">
<!--
body { scrollbar-3d-light-color: #666666;
scrollbar-arrow-color: #CCCCCC;
scrollbar-base-color: #666666;
scrollbar-dark-shadow-color: #666666;
scrollbar-face-color: #666666;
scrollbar-highlight-color: #666666;
scrollbar-shadow-color: #666666;
scrollbar-track-color: #141E28;
}
-->
</style>

The post CSS ile kaydırma çubuğu rengi değiştirme first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Resimlerinizi kısa bir kodla transparan yapmanız bu kodlarla mümkün.

<style type="text/css">
.transparan img{
filter:progid:DXImageTransform.Microsoft Alpha(opacity=40);
}
.transparan:hover img{
filter:progid:DXImageTransform.Microsoft Alpha(opacity=100);
}
</style>

Daha sonra “transparan” değişkeni resmin “class” kısmına yerleştirin.

The post CSS ile resmi transparan yapma first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.