# 110: Photoshopping Yorum Başlığı - CSS Hileleri

Anonim

Photoshop'u burada incelemeye ve yorum alanını tasarlamaya başlıyoruz. En üstten başlıyoruz, yani bireysel yorumların kendisi (yorum formunun aksine).

Çalışmak için bir avatar yakaladık. Bunun için özel olarak hazırlanmış ve WordPress'e mükemmel bir şekilde entegre olduğu için Gravatar hizmetini kesinlikle kullanacağız. Bunun ötesinde, bir sitede size verdikleri kişisel sahiplenme duygusu ve avatarların büyük bir hayranıyım.

Bu tasarımın bir kısmı kolayca yerine oturuyor. Sitedeki tüm modüller gibi gri üzerine beyaz kutu kullanıyoruz. Avatarın içine giriyoruz. Adı bir bağlantı haline getiriyoruz ve her yerde kullandığımız bağlantı mavisini kullanıyoruz. Sitedeki tüm tarihlerin sahip olduğu aynı stili kullanarak yorumun tarihini ekledik. Bu arada Photoshop'ta olabildiğince düzenli kalıyoruz.

Yorum yanıtları için, oluşturduğumuz alt ızgara ile aynı hizada kalmaya çalışarak yorumu biraz aşağıya giriyoruz. Ayrıca, bu yanıtları oluşturmak için en üst düzey yorumlarda bir bağlantıya ihtiyacımız olacak, bu nedenle bu yorumların sağ üst kısmına bir bağlantı yerleştireceğiz. Her zamanki gibi aynı mavi bağlantı. Entypo simge setimizden bir ok kullanıyoruz - sadece orada mükemmel bir ok yoktu, yakın olanı seçip 180 derece döndürmemiz gerekiyordu. CSS'de bu sorun olmamalı.

Yorumun tarihinin de kalıcı bağlantı olduğunu netleştirmek için, bunun için de bir simge kullanacağız.

"İşlevsellik" bağlantılarının nereye gitmesi gerektiğiyle oynarız, ancak üzerinde çok uzun süre durmayız. Bunları görecek tek kişi benim. Kayıt için, bu benim devam ettiğim şey.