Contenuto della clip div. Ritaglia il testo su una o più righe in base all'altezza con l'aggiunta di puntini di sospensione

Ciao a tutti, mi chiamo Anna Blok e oggi parleremo di come ritagliare le immagini senza utilizzare programmi di grafica.

Dove può essere utile?

Prima di tutto, su siti in cui il contenuto con immagini, molto probabilmente, non verrà ritagliato per adattarsi a un blocco particolare.

Un esempio lampante: blog su WordPress.

Supponiamo che tu voglia che la copertina del tuo articolo abbia un rapporto di aspetto 1:1 (quadrato). Le tue azioni:

1. Scarica un'immagine adatta da Internet;
2. Ritaglialo in Photoshop nelle proporzioni desiderate;
3. Pubblica un articolo.

Quando visiti il ​​sito, vedrai il risultato che ti aspettavi.

Ma supponiamo che tu abbia dimenticato di ritagliare l'immagine in Photoshop e abbia caricato un'immagine casuale come copertina da Internet, cosa accadrà allora?! Esatto, il layout si romperà. E se non hai utilizzato i CSS, un'immagine con risoluzione HD può bloccare completamente l'intera visualizzazione del testo. Pertanto, è importante poter ritagliare le immagini utilizzando gli stili CSS.

Diamo un'occhiata a diverse situazioni di come questo può essere implementato non solo con CSS, ma anche con SVG.

Esempio 1

Proviamo a ritagliare un'immagine che viene posizionata utilizzando l'immagine di sfondo. Creiamo del markup HTML

Passiamo allo stile CSS. Aggiungiamo un'immagine tramite background-image , specifichiamo i frame per la nostra immagine, centriamo l'immagine usando background-position e impostiamo la dimensione dello sfondo:

jpg); posizione di sfondo:centro-centro; dimensione dello sfondo: copertina; larghezza: 300px; altezza: 300px; )

Questo è stato il primo e più semplice metodo per ritagliare un'immagine. Ora diamo un'occhiata al secondo esempio.

Esempio 2

Supponiamo di avere lo stesso contenitore box all'interno del quale è presente un tag img con un'immagine che ora modelleremo.

Posizioniamo anche la nostra immagine al centro rispetto all'oggetto che creeremo. E usiamo una proprietà che viene usata abbastanza raramente: object-fit .

Box ( posizione: relativa; overflow:nascosto; larghezza:300px; altezza:300px; ) .box img ( posizione: assoluta; alto:50%; sinistra:50%; trasformazione:translate(-50%,-50%); larghezza:300px; altezza:300px; adattabilità all'oggetto:copertina; )

Secondo me questo è il metodo migliore. È l'ideale per i blog se utilizzi immagini per post di proporzioni completamente diverse.

Scopri di più su HTML e CSS qui:

Esempio 3

Al momento possiamo anche creare ritagli per le immagini se le inseriamo negli elementi SVG. Prendiamo un cerchio come esempio. Possiamo creare SVG usando i tag. Crea un tag svg avvolgente all'interno del quale sarà un tag cerchio e un tag pattern. Nel tag pattern scriviamo il tag image. In esso, specifichiamo l'attributo xlink:href e aggiungiamo un'immagine. Aggiungeremo anche gli attributi di larghezza e altezza. Ma non è tutto. Dovremo aggiungere un valore di riempimento. Per completare il nostro lavoro, aggiungeremo un attributo ausiliare preserveAspectRatio al tag dell'immagine, che ci consentirà di riempire la nostra immagine "da e verso" attorno al cerchio.

Non posso chiamare questo metodo generico. Ma può essere utilizzato in casi eccezionali. Ad esempio, se abbiamo toccato l'argomento di un blog, idealmente un tale metodo potrebbe adattarsi all'avatar dell'autore che scrive l'articolo.

Scopri di più su HTML e CSS qui:

Risultati:
Abbiamo trattato 3 metodi per ritagliare le immagini sui siti Web: utilizzando background-image , utilizzando il tag img e svg relativo al modello con incorporare bitmap utilizzando il tag immagine. Se conosci altri metodi per ritagliare un'immagine utilizzando SVG, condividili nei commenti. Non solo per me, ma anche per altri, sarà utile conoscerli.

Non dimenticare di porre le tue domande sul layout o sullo sviluppo front-end ai professionisti di FrontendHelp online.

C'è del testo di lunghezza arbitraria che deve essere visualizzato all'interno di un blocco di altezza e larghezza fisse. In questo caso, se il testo non si adatta completamente, dovrebbe essere visualizzato un frammento di testo che si adatta completamente al blocco specificato, dopodiché vengono impostati i puntini di sospensione.

Un compito del genere è abbastanza comune, allo stesso tempo non è così banale come sembra.

Variante per testo a riga singola in CSS

In questo caso, puoi utilizzare la proprietà text-overflow: ellipsis. In questo caso, il contenitore deve avere la proprietà traboccare pari nascosto o clip

Blocco (larghezza: 250px; spazio bianco: nowrap; overflow: nascosto; text-overflow: puntini di sospensione;)

Variante per testo multilinea in CSS

Il primo modo per ritagliare testo multilinea utilizzando le proprietà CSS è applicare pseudo-elementi :prima e :dopo. Iniziamo con il markup HTML

E ora le proprietà stesse

Box ( overflow : hidden ; height : 200px ; width : 300px ; line-height : 25px ; ) .box :before ( content : "" ; float : left ; width : 5px ; height : 200px ; ) .box > * :first -child ( float : right ; width : 100% ; margin-left : -5px ; ) .box :after ( content : "\02026" ; box-sizing : content-box ; float : right ; position : relativo ; top : -25px; sinistra: 100%; larghezza: 3em; margine-sinistra: -3em; riempimento-destra: 5px; allineamento del testo: destra; dimensione dello sfondo: 100% 100%; sfondo: gradiente lineare (a destra, rgba (255 , 255 , 255 , 0 ), bianco 50% , bianco ); )

Un altro modo consiste nell'utilizzare la proprietà column-width, che imposta la larghezza della colonna per il testo multilinea. È vero, quando si utilizza questo metodo, non funzionerà per installare i puntini di sospensione alla fine. HTML:

Blocco (overflow: nascosto; altezza: 200px; larghezza: 300px;)

Il terzo modo per risolvere il testo multilinea in CSS è per i browser Webkit. In esso, dovremo utilizzare diverse proprietà specifiche contemporaneamente con il prefisso -webkit. Il principale è -webkit-line-clamp che permette di specificare il numero di righe da visualizzare nel blocco. La soluzione è bella ma piuttosto limitata a causa del suo funzionamento in un gruppo limitato di browser

Block ( overflow : nascosto ; text-overflow : puntini di sospensione ; display : -webkit-box ; -webkit-line-clamp : 2 ; -webkit-box-orient : vertical ; )

Variante per testo multilinea in JavaScript

Qui viene utilizzato un ulteriore blocco invisibile, in cui inizialmente viene posizionato il nostro testo, dopodiché viene cancellato un carattere alla volta fino a quando l'altezza di questo blocco diventa inferiore o uguale all'altezza del blocco desiderato. E alla fine il testo viene spostato nel blocco originale.

var blocco = documento . querySelector(".block"), testo = blocco. innerHTML, clone = documento. createElement("div"); clone. stile. posizione = "assoluto" ; clone. stile. visibilità = "nascosto" ; clone. stile. larghezza = blocco. clientWidth + "px" ; clone. innerHTML = testo; documento. corpo . appendChild(clone); var l = testo. lunghezza - 1; for (; l >= 0 && clone . clientHeight > block . clientHeight ; --l) (clone . innerHTML = text. substring (0, l) + "..." ; ) block. innerHTML = clone . innerHTML ;

Questo è sotto forma di un plugin per jQuery:

(funzione ($) ( var truncate = funzione (el ) ( var text = el . text (), height = el . height (), clone = el . clone (); clone . css (( posizione : "assoluto" , visibilità : "nascosto" , altezza : "auto" )); el .after (clone ); var l = testo . lunghezza - 1 ; for (; l >= 0 && clone . altezza () > altezza ; -- l ) ( clone . text (text . substring (0 , l ) + "..." ); ) el . text (clone . text ()); clone . remove (); ); $ .fn .truncateText = funzione () ( restituisce this . each (function() ( tronca ($ (this )); )); ); )(jQuery ));

Problema

Non solo tagliare gli angoli è un modo rapido per fare le cose, ma è anche un'opzione di stile popolare sia nella stampa che nel web design. Molto spesso, si tratta di tagliare uno o più angoli del contenitore con un angolo di 45°. Di recente, a causa del fatto che lo skeuomorphism ha iniziato a perdere terreno rispetto al design piatto, questo effetto è particolarmente popolare. Quando gli angoli vengono tagliati su un solo lato, ciascuno dei quali occupa il 50% dell'altezza dell'elemento, si crea una forma a forma di freccia, che viene spesso utilizzata anche nei pulsanti e nelle navigazioni breadcrumb.

Tuttavia, non ci sono ancora abbastanza strumenti nei CSS per creare questo effetto con soluzioni one-liner semplici e dirette. Per questo motivo, molti sviluppatori tendono a utilizzare immagini di sfondo, coprendo gli angoli tagliati con triangoli (su uno sfondo a tinta unita) o creando l'intero sfondo con una o più immagini in cui gli angoli sono già tagliati. Ovviamente, questi metodi sono completamente rigidi, difficili da mantenere e aumentano la latenza a causa delle richieste HTTP aggiuntive e delle dimensioni complessive dei file del sito Web.

Un esempio di un sito Web in cui l'angolo tagliato (in basso a sinistra del campo Trova e prenota semitrasparente) si adatta perfettamente al design

Soluzione

Una possibile soluzione viene dagli onnipotenti gradienti CSS. Diciamo che vogliamo solo un angolo tagliato, diciamo l'angolo in basso a destra. Il trucco è sfruttare la capacità dei gradienti di prendere la direzione dell'angolo (es. 45deg) e le posizioni dei contorni di transizione del colore in valori assoluti, che non cambiano quando le dimensioni complessive dell'elemento a cui appartiene lo sfondo sono cambiato. Ne consegue da quanto sopra che un gradiente lineare ci sarà sufficiente.

Aggiungeremo un bordo di dissolvenza del colore trasparente per creare l'angolo tagliato e un altro bordo di dissolvenza del colore nella stessa posizione ma con il colore corrispondente allo sfondo. Il codice CSS sarebbe il seguente (per un angolo di 15px):

sfondo: #58a;
background:linear-gradient(-45deg, transparent 15px, #58a 0);

Semplice, vero? Vedete il risultato nell'immagine.

Tecnicamente, non abbiamo nemmeno bisogno del primo annuncio. L'abbiamo aggiunto solo come soluzione alternativa: se i gradienti CSS non sono supportati, la seconda dichiarazione verrà ignorata, quindi otterremo almeno uno sfondo a tinta unita. Supponiamo ora di volere due angoli tagliati, diciamo entrambi quelli inferiori. Questo non può essere fatto con un gradiente, quindi ne avremo bisogno due. Il tuo primo pensiero potrebbe essere qualcosa del genere:

sfondo: #58a;
sfondo: gradiente lineare (-45 gradi, trasparente 15 px, # 58a 0), gradiente lineare (45 gradi, trasparente 15 px, # 655 0);

Tuttavia, questo non funziona. Per impostazione predefinita, entrambi i gradienti occupano l'intera area dell'elemento, quindi si oscurano a vicenda. Dobbiamo renderli più piccoli limitando ciascuno a metà dell'elemento con background-size :
sfondo: #58a;

dimensione dello sfondo: 50% 100%

Puoi vedere il risultato nell'immagine.

Anche se abbiamo applicato un background-size , i gradienti si sovrappongono ancora. Il motivo è che ci siamo dimenticati di disattivare la ripetizione dello sfondo, quindi ciascuno degli sfondi viene ripetuto due volte. Di conseguenza, uno degli sfondi oscura ancora l'altro, ma questa volta a causa della ripetizione. La nuova versione del codice si presenta così:
sfondo: #58a;
sfondo: gradiente lineare(-45deg, trasparente 15px, #58a 0) a destra, gradiente lineare(45deg, trasparente 15px, #655 0) a sinistra;
dimensione dello sfondo: 50% 100%

Puoi vedere il risultato nell'immagine e assicurarti che lo sia - finalmente! - Lavorando! Probabilmente hai già indovinato come applicare questo effetto a tutti e quattro gli angoli. Avrai bisogno di quattro gradienti e codice come il seguente:

sfondo: #58a;
sfondo: gradiente lineare (135deg, trasparente 15px, #58a 0) in alto a sinistra,

gradiente lineare(-135deg, trasparente 15px, #655 0) in alto a destra,

gradiente lineare(-45deg, trasparente 15px, #58a 0) in basso a destra,

gradiente lineare(45deg, trasparente 15px, #655 0) in basso a sinistra;
dimensione dello sfondo: 50% 50%;
background-repeat: no-repeat;

CONSIGLI
Abbiamo usato colori diversi (#58a e #655) per semplificare il debug. In pratica, entrambi i gradienti saranno dello stesso colore.
Ma il problema con il codice precedente è che è difficile da mantenere. Sono necessarie cinque modifiche per cambiare il colore di sfondo e quattro per cambiare il valore dell'angolo. Un mixin creato con un preprocessore potrebbe ridurre il numero di ripetizioni. Ecco come sarebbe questo codice in SCSS:
SCSS
@mixin angoli smussati($bg,
$tl:0, $tr:$tl, $br:$tl, $bl:$tr) (
sfondo: $bg;
sfondo:
gradiente lineare(135deg, trasparente $tl, $bg 0)
in alto a sinistra,
gradiente lineare(225deg, trasparente $tr, $bg 0)
in alto a destra,
gradiente lineare(-45deg, trasparente $br, $bg 0)
in basso a destra,
gradiente lineare(45deg, trasparente $bl, $bg 0)
in basso a sinistra;
dimensione dello sfondo: 50% 50%;
background-repeat: no-repeat;
}

Quindi, quando necessario, può essere chiamato, come mostrato di seguito, con 2–5 argomenti:
SCSS
@include angoli smussati (#58a, 15px, 5px);
In questo esempio, ci ritroveremo con un elemento con gli angoli in alto a sinistra e in basso a destra ritagliati di 15px e gli angoli in alto a destra e in basso a sinistra di 5px, in modo simile a come funziona border-radius quando specifichiamo meno di quattro valori. Questo è possibile perché nel nostro mixin SCSS ci occupiamo anche dei valori predefiniti per gli argomenti - e sì, questi valori predefiniti possono fare riferimento anche ad altri argomenti.
PROVATE VOI!
http://play.csssecrets.io/bevel-corners-gradients

Angoli tagliati curvi

Un eccellente esempio di utilizzo di angoli tagliati curvi su un sito web http://g2geogeske.com il designer li ha resi un elemento centrale del design: sono presenti nella navigazione, nei contenuti e persino nel footer.
Una variazione del metodo del gradiente consente di creare angoli tagliati curvi, un effetto che molte persone chiamano "raggio del bordo interno" perché sembra una versione invertita degli angoli arrotondati. L'unica differenza è l'uso di gradienti radiali invece di quelli lineari:
sfondo: #58a;
sfondo: gradiente radiale (cerchio in alto a sinistra, trasparente 15px, #58a 0) in alto a sinistra,

gradiente radiale(cerchio in alto a destra, trasparente 15px, #58a 0) in alto a destra,

gradiente radiale (cerchio in basso a destra, trasparente 15px, #58a 0) in basso a destra,

gradiente radiale (cerchio in basso a sinistra, trasparente 15px, #58a 0) in basso a sinistra;
dimensione dello sfondo: 50% 50%;
background-repeat: no-repeat;

Come con la tecnica precedente, la dimensione dell'angolo può essere controllata dalle posizioni dei limiti di transizione del colore e anche la fusione può rendere questo codice più gestibile.

PROVATE VOI!
http://play.csssecrets.io/scoop-corners

Soluzione con SVG in linea e border-image

Sebbene la soluzione basata su gradiente funzioni, presenta alcuni inconvenienti:
il codice è molto lungo e pieno di ripetizioni. Nel caso più comune, quando abbiamo bisogno di tagliare tutti e quattro gli angoli della stessa quantità, la modifica di questa quantità comporta quattro modifiche al codice.

Allo stesso modo, anche la modifica del colore di sfondo richiede quattro modifiche e, se includi una soluzione di fallback, tutte e cinque; animare un cambiamento nelle dimensioni di un angolo tagliato è incredibilmente difficile e persino impossibile in alcuni browser. Fortunatamente, a seconda del risultato desiderato, possiamo utilizzare un altro paio di metodi. Uno di questi riguarda il sindacato immagine di confine con un codice SVG di stringa, in cui vengono generati gli angoli.

Sapere come funziona immagine di confine(se hai bisogno di rinfrescare questa conoscenza nella tua memoria, troverai un suggerimento) puoi già immaginare come il richiesto SVG-il codice?

Poiché le dimensioni complessive non sono importanti per noi (l'immagine del bordo si occupa del ridimensionamento e le immagini SVG si adattano perfettamente indipendentemente dalle dimensioni - la grafica vettoriale sia benedetta!), Tutte le dimensioni possono essere impostate su una per funzionare con valori più convenienti e più brevi . Il valore dell'angolo di taglio sarà uguale a uno e anche i lati diritti saranno uguali a uno. Risultato (ingrandito per leggibilità). Il codice richiesto per questo è mostrato di seguito:
bordo: 15px solido trasparente;


width="3" height="3" fill="%2358a">\
\
’);

Si noti che la dimensione del passaggio di affettatura è 1 . Non significa 1 pixel; la dimensione effettiva è determinata dal sistema di coordinate del file SVG (ecco perché non abbiamo unità). Se usiamo le percentuali, dovremmo approssimare 1/3 dell'immagine con un valore frazionario, come il 33,34%. È sempre rischioso ricorrere a valori approssimativi, poiché i valori possono essere arrotondati con diversi gradi di precisione in diversi browser. E attenendoci alle unità del sistema di coordinate del file SVG, ci risparmiamo il mal di testa che deriva da tutto quell'arrotondamento.

Come puoi vedere, gli angoli tagliati sono presenti, ma lo sfondo no. Esistono due modi per risolvere questo problema: definire uno sfondo o aggiungere la parola chiave fill alla dichiarazione dell'immagine del bordo in modo che l'elemento di slicing centrale non venga scartato. Nel nostro esempio, è meglio definire uno sfondo separato, poiché questa definizione servirà anche come soluzione alternativa per i browser che non supportano questa soluzione.

Inoltre, probabilmente avrai notato che gli angoli tagliati ora sono più piccoli rispetto alla tecnica precedente e questo può creare confusione. Dopotutto, impostiamo la larghezza del bordo su 15px! Il motivo è che nella soluzione del gradiente, questi 15 pixel sono stati misurati lungo la linea del gradiente, che è perpendicolare alla direzione del gradiente. Tuttavia, la larghezza della cornice non viene misurata in diagonale, ma in orizzontale/verticale.

Senti cosa sto portando? Sì, sì, ancora l'onnipresente teorema di Pitagora, che abbiamo utilizzato attivamente. Il diagramma nella figura dovrebbe chiarire la situazione.

In breve, per ottenere lo stesso risultato visivo, abbiamo bisogno di una larghezza del bordo che sia 2 volte la dimensione che useremmo nel metodo del gradiente. In questo caso, sarà un pixel, che è più ragionevole approssimare a 20px , a meno che non ci troviamo di fronte al compito di portare la dimensione della diagonale il più vicino possibile agli ambiti 15px:

border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0,2″/>\
’);
sfondo: #58a;
Tuttavia, come puoi vedere, il risultato non è proprio quello che ci aspettavamo.

Dove sono finiti i nostri angoli meticolosamente tagliati? Non temere, giovane padawan, gli angoli sono ancora lì. Capirai immediatamente cosa è successo se imposti un colore di sfondo diverso, ad esempio #655.
Come mostra la figura seguente, il motivo per cui i nostri angoli sono scomparsi risiede nello sfondo: lo sfondo che abbiamo definito sopra li oscura semplicemente. Tutto ciò che dobbiamo fare per risolvere questo inconveniente è utilizzare background-clip per evitare che lo sfondo si insinui sotto l'area del frame:
bordo: 20px solido trasparente;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\

0,2″/>\
’);
sfondo: #58a;

Ora il problema è risolto e il nostro campo sembra esattamente lo stesso di prima. Inoltre, questa volta possiamo ridimensionare facilmente gli angoli con una sola modifica: basta regolare la larghezza del bordo. Possiamo anche animare questo effetto perché la larghezza del bordo supporta l'animazione!

E la modifica dello sfondo ora richiede due modifiche anziché cinque. Inoltre, poiché il nostro sfondo è indipendente dall'effetto applicato agli angoli, possiamo definire un gradiente o qualsiasi altro motivo per esso, purché il colore sui bordi sia ancora #58a .

Ad esempio, utilizziamo un gradiente radiale dal colore hsla(0,0%,100%,.2) al trasparente. C'è solo un piccolo problema da risolvere. Se l'immagine del bordo non è supportata, la soluzione di fallback non si limita all'assenza di angoli tagliati. Poiché lo sfondo è ritagliato, lo spazio tra il bordo del campo e il suo contenuto diminuirà. Per risolvere questo problema, dobbiamo impostare la cornice sullo stesso colore che usiamo per lo sfondo:
bordo: 20px solido #58a;
border-image: 1 url('data:image/svg+xml,\

width="3" height="3" fill="%2358a">\
\
’);
sfondo: #58a;
clip di sfondo: imbottitura-box;

Nei browser dove la nostra definizione immagine di confineè supportato, questo colore verrà ignorato, ma dove l'immagine del bordo non funziona, il colore del bordo aggiuntivo fornirà una soluzione di fallback più elegante. Il suo unico inconveniente è l'aumento del numero di modifiche necessarie per cambiare il colore di sfondo a tre.
PROVATE VOI!
http://play.csssecrets.io/bevel-corners

Soluzione del tracciato di ritaglio

Sebbene la soluzione border-image sia molto compatta e segua bene i principi DRY, impone alcune limitazioni. Ad esempio, il nostro sfondo dovrebbe essere ancora interamente o almeno riempito con un colore solido lungo i bordi.

Ma cosa succede se si desidera utilizzare un diverso tipo di sfondo, come una trama, un motivo o un gradiente lineare? C'è un altro metodo che non ha tali restrizioni, sebbene, ovviamente, ci siano alcune restrizioni sul suo utilizzo.

Ricorda proprietà percorso di clip dal segreto "Come fare un rombo"? I tracciati di ritaglio CSS hanno una proprietà sorprendente: consentono di mescolare valori percentuali (che utilizziamo per specificare le dimensioni complessive di un elemento) con valori assoluti, fornendo un'incredibile flessibilità. Ad esempio, il codice per un tracciato di ritaglio che ritaglia un elemento alla forma di un rettangolo smussato di 20 px (misurato orizzontalmente) è simile al seguente:
sfondo: #58a;
percorso clip: poligono(
20px 0, calc(100% - 20px) 0, 100% 20px,
100% calc(100% - 20px), calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
Sebbene breve, questo frammento di codice non segue i principi DRY e questo diventa uno dei maggiori problemi se non si utilizza un preprocessore. In effetti, questo codice è la migliore illustrazione del principio WET di tutte le soluzioni CSS pure presentate in questo libro, poiché richiede otto (!) modifiche per cambiare la dimensione dell'angolo.

D'altra parte, lo sfondo può essere modificato con una sola modifica, quindi abbiamo almeno quello. Uno dei vantaggi di questo approccio è che possiamo utilizzare assolutamente qualsiasi sfondo o persino ritagliare elementi di sostituzione come le immagini. La figura mostra un'immagine stilizzata con angoli tagliati. Nessuno dei metodi precedenti può ottenere un tale effetto. Inoltre, la proprietà clip-path supporta l'animazione e possiamo animare non solo la modifica della dimensione dell'angolo, ma anche la transizione tra diverse forme.

Tutto ciò che serve è usare un altro tracciato di ritaglio. Oltre ad essere prolisso e ad avere un supporto limitato per il browser, lo svantaggio di questa soluzione è che se non ci occupiamo di un riempimento sufficientemente ampio, anche il testo verrà ritagliato, perché quando si ritaglia un elemento, i suoi costituenti non vengono presi tener conto in alcun modo. Al contrario, il metodo del gradiente consente al testo di estendersi semplicemente oltre gli angoli tagliati (perché sono solo una parte dello sfondo), mentre il metodo dell'immagine del bordo funziona come i normali bordi, avvolgendo il testo su una nuova riga.

PROVATE VOI!
http://play.csssecrets.io/bevel-corners-clipped

ANGOLI DI TAGLIO FUTURO
In futuro, non dovremo ricorrere a gradienti CSS, ritaglio o SVG per ottenere l'effetto angoli tagliati. Nuova proprietà forma d'angolo, incluso in Sfondi CSS e bordi livello 4 , ci eviterà il mal di testa. Sarà utilizzato per creare l'effetto di angoli tagliati in varie forme, in combinazione con la proprietà border-radius, necessaria per determinare la quantità di ritaglio. Ad esempio, per descrivere gli angoli tagliati di 15px su tutti i lati di un'immagine, basterebbe questo semplice codice:

raggio di confine: 15px;
forma d'angolo: smusso;

Leggi anche

In questo articolo ve ne parleremo 3 Tecniche CSS facili e veloci, che puoi utilizzare per mostrare solo una parte dell'immagine sulla tua pagina.

Tutti i metodi utilizzati qui in realtà richiedono solo un paio di righe css codice. Tuttavia, questa non è circoncisione nel vero senso della parola ( css non possiamo ancora farlo), nascondiamo e mostriamo solo la parte dell'immagine che vogliamo vedere.

Queste tecniche possono essere molto utili se vuoi ridimensionare un'immagine a una certa dimensione, ovvero se vuoi creare, ad esempio, un'anteprima (una copia più piccola dell'immagine) nella sezione delle notizie o qualcosa di simile.

Tecnica 1 - Utilizzo di margini negativi ( Margini negativi)

Se non hai voglia di usare margini negativi, ti suggeriamo di usare la tecnica №2 . Include un genitore (paragrafo) che ha una larghezza e un'altezza specifiche. Questo paragrafo ha la proprietà posizionamento impostato su relativo. La larghezza e l'altezza definiscono le dimensioni del campo visualizzato. E per un'immagine inserita all'interno di un paragrafo, la proprietà posizionamento impostato su assoluto. Quindi possiamo usare le proprietà superiore e sinistra disporre l'immagine come vogliamo, determinando nel processo quale parte dell'immagine mostrare e quale no.

HTML identico al codice della tecnica precedente:

< p class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "" / > < / a > < / p >

Ritaglia ( galleggiante: sinistra; margine: . 5em 10px . 5 em 0 ; overflow: nascosto /* questo è importante */ posizione: relativa; /* anche questo è importante */ bordo: 1px solido #ccc; larghezza: 200px altezza: 120px; Ritaglia immagine( posizione: assoluta; in alto: - 40px; a sinistra: -50px

Tecnica 3 - Utilizzo della proprietà di affettatura ( Proprietà clip)

Questa tecnica dovrebbe essere la più semplice, come proprietà della clip definisce la parte dell'elemento da mostrare. Sembra una soluzione perfetta, ma c'è un intoppo: elemento ritagliato deve essere posizionato in modo assoluto. Per poter utilizzare un elemento, dobbiamo aggiungere un elemento aggiuntivo, calcolare la dimensione dell'area visibile dell'immagine, aggiungere questa dimensione al genitore, usare il genitore... Molto lavoro, è vero?

Oh, un altro problema: la dimensione dell'elemento ritagliato non viene ridotta al valore del ritaglio, ma rimane alla sua dimensione originale (l'immagine al di fuori del ritaglio è semplicemente nascosta). Dobbiamo usare il posizionamento assoluto per spostare la finestra nell'angolo in alto a sinistra del genitore.

Tuttavia, non si può non menzionare affettare la proprietà. E così ancora il codice...

< div class = "crop" > < a href = "#" title = "" > < img src = "img.jpg" alt = "modello CSS" / > < / a > < / div >

Vlad Merzevich

Nonostante il fatto che i grandi monitor diagonali stiano diventando più convenienti e la loro risoluzione sia in costante crescita, a volte si presenta il compito di adattare molto testo in uno spazio limitato. Ad esempio, questo potrebbe essere necessario per la versione mobile del sito o per un'interfaccia in cui il numero di linee è importante. In questi casi, ha senso tagliare lunghe righe di testo, lasciando solo l'inizio della frase. Quindi porteremo l'interfaccia in una forma compatta e ridurremo la quantità di informazioni di output. Il taglio della linea stesso può essere eseguito sul lato server utilizzando lo stesso PHP, ma è più semplice tramite CSS e puoi sempre mostrare l'intero testo, ad esempio, quando ci passi sopra con il cursore del mouse. Quindi, considera i metodi su come tagliare il testo con le forbici immaginarie.

Si tratta davvero di utilizzare la proprietà di overflow con un valore di hidden . Le differenze risiedono solo nella diversa visualizzazione del nostro testo.

Usando il troppopieno

Affinché la proprietà overflow si mostri con il testo in tutto il suo splendore, è necessario annullare il ritorno a capo del testo utilizzando lo spazio bianco con un valore di nowrap . In caso contrario, non ci sarà alcun effetto di cui abbiamo bisogno, i trattini verranno aggiunti al testo e verrà visualizzato nella sua interezza. L'esempio 1 mostra come tagliare il testo lungo con un insieme specificato di proprietà di stile.

Esempio 1. overflow per il testo

HTML5 CSS3 IE Cr Op Sa Fx

Il risultato di questo esempio è mostrato in Fig. uno.

Riso. 1. L'aspetto del testo dopo l'applicazione della proprietà di overflow

Come si può vedere dalla figura, c'è un solo inconveniente in generale: non è ovvio che il testo abbia una continuazione, quindi l'utente deve esserne consapevole. Per questo, viene solitamente utilizzato un gradiente o puntini di sospensione.

Aggiunta di una sfumatura al testo

Per chiarire che il testo a destra non finisce, puoi applicare una sfumatura da trasparente a un colore di sfondo sopra di esso (Fig. 2). Ciò creerà l'effetto di una graduale dissoluzione del testo.

Riso. 2. Testo sfumato

L'esempio 2 mostra come creare questo effetto. Lo stile dell'elemento stesso rimarrà praticamente lo stesso, ma il gradiente stesso verrà aggiunto utilizzando lo pseudo-elemento ::after e CSS3. Per fare ciò, inseriamo uno pseudoelemento vuoto attraverso la proprietà content e applichiamo ad esso un gradiente con prefissi diversi per i browser principali (esempio 2). È facile modificare la larghezza del gradiente attraverso la larghezza , puoi anche regolare il grado di trasparenza sostituendo il valore 0.2 con il tuo.

Esempio 2: Gradiente sul testo

HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx

L'arpeggio intra-discreto trasforma il polyrange, questa è l'unica verticale nel tessuto polifonico ultra-polifonico.

Questo metodo non funziona in Internet Explorer fino alla versione 8.0 inclusa perché non supporta le sfumature. Ma puoi abbandonare CSS3 e creare un gradiente alla vecchia maniera, attraverso un'immagine PNG-24.

Questo metodo funziona solo con sfondi solidi e, nel caso di un'immagine di sfondo, il gradiente sul testo risalterà.

puntini di sospensione alla fine del testo

È inoltre possibile utilizzare i puntini di sospensione al posto di una sfumatura alla fine del testo ritagliato. Inoltre, verrà aggiunto automaticamente utilizzando la proprietà di overflow del testo. È compreso da tutti i browser, comprese le versioni precedenti di IE, e l'unico aspetto negativo di questa proprietà è il suo stato non chiaro finora. Questa proprietà sembra essere inclusa in CSS3, ma il codice con essa non supera la convalida.

L'esempio 3 mostra l'uso della proprietà text-overflow con un valore di ellipsis , che aggiunge i puntini di sospensione. Quando si sposta il cursore del mouse sul testo, questo viene visualizzato nella sua interezza ed evidenziato nel colore di sfondo.

Esempio 3: utilizzo dell'overflow del testo

HTML5 CSS3 IE Cr Op Sa Fx

L'inconscio provoca contrasto, questo è etichettato da Lee Ross come un errore di attribuzione fondamentale che può essere rintracciato in molti esperimenti.

Il risultato di questo esempio è mostrato in Fig. 3.

Riso. 3. Testo con i puntini di sospensione

Il grande vantaggio di questi metodi è il fatto che il gradiente e i puntini di sospensione non vengono visualizzati se il testo è breve e si adatta completamente all'area specificata. Quindi il testo verrà visualizzato normalmente quando è completamente visibile sullo schermo e ritagliato quando la larghezza dell'elemento viene ridotta.