Css Round ile yuvarlak köşeli kutular hazırlamak
Hatırlıyorsanız daha önceden yuvarlak köşeli kutular yapmayı Tek bir resim dosyası ile yuvarlak köşeli kutular yapmak başlıklı yazımda adım adım anlatmıştım. O yazıda bütün css, html kodlarını kendimiz yazıyorduk ve gerekli olan görselleri bir imaj işleme yazılımında önceden hazırlamış olmamız gerekiyordu. Fakat yeni karşılaştığım Css Round isimli web aracı, bu işlemleri birkaç tıklama sonucunda otomatik olarak yapabiliyor ve bize büyük bir zaman kazandırabiliyor.
Css Round nasıl kullanılıyor?
cssround.com adresini kullanarak web aracının sayfasına girdikten sonra aşağıdaki adımları takip etmelisiniz:
- Corner raidus girişine oluşacak yuvarlak köşelerin yarıçap değerini giriyorsunuz. Bu değeri arttırdıkça daha oval bir köşe elde edersiniz.
- Enter a text here girişine ise isterseniz örnek bir metin giriyorsunuz. Bu metni daha sonra değiştirebilirsiniz tabii. Veya lorem ipsum gibi şablon bir metin girebilirsiniz.
- Round Color, Background Color ve Text Color bölümlerinden ise sırasıyla yuvarlak görsellerin rengini, kutunun arkaplan rengini ve 2. adımdaki metnin rengini ayarlıyorsunuz.
- Size of content girişine ise oluşacak kutunun genişlik değerini giriyorsunuz.
Bu 4 basit adımı tamamladıktan sonra Generate butonuna tıklayarak kutunuzun son halini yeni bir sayfada görebilirsiniz artık. Açılan bu yeni sayfanın altındaki Download it bağlantısına tıklayarak Css Round aracının oluşturduğunu yuvarlak köşeli kutuyu bilgisayarınıza zip dosyası olarak indirebilirsiniz.
Css Round ile hazırladığım örnek bir yuvarlak köşeli kutu
Ben bu web aracını gerçekten çok pratik buldum. Bakalım siz de beğenecek misiniz?
Yazıda da bahsettiğiniz tek dosya ile hazırlamak bence daha pratik. Teşekkürler.
Ben de bu aracı kullanıyorum genelde.
Daha kullanışsız şöyle bir araç daha var: http://www.spiffycorners.com
@AoRGuN
“Spiffy Corners” aracının ürettiği kodlar bana çok saçma geliyor. “Css Round” ise daha akla-mantığa uygun kodlar üretiyor.
Eskiden PhotoShopta yapardım, şimdi -moz-border-radius kullanıyorum. Her ne kadar Firefoxtan başka tarayıcıda görünmese de daha hoş. Söz konusu sitede tam yuvarlak köşeler yapamamakta. Bence de tek dosya olayı daha iyi.
@SalihSDemir
Bunu açar mısın biraz? Daha doğrusu “daha nasıl yuvarlak köşe yapacak ki?” diye sormak istiyorum
“-moz-border-radius” ben de kullanıyorum bazen. Hatta Safari için “-webkit-border-radius” da kullandığım oluyor. Ama bunlar tam çözüm değiller maalesef. Özellikle Firefox’ta kenarları yuvarlattığınız zaman bir anti-aliasing sorunu hemen göze çarpıyor.
Demek istediğim yuvarlakta biraz pürüz var. Yani görünüm tek dosyadaki kadar güzel değil. Tek dosya da 360 derecelik bir yuvarlağı 90 dercelik 4 parçaya ayırdığımızda çok güzel sonuç veriyor yine Teşekkür etme isteği duyuyorum bunu bizimle paylaştığın için.
CSS3 çıksa da resim dosyalarıyla uğraşmasak
Daha güzel çalıştığına inandığım başka bir servis,
http://wigflip.com/cornershop/
en azından daha yuvarlak
Yine döktürmüşsün. Siteyi arşivime ekledim.
@HC
Teşekkürler, gayet iyiymiş.
Benim bu aralar merakında olduğum bir konuydu. Ben diğer yazını görmemiştim. İşin mantığını anlamak açısından onu okusam daha iyi olacak. Site için de teşekkürler Erhan. Kısa yoldan halletmek için birebir.
Gayet güzel bir araç, kullanışlı ve de pratik. Teşekkürler.
Adaş senin yuvarlak köşelere karşı bir zafın var, bunu kesinlikle eminim
Imaj’ı iyi render edemiyor yaptığı servisin kodu prüzsüz bir geçirgenlike imaj değil bu kullanmayın. Teknik resimle olduktan sonra açın photoshop’u kendiniz kesin elinize yapışmaz. bir sitede birbirinden farklı oval çevirip durcak değilsin kalıpların bellidir çalışmada bir kere kesersin bir çalışma için o kadar.
Bencede çok güzel bir servis.. Ben de bununla ilgili sabah kısa bir yazı yazmıştım Bildirgeç’e..
evet gerçekten güzelmiş. bunu kullanırım artık
evet bunlar faydalı. Boşuna bi sürü vakit harcayacağınıza bu araçlardan basit ve etkili şeyler elde edilebilir.
Gerçekten kullanışlı bir site
Ben bu olaya bir aralar çok kafa yordum. Sonra böyle hizmet veren bir sürü site buldum. Zaten o zamanlar WordPress’i de bilmiyordum.
Teşekkürler.
Bir tane daha buldum
http://www.neuroticweb.com/recursos/css-rounded-box/
Çok yararlı bir yazı ve site fakat imaj kullanmak bana biraz zor geliyor
jQuery ile imajsız direk istediğiniz şekilde divler oluşturmak da elimizde.
Oo güzel paylaşım bu teşekkürler.