Raggio bordo: angoli arrotondati in CSS. Angoli arrotondati in Photoshop

Saluti amici. Questo articolo è dedicato a un argomento abbastanza popolare tra i webmaster principianti: angoli arrotondati CSS... Le domande che cercherò di scoprire riguarderanno come creare angoli arrotondati degli elementi del sito utilizzando solo CSS senza ricorrere all'utilizzo di immagini.

Questo metodo ha sia pro che contro. I vantaggi, ovviamente, sono che non è necessario creare immagini utilizzando alcun editor grafico, caricarle sul server e quindi disporle utilizzando CSS nei punti necessari per creare l'effetto desiderato. In questo caso, è necessario creare elementi aggiuntivi nel codice HTML, nonché scrivere proprietà separate per ciascuno di essi.

Per quanto riguarda gli svantaggi, qui si può notare un problema: questo non è supportato da tutti i browser Web, in particolare dalle versioni obsolete di vari browser.

Tuttavia, gli angoli arrotondati con i CSS stanno diventando sempre più popolari. Come forse avrai già capito, in questo articolo utilizzeremo una proprietà disponibile nei CSS 3.

Angoli arrotondati con CSS.

Quindi, ad esempio, prenderemo un elemento DIV a blocchi e arrotondarne gli angoli. Ad esempio, creiamo un blocco e proprio nel codice HTML gli assegneremo delle proprietà usando l'attributo style. Innanzitutto, abbiamo un elemento block riempito con uno sfondo di qualsiasi colore:

A proposito, se hai bisogno di scoprire quale codice colore hai sul tuo sito web o su qualsiasi altro, ti tornerà utile.

Ed ecco come lo vedremo in un browser web:

Ora, per arrotondare gli angoli, utilizzeremo la proprietà "border-radius", che può essere tradotta come raggio del bordo. Sì, proprio così, e non così tanti potrebbero pensare che questo sia il raggio della cornice o come si chiama (bordo). Questa proprietà è responsabile del raggio dei bordi dell'elemento e non dei suoi bordi o bordi, che potrebbero non essere presenti. Tuttavia, la proprietà continuerà a funzionare senza il bordo dell'elemento. Spero tu capisca quello che intendo. Il valore di questa proprietà è qualsiasi valore numerico applicabile in CSS, come percentuali, pixel (px), punti (pt) e così via. Sì, e va tenuto presente che questa proprietà funziona su tutti e quattro gli angoli di un elemento contemporaneamente, inoltre, puoi specificare un raggio diverso per ogni angolo, ma ne parleremo più avanti. Per prima cosa, impostiamo il raggio degli angoli del nostro rettangolo. Sia 5 pixel:

Quindi l'elemento sarà simile a questo:

Ora, propongo di capire come aggiungere il tuo raggio per ogni angolo separatamente. Per fare ciò, possiamo utilizzare una proprietà che può essere applicata a ciascun angolo separatamente. Se parliamo dell'esempio precedente, nella forma completa le proprietà dell'elemento sarebbero simili a questa:

Raggio bordo in alto a sinistra: 5px; / * angolo in alto a sinistra * / raggio di confine in alto a destra: 5px; / * angolo in alto a destra * / raggio-bordo-basso-destra: 5px; / * angolo in basso a destra * / raggio di confine in basso a sinistra: 5px; / * angolo in basso a sinistra * /

Cioè, se vogliamo impostare ogni angolo il proprio valore, abbiamo una tale opportunità e per assicurarci di ciò prendiamo il seguente codice:

E quindi otteniamo il seguente risultato:

Come possiamo vedere, per il bordo di ogni angolo è impostato un valore di raggio diverso.
Inoltre, CSS ci consente di impostare un valore per il bordo di ogni angolo come abbreviazione, che sarà simile a questo:

Dove i valori seguiranno in questo ordine:

Raggio bordo: 5px / * angolo in alto a sinistra * / 10px / * angolo in alto a destra * / 15px / * angolo in basso a destra * / 20px / * angolo in basso a sinistra * /;

Di conseguenza, in base a quanto sopra, diventa chiaro che allo stesso modo possiamo impostare il bordo del raggio solo per tre (uno o due) angoli:

Ecco come appare in un browser web:

Se non sei ancora completamente confuso, continueremo. Il fatto è che il raggio per ogni confine d'angolo può essere specificato non in un valore, come abbiamo considerato sopra, ma in due valori. Cioè, due valori per ogni angolo. In questo caso, il primo valore imposterà il raggio dell'angolo in orizzontale e il secondo in verticale. Partiamo prima da un angolo:

In questo esempio, abbiamo interessato solo l'angolo superiore sinistro dell'elemento:

Se inserisci i valori al contrario, l'elemento apparirà così:

Su questo, sembrerebbe, sarebbe possibile, e finire, ma no. C'è un altro trucco. Nel valore della proprietà, possiamo usare una barra (/) tra i valori. Slash può aiutarci ad abbinare significati con altri significati. In generale, è più facile mostrare che raccontare. Iniziamo in modo semplice. Supponiamo di volere che il raggio orizzontale sia 35 pixel e il raggio verticale 5. Allo stesso tempo, in modo che questi valori si applichino a tutti gli angoli. Allora possiamo scrivere così:

E ottieni il seguente risultato:

Vediamo ora un esempio più complesso:

In questo caso il valore prima della barra (/) si riferirà al raggio orizzontale dello spigolo, e dopo il segno a quello verticale. In questo caso, i valori saranno correlati tra loro in questo modo:

Raggio bordo in alto a sinistra: 20px 15px; bordo-alto-destra-raggio: 10px 25px; bordo-basso-destra-raggio: 40px 15px; bordo-basso-raggio-sinistra: 10px 25px;

E il risultato sarà questo:

E alla fine dell'articolo, parliamo del supporto di questa proprietà da parte di diversi browser.

Angoli arrotondati in vari browser web.

Va notato qui che questa proprietà non è supportata da tutte le versioni del browser. La proprietà è supportata in IE9+, Firefox 4+, Chrome, Safari 5+ e Opera.
Ma per alcune versioni di browser che non supportano questa proprietà, esistono proprietà non standard che aggiungono un cosiddetto prefisso o prefisso alla proprietà.
Chrome prima della 4.0, Safari prima della 5.0, iOS utilizza la proprietà non standard -webkit-border-bottom-left-radius.
Firefox prima della 4.0 utilizza la proprietà non standard -moz-border-radius-bottomleft.
In questo caso, dovremo duplicare la proprietà utilizzando questi prefissi. Ad esempio, se abbiamo impostato la proprietà per il bordo dell'angolo in alto a sinistra su un valore di cinque pixel:

Raggio bordo in alto a sinistra: 5px;

Quindi la proprietà che la duplica usando i prefissi sarà simile a questa:

Webkit-bordo-basso-sinistra-raggio: 5px; -moz-border-radius-bottomleft: 5px; raggio di confine in alto a sinistra: 5px;

Spero davvero di essere stato in grado di spiegare tutto in modo chiaro e ora capisci come creare angoli arrotondati usando solo CSS.
Buona fortuna a te!

Tutti i browser moderni supportano gli standard di markup dell'ipertesto HTML5 e i fogli di stile CCS3. E se il tuo sito (modello) supporta standard moderni, puoi apportare modifiche al design, come arrotondamento di angoli, ombre, riempimento sfumato, senza ricorrere all'aiuto di editor grafici.

I webmaster usano comunemente angoli arrotondati per blocchi e cornici sui siti web. In questo articolo ti dirò come girare gli angoli di immagini e foto sul sito senza utilizzare programmi di terze parti, usando solo CSS.

Affinché gli esempi forniti nell'articolo vengano visualizzati correttamente sullo schermo, è necessario utilizzare le ultime versioni dei browser, FireFox, Chrome e quelli basati su di essi: Yandex Browser, Amigo e così via.

Angoli arrotondati per blocchi DIV

Secondo lo standard CSS3, in modo che il blocco DIV aveva gli angoli arrotondati, ha bisogno di essere stilizzato raggio di confine, ad esempio in questo modo:

Raggio di confine: 10px;

Per chiarezza, disegniamo due blocchi con angoli dritti e arrotondati:

Blocco ad angolo retto

Blocco ad angolo arrotondato

Arrotondare gli angoli delle immagini

Per analogia con l'esempio sopra, puoi arrotondare gli angoli delle immagini sul sito, come le fotografie. Per chiarezza, arrotondiamo gli angoli della foto dalla pagina.

Ecco l'immagine senza elaborazione CSS

Ora con angoli arrotondati:

Raggio di confine: 10px;

Per renderlo completamente "bello", fin dall'inizio aggiungeremo dei bordi ...

Raggio di confine: 10px; bordo: 5px #ccc solido;

e poi ombre:

Raggio di confine: 10px; bordo: 5px #ccc solido; box-ombra: 0 0 10px # 444;

L'opzione seguente (angoli arrotondati con ombra senza bordo) è molto simile a un tappetino per mouse:

Raggio di confine: 10px; box-ombra: 0 0 10px # 444;

E infine, una completa presa in giro dell'immagine

Raggio di confine: 50%; bordo: 5px #cfc solido; box-ombra: 0 0 10px # 444;

Se apri l'immagine in una nuova finestra, vedrai che (l'immagine) è invariata e tutti gli angoli, le ombre e così via sono solo il risultato dell'elaborazione CSS stili con il tuo browser.

Piccola digressione lirica

Stile confine aumenta la dimensione dell'immagine della quantità del bordo. Se il valore è specificato bordo: 5px, l'immagine finale sarà più ampia e più alta di 10 pixel. Considera questo, in alcuni casi il layout del sito potrebbe "andare".

Uno stile scatola-ombra non influisce sulle dimensioni dell'immagine, l'ombra sembra correre sugli elementi vicini. Quando lo si utilizza, il layout del sito non ne risente.

Come arrotondare gli angoli delle immagini in WordPress

In tutti gli esempi precedenti, ho scritto gli stili direttamente nei tag html del codice. Ad esempio, quest'ultimo si presenta così:

Questo è utile quando è necessario riprogettare un'immagine o una foto. E se volessi cambiare tutto? Bene, non scalerai tutto il tuo sito per modificare la visualizzazione di ciascuno. Nella maggior parte dei casi, tag WordPress IMG definisce diverse classi di stili. Uno per il nome univoco del file con l'immagine, l'altro per dimensione e anche per allineamento. È possibile integrare uno di essi con i parametri di cui sopra.

Ad esempio, per tutte le immagini per le quali non è specificato alcun allineamento, nel file style.css per il tuo tema WordPress, scrivi quanto segue:

Alignnone (raggio bordo: 10px; bordo: 5px #cfc solido; box-ombra: 0 0 10px # 444;)

O il metodo più difficile per tutte le immagini sul sito. Sostituisci lo stile per tutti i tag IMG:

Img (raggio bordo: 10px; bordo: 5px #cfc solido; box-ombra: 0 0 10px # 444;)

Quest'ultima opzione è adatta non solo per WordPress, ma per qualsiasi CMS. E anche per un semplice HTML pagine nel caso in cui, durante la visualizzazione delle immagini, il tag IMG non sono assegnate classi di stile. Ma fa attenzione. Se si ignorano le opzioni di visualizzazione del tag IMG cambierai l'aspetto di TUTTE le immagini sul sito!

Invece di una conclusione

Tutti gli esempi in questo articolo sono condizionali e intendono solo dimostrare alcune delle possibilità dei CSS per l'elaborazione delle immagini e mostrare quanto sia semplice.

Esistono molti esempi e tutorial su Internet per arrotondare gli angoli di un blocco o di tabelle, ma, di norma, queste guide si basano sull'uso di immagini o sull'uso di blocchi aggiuntivi.

Nella guida di oggi, ti mostrerò come puoi intorno agli angoli di una tabella usando solo CSS.

Markup diretto (la seconda tabella differisce nel layout delle celle nella riga superiore):

1. Arrotondare gli angoli direttamente sul tavolo (etichetta del tavolo).

BContentTables (bordo: 1px solido #CCCCCC; larghezza: 100%; moz-border-radius: 10px; / * Firefox * / -webkit-border-radius: 10px; / * Safari, Google Chrome * / -khtml-border-radius : 10px; / * KHTML * / -o-border-radius: 10px; / * Opera * / -ms-border-radius: 10px; / * IE8 * / border-radius: 10px; / * CSS3 * / overflow: nascosto ; margine: 0,7 em automatico;)

2. Rimuovere qualsiasi sfondo dalla prima riga.

Tr.bCTable_Header (sfondo: nessuno;)

3. Utilizzando la pseudo-classe: first-child e il> combinatore, selezionare la prima cella della tabella. Arrotonda l'angolo in alto a sinistra della prima cella. Lo sfondo della prima riga è composto dallo sfondo delle celle di questa riga.

Tr.bCTable_Header: first-child> td: first-child (border-radius: 10px 0px 0 0; -webkit-border-radius: 10px 0 0 0; -moz-border-radius: 10px 0 0 0; -ms- border-radius: 10px 0 0 0; -o-border-radius: 10px 0 0 0; -khtml-border-radius: 10px 0 0 0;) tr.bCTable_Header td (colore: bianco; dimensione carattere: 110%; colore di sfondo: # 00843C;)

4. Utilizzando la pseudo-classe: last-child e il> combinatore, selezionare l'ultima cella nella prima riga. Per questo, arrotonda l'angolo in alto a destra.

Tr.bCTable_Header: first-child> td: last-child (border-radius: 0 10px 0 0; -webkit-border-radius: 0 10px 0 0; -moz-border-radius: 0 10px 0 0; -ms- border-radius: 0 10px 0 0; -o-border-radius: 0 10px 0 0; -khtml-border-radius: 0 10px 0 0;)

5. Arrotondare gli angoli inferiori dell'ultima riga. Non dimenticare di rimuovere lo sfondo dall'ultima riga; lo sfondo della riga è impostato dallo sfondo delle celle dell'ultima riga.

BContentTables tr: last-child (border-radius: 0 0 10px 10px; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; -ms-border-radius: 0 0 10px 10px; -o-border-radius: 0 0 10px 10px; -khtml-border-radius: 0 0 10px 10px; sfondo: nessuno;)

6. Quindi, per analogia con i punti 3-4 dell'ultima riga, arrotondare gli angoli della prima e dell'ultima cella.

BContentTables tr: last-child td (background-color: # F1F1F2;) .bContentTables tr: last-child td: first-child (border-radius: 0 0 0 10px; -webkit-border-radius: 0 0 0 10px; -moz-border-radius: 0 0 0 10px; -ms-border-radius: 0 0 0 10px; -o-border-radius: 0 0 0 10px; -khtml-border-radius: 0 0 0 10px;). bContentTables tr: last-child td: last-child (border-radius: 0 0 10px 0; -webkit-border-radius: 0 0 10px 0; -moz-border-radius: 0 0 10px 0; -ms-border- raggio: 0 0 10px 0; -o-raggio-bordo: 0 0 10px 0; -khtml-raggio-bordo: 0 0 10px 0;)

Supporto browser

CTRL + N, oppure selezionare la funzione "Crea" nell'elenco "File" del menu a tendina. Successivamente, dalla stessa lista, seleziona l'operazione "Importa" o chiamala con la combinazione di tasti CTRL + I. Quindi, specifica il percorso del file immagine nella finestra di dialogo e fai clic sul pulsante Importa. Il tuo verrà visualizzato su questo.

Sulla barra degli strumenti, trova il rollout Editor di nodi e seleziona lo strumento Forma. Inoltre, questo strumento può essere richiamato premendo il tasto F10.

A destra dell'angolo che vuoi arrotondare, fai clic con il pulsante sinistro del mouse sul bordo dell'immagine. Nell'immagine apparirà un nuovo nodo, oltre ai quattro angoli. Quindi, seleziona l'opzione Converti linea in curva nel pannello Editor dei nodi. I segni rotondi appaiono a sinistra del dettaglio appena creato.

Alla stessa distanza dall'angolo, aggiungi un nuovo nodo sul lato perpendicolare dell'immagine. Senza modificare lo strumento Forma, fai doppio clic sul nodo d'angolo principale, verrà eliminato. L'angolo arrotondato dell'immagine diventerà immediatamente visibile. È possibile modificare il raggio di arrotondamento dell'angolo utilizzando i segni della linea guida.

In un modo molto semplice (coinvolgendo un oggetto vettoriale) tutto è possibile angoli avere un'immagine rettangolare. Senza ricorrere al metodo di modifica dei nodi sopra, disegna accanto all'immagine importata un rettangolo della stessa dimensione con lo strumento Rettangolo o chiama lo strumento con il tasto F6.

Con lo strumento "Forma" che già conosci, fai clic sul rettangolo e trascina uno qualsiasi dei suoi nodi sul rettangolo con il mouse. Gli angoli saranno arrotondati. Il raggio di arrotondamento può essere regolato con lo stesso utensile.
Contrassegna la tua immagine con la freccia dello strumento Seleziona.
Successivamente, nell'elenco del menu principale, trova il rollout "Effetti" e seleziona l'opzione "PowerClip" e dall'elenco a discesa la funzione "Posiziona all'interno del contenitore". Usa la freccia larga per indicare il rettangolo arrotondato che hai disegnato. Diventerà una cornice che ospiterà la tua immagine.

Nota

Tieni presente che l'importazione di un'immagine in un documento Corel Draw non modifica il file di immagine originale, quindi puoi utilizzarlo nella sua forma originale se non sei soddisfatto del risultato con gli angoli arrotondati.

Consigli utili

Usando la funzione "PowerClip", puoi inserire immagini in una varietà di fotogrammi dalle forme più bizzarre.

Fonti:

• La guida ufficiale per lavorare con Corel Draw, M. Matthews, C. Mathews, 1997
• Come appianare gli angoli acuti?

Avrai bisogno

• - computer
• - Programma Adobe Photoshop
• - la foto

Istruzioni

Fare clic con il pulsante destro del mouse sul livello Sfondo, selezionare Duplica livello e fare clic su OK (o Ctrl + J). Quindi crea un nuovo livello (Ctrl + Maiusc + N), posizionalo tra lo sfondo e la sua copia come mostrato nello screenshot (puoi riempirlo con un po' di colore, ad esempio il bianco). Disattiva il livello bloccato (fai clic sull'"occhio" a sinistra) o elimina.

Trova lo strumento Rettangolo nella tavolozza degli strumenti e tienilo premuto con il pulsante sinistro del mouse. Un menu aggiuntivo apparirà dove necessario (Strumento Rettangolo arrotondato). Imposta le impostazioni nella parte superiore come nello screenshot e modifica il campo Raggio a tuo piacimento (più, più arrotondati saranno gli angoli e più l'immagine verrà ritagliata.

Quindi, nella foto, seleziona il frammento che desideri utilizzare (ad esempio, come avatar). In caso di errore, premere Esc e ripetere la selezione. Dopo aver selezionato il frammento desiderato, fare clic con il pulsante destro del mouse su di esso e selezionare Crea selezione... e fare clic su OK.

Fatto, ora hai un livello fotografico con angoli arrotondati. Ora il livello Livello 2 (quello che funge da sfondo) può essere riempito con qualsiasi colore o lasciato trasparente.

Video collegati

Nota

I file png trasparenti sono un ottimo formato, ma non tutti i servizi online (social network, blog, ecc.) supportano i file png trasparenti. Se l'effetto angoli arrotondati non funziona, c'è un'altra via d'uscita.

Seleziona il colore di sfondo (Livello 2) più vicino a quello impostato nella pagina in cui stai postando la foto. Quindi salva il file in formato jpg.

Gli angoli arrotondati nella foto sembrano piuttosto interessanti e attraenti. Molto spesso, tali immagini vengono utilizzate durante la composizione di collage o la creazione di presentazioni. Inoltre, le immagini con angoli arrotondati possono essere utilizzate come miniature per i post sul sito.

Ci sono molti casi d'uso, ma c'è solo un modo (corretto) per ottenere una foto del genere. In questo tutorial, ti mostrerò come arrotondare gli angoli in Photoshop.

Apri la foto che andremo a modificare in Photoshop.

Quindi crea una copia del livello a cascata chiamato "Sfondo"... Per risparmiare tempo, utilizzeremo i tasti di scelta rapida CTRL+J.

La copia viene creata in modo da lasciare intatta l'immagine originale. Se (improvvisamente) qualcosa va storto, puoi rimuovere i livelli danneggiati e ricominciare da capo.

In questo caso, siamo interessati solo a una delle impostazioni: il raggio di arrotondamento. Il valore di questo parametro dipende dalle dimensioni e dalle esigenze dell'immagine.

Imposterò il valore su 30 pixel, quindi il risultato sarà visto meglio.

Ora dobbiamo allungare la forma risultante per riempire l'intera tela. Chiamare la funzione "Trasformazione libera" tasti di scelta rapida CTRL+T... Sulla forma viene visualizzata una cornice che è possibile utilizzare per spostare, ruotare e ridimensionare l'oggetto.

Siamo interessati al ridimensionamento. Allunga la forma usando le maniglie mostrate nello screenshot. Al termine del ridimensionamento, fare clic su ACCEDERE.

Consiglio: per rendere il ridimensionamento il più accurato possibile, cioè senza andare oltre la tela, è necessario abilitare il cosiddetto "Affrettato" Guarda lo schermo, dove è indicato dove si trova questa funzione.

La funzione fa in modo che gli oggetti si "agganciano" automaticamente agli elementi di costruzione e ai bordi della tela.

Come puoi vedere, intorno alla forma si è formata una selezione. Ora vai al livello di copia e rimuovi la visibilità dal livello di forma (vedi screenshot).

Il livello a cascata è ora attivo e pronto per la modifica. La modifica consiste nel rimuovere non necessari dagli angoli dell'immagine.

Inverti la selezione con i tasti di scelta rapida CTRL+MAIUSC+I... Ora la selezione rimane solo agli angoli.