Yangi formatda davom etish uchun: https://uzfor.net/48001-chat-dizaynlari-css-html.html
Chat dizaynlari (CSS & HTML)
Mavzu fayllari (4)
Xabarlar
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) ///////
Biriktirilgan fayllar [1]:
— gangam_style_chat.jpg (18.89 KB) (257 ↴)
— gangam_style_chat.jpg (18.89 KB) (257 ↴)
WaP_MaSTeR, # WaP_MaSTeR (03.02.2019 / 05:02)
Сирожиддин, Buni qayerini style.css ga qöyamiz?html kodlarini .html faylga, CSS kodlarni .css faylga yozasiz.
Сирожиддин, Buni qayerini style.css ga qöyamiz?html kodlarini .html faylga, CSS kodlarni .css faylga yozasiz.
+ (1): WaP_MaSTeR,
Сирожиддин, # Сирожиддин (03.02.2019 / 08:46)
WaP_MaSTeR, html kodlarini .html faylga, CSS kodlarni .css faylga yozasiz.bu koda chatda yozishmala anu rasmdagi dek bolib chiqadimi?
WaP_MaSTeR, html kodlarini .html faylga, CSS kodlarni .css faylga yozasiz.bu koda chatda yozishmala anu rasmdagi dek bolib chiqadimi?
WaP_MaSTeR, # WaP_MaSTeR (03.02.2019 / 09:04)
Сирожиддин, bu koda chatda yozishmala anu rasmdagi dek bolib chiqadimi?HTML va CSS kodlarni bir sahifaga yozsangiz, sizda quyidagicha ko'rinish paydo bo'ladi: (rasm-1)
#1-posti o'qib chiqib keyin savol bering iltimos, javoblardan savol yasayabsiz hozir.
Сирожиддин, bu koda chatda yozishmala anu rasmdagi dek bolib chiqadimi?HTML va CSS kodlarni bir sahifaga yozsangiz, sizda quyidagicha ko'rinish paydo bo'ladi: (rasm-1)
#1-posti o'qib chiqib keyin savol bering iltimos, javoblardan savol yasayabsiz hozir.
+ (1): WaP_MaSTeR,
shu xabarni class larini xuddi telegramnikidek qilishni iloji bormi bolsa birgalikda shu classni tuzaylik ?
Biriktirilgan fayllar [1]:
— screenshot_20200807_180553.jpg (161.28 KB) (195 ↴)
— screenshot_20200807_180553.jpg (161.28 KB) (195 ↴)
Hozirda tepadagi chat korinishi Juda eskirgan yangi malumot ertaga yuklanadi Juda qulay chat dizayni
MySQL, JavaScript va CSS PHP da tayyorlangan web application
Biriktirilgan fayllar [2]:
— img_6092ada6387c9.jpg (32.84 KB) (134 ↴)
— chatapp_-_codingnepal.zip (18.06 KB) (143 ↴)
— img_6092ada6387c9.jpg (32.84 KB) (134 ↴)
— chatapp_-_codingnepal.zip (18.06 KB) (143 ↴)
Kradoff ⁾, # Kradoff ⁾ (20.01.2022 / 11:32)
files/forum/attach/img_6092ada6387c9.jpg
MySQL, JavaScript va CSS PHP da tayyorlangan web applicationYaxshi YouTube da korgandim bu tayyorlanish vidosini
files/forum/attach/img_6092ada6387c9.jpg
MySQL, JavaScript va CSS PHP da tayyorlangan web applicationYaxshi YouTube da korgandim bu tayyorlanish vidosini
+ (1): gi8ri7,
Tavsiya etamiz:
- Hoziroq maydonlarni to'ldiring va reklamangizni joylashtiring!
Mavzuga oid xabarlar soni: 15 ta
So'ngi faollik vaqti: 22:23:47, 20 Jan 2022