Oggi, andiamo a mostrare un’effetto CSS molto gradito, diffusosi negli ultimi anni nei news blog, l’effetto in questione è la piegatura dell’angolo superiore del riquadro interessato. L’effetto è supportato da tutti i browser principali: (Firefox 3.5+, Chrome 4+, Safari 4+, Opera 10+, IE 8+.). L’effetto è meglio reso se utilizziamo dei colori pieni (o piatti) Vediamo adesso come applicarlo; /* il contenitore o il vostrofoglio */ div position: relative; width: 30%; padding: 1em 1.5em; margin: 2em auto; color: #ffffff; background: #ffffcc; /* parte che andrà a creare l’angolino piegato */ div:before content: “”; position: absolute; bottom: 0; right: 0; border-width: 16px 16px 0px 0px; border-style: solid; border-color: #ffff00 #ffffff; display: block; width: 0; Il codice sopra riportato, fa riferimento alla vecchia scuola, sotto vedremo come applicarlo con il CSS3 migliorando così anche l’effetto visivo; div { …
Guarda Articolo Originale:
CSS: Angoli piegati in un riquadro (effetto foglietto)
