Yangi formatda davom etish uchun: https://uzfor.net/view.php?act=post&id=48002
Postga havola
Сирожиддин [2882] [off]
Salom.
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
Buni shu tarzda qilishingiz mumkin.
Quyida CSS qismi.
HTML va CSS kodlarni bir sahifaga yozsangiz, sizda quyidagicha ko'rinish paydo bo'ladi: (rasm-1)
Shu bilan yangi chat ko'rinishi tayyor!
Keyingi darslarimizni ham kuzatib borishni unutmang, bizda faqat foydali va qizqarli ekperimentlar.
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 (+/-)
<style type="text/css"> 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; } </style> <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>
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) ///////