1. Pagrindinis
  2. Programavimas
  3. [IPB] Forumo header pagrąžinimas burbulais
3
Gabas

[IPB] Forumo header pagrąžinimas burbulais

Gabas parašė prieš 10 metų skiltyje Programavimas

Gabas atsakė paskutinis prieš 10 metų. Viso atsakymų: 7.

Taigi šiandien sukūriau forumo papuošimą - judančius burbulus.

Burbulams panaudosime HTML,CSS ir CSS3. Norint juos turėti, jums reikia atlikti šiuos veiksmus:

Prisijungiame prie Administravimo (Admin CP) ir atsidarius Look&Feel pasirenkame savo dizainą. Tada paspaudžiame CSS ir "Add CSS file". Naują CSS failą pavadiname: "burbulai" Į burbulai.css įkeliame šį kodą: 

#burbulai {
position: absolute;
top: 0;
width: 50px;
height: 50px;
background: none;
border-radius: 50%;
box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 50px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px;
-webkit-animation: circle 10s linear infinite alternate;
animation: circle 10s linear infinite alternate;
}

@-webkit-keyframes burbulai {
   0%{
    box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;
  }
  100%{
    box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;
  }
}

@keyframes burbulai {
  0%{
    box-shadow: rgba(255,255,255,0.1) 160px 335px,rgba(255,255,255,0.1) 120px 275px 0 12px,rgba(255,255,255,0.1) 60px 355px 0 23px,rgba(255,255,255,0.1) 230px 445px 0 -8px,rgba(255,255,255,0.1) 60px 125px,rgba(255,255,255,0.1) 260px 145px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 350px 555px,rgba(255,255,255,0.1) 350px 273px 0 -2px,rgba(255,255,255,0.1) 150px 355px 0 23px,rgba(255,255,255,0.1) 180px 205px 0 -8px,rgba(255,255,255,0.1) 0px 0px 0 -8px,rgba(255,255,255,0.1) 100px 555px 0 10px;
  }
  100%{
    box-shadow: rgba(255,255,255,0.1) 70px 10px,rgba(255,255,255,0.1) 300px 205px 0 12px,rgba(255,255,255,0.1) 0px 155px 0 23px,rgba(255,255,255,0.1) 330px 45px 0 -8px,rgba(255,255,255,0.1) 460px 325px,rgba(255,255,255,0.1) 0px 445px 0 12px,rgba(255,255,255,0.1) 300px 145px 0 23px,rgba(255,255,255,0.1) 100px 85px 0 -8px,rgba(255,255,255,0.1) 50px 155px,rgba(255,255,255,0.1) 150px 273px 0 -2px,rgba(255,255,255,0.1) 0px 555px 0 23px,rgba(255,255,255,0.1) 180px 5px 0 -8px,rgba(255,255,255,0.1) 300px 555px 0 -8px,rgba(255,255,255,0.1) 350px 355px 0 10px;
  }
}

Išsaugome ir atsidarome GlobalTempate ir po "<div id='branding'>" įkeliame "<div id="burbulai">" Išsaugome,štai ir viskas.

Išvaizda (jūsų forume judės): alt

0
Hiwichi Profilis

Hiwichi prieš 10 metų

Ačiū, gražu ir rasiu kur panaudot

0
Crupynas Profilis

Crupynas prieš 10 metų

tikrai gražu, galbūt kažkam praverst tai ir panaudos savo forume:)

0
Gabas Profilis

Gabas prieš 10 metų

@Hiwichi Nėra už ką. Svarbiausia,kad panaudosi geriems tikslams :)

@Crupynas Na dėl grožio negalima ginčytis. Kiekvienas,kas norės pasidarys pagal save taip,kad atitiktu jų forumą.

1
Mantyška Profilis

Mantyška prieš 10 metų

Kodas tavo? Jei taip, MLDC.

2
Mantyška Profilis

Mantyška prieš 10 metų

Beje, jei bandysit. Pabandykit ir šitą kodą :

hexagon {

        width: 100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }

    #hexagon:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }

    #hexagon:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }
0
Saimon Profilis

Saimon prieš 10 metų

Ačiū už pagražinimą, pratestuosiu. @Mantyška O gal galėtum nuotrauką įdėti, kaip atrodo forume šis tavo kodas?

0
Gabas Profilis

Gabas prieš 10 metų

@Mantyška Taip,kodas mano. Beto dėkui už kitokį kodą,reikės pratestuoti :)