Chat dizaynlari (CSS & HTML)

Сирожиддин
#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
Buni shu tarzda qilishingiz mumkin.

Quyida CSS qismi.

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.

4

Kod · HTML71 qator

<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>

Kod · CSS149 qator

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;

}

Kod · HTML223 qator

<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>

Kod · PHP7 qator

///////

@ UZFOR.UZ sayti uchun mahsus tarjima.

@ Koreys tilidan tarjima: Сирожиддин Эрназаров (GT yordamida)

///////

tahrirlandi ·

WaP_MaSTeR
#2 05:02:08, 3 Feb 2019

Сирожиддин, Buni qayerini style.css ga qöyamiz?

0

Сирожиддин
#3 08:46:29, 3 Feb 2019

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.

1

WaP_MaSTeR
#4 09:04:31, 3 Feb 2019

Сирожиддин, # Сирожиддин (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?

0

Сирожиддин
#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

Tayota
#6 19:27:51, 6 Mar 2019

Rais #1dagi ködlarni ziplab ham yuklang

0

Сирожиддин
#7 18:55:12, 31 May 2020

Lenta uchun!

0

tahrirlandi · лет oldin

code_one
#8 12:14:12, 7 Aug 2020

Сирожиддин, Tayyormiz

?

0

Сирожиддин
#9 16:52:12, 7 Aug 2020

CODER, # CODER (07.08.2020 / 12:14)
Сирожиддин, Tayyormiz

?тушунмадим?

0

@uMansurov
#10 18:08:37, 7 Aug 2020

shu xabarni class larini xuddi telegramnikidek qilishni iloji bormi bolsa birgalikda shu classni tuzaylik ?

0

code_one
#11 21:48:59, 19 Jan 2022

Hozirda tepadagi chat korinishi Juda eskirgan yangi malumot ertaga yuklanadi Juda qulay chat dizayni

0

Clever
#12 07:19:56, 20 Jan 2022

Krasav4ik, Ha, buni iloji bor, men tayyorladim...

2

gi8ri7
#13 11:32:33, 20 Jan 2022

MySQL, JavaScript va CSS PHP da tayyorlangan web application

3

Biriktirilgan fayllar 1

zipchatapp_-_codingnepal.zip18.06 KB · 206 yuklab olingan

tahrirlandi · лет oldin

code_one
#14 22:23:47, 20 Jan 2022

Kradoff ⁾, # Kradoff ⁾ (20.01.2022 / 11:32)
https://uzfor.uz/files/forum/attach/img_6092ada6387c9.jpg

MySQL, JavaScript va CSS PHP da tayyorlangan web applicationYaxshi YouTube da korgandim bu tayyorlanish vidosini

1

Navigatsiya