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

Quyida CSS qismi.
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;

}


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.

Kod · PHP7 qator
///////

@ UZFOR.UZ sayti uchun mahsus tarjima.

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

///////
Biriktirilgan fayllar 1
gangam_style_chat.jpg18.89 KB · 354 yuklab olingan
4 Mavzuga qaytish