css deneylerim - üçgen

çok güzel css deneyleri ile karşılaştım bu gün. Biraz biraz denemelere başladım ben de.
Herkes gibi css ve üçgen meselesine uzaktan giriş yaptım:


benim üçgen modelim şöyle oldu:
(css ile sadece dik kenar üçgen çizmek için bir prototiptir. yükseklik, taban uzunluğu, konum ve renk değiştirilebilir.)
css:

<style type="text/css" media="screen">
  .ust {
  position:absolute; 
  left:150px; top:100px;/* konumlandır */   }

  .ust div {
    border-left-color: transparent;
    border-style: solid;
  }
  .ic{
  border-width: 0 0 /* taban: */ 300px /* yükseklik : */ 200px;
  border-bottom-color: #955;
  }
</style>

html:

<div class="ust">
<div class="ic"></div>
</div>

sonuç:

biraz oynayınca şuna benzer çıktılar da elde edilebilir.

konuyu irdelemek için:
http://www.tantek.com/ (css ve geometrik şekiller ile ilgili ilk incelediğim site)
http://www.tantek.com/CSS/Examples/polygons.html (yöntemler harika)

webkit sevimlidir

NOT DÜŞTÜM

sevimlidir çünkü oval köşeler yapmak için sizi uğraştırmaz, geçiş efekti için javascript yazmanıza gerek kalmaz (tek neden bu değil elbette). Kolaycı bir yaklaşımı vardır.

Bugün öğrendim ki; renk geçişini şöyle sağlayabiliyormuşum:

1. bir link için normal ve :hover durumları yazılır:

a{ background-color: #239; color: #fff; padding:10px;}
a:hover{ background-color: #932; color: #020202; }

2. Sonrasında da bügün örendiğim ve renk geçişini sağlayan şu kod
   

   a {-webkit-transition-duration: .33s; -webkit-transition-property: color, background;}

Geçiş süresini ayarlayarak daha hızlı veya yavaş bir geçiş yapılabilir. Ancak bu elbette mozilla ff ve ie için çalışmayacak olan bir koddur! Sadece webkit için. Chrome ve Safaride deneyebilirsiniz.

Zannederim biraz performansı düşürüyor. Abartmamak lazım. Örneğin şu blog da tüm oval köşeler ve geçişler çok kullanılmış.

Not: CSS3 ile zaten bu tarz işlemler standart olma (galiba) aşamasında efendim :
http://www.w3.org/TR/css3-transitions/

konuyu irdelemek için:

1. http://css-infos.net/property/-webkit-transition-duration
2. http://developer.apple.com/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/css/property/-webkit-transition-duration
3. http://webkit.org/blog/138/css-animation/
4. http://www.w3.org/TR/css3-transitions/

cURL ile İlk SSL url

Normel de şöyle kullanıyorum:

// method = POST/GET// adres = "http://..."
// veri = "a=deneme&b=deneme_deger2"

$ch  = curl_init(); // cURL oturumu baslatildi.
$url = $method == 'GET' ? $adres."?".$veri : $adres;  // get ? post
curl_setopt($ch, CURLOPT_URL,$url."");
if($method == 'POST') {
        curl_setopt($ch, CURLOPT_POSTFIELDS,"$veri");
 }
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
curl_setopt($ch,CURLOPT_REFERER,$referans);
curl_setopt($ch,CURLOPT_USERAGENT,$ajan);
curl_setopt($ch,CURLOPT_HTTPHEADER,array("application/x-www-form-urlencoded"));
$veri=curl_exec($ch);
echo $veri;

işte güvenli sayfalar için şu üst bilgiyi vermem gerekmekteymiş.

curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0);

Konuyu irdelemek için:
http://tr.php.net/manual/tr/book.curl.php
http://www.tonyspencer.com/2003/10/22/curl-with-php-and-apache-on-windows/

Mandelbrot Büyük Adammış

Fractal setler arasında en sevdiğim Mandelbrot'dur. Wiki'ye sordum tam istediğim cevabı verdi. En anlaşılır biçimiyle Mandelbrot seti algoritması (pseudocode olarak)

For each pixel on the screen do
{
 x = x0 = x co-ordinate of pixel
  y = y0 = y co-ordinate of pixel

  iteration = 0
  max_iteration = 1000

  while ( xx + yy = (22)  AND  iteration  max_iteration )
  {
    xtemp = xx - yy + x0
    y = 2xy + y0

    x = xtemp

    iteration = iteration + 1
  }

  if ( iteration == max_iteration )
  then
    color = black
  else
    color = iteration

  plot(x0,y0,color)
}

Konuyu irdelemek için bağlantılar
http://en.wikipedia.org/wiki/Mandelbrot_set#
http://www.codeproject.com/KB/cpp/mandelbrot_obfuscation.aspx (c++ ile Mandelbrot seti)
http://local.wasp.uwa.edu.au/~pbourke/fractals/mandelbrot/ (The Mandelbrot At A Glance)
http://snippets.dzone.com/tag/mandelbrot

Jquery Animasyonlarında Dikkat Edilmesi Gereken Önemli Bir Nokta

Bu sabah jquery ile yaşadığım kötü hatıra ile not etme gereği duydum

Sıradan bir menü efekti için mouse linklerin üzerine geldiğinde linklerin sağa doğru animasyonunu sağlayan kod kabaca şu şekilde olabilir.

$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).animate({ left: 30 });}, 
  function() { $(this).animate({ left: 0 });});
  });

Görmek için: http://jsbin.com/oyaxe

Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/oyaxe/edit

Fakat yukarıdaki örnekde mouse hızlıca linklerin üzerinden bir kaç gez gidip geldiğinde linklerin tüm animasyonu tamamlamak için animasyonları kuyruğa koyar ve mouse artık başka yerde olsa bile önceki hareketinin tetiklediği animasyonlar bir süre devam eder. Bu önemli nokta genellikle atlanıyor. Bunun önüne geçmek için animate() fonksiyonundan hemen önce stop() fonksiyonu kullanılmalı. Şöyle ki:

$(document).ready(function() {    
$('ul a')        
  .hover(
  function() {$(this).stop().animate({ left: 30 });}, 
  function() { $(this).stop().animate({ left: 0 });});
  });

Görmek için : http://jsbin.com/ayizi/

Kodu daha yakın incelemek/düzenlemek için: http://jsbin.com/ayizi/edit

Etraflıca bakınmanız için ek bağlantılar:
http://docs.jquery.com/Effects/stop
http://docs.jquery.com/Effects/animate
http://docs.jquery.com/API/1.3/Effects