Chat dizaynlari (CSS & HTML)

3339

Yangi formatda davom etish uchun: https://uzfor.net/48001-chat-dizaynlari-css-html.html?id=47555

Chat dizaynlari (CSS & HTML)

Xabarlar

Сирожиддин [2882] [off]
#1 11:18:51, 29 Jan 2019

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

<ul>
    <li>
        <div class="u_yozdi">
            <ul>
                <li>UZFOR.UZ - Gangam Style!</li>
            </ul>
            <div class="tumshuq_left"></div>
        </div>
    </li>
    <li style="margin-top:30px;">
        <div class="u_yozdi">
            <ul>
                <li>Men bu yerdaman!<br />
                    <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>
                <li>Qoil ajoyib Style bo'libdi!</li>
            </ul>
            <div class="tumshuq_right"></div>
        </div>
    </li>
    <li style="margin-top:30px;">
        <div class="men_yozdim">
            <ul>
                <li>Gangam tog'a rahmat!</li>
            </ul>
            <div class="tumshuq_right"></div>
        </div>
    </li>
</ul>

Buni shu tarzda qilishingiz mumkin.

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>
                <li>UZFOR.UZ - Gangam Style!</li>
            </ul>
            <div class="tumshuq_left"></div>
        </div>
    </li>
    <li style="margin-top:30px;">
        <div class="u_yozdi">
            <ul>
                <li>Men bu yerdaman!<br />
                    <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>
                <li>Qoil ajoyib Style bo'libdi!</li>
            </ul>
            <div class="tumshuq_right"></div>
        </div>
    </li>
    <li style="margin-top:30px;">
        <div class="men_yozdim">
            <ul>
                <li>Gangam tog'a rahmat!</li>
            </ul>
            <div class="tumshuq_right"></div>
        </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)
///////

+ (4): Hanov_Dayko, NetLizard, Shahobiddin, Жасурбек,

Biriktirilgan fayllar [1]:
— gangam_style_chat.jpg (18.89 KB) (243 ↴)

Сирожиддин [2882] [off]
#5 09:17:04, 3 Feb 2019

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.

+ (1): WaP_MaSTeR,