selim topaloÄŸlu

bir programcının günlüğü

CSS kategorisi

CSS ile resim boyutlandırma

  • Yazar : Selim TopaloÄŸlu
  • Kategori : CSS
Cuma
18 Temmuz 2008

Daha önce resim boyutlandırma için bir JavaScript kodu yayınlamıştım... Daha pratik ve daha hızlı bir çözüm olarak CSS ile resim boyutlandırma yapabiliyormuşuz :) Ayrıca CSS sayesinde belli bölgeler içinde bu stili sağlayabiliyoruz.

Kod için Natu ya teşekkürler.

PLAIN TEXT
CSS:
  1. #Ajans img {
  2.     max-width: 260px;
  3.     max-height: 260px;
  4.     letter-spacing: expression(((this.width>260)?this.width=260:null)?"normal":"normal");
  5.     word-spacing: expression(((this.height>260)?this.height=260:null)?"normal":"normal");
  6. }

Yukarıdaki kod ile #Ajans ID sinin içindeki resimlerin boyutunu küçültüyor.

  • Yorum Yaz

    • Linklerinizi ikonlandırın

    • Yazar : Selim TopaloÄŸlu
    • Kategori : CSS
    PerÅŸembe
    28 Åžubat 2008

    iconize.gif

    Iconize; IE7, Firefox, Safari, Opera, Camino gibi browserlarda başarıyla çalışan bir uygulama... Çeşitli uzantılarda verilen linkleri ikonlandırarak linkleri anlaşılır hale getirip sınıflandırmanızı sağlıyor. Ziyaretçileriniz için güzel birşey bence bu.

    Tek sorun IE6 da çalışmaması... Iconize sadece bir .css dosyasıyla çalışıyor :)

    İşte bir .pdf için kullanılan sınıf;

    PLAIN TEXT
    CSS:
    1. a[href$='.pdf'] {
    2.  padding: 5px 20px 5px 0;
    3.  background: transparent url(icons/icon_pdf.gif) no-repeat center right;
    4. }

    Sadece 4kb lık bu uygulama sıkıştırılmış olarak sunulmamış. Fakat bunu siz yapabilirsiniz...

  • 2 Yorum

    • CSS PNG-Hack

    • Yazar : Selim TopaloÄŸlu
    • Kategori : CSS
    Pazar
    17 Åžubat 2008

    CSS PNG-Hack| Transparan PNG resimler IE6 da saçmalıyordu, arkaplan cins cins renklerde çıkıyordu. Kısa bir çözüm olarak çok gerekli, önemli birşey değilse .gif haline getiriyordum. Daha sonra ise birkaç javascript kodu bulup onları kullanmaya başladım ama yüksek boyuttalardı. Ayrıca sayfa yüklendikten sonra bile bir süre ağırlık oluyordu.

    Daha etkili bir çözüm olarak şu geçti elime, fakat yinede hala istediğim gibi değil :)

    PLAIN TEXT
    CSS:
    1. .ie-png {
    2. _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='resim.png',sizingMethod='scale');
    3. height: 50px;
    4. width: 257px;
    5. }
    6.  
    7. .ie-hide{
    8. border:0px solid #FFFFFF;
    9. _display:none;
    10. }

    PLAIN TEXT
    HTML:
    1. <div class="ie-png"><img class="ie-hide" title="Andrew Sellick DOT COM" src="andrewsellick.png" alt="Andrew Sellick DOT COM" /></div>

  • Yorum Yaz

    • Kategoriler

    Arsivler

    Baglantilar

    Etiket Bulutu

    Reklamlar

    Son Yazılar


    Meta


    Son Yorumlar


    Copyright © 2007 - selim topaloÄŸlu
    WordPress | Tema : Design Disease