tablo_ornek

CSS Hatırlatması {Tablo Satırlarını Renklendirelim}

Tablo Hazırladığımızda En Büyük Sıkıntılardan Birtaneside Tablo Büyüdükçe Satırların Zaman Zaman Birbirine Karışması.

CSS3 İle Gelen Seçiciler İle Satırları Renklendirmek Mümkün Sanırım Örnek İle Daha Rahat Açıklayabilirim.

Devamını Oku »

21 Ocak 2012 (32 gün Önce) | 118'kez İncelendi Ve 0 Yorum Yapıldı
CSS
chrome_button_2

Chrome Butonlarını Sitenizde Kullanalım. | Chrome Buton Yapımı

Chrome kullanıcıları bilirler gelen yeni sürümlerle chrome’un ayarlarında ve alt yapısında kullanılan butonları görmüşsünüzdür biraz kurcalarken hoşuma gitti ve hazırladığım bir sitede kullandım bu aradada kodlarını paylaşayım dedim.

Chromedaki Yerleri

Chromedaki Yerleri
Chromedaki Bu Butonların Aynısını Alıcaz.

Devamını Oku »

24 Aralık 2011 (60 gün Önce) | 184'kez İncelendi Ve 0 Yorum Yapıldı
CSS
buttons

jQuery İle Aç-Kapa Butonu Hazırlamak

Bu Yazı Basit jQuery Dersleri Adlı Serinin 15 Yazısından 14.si

Günümüzde websitelerinde görsellik ön planda yer alıyor. Bu ihtiyaçlar için imdadımıza yetişen jquery ile web tasarımlarımızda istediğimizi elde etmemizi sağlıyor.
Lafı fazla uzatmadan anlatıma başlıyayım.


Devamını Oku »

9 Aralık 2011 (75 gün Önce) | 334'kez İncelendi Ve 0 Yorum Yapıldı
CSS, HTML, Jquery & Ajax

Zen-Codeing Nedir? Nasıl Kullanılır?

Kod editörleriniz için olan Zen-Codeing eklentisi yüksek hızda “HTML, XML, XSL” kodlaması yapmanıza yarayan kullanışlı ve işe yarayan bir editör eklentisidir.

Not: Editör nedir? Editör olarak tanımladığımız şey web sitelerinizi tasarlarken / kodlarken kullandığınız programlardır.

Zen-Codeing Nasıl Kullanılır?

html:5>div#toplayici_div>div#baslik_alani+div#icerik_alani+div#footer_alani

Yukarıdaki şekilde yazılmış kodları otomatik olarak html yapısına dönüştüren yani 


<!DOCTYPE HTML>
<html lang="en—US">
<head>
	<meta charset="UTF—8">
	<title></title>
</head>
<body>
	<div id="toplayici_div">
		<div id="baslik_alani"></div>
		<div id="icerik_alani"></div>
		<div id="footer_alani"></div>
	</div>
</body>
</html>

Anında bu şekile getiren bir eklentidir.

Şuan için Zen—Codeing tarafından desteklenen özelliklerden bazıları

  • ID ve CLASS özniteliklerini atamak: div#sayfa.alan.icerik
  • Özel öznitelikler: div[baslik], a[title="merhaba dünya" rel], td[colspan=2]
  • Element Çoğaltma: li*5 ifadesi size
  • etiketinden 5 adet oluşturucaktır
  • Element numaralandırma için $ karakteri kullanın: li.madde$*3 ifadesi size
  • etiketinden 3 adet oluşturup, $ işaretini 1 den başlayarak 3 e kadar yazıcaktır.
  • Çoklu ‘$’ İşaretininin kullanımı: li.madde$$$ → li.madde001 şeklinde çıktı vericektir.
  • Gruplar oluşturarak ve bunların içine elementler ekleme imkanı: div#sayfa>(div#baslik>ul#menu>li*4>a)+(div#sayfaici>(h1>span)+p*2)+div#footer .Şeklinde tüm bir dökümanı tek bir satır yazarak oluşturabilirsiniz.

Daha fazlası için Tıklayın.

Desteklediği Editörler

  • Dreamweaver (Windows, Mac)
  • Sublime Text (Windows)
  • Sublime Text 2 (crossplatform)
  • UltraEdit (Windows)
  • TopStyle (Windows)
  • GEdit (crossplatform)
  • BBEdit/TextWrangler (Mac)
  • Visual Studio (Windows)
  • EmEditor (Windows)
  • Sakura Editor (Windows)
  • NetBeans (crossplatform)
  • Chrome Extension
  • Userscript for Greasemonkey
  • Geany
  • RJ TextEd
  • AkelPad
  • WIODE web—based IDE
  • BlueFish

Nereden İndirilir?

Code.Google zen-coding Sayfasından Editörünüze Uygun Olanı İndirip Kurabilirsiniz.

2 Aralık 2011 (82 gün Önce) | 169'kez İncelendi Ve 0 Yorum Yapıldı
CSS, Diğer, Genel, HTML, HTML Tüyolar

CSS Butonlar

Tamamı CSS Butonlar

Tamamı CSS Butonlar
Butonlardan Görüntü.

19 Haziran 2011 (249 gün Önce) | 674'kez İncelendi Ve 0 Yorum Yapıldı
CSS, Logo & İkon, Örnekler

CSS Text Gradients

Son Görünüm Tüm Uygulamaları Takip Ederseniz

Son Görünüm Tüm Uygulamaları Takip Ederseniz

Html Kodu

<h1 data-text="AlixcaN"> AlixcaN </h1>

CSS Kodu

/* Sadece 'data-text' Özelliğine Sahip Olan h1 Elementini Seçiyoruz. */
h1[data-text] {
	position: relative;
        color: red;
}
h1[data-text]::after {
content: attr(data-text);
z-index: 2;
color: green;
position: absolute;
left: 0;
-webkit-mask-image: -webkit-gradient(
	linear,
	left top, left bottom,
	from(rgba(0,0,0,1)),
	color-stop(40%, rgba(0,0,0,0))
);

Demo Canlı
Görünüm

Download Kaynak
Dosyaları

26 Mayıs 2011 (272 gün Önce) | 346'kez İncelendi Ve 0 Yorum Yapıldı
CSS, Örnekler

Mail Template

İnternette Dolaşırken Denk Geldiğim Hoşuma Giden Ve Kullanışlı Olan Bir Mail Tasarımı.

Demo Canlı
Görünüm

Download Kaynak
Dosyaları

24 Mayıs 2011 (275 gün Önce) | 552'kez İncelendi Ve 0 Yorum Yapıldı
CSS, Örnekler

Portföy Sitesi Tasarımı

PSDUp Sitesinden Güzel Bir Çalışma Daha.

Demo Canlı
Görünüm
Download Kaynak
Dosyaları

18 Mayıs 2011 (281 gün Önce) | 571'kez İncelendi Ve 0 Yorum Yapıldı
CSS, Örnekler, PSD

Chrome Border Olayı

Chrome Kullanıcıları Bilirler, Bu Textbox, Textarea Gibi Alanlara Tıklanıldığında Kutu Etrafı Turuncu Bir Renk Alır.
Bu Border Oluşmasın İstiyorsanız. Yapmanız Tek Gereken Aşşağıdaki Kodlardan Hangisi Size Uygunsa CSS Dosyanızda Kullanmanız.

Kodlar

Bu Kod Sayesinde Tüm Eklenen Borderlardan Kurtulabilirsiniz.

:focus{outline: 0;}

Ama Yok Ben Sadece Benim Belirlediğim Alanlarda Bu Border Çıkmasın Diyorsanız.

.kullanilicak_class{outline: 0;}

Şeklinde Kullanılabilir.
Not: İllaki Class Olmak Zorunda Değil ID Olarakta Kullanabilirsiniz.

15 Mayıs 2011 (283 gün Önce) | 561'kez İncelendi Ve 0 Yorum Yapıldı
CSS