CSS Tips - Marko Denic - Web Developer
Je suis fan de ces astuces minimalistes...
filter:drop-shadow(2px 4px 8px #585858);
pour faire une ombre sur des images à fond transparent.scroll-behavior: smooth;
pour activer le smooth scroll.center { display: flex; align-items: center; justify-content: center; }
pour centrer horizontalement et verticalementwhite-space: nowrap; overflow: hidden; text-overflow: ellipsis;
pour tronquer un textecaret-color:red
pour changer la couleur du curseur de texte
Ou encore la fenêtre modale SANS javascript:
/* If you like this, be sure to ❤️ it. */
.wrapper {
height: 100vh;
/* This part is important for centering the content */
display: flex;
align-items: center;
justify-content: center;
/* End center */
background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
background: linear-gradient(to right, #834d9b, #d04ed6);
}
.wrapper a {
display: inline-block;
text-decoration: none;
padding: 15px;
background-color: #fff;
border-radius: 3px;
text-transform: uppercase;
color: #585858;
font-family: 'Roboto', sans-serif;
}
.modal {
visibility: hidden;
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(77, 77, 77, .7);
transition: all .4s;
}
.modal:target {
visibility: visible;
opacity: 1;
}
.modal__content {
border-radius: 4px;
position: relative;
width: 500px;
max-width: 90%;
background: #fff;
padding: 1em 2em;
}
.modal__footer {
text-align: right;
a {
color: #585858;
}
i {
color: #d02d2c;
}
}
.modal__close {
position: absolute;
top: 10px;
right: 10px;
color: #585858;
text-decoration: none;
}
Via https://sebsauvage.net/links/
✍ Écrire un commentaire
les commentaires relevant du SPAM seront filtrés et dégagés direct...