Archiv für die ‘CSS/XHTML’ Kategorie

Javascript Canvas API ile ufak bir deneme

17 April 2010

HTML5 ile birlikte canvas web sayfalarında epey bir popüler olacak, ve bir çok şeyi mümkün kılacak gibi görünüyor. Şimdiye kadar sadece flash’la yapılabilen şeyler yavaş yavaş canvasla karşımıza çıkıyor. Şimdiden oyunlar özel javascript kütüphaneleri belirmeye başladı nette. Ben de JS Canvas API ile bir iki test yaptım burada da paylaşmak istedim, buyrun ufak bir canvas örneği:

    function draw() {
      var canvas = document.getElementById("canvas");
      canvas.height = document.height;
      canvas.width = document.width;
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        var i = 0;

        var t= setInterval(function() {
            ctx.fillStyle = "rgba(200," + i + "," + i + ",0.05)";
            ctx.fillRect (i, i, i, i);
            i++;
            if(i > document.height-i){clearInterval(t);}
        },10);

      }
    }
    window.onload = draw;

Bu bir kaç satırlık kod ile gayet hoş bir animasyon elde edilebiliyor, işte çıktısı:

Tabi bunu HTML5 destekleyen modern bir tarayıcıyla görebilirsiniz ancak.

CSS rounded corners (with pure css)

13 July 2009

I generally get rounded corners just with css, if browser does not support they see the content with flat corners. If rounded corners are not so critical for your site you can use these lines below.

If you want to use all corners with same radius this is the easy way:

.my_rounded_corners {
  border: 1px solid #ccc;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

but if you want to control every corner this is good:

.my_rounded_corners {
  border: 1px solid #ccc;

  -moz-border-radius-topleft: 10px;
  -khtml-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;

  -moz-border-radius-topright: 0px;
  -khtml-border-top-right-radius: 0px;
  -webkit-border-top-right-radius: 0px;
  border-top-right-radius: 0px;

  -moz-border-radius-bottomleft: 4px;
  -khtml-border-bottom-left-radius: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;

  -moz-border-radius-bottomright: 10px;
  -khtml-border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

As you see in each set you have browser specific styles and on the fourth rows we declare in standard way by this we assume if in future the others (hopefully IE too) decide to implement the feature to have our style be ready for them too.

This works beautifully on Firefox, Safari, Camino, Chrome. For other browsers there are tons of other tweaks you can find by googleing.

Kodingen.com sonunda online!

24 June 2009

Aylar süren geceli gündüzlü çalışmadan sonra nihayet Kodingen.com’u ilk beta versiyonuyla yayına aldık.

Kodingen ile web üzerinde kodlamayı mümkün kılan bir yazılım geliştirme ortamı (Online Development Environment) hazırladık. Özetle neler yapılabileceğini aşağıdaki videoda anlatmaya çalıştık. Şimdilik sunduğumuz yazılım ortamı Apache/PHP/MySQL şeklinde, ileride RoR, Python, Perl ve birçok yazılım dilinin de oluşturulup test edilebilineceği bir yapıyı planlıyoruz.

İşte videosu: (İngilizce)

http://kodingen.com

Coda slider ve Lavalamp tabs

13 February 2009

Ilk Turkce blog girdimi de bu vesileyle yapiyorum, Macintoshta development yapanlar Coda adli programi bilirler panic.com/coda. Web sayfalarinda cok guzel kayarak gelen tablar kullanilmis, bi benzerini de ben jQuery kullanarak yaptim.

Bkz.

» Weiterlesen: Coda slider ve Lavalamp tabs

Inline-block problem in firefox 1 & 2

29 November 2008

Inline-block is really nice feature of css2.1 and css3, but unfortunately you have to make a work-around to achive its result in firefox 2. Mozilla guys fixed it in firefox 3 but i believe there is still plenty of people using firefox 2 or older. So there is that trick which i mention…

	display: -moz-inline-block;
	display: inline-block;

This fixes the problem :)

MooFlow JavaScript Image Carousel

24 September 2008


» Weiterlesen: MooFlow JavaScript Image Carousel

Javascript View Source

14 September 2008

To view the source of a page a small javascript function can be used, put following to head section of your document.

And add this link to have a visual element to click on the page that you put the code above.

View Source

CSS background shifting instead of changing images on hover

22 August 2008

Old an easy method but worth to mention it. Instead of creating two images and changing them on hover state, create just one image and shift them when necessary. For an instance:

this is our image. » Weiterlesen: CSS background shifting instead of changing images on hover

flash z-index issue with ajax/DHTML popups

22 August 2008

It has been always an headache viewing flash movies over popups when you have some flash content and dhtml popups. Here is a solution thanks to Renaun Erickson.




that’s it actually you should give those parameters to your flash object and correct z-indexing to your divs.