TI

Pertanyaan

bagaimana cara menampilkan kepanjangan sebuah teks secara pop-up dalam halaman web?

1 Jawaban

  • Pop Up merupakan sebuah jendela yang muncul pada halaman sebuah website pada saat user atau pengunjung membuka sebuah website, Auto Pop Up biasanya digunakan untuk memasang sebuah iklan-iklan yang terdapat pada website tersebut, nah pada pembahasan kali ini kita akan mebahas Cara Membuat Auto Pop Up Menggunakan HTML dan CSS, cara kerja dari Auto Pop up ini yaitu ketika pengunjung ingin mengunjungi sebuah halaman website, maka secara otomatis akan muncul sebuah jendela pop-up yang terdapat pada website tersebut.

    Cara Membuat Auto Pop Up Menggunakan HTML dan CSS, langkah pertama kita akan membuat file html untuk strukturnya dan file CSS untuk mengatur layout atau tampilan dari pop up yang akan kita buat, tanpa berlama-lama kita yang pertama kita akan membuat file indexnya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html

    Cara Membuat Auto Pop Up Menggunakan HTML dan CSS          Cara Membuat Auto Pop Up Menggunakan HTML dan CSS                                            http://files.wacana.siap.web.id/content/uploads/2016/06/kursus-desain-jakarta.jpg" alt="">                          close              

    Setelah kita membuat file index.html berikutnya kita akan membuat file CSS untuk mengatur layout atau tampilannya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css

    *{margin: 0; padding: 0} @keyframes autopopup {     from {opacity: 0;margin-top:-200px;}     to {opacity: 1;} } #close {     background-color: rgba(64, 68, 65, 0.5);     position: fixed;     top:0;     left:0;     right:0;     bottom:0;     animation:autopopup 3.5s; } #close:target {     -webkit-transition:all 1s;     -moz-transition:all 1s;     transition:all 1s;     opacity: 0;     visibility: hidden; } @media (min-width: 768px){     .container-popup {         width:30%;     } } @media (max-width: 767px){     .container-popup {         width:30%;     } } .container-popup {     position: relative;     margin: 5% auto;     padding: 4px 3px;     background-color: #e1fff5;     color: #333;     border-radius: 8px; } .container-popup img {     width: 100% } .close {     position: absolute;     top:3px;     right:3px;     background-color: #33898B;     padding:7px 10px;     font-size: 15px;     text-decoration: none;     line-height: 1;     color:#fff; }

Pertanyaan Lainnya