Web sitesi tasarlarken özellikle modallar veya açılan pencere içinde ihtiyaçlardan bir tanesi de çarpı butonudur. Bu makalemizde çarpı işaretli butonun tasarımını anlatacağım. Genel tasarımı kullanarak sizde buna göre renkleri kendinize göre dizayn edebilirsiniz.Eğer projenizde bootstrap kullanıyorsanız burada close clasını da kullanacağız. Eğer bootstrap kullanmıyorsanız aşağıdakı close sınıfı kodlarını öncelikle css dosyanıza ekleyin.
.close {
float: right;
font-size: 21px;
font-weight: bold;
line-height: 1;
color: #000;
text-shadow: 0 1px 0 #fff;
filter: alpha(opacity=20);
opacity: .2;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
filter: alpha(opacity=50);
opacity: .5;
}
Bu kodlara ek olarak söylemek istiyorum ki bu kodlarda opacity değerleri çok düşük olduğu için istediğiniz görünümü almayabilirsiniz. Bunun için bootstrap dosyasında opacity değerlerini yükseltebilirsiniz. Ben normal projelerimde .5 ve .7 olarak kullanıyorum.
Bu işlemden sonra yapacağınız diğer işlem ise çarpı butonunu eklemektir. Bunun için aşağıdaki kodları kullanabilirsiniz.
<button type="button" data-ng-click="iptal()" class="close custom-modal-close-button" aria-hidden="true" style="">×</button>
Ben bootstrap kütüpanesinde değişiklik yapmak istemediğim için burada custom-modal-close-button sınıfı tanımladım. Bunun için aşağıdaki kodları yazdım ve siz de projelerinizde istediğiniz renk ve opacity değerlerine göre bu kodlarda değişiklik yapmanız daha iyi olur. Eğer bootstrap kullanmıyorsanız direk olarak close sınıfında değişiklik yaparak custom-modal-close-button sınıfını silebilirsiniz.
.custom-modal-close-button
{
color:red !important;
font-size:2em !important;
}
Burada diğer önemli noktalardan bir tanesi kapatma buton işareti için herhangi bir resim kullanmadığımdır. Yani resim kullanmadan da kapatma butonu yapmak mümkün. Bunun için de html tarafından sağlanan & times; kullandım. Normalde & işaretinden sonra boşluk yani bu karakterden sonra direk times; geliyor. Ama blogger html kodunu direk olarak algıladığı için böyle yazmak zorunda kaldım.
Umarım makalem faydalı olmuştur. Konuyla alakalı sorularınız olursa lütfen sormaktan çekinmeyin. En kısa sürede yanıtlamaya çalışacağım.
Umarım makalem faydalı olmuştur. Konuyla alakalı sorularınız olursa lütfen sormaktan çekinmeyin. En kısa sürede yanıtlamaya çalışacağım.
merhaba, bununla ilgili size nereden ulaşabilirim?
YanıtlaSilSorun varsa buradan yazabilirsin. Çok özel konuysa agha_alizade@outlook.com adresine mail atabilirsin...
SilÖncelikle bu güzel paylaşım için teşekkür ederim.
YanıtlaSilBen bu kodlarla bir çalışma hazırladım css bölümüne belirttiğiniz kodları ekledim ve alt tarafta yer alan div alanına ise sizin belirttiğiniz detayı ekledim ve bu sonuca göre görselin sağ üst köşesinde x ( kapat ) kutucuğu çıktı buraya kadar tam istediğim gibi ama sorun şu bu x benim görseli kapatmıyor :) bu konuda yardımcı olabilirseniz çok sevinirim gerçekten ?
.close içine background-color:white; gibi bir özellik daha ekleyerek problemi çözebilirsin. white yerine istediğin farklı renk de olabilir. opacity: .2 yazan yer de 1 değerine kadar aralıkta yükseltebilirsin.
Silclose içine belirttiğiniz gibi backround-color:white; özelliğini ekledim ama görsel yine kapatılmadı.
YanıtlaSilBenim şu an kodlamamda şu şekilde bir çalışma mevcut size kısaca aktarayım.
Site içerisinde scroll ile sabit bir bant görselim var. Yani mouse ile aşağı yukarı inince sabit yerinde görünüyor. Ben bu görselin içine veya yakınına bir x (kapat) seçeneği ekleyerek kullanıcıların istediği zaman bunu kapatmalarını sağlamak istiyorum.
Scroll kodum ile birlikte sizin kodları tam olarak eklediğimde x kapat işareti görselimin sağ üstünde çıktı buraya kadar çok güzel geldim fakat bu x kapat düğmesi bu görseli basınca gizlemiyor yani kaldırmıyor.
En son belirttiğiniz bacnround-color:white; özelliğini eklememe rağmen görsel kapanmadı.. Size hazırladığım kodu göstermek için mail ile gönderdim. Yardımcı olursanız çok sevinirim.
Bu kapatma işlemi için extradan javascript kodu da eklemen lazım. Mailine cevap yazdım. Oradaki kodlarda da kapatma ve geri açma işlemini javascript yapıyor. Bu konuda da kendini geliştir.
YanıtlaSilKonuya gösterdiğiniz ilginiz, geri dönüşünüz ve desteğiniz için gerçekten çok teşekkür ederim.
YanıtlaSilKendimi bu konuda geliştirmeye çalışıyorum, Tesadüfen sizi tanıma fırsatım oldu, sizi sık sık takip edeceğim. Tekrar Tekrar teşekkürler.
Bir şey değil. Soruların olursa her zaman sora bilirsin. Fırsat buldukça yanıtlamaya çalışırım...
Sil