Web Deneyimleri

CSS ve XHTML ağırlıklı olarak Web Tasarımı ve Trendleri
üzerine paylaşımlar

CSS ile Resimlere Sınır Tanımlamak

Yazar: Volkan Görgülü | Yayın Tarihi: 19 Temmuz 2008 | Yorumlar: 24 Yorum
Kategori: CSS & XHTML

Herkese merhaba, daha önce CSS-Tricks.com ziyaretçileri ile misafir yazar olarak paylaştığım CSS ile resimlere sınır vermek bilgisini, bu paylaşımım ile WebDeneyimleri ziyaretçileri ile paylaşmak istiyorum.

Şöyle bir senaryo düşünün blogunuzun ya da web sitenizin tasarımı değişecek ve resimlerde kullanılan sınır renkleri ve tasarımıda değişecek. Eğer sınır tasarımını CSS ile tanımladıysanız problem yok ama Photoshop ile tanımalyıp resimleri sınırlı bir şekilde kayıt ettiyseniz bu işlem biraz ya da çok zamanınızı alacaktır.

Bu paylaşımımda CSS kullanarak, nasıl kolayca resimlerimize sınır tanımlamaları yapabileceğimizi göstereceğim.

CSS ile Resimlere Sınır Vermek

Umarım paylaşımım faydalı olmuştur, lütfen yorumlarınızı esirgemeyin ve düşüncelerinizi aşağıdaki yorum gönderme formu aracılığı ile paylaşın.

Bir sonraki paylaşımımda görüşmek üzere :)

Az Kalsın Unutuyordum

Paylaşımlarımı faydalı buluyorsanız, Web Deneyimleri’ni RSS, Twitter ya da Friendfeed yayınlarını kullanarak takip edebilirsiniz.

“RSS de nedir?” diye merak ediyorsanız, lütfen böyle buyrun :)

Başka bir paylaşımımı inceleyebilirsiniz

«

»

Yazıya Gelen Yorumlar

1

Oğuzcan Şahin
19 Temmuz 2008´de söylemiş


Eline sağlık gene başarılı bir video olmuş :)
RSS’i bir “?” işareti ile açıklamışsın bence aynısını Twitter ve FriendFeed içinde yapman :)
Başarılar.

2

nanoturkiye
19 Temmuz 2008´de söylemiş


Teşekkürler Volkan Abi. Blogumda hemen uyguladım. CSS bilgim sıfır, ama videolu olunca başardım! Bakalım ilerideki günlerde neler öğreneceğiz.

3

ICEEXOL
19 Temmuz 2008´de söylemiş


Son haftalarda CSS ile ilgili bilgileri toplamaya başlıyordum. Yazılı bilgilerin beraberinde videolu anlatımlar bulmakta ayrı bir keyif veriyor.

İyi günler

4

Volkan Görgülü
19 Temmuz 2008´de söylemiş


@Oğuzcan Şahin, evet planlarımın arasında Twitter ve FriendFeed’i tanıtmak var, tavsiye için teşekkür ederim.

@Nanoturkiye, okuduklarım beni çok mutlu etti.

@ICEEXOL, evet keşke ben de CSS’e başlarken bu tip videolar bulabilseydim, ingilizce biliyorsan CSS-Tricks‘deki videoları izlemeni öneririm.

5

ATiB3RK
20 Temmuz 2008´de söylemiş


Volkan öyle bir potansiyelin varki videoda anlatmış olduğun konuyu bilsemde izlemek istiyorum :D
Çok Teşekkürler.İyi Çalışmalar…

6

emin varol
20 Temmuz 2008´de söylemiş


çok güzel hocam tşkkürlr fakat videoları vimeo ya atınca sanki dağa güzel oluyordu…

7

Volkan Görgülü
20 Temmuz 2008´de söylemiş


@ATİB3RK, teşekkürler :)

@Emin Varol, Ne bakımdan daha güzel oluyordu, farklı bir sayfaya gitmeden izlemek mi? Ya da nedir, açarsanız çok mutlu olurum?

8

nanoturkiye
20 Temmuz 2008´de söylemiş


Vimeo’da video çok yavaş doluyor, bence böyle güzel.

9

Cihan ÖNER
20 Temmuz 2008´de söylemiş


Hoş bir bilgi :(

10

Ozan KOCADEMİR
20 Temmuz 2008´de söylemiş


Başarılı videoların devamını diliyorum.Teşekkürler.

11

Balkan Bulduk
21 Temmuz 2008´de söylemiş


Merhabalar;

Basit ama kullanışlı bir teknik, bazı çalışmalarımda kullanmıştım. Bir çok noktada arkaplana çerçeve resmi tanımlamak ta bazen görsel manada daha hoş oluyor. Bunu da tavsiye ederim. (Belki sonraki derslerde böyle bir çalışma da yapılabilir :) )

Çalışmalarının devamını dilerim @Volkan, kolay gelsin.

12

Volkan Görgülü
22 Temmuz 2008´de söylemiş


@Cihan, @Ozan teşekkür ederim.

@Balkan, evet haklısın, teşekkür ederim, bahsettiğin konuya da değinebilirim.

13

frock
30 Temmuz 2008´de söylemiş


afedersiniz ama bunu photoshopla yapan var mıdır ki? bilmeyen photoshop ile yapmaya da kalkışmıyordur bence. en azından ben bu videodan önce rastlamamıştım. en basitinden resimlere border eklemek tasarımdan hiç anlamayan kişiler tarafından dahi tee frontpage dönemlerinde <img border tagıyla yapılabiliyordu. gerçekçi olmak gerekirse bu tür videolar gereksiz. emeğine saygı duyarım o ayrı.

14

Volkan Görgülü
30 Temmuz 2008´de söylemiş


@frock, gereksiz olduğunu düşünmüyorum, en azından ben bir zaman photoshop ile verdim sınırları, üşendim CSS’ten vermeye ve ziyaretçilerime diyorum ki ben böyle yaptım ama siz yapmayın.

15

ERsin HAN
30 Temmuz 2008´de söylemiş


Volkan güzel bir konuya değinmişsin. Geçenlerde ben de aynı sorunla karşılaştım fakat CSS ile uğraşmak istemediğimden Paint.net de düzenledim.

Bu arada bu yazının sonundaki FriendFeed linkinde hata var. RSS, Twitter, FriendFeed linklerini tüm yazıların sonuna manuel olarak girmek yerine bunu otomatik yapan birşey var diye hatırlıyorum WordPress de.

16

Web Öğrencisi
30 Temmuz 2008´de söylemiş


Volkan abi video bulunamadı diyo. :(

17

Veysel Keleş
12 Ekim 2008´de söylemiş


video bulunamıyor volkan. İlgilenirsen seviniriz… bekliyoruz.

18

Volkan Görgülü
13 Ekim 2008´de söylemiş


@Veysel Keleş, teşekkürler uyarınız için, gerekli güncellemeyi yaptım.

19

emin
28 Ekim 2008´de söylemiş


çalışmalarının devamını diliyorum. eline sağlık.

20

Wanted
06 Aralık 2008´de söylemiş


Çok sağol videoyo için ben gereksiz görmüyorum şahsen böyle şeyleri sayende biraz daha anlamaya başladım css yi

21

Beceriksiz
23 Mart 2009´de söylemiş


Haklısınız, belki biraz basit bir konu fakat bende bilmiyordum. Ve bana sorarsanız web sitemizi asıl güzel hale getirenler Bu ince nüanslar.

22

deniz
05 Ocak 2010´de söylemiş


Harika paylaşımlar yapıyorsunuz gerçekten çok teşkkürler, kodlarınız zeval görmesin demek istiyorum.

Geri İzlemeler

  1. yakuter » İlginç Bir Deneyim, “Web Deneyimleri”
  2. Deniz Eker » Yeni bir başlangıç “Webdeneyimleri”

Düşüncelerinizi duymaya ihtiyacım var!

Zamanınızın çok küçük bir bölümünü ayırarak, bu form aracılığı ile yazı hakkındaki düşüncelerinizi paylaşabilirsiniz.

Yorum yazarken kullanabileceğiniz XHTML etiketlerini görmek istermisiniz?

Aşağıdaki XHTML etiketlerini kullanabilirsiniz:
<a href="" title=""></a>
<abbr title=""></abbr>
<acronym title=""></acronym>
<b></b>
<blockquote cite=""></blockquote>
<cite></cite>
<code></code>
<del datetime=""></del>
<em></em>
<i></i>
<q cite=""></q>
<strike></strike>
<strong></strong>