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
Utilizzare Model as a Service su Microsoft Azure
Controllare gli accessi IP alle app con Azure Container Apps
Sviluppare un'interfaccia utente in React con Tailwind CSS e Preline UI
Autenticarsi in modo sicuro su Azure tramite GitHub Actions
Come migrare da una form non tipizzata a una form tipizzata in Angular
Utilizzare HiLo per ottimizzare le insert in un database con Entity Framework
Modificare i metadati nell'head dell'HTML di una Blazor Web App
Ottenere il contenuto di una cartella FTP con la libreria FluentFTP
Eseguire attività pianificate con Azure Container Jobs
Gestire domini wildcard in Azure Container Apps
Usare le variabili per personalizzare gli stili CSS
Utilizzare un service principal per accedere a Azure Container Registry