alexa  Menu
Css ile resim kullanmadan kurdele yapımı – Corner Ribbon with pure css

  04.12.2014 ,   1 yorum ,   2.662 kez okundu.


Genelde e-ticaret sitelerinde ürünlerin gösterildiği sayfada, ürünlerle ilgili indirim, yeni bir ürün olduğu, özel bir ürün olduöu, birkaç adet kaldığı veya kampanyalı olup olmadığı ile ilgili bilgileri öne çıkarmak için kurdele üzerinde tasarımı kullanılır.

Kurdele tasarımını sayfamızda kullanmak için belki birçok yol vardır. Örneğin resimler kullanarak arka fonda göstermek gibi.

Fakat bu yazımda resim yerine bu işlemi sadece html ve css ile nasıl kullanabileceğimizi göstermeye çalışacağım.

Daha doğrusu kodları paylaşacağım.

Öncelikle kurdele yapısını oluşturmak için HTML kodlarımızı sayfamıza eklememiz gerekiyor. HTML kodlarımız aşağıdaki gibi olacak:

HTML kodlarımızda dikkat ederseniz 3 farklı div kullandık. İlk div ürünümüzü göstermek için , ikincisi kurdele için, üçüncüsü kurdele üzerine yazılacak metin için kullanılmıştır. İlk div içerisinde ürün fotoğrafı niyetine bir fotoğraf kullandık.

Şimdi gelelim bu kodları görselleştirme kısmına. Bunun için de aşağıdaki CSS kodlarımızı css dökümanızıma eklememiz gerekecektir:

css-ile-kurdele-yapimi

işte bu kadar. CSS kodlarında değişiklikler yaparak kurdele rengini, boyutunu ve s. değişterbilirsiniz.
Örnek uygulamayı buradan indirebilirsiniz.

Uygulamayı buradan önizleme yapabilir veya aşağıdaki bölümden inceleyebilirsiniz:

1 yıldız2 yıldız3 yıldız4 yıldız5 yıldız (No Ratings Yet)
Loading...


online öğren

youtube kanalım

wordpress tema dersleri

bootstrap dersleri

1 yorum / geribildirim
  1. 08.12.2014, 21:48:46 tarihinde BALIK demiş ki:

    Çok kaliteli bir site gerçekten . Konuları tek tek üşenmeden okuyorum ve takip ediyorum paylaşım için teşekkürler

Güvenlik kodu *