iPhone yoki boshqa smartfonda suhbatlashganda chat oynasi dizayni chiroyli ko'rinadi.
Buni yasash unchalik qiyin ish emas, chunki CSS3 mo'jizlari buni yasashimizga yordam beradi.
Keling buni amallarda ko'rib chiqsak:
Html
<ul> <li> <div class="u_yozdi"> <ul> </ul> </div> </li> <li style="margin-top:30px;"> <div class="u_yozdi"> <ul> <a href="https://uzfor.uz/48001-chat-dizaynlar.html">Chat dizaynlari (CSS & HTML)</a> </li> </ul> <div class="tumshuq_left"></div> </div> </li> <li style="margin-top:60px;"> <div class="men_yozdim"> <ul> </ul> </div> </li> <li style="margin-top:30px;"> <div class="men_yozdim"> <ul> </ul> </div> </li> </ul>
Quyida CSS qismi.
dl, dt, dd, ol, ul, li { margin: 0 0 0 0; padding: 0 0 0 0; } a { font-size: 12px; color: #FFF; } .u_yozdi { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-left: 20px; position: absolute; z-index: 999999; max-width: 250px; background: -moz-linear-gradient( bottom, #58abff 20%, #2484e7); background: -webkit-gradient(linear, 0 0, 0 20%, from(#58abff), to(#2484e7)); } .u_yozdi li { text-overflow: ellipsis; overflow: hidden; font-size: 12px; color: #FFF; display: block; padding: 5px; margin: 10px; } .tumshuq_left { width: 10px; height: 10px; left: -5px; top: 18px; position: absolute; -webkit-transform: rotate(45deg); background-color: #2484e7; z-index: 1000; } .men_yozdim { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-right: 20px; margin-left: auto; position: absolute; z-index: 999999; max-width: 250px; background: -moz-linear-gradient( bottom, #7efa42 20%, #5dd422); background: -webkit-gradient(linear, 0 0, 0 20%, from(#7efa42), to(#5dd422)); left: 28px; } .men_yozdim li { text-overflow: ellipsis; overflow: hidden; font-size: 12px; color: #FFF; display: block; padding: 5px; margin: 10px; } .tumshuq_right { width: 10px; height: 10px; left: 95%; top: 18px; position: absolute; -webkit-transform: rotate(45deg); background-color: #5dd422; z-index: 1000; }
HTML va CSS kodlarni bir sahifaga yozsangiz, sizda quyidagicha ko'rinish paydo bo'ladi: (rasm-1)

To'liq kod (+/-)
Shu bilan yangi chat ko'rinishi tayyor!
Keyingi darslarimizni ham kuzatib borishni unutmang, bizda faqat foydali va qizqarli ekperimentlar.
/////// @ UZFOR.UZ sayti uchun mahsus tarjima. @ Koreys tilidan tarjima: Сирожиддин Эрназаров (GT yordamida) ///////
?