Navigazione

    Privacy - Termini e condizioni
    © 2020 Search On Media Group S.r.l.
    • Registrati
    • Accedi
    • CATEGORIES
    • Discussioni
    • Non letti
    • Recenti
    • Hashtags
    • Popolare
    • Utenti
    • Stream
    • Interest
    • Categories
    1. Home
    2. Categorie
    3. Coding e Sistemistica
    4. Coding
    5. angoli arrotondati
    Questa discussione è stata cancellata. Solo gli utenti con diritti di gestione possono vederla.
    • L
      laburno User Attivo • ultima modifica di

      @8enrico4 said:

      Salve a tutti.
      Vorrei creare un contenitore #div Css per circondare e corniciare il layout del mio sito, ma non so come fare per rendere arrotondati gli angoli, qualcuno mi puo` consigliare come fare?
      grazie in anticipo
      saluti

      Esistono diverse soluzioni che fanno ricorso all'uso delle immagini di sfondo.
      La più gretta è quella di annidiare 4 div e mettere ad ognuna come sfondo un angolo arrotondato, posizionato di conseguenza.

      Soluzioni più pratiche ce ne sono, alcune ricorrono a javascript per non appesantire il markup, come i nifty corners:
      http://www.html.it/articoli/niftycube/index.html

      In ogni caso la soluzione giusta dipende dal tipo di box che ti serve, se è fisso o liquido e da cosa andrà a contenere.

      0 Miglior Risposta Ringrazia Cita Rispondi

        1 Risposta Ultima Risposta
      • I
        ideasiti User Attivo • ultima modifica di

        Ciao io ho usato questo, senza usare immagini di sfondo, ma solo codice html e css.

        codice HTML

        [html]<div class="contenitore">
        <span class="curva segmento1"></span>
        <span class="curva segmento2"></span>
        <span class="curva segmento3"></span>
        <span class="curva segmento4"></span>
        <div class="curva contenuto">

                contenuto               
             
            </div>
          <span class="curva segmento4"></span>
        

        <span class="curva segmento3"></span>
        <span class="curva segmento2"></span>
        <span class="curva segmento1"></span> </div>[/html]Codice CSS

        
        
        .curva {
            display:block;     height: 1px; overflow: hidden;      background: #ccffff;
        }
        
        .segmento1{ margin: 0 5px }
        
        .segmento2{    margin: 0 3px }
        
        .segmento3{    margin: 0 2px}
        
        .segmento4{    margin: 0 1px;    height: 2px;}
        
        .contenuto {
               height: auto;
               padding: 1px 10px;
        }
        
        0 Miglior Risposta Ringrazia Cita Rispondi

          1 Risposta Ultima Risposta
        • C
          cali1981 Super User • ultima modifica di

          Bello! Grazie per l'utilissimo codice! Peccato che se devo fare 10 box in un stessa pagina viene fuori un codice html lunghissimo, che influisce negativamente anceh sul posizionameno...

          0 Miglior Risposta Ringrazia Cita Rispondi

            1 Risposta Ultima Risposta
          • K
            karedas Super User • ultima modifica di

            MHhh io personalmente non amo usare così tanto lo span per annidamenti dato che di base lo spam è affibiato a tutt'altro genere.

            Consiglierei di prendere in considerazione l'uso dei div piuttosto 🙂
            Ma è un mio personale parere.
            ciao!

            0 Miglior Risposta Ringrazia Cita Rispondi

              1 Risposta Ultima Risposta
            • C
              cali1981 Super User • ultima modifica di

              Cosa intendi con spam? E con div che tecnica intedi?

              0 Miglior Risposta Ringrazia Cita Rispondi

                1 Risposta Ultima Risposta
              • M
                meryk User Attivo • ultima modifica di

                ...il tag span 🙂

                0 Miglior Risposta Ringrazia Cita Rispondi

                  1 Risposta Ultima Risposta
                • K
                  karedas Super User • ultima modifica di

                  Si scusate errore mio di battitura , era "span" non spam. 🙂

                  0 Miglior Risposta Ringrazia Cita Rispondi

                    1 Risposta Ultima Risposta
                  • C
                    cali1981 Super User • ultima modifica di

                    Immaginavo, ma lo aveva scritto 2-3 volte!:)

                    0 Miglior Risposta Ringrazia Cita Rispondi

                      1 Risposta Ultima Risposta
                    • L
                      lelebart User Newbie • ultima modifica di

                      io mi sono trovato molto bene con questi consigli firmati cssplay:
                      www.cssplay.co.uk/boxes/, nello specifico
                      www.cssplay.co.uk/boxes/snazzy2.html
                      www.cssplay.co.uk/boxes/krazy.html
                      www.cssplay.co.uk/boxes/chunky.html
                      www.cssplay.co.uk/boxes/slant.html
                      www.cssplay.co.uk/boxes/curves.html
                      tutte le soluzioni proposte non fanno uso né di javascript né di immagini, solo xhtml e css puri! buon lavoro!!

                      edit: dimenticavo che al limite esiste un plugin per jquery:
                      ( - methvin.com/jquery/jq-corner.html
                      http://methvin.com/jquery/jq-corner-demo.html)

                      0 Miglior Risposta Ringrazia Cita Rispondi

                        1 Risposta Ultima Risposta
                      • C
                        cali1981 Super User • ultima modifica di

                        Non male i link sopra! Grazie!

                        0 Miglior Risposta Ringrazia Cita Rispondi

                          1 Risposta Ultima Risposta
                        • 8
                          8enrico4 User Attivo • ultima modifica di

                          penso che dovrebbero impiccare i programmatori del browser i.e, faro` un layout con photoshop, e il resto lo metto dentro usando le posizioni assolute MI ARRENDO.
                          Grazie cmq per l'aiuto e i consigli

                          0 Miglior Risposta Ringrazia Cita Rispondi

                            1 Risposta Ultima Risposta
                          Caricamento altri post
                          Rispondi
                          • Topic risposta
                          Effettua l'accesso per rispondere
                          • Da Vecchi a Nuovi
                          • Da Nuovi a Vecchi
                          • Più Voti