come creare angoli smussati per gli elementi <div>

**capuno** · 24-11-2008, 20:55

Salve ragazzi

Sono alle prime armi con il mio sito web: dopo tanta fatica son riuscito a metter in piedi una struttura apparentemente guardabile, poi bisognerà verificare anche quanto sia valida.
Arrivo al punto: vorrei smussare gli angoli di Header, menu di sinistra, footer, div di destra... in somma vorrei avere tutti gli elementi della pagina con li angoli smussati.
Potrei riuscirci applicando qualche regola Css?

Grazie ancora

**Myaku** · 24-11-2008, 21:04

fai una ricerca per "Nifty corners".
Inotre, se ravani un po' nel forum troverai anche i suoi cloni.

**fcaldera** · 24-11-2008, 21:38

leggiti questa discussione
http://forum.html.it/forum/showthrea...ighlight=curvi

se presegui usando quella soluzione, il thread sarà spostato su javascript.
Ciao

**capuno** · 25-11-2008, 10:36

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Language" content="IT">

</head>

<body>

<div id="main">

  <div id="content">

    <div id="header">[img]../../ufiziaLE.gif[/img]</div> 

         <div id="navigator"></div>

          <div id="left">

      <div id="vertmenu">

        <ul>

          <ul>[*][url="home/lavorazione.html"]Home[/url][/list][*][url="home/mercato.html"]La storia della liquirizia[/url][*][url="home/leggenda.html"]La fabbricazione della liquirizia[/url][*][url="guest.html"]Benefici[/url][*][url="guest.html"]Contatti[/url][*][url="guest.html"]Links [/url]

          [/list]

       

      </div>

Grazie mille del tuo aiuto! Ho letto la discussione che mi hai indicato, ma la mia scarsa esperienza mi porta a chiederti come dovrei applicare lo script, ad esempio, a questi due div che ho messo nell'esempio su. Sono alle prime armi quindi ancora non ho tutta quella praticità e prontezza a capire immediatemente anche il più semplice dei suggerimenti.

Grazie

**fcaldera** · 25-11-2008, 11:20

1) ti scarichi le librerie necessarie e le copi nella tua struttura di cartelle
- ultima versione di jquery
- il plugin , la versione raccomandata per jquery 1.2.x

2) Scrivi questo codice nell'header della tua pagina (ipotizzando che i file che hai scaricato si trovino nella stessa cartella del fiel html

codice:

  <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
  <script src="jquery.corners.js" type="text/javascript"></script>

  <script type="text/javascript">
     $(document).ready(function(){ $('.rounded').corners(); });
  </script>

Nel tuo caso il doctype xhtml va bene (ed è comunque richiesto perchè la libreria possa funzionare)

3) L'effetto angolo curvo verrà applicato a tutti gli elementi a cui darai classe="rounded"
ad es.

codice:

<div class="rounded {12px}" style="background: #ccc; padding: 10px;">
     <span>jQuery Corners 0.3</span>
</div>

({12px} è il raggio di curvatura dell'angolo, varialo a piacere)

Discussione: come creare angoli smussati per gli elementi <div>

Strumenti discussione

Ricerca discussione

Visualizza

come creare angoli smussati per gli elementi <div>

Permessi di invio