Bu derste CSS3 ile gelen yeniliklerden biri olan köşe yuvarlatmayı anlatacağım arkadaşlar. Bunun için bir div oluşturuyoruz.

<div id="radus">###</div>

Css kodumuz da şu şekilde;

#radus {
	background-color: #000;
	height: 100px;
	width: 100px;
}

Şu anda elimizde 100×100’lük siyah bir kare oluştu.

Köşeleri yuvarlaklaştırmak için css’e şu kodları ekliyoruz.

border: 1px solid #000;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;

Dikkat ettiyseniz yeni kodların yazımında tek tük değişiklikler var. Bu şekilde CSS’i düzenlediğimizde elimizde aşağıdaki gibi bir div oluşuyor.

Gelen aramalar :

• div kenar yuvarlama
• css köşe yuvarlama
• div köşeleri yuvarlama
• css div köşe yuvarlama
• div köşe yuvarlama

The post Css ile divlerin köşelerini yuvarlama first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Şimdiki dersimizde CSS ile yatay açılır menü yapımını anlatmaya çalışacağım. Umarım başarılı olabilirim. Dersin sıkıcı olmaması için biraz da görsellik katacağım. Hep anlatırken, hem de görsel olarak Dreamweaver 8’i yardımcım olarak görevlendiriyorum

Öncelikle normal bir şekilde menümüzü oluşturalım.

<ul id="menu">
<li><a href="#">Anasayfa</a></li>
<li><a href="#">Hakkımızda</a>
<ul>
<li><a href="#">Şirketimizin Tarihi</a></li>
<li><a href="#">Yöneticilerimiz</a></li>
<li><a href="#">Çalışanlarımız</a></li>
<li><a href="#">Faaliyetlerimiz</a></li>
</ul>
</li>
<li><a href="#">Referanslarımız</a>
<ul>
<li><a href="#">Deneyimlerimiz</a></li>
<li><a href="#">Ne dediler?</a></li>
</ul>
<li><a href="#">Hizmetlerimiz</a></li>
<ul>
<li><a href="#">Web Tasarım</a></li>
<li><a href="#">Hosting</a></li>
<li><a href="#">Logo Tasarım</a></li>
<li><a href="#">Danışmanlık Hizmetimiz</a></li>
<li><a href="#">Diğer Hizmetler</a></li>
</ul>
</ul>

Gördüğünüz gibi 4 tane ana menü ve akabinde alt menülerini oluşturduk. Şimdi Css ile bunu açılır menü hâline getireceğiz.

Ben bu anlatımda css’i ayrı bir dosya ile sayfaya çağıydım. Ama siz sayfaının head’ine de yerleştirebilirsiniz css’i.

Css’imize aşağıdaki kodu yazıyoruz.

ul#menu li {
float:left;
position:relative;
width:150px;
}

Bu kod id’si “menu” olarak verilen yazıların maddeleri hakkında düzeltmedir.

Float ile menümüzün durumunu belirliyoruz. Left yaptık ve anasayfa sol tarafta yerini aldı. Right yapsaydık anasayfa en sağda olacaktı ve devamındakiler sağdan sola doğru hizalanacaktı. Position ile menünün durumunu belirliyoruz ve bildiğiniz gibi width ile de menümüzün genişliğini belirliyoruz.

Menümüzü ilk oluşturduğumuz zaman oluşan menülerin başında işaretleri kaldıralım.

ul#menu, ul#menu ul {
list-style:none;
margin:0;
padding:0;
}

Bu şekilde menülerimizin başındaki işaretleri de kaldırmış olduk.

ul#menu li ul {
display:none;
position:absolute;
top: 19px;
left: 0;
}

Display ve position sayesinde açılır olan menümüzü gizlemiş oluyoruz. Bu koddan itibaren alt menüleri göremez hâlde olursunuz.

ul#menu li:hover ul {
display:block;
}

Bu kodu da eklediğimiz zaman mouse’u hangi menünün üzerine getirirsek o menü açılacaktır. Yani işlemimiz bitti.

ul#menu li a {
font: bold 11px Verdana, Helvetica, sans-serif;
display: block;
border-width:1px;
border-style:double;
border-color:#000000;
margin:0;
padding:2px;
color:#FFFFFF;
background:#666666;
text-decoration:none;
}

Son olarak menümüzün arkaplanını, altında çizgi olmaması gibi bazı özelliklerimizi ayarladıktan sonra menümüz tamamlanmıştır. İstediğimiz sayfaya yerleştirebiliriz.

Gelen aramalar :

• css yatay açılır menü
• yatay açılır menü
• yatay açılır menü kodları
• dreamweaver açılan menü ul ayarları
• css açılır menü

The post Css ile yatay açılır menü uygulaması first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

Css 3 ile gelen yeni özelliklerden biriside metinlerimize stroke (kenarlık) renkleri atayabiliriz.

Kullanılabilecek yerlere en güzel örnek , web sayfanız içerisinde bulunan bir metni seçili hale getirince bu özelliği aktif hale getirebilirsiniz.

Destekleyen tarayıcılar

#kenarlik { /* kenarlik isim li bir div stili oluşturuyoruz. */
	-webkit-text-fill-color: #fff; /*Kenarlık rengini bel irliyoruz. */
	-webkit-text-stroke-color: lightblue; /* Stilini  */
	-webkit-text-stroke-width: 2px; /* ve boyutunu yani kalınlığını belirliyoruz. */
}

#yansit {
-webkit-box-reflect: below -5px /* Konum değerini atıyoruz. */
 -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
/* Yansıma halinde görünmesi için bazı konum bilgileri gradyan etkiler vererek son haline getiriyoruz */
}

The post Css de metinlere stroke ve yansıma efekti uygulama first appeared on Barış ÖZCAN Web Tasarım | antalya web tasarım | antalya web tasarımı | Sosyal Medya Danışmanlığı.

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ığı.

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 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’de gölgeli yazı nasıl yazılır , bu dersimizde onu öğreneceğiz. Yani text-shadow etiketini inceleyeceğiz.

Basit fakat görsel olarak daha zevkli bir görüntü sağlıyor. CSS3’le birlikte gelen -daha önce de var olup kaldırıldığını okumuştum- bu özellikle gerçeğe yakın gölgeler oluşturacağız.

İndex dosyasını oluşturduğumuzu ve CSS dosyasını çektiğimizi varsayarak:

<div id=”yazi”>Burasi Gölgeli Yazi</div>
şeklinde bir div oluşturuyoruz.

CSS kısmında ise:

#yazi{text-shadow:#999999 2px 2px 1px;color:#00CCCC;

font-family:Verdana, Arial, Helvetica, sans-serif; font-size:18px; }

Burada dikkat edilmesi gereken sadece text-shadow etiketi. Bu şekilde yazdık. İşte sonuç:

Şimdi text-shadow etiketinin kabul ettiği değerleri incelelim:

text-shadow:#999999 2px 2px 1px; color: #00CCCC;

text-shadow: (gölge rengi) (X koordinatına göre gölge uzaklığı) (Y koordinatına göre gölge uzaklığı) (gölgenin bulanıklık değeri)

The post CSS de gölgeli yazı text-shadow 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ığı.