Nello script precedente abbiamo visto come gli pseudo-elementi :before e :after ci consentano facilmente di inserire elementi da utilizzare per applicare un comportamento al contenitore, senza modificare l'HTML.
Nello script di oggi vedremo come ottenere, con questa possibilità, un bordo arrotondato e sfumato. Ci basta definire queste regole, facendo attenzione a come andiamo ad ancorare in maniera assoluta uno pseudo-elemento prima dell'elemento stesso, a cui andiamo a specificare il bordo di sinistra, sfruttando la possibilità di definirlo arrotondato e con l'alpha, per la trasparenza.
.roundedBorder { position: relative; overflow: hidden; padding-left: 20px; } .roundedBorder:before { content: ""; position: absolute; width: 10px; top: 5%; height: 90%; left: -10px; border-radius: 15px / 50px; box-shadow:0 0 13px rgba(0,0,0,0.6); }}
L'effetto che otterremo una volta che abbiamo applicato questo CSS è contenuto nell'immagine seguente:
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Creare moduli CSS in React
Specificare il versioning nel path degli URL in ASP.NET Web API
Reactive form tipizzati con modellazione del FormBuilder in Angular
Generare file PDF da Blazor WebAssembly con iText
Gestire domini wildcard in Azure Container Apps
Usare il versioning con i controller di ASP.NET Core Web API
Usare lo spread operator con i collection initializer in C#
Eseguire query manipolando le liste contenute in un oggetto mappato verso una colonna JSON
Usare una container image come runner di GitHub Actions
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Utilizzare la session affinity con Azure Container Apps
Eseguire attività basate su eventi con Azure Container Jobs