• Regolamento Macrocategoria DEV
    Prima di aprire un topic nella Macrocategoria DEV, è bene leggerne il suo regolamento. Sei un'azienda o un hosting/provider? Qui sono anche contenute informazioni per collaborare con Sciax2 ed ottenere l'accredito nella nostra community!

Problema risolto mi potete dire come fare questo effetto

Stato
Discussione chiusa ad ulteriori risposte.
21 Marzo 2012
338
6
42
28
Palermo
Miglior risposta
0
#1 Autore del topic
ciao, mi potete dire come fare questo effetto che sembra che la targhetta continua dietro il container ecco la foto



vorrei farlo con un menu che codici css e html devo usare? pleaseee
 

Matheeus

Amministratore
Amministratore
Redattore
28 Dicembre 2006
3.739
356
124
Aversa
Miglior risposta
0
#3
Ti conviene copiare uguale a così com'è fatto da XenForo, non c'è una regola speciale per generare quei 2 angolini, semplicemente sono 2 piccoli elementi applicati (span) prima e dopo il contenuto della targhetta.

HTML:
<em class="userBanner bannerRed wrapped" itemprop="title">
   <span class="before"></span> <!-- Angolo Sx-->
   <strong>Amministratore</strong>
   <span class="after"></span> <!-- Angolo Dx -->
</em>
CSS:
.userBanner {
    font-size: 11px;
    background: transparent url(styles/default/xenforo/gradients/form-button-white-25px.png) repeat-x top;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
    text-align: center;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    position: relative;
}

.userBanner.wrapped span {
    position: absolute;
    top: -4px;
    width: 5px;
    height: 4px;
    background-color: inherit;
}

.userBanner.wrapped span.before {
    border-top-left-radius: 3px;
    left: -1px;
}

.userBanner.wrapped span.after {
    border-top-right-radius: 3px;
    right: -1px;
}


.userBanner.bannerRed {
    color: #fff;
    background-color: red;
    border-color: #f88;
}

.userBanner.bannerRed.wrapped span {
    background-color: #f88;
}
 
21 Marzo 2012
338
6
42
28
Palermo
Miglior risposta
0
#4 Autore del topic
Ti conviene copiare uguale a così com'è fatto da XenForo, non c'è una regola speciale per generare quei 2 angolini, semplicemente sono 2 piccoli elementi applicati (span) prima e dopo il contenuto della targhetta.

HTML:
<em class="userBanner bannerRed wrapped" itemprop="title">
   <span class="before"></span> <!-- Angolo Sx-->
   <strong>Amministratore</strong>
   <span class="after"></span> <!-- Angolo Dx -->
</em>
CSS:
.userBanner {
    font-size: 11px;
    background: transparent url(styles/default/xenforo/gradients/form-button-white-25px.png) repeat-x top;
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0,.25);
    text-align: center;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
    position: relative;
}

.userBanner.wrapped span {
    position: absolute;
    top: -4px;
    width: 5px;
    height: 4px;
    background-color: inherit;
}

.userBanner.wrapped span.before {
    border-top-left-radius: 3px;
    left: -1px;
}

.userBanner.wrapped span.after {
    border-top-right-radius: 3px;
    right: -1px;
}


.userBanner.bannerRed {
    color: #fff;
    background-color: red;
    border-color: #f88;
}

.userBanner.bannerRed.wrapped span {
    background-color: #f88;
}
@Matheeus intanto ti ringrazio, ma volevo menu in questo genere che finisce così le targhette non mi serve poi non vorrei copiare sciax2, volevo qualcosa del genere per il menu
 

Matheeus

Amministratore
Amministratore
Redattore
28 Dicembre 2006
3.739
356
124
Aversa
Miglior risposta
0
#5
@Matheeus intanto ti ringrazio, ma volevo menu in questo genere che finisce così le targhette non mi serve poi non vorrei copiare sciax2, volevo qualcosa del genere per il menu
Non ho capito cosa vorresti farci con questo stile, in ogni caso quel codice li sopra lo puoi usare come base per ottenere la stessa struttura e poi personalizzarla a piacere modificando i CSS che ti ho postato.
 
Mi Piace: Marco5figo
Stato
Discussione chiusa ad ulteriori risposte.
Shoutbox
  1. S Santa Elera: Ho un problema con il mio telefonino
  2. S Santa Elera: C'è qualcuno che può aiutarmi?
  3. #KiK #KiK: CAFONE
  4. #KiK #KiK: ma come parla
  5. 404NotFound 404NotFound: figa
  6. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  7. Cristoforo58 Cristoforo58: Sono vietati link esterni a Sciax2 in shoutbox, grazie.
  8. Mr_Joker Mr_Joker: vi ricordiamo che domani pomeriggio dalle 2-5pm "Sunake Hotel" apre le selezioni a diverse posizione staff.
  9. Forzaese23 Forzaese23: retro babbo
  10. #KiK #KiK: createlo amikoooo
  11. B bbhojjjj76: fake login habbo ne avete?
  12. N NeroWhite BO: Buonasera
  13. #Egzon14 #Egzon14: dunque possiamo definirli morti i retro
  14. #Egzon14 #Egzon14: habbo passerà ad unity
  15. #KiK #KiK: ma infatti
  16. #Egzon14 #Egzon14: ancora con sti retro habbo
  17. M mikiamo2012: Qualcuno per creare retro habbo?
  18. topolino1958 topolino1958: Ragazzi dove posso postare un canale telegram per pubblicità?
  19. #KiK #KiK: e poi ci sono io che vado a sorseggiare un po di kaffè su habbo inglese
  20. #Egzon14 #Egzon14: è proprio morto sciax2
  21. #KiK #KiK: Amiciii come statee
  22. #KiK #KiK: Cerco staff per la mia kaffetteriaaaa
  23. LogR LogR: Cerco tutto lo staff per il mio retroserver
  24. LogR LogR: https://www.sciax2.it/forum/threads/cerco-team-progetto-pronto.700516/
  25. A AnonymousOwna: Lubex Hotel è online vi aspetto
Top