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
.NET Conference Italia 2023
Effettuare il binding di date in Blazor
Effettuare chiamate con versioning da Blazor ad ASP.NET Core
Utilizzare database e servizi con gli add-on di Container App
Short-circuiting della Pipeline in ASP.NET Core
Eseguire una query su SQL Azure tramite un workflow di GitHub
Criptare la comunicazione con mTLS in Azure Container Apps
Sfruttare al massimo i topic space di Event Grid MQTT
Code scanning e advanced security con Azure DevOps
Specificare il versioning nel path degli URL in ASP.NET Web API
Eseguire attività pianificate con Azure Container Jobs
Usare lo spread operator con i collection initializer in C#