08-22-2025, 11:51 AM
Merhaba sevgili forum üyelerimiz!
Forumumuzun Profil Çerçeveleri Marketi sistemi ile profil fotoğraflarınızı özelleştirebilir, kendi tasarladığınız çerçeveleri yükleyerek tarzınızı ortaya koyabilirsiniz! Bu konuda, kendi .css dosyanızı nasıl oluşturacağınızı, nelere dikkat etmeniz gerektiğini ve nasıl yükleyeceğinizi adım adım anlatacağız. Amacımız, sizlere rehberlik ederek yaratıcılığınızı özgürce ifade etmenize yardımcı olmak!
Profil Çerçeveleri Marketi Nedir?
Profil Çerçeveleri Marketi, kullanıcıların profil fotoğraflarına özel çerçeveler eklemesine olanak tanıyan bir sistemdir. Forumumuzda hem hazır çerçeveler satın alabilir hem de kendi tasarladığınız .css dosyalarını yükleyerek benzersiz çerçeveler oluşturabilirsiniz. Yüklediğiniz çerçeveler, yönetici onayı sonrası markete eklenir ve diğer kullanıcılar tarafından satın alınabilir!
Kendi Çerçeve Tasarımınızı Nasıl Oluşturursunuz?
Kendi profil çerçevenizi tasarlamak için bir .css dosyası oluşturmanız gerekiyor. Bu dosya, profil fotoğrafınızın çevresindeki çerçevenin stilini tanımlar. İşte adım adım rehber:
1️⃣ CSS Dosyası Oluşturma
- Araçlar: Notepad, Visual Studio Code veya Sublime Text gibi herhangi bir metin editörü kullanabilirsiniz.
- Dosya Adı: Dosyanızı .css uzantısıyla kaydedin (örneğin, benim_cercem.css).
- Temel Yapı: Çerçeveniz için bir CSS sınıfı tanımlamalısınız. Forum sistemimiz, çerçevenizin doğru çalışması için sınıf adının profile_frame_ ile başlamasını gerektirir (örneğin, profile_frame_benim_cercem).
2️⃣ Örnek CSS Tasarımları
Aşağıda, forumumuzda çalışan iki örnek çerçeve tasarımını inceleyebilirsiniz. Bu örnekler, çerçevenizin nasıl görünebileceği konusunda size fikir verebilir:
Örnek 1: Alevli Çerçeve (flame.css)
Bu çerçeve, profil fotoğrafınızın etrafına bir alev efekti ekler:
Kod:
.profile_frame {
background: url('https://shared.fastly.steamstatic.com/community_assets/images/items/322330/beaee5e90d93bfafa5f5f55acb23abfd28ad180c.png') no-repeat center;
background-size: 120px 120px;
width: 120%;
height: 120%;
position: absolute;
top: -10%;
left: -10%;
pointer-events: none;
box-sizing: border-box;
border-radius: 0;
z-index: 1;
}- background: Çerçevenin görseli olarak bir alev resmi kullanılır.
- background-size, width, height: Çerçevenin boyutları avatarın %120’si olacak şekilde ayarlanmıştır.
- position: absolute: Çerçevenin avatarın etrafında doğru konumda durmasını sağlar.
- pointer-events: none: Kullanıcıların çerçeveye tıklamasını engeller.
- z-index: 1: Çerçevenin avatarın önünde görünmesini sağlar.
Örnek 2: Neon Vorteks Çerçevesi (neon_vortex.css)
Bu çerçeve, neon efektli ve animasyonlu bir tasarım sunar:
Kod:
.profile_frame_neon_vortex {
border: 3px solid transparent;
border-image: linear-gradient(45deg, #8B00FF, #00DDEB) 1;
box-shadow: 0 0 10px rgba(139, 0, 255, 0.7), 0 0 20px rgba(0, 221, 235, 0.5);
animation: vortexGlow 2s infinite alternate, vortexPulse 1.5s infinite;
}
@keyframes vortexGlow {
0% {
box-shadow: 0 0 10px rgba(139, 0, 255, 0.7), 0 0 20px rgba(0, 221, 235, 0.5);
border-image: linear-gradient(45deg, #8B00FF, #00DDEB) 1;
}
100% {
box-shadow: 0 0 20px rgba(139, 0, 255, 1), 0 0 30px rgba(0, 221, 235, 0.8);
border-image: linear-gradient(45deg, #00DDEB, #8B00FF) 1;
}
}
@keyframes vortexPulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
100% {
transform: scale(1);
}
}- border-image: Çerçeveye mor ve camgöbeği renklerinde bir gradyan efekti uygular.
- box-shadow: Neon parlama efekti oluşturur.
- animation: Çerçeveye titreşim (vortexPulse) ve parlama (vortexGlow) animasyonları ekler.
3️⃣ Kendi CSS’nizi Tasarlarken Nelere Dikkat Etmelisiniz?
- Sınıf Adı: Çerçevenizin CSS sınıfı profile_frame_ ile başlamalıdır. Sistem, yüklenen dosyayı bu formata otomatik olarak uyarlar.
- Boyutlar: Çerçevenizin boyutlarını (width, height) avatarın boyutlarına uygun şekilde ayarlayın. Genellikle %100-120 idealdir.
- Konumlandırma: position: absolute kullanarak çerçeveyi avatarın etrafına hizalayın. top ve left değerleriyle ortalayabilirsiniz.
- Efektler: border, box-shadow, animation gibi özelliklerle yaratıcı efektler ekleyebilirsiniz. Ancak dosya boyutunun 100 KB’yi aşmamasına dikkat edin!
- Resim Kullanımı: Çerçevenizde resim kullanıyorsanız, resmin internette erişilebilir bir URL’de olduğundan emin olun. Yerel dosya yolları çalışmaz.
- Animasyonlar: Animasyon eklemek için @keyframes kullanabilirsiniz, ancak çok karmaşık animasyonlar performansı etkileyebilir.
4️⃣ CSS Dosyanızı Test Edin
- CSS’nizi tarayıcınızın geliştirici araçlarıyla (F12 tuşu) test edebilirsiniz.
- Market sayfamızda çerçeve önizleme özelliği bulunuyor. Yüklemeden önce tasarımınızı kontrol edebilirsiniz.
Çerçevenizi Forumumuza Nasıl Yüklersiniz?
1. Market Sayfasına Gidin:
- Üst menüdeki Profil Çerçeveleri Marketi bağlantısına tıklayın veya https://forum.yougamearea.com/misc.php?a...ame_market adresine gidin.
2. Çerçeve Yükleme Formunu Doldurun:
- Çerçeve Adı: Çerçevenize dikkat çekici bir isim verin (maks. 100 karakter).
- Dosya: Hazırladığınız .css dosyasını seçin.
- Fiyat: Çerçevenizin marketteki SPuan fiyatını belirleyin (örneğin, 50-500 SPuan).
- Not: Dosya boyutu 100 KB’yi aşmamalı ve yalnızca .css dosyaları kabul edilir.
3. Yükleme Sınırları:
- Normal kullanıcılar saatte en fazla 5 çerçeve yükleyebilir. Yöneticiler ve moderatörler bu sınıra tabi değildir.
- Yüklediğiniz çerçeve, yönetici onayı bekler. Onaylandıktan sonra markete eklenir.
4. Onay Süreci:
- Yüklediğiniz çerçeve, yöneticiler tarafından incelenir. Uygun bulunursa markete eklenir.
- Reddedilirse, size bir bildirim gönderilir.
İpuçları ve Öneriler
- Yaratıcı Olun: Neon efektler, gradyanlar veya temalı tasarımlar (örneğin, oyun veya film temalı çerçeveler) oldukça popüler!
- Performans: Çok karmaşık CSS kodları yazmaktan kaçının. Büyük dosyalar veya ağır animasyonlar yükleme sürelerini artırabilir.
- Örneklerden İlham Alın: Yukarıdaki flame.css ve neon_vortex.css örneklerini inceleyebilirsiniz.
- SPuan Kazanın: Çerçeveniz marketten satın alındıkça SPuan kazanabilirsiniz!
❓ Sık Sorulan Sorular
S: Çerçevem neden onaylanmadı?
C: Çerçeveniz uygun olmayan içerik (örneğin, telifli resimler) içeriyorsa veya teknik olarak hatalıysa (örneğin, yanlış CSS sınıfı) reddedilebilir. Reddedilme nedeni size bildirilir.
S: Hangi CSS özelliklerini kullanabilirim?
C: border, box-shadow, background, animation, transform gibi standart CSS özelliklerini kullanabilirsiniz. JavaScript veya HTML ekleyemezsiniz.
S: Çerçevemin fiyatını nasıl belirlemeliyim?
C: Çerçevenizin kalitesine ve yaratıcılığına göre bir fiyat belirleyin. Popüler çerçeveler genellikle 100-300 SPuan arasında fiyatlandırılır.
S: Daha fazla yardım alabilir miyim?
C: Tabii ki! Bu konuya yorum yazarak veya özel mesajla yöneticilere ulaşarak destek alabilirsiniz.
Hadi Başlayın!
Kendi profil çerçevenizi tasarlayarak forumda fark yaratmaya hazır mısınız? Hemen bir .css dosyası oluşturun, yukarıdaki rehberi takip ederek yükleyin ve yaratıcılığınızı herkese gösterin! Sorularınız varsa, sorum var konusu açmaktan çekinmeyin.
Not: Forum kurallarına uygun olmayan çerçeveler (örneğin, rahatsız edici veya telifli içerik) onaylanmayacaktır.
![[Resim: n7crjf0.png]](https://i.hizliresim.com/n7crjf0.png)