mirror of
https://github.com/uiverse-io/galaxy.git
synced 2025-11-28 05:00:22 +08:00
98 lines
2.5 KiB
HTML
98 lines
2.5 KiB
HTML
<div class="notification"><span class="star">★</span> <span class="text">New level</span> <span class="star">★</span></div>
|
|
<style>
|
|
/* From Uiverse.io by MazontheMoon - Tags: notification */
|
|
.notification {
|
|
position: relative;
|
|
width: 250px;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
font-family: Verdana;
|
|
color: white;
|
|
font-size: 16px;
|
|
border-radius: 1rem;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
line-height: 1.5;
|
|
padding: 0.5rem;
|
|
overflow: hidden;
|
|
background-color: #840f00;
|
|
-webkit-box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
|
|
0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
|
|
0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%),
|
|
0 7px 0 hsl(6, 100%, 8%), 0 9px 0 hsl(6, 100%, 6%);
|
|
box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
|
|
0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
|
|
0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%),
|
|
0 7px 0 hsl(6, 100%, 8%), 0 9px 0 hsl(6, 100%, 6%);
|
|
}
|
|
|
|
.notification:hover {
|
|
top: 2px;
|
|
background: radial-gradient(hsl(6, 100%, 18%), hsl(6, 100%, 16%));
|
|
-webkit-box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
|
|
0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
|
|
0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%);
|
|
box-shadow: inset 0 1px 0 hsl(6, 100%, 25%), 0 2px 0 hsl(6, 100%, 22%),
|
|
0 3px 0 hsl(6, 100%, 18%), 0 4px 0 hsl(6, 100%, 16%),
|
|
0 5px 0 hsl(6, 100%, 12%), 0 6px 0 hsl(6, 100%, 10%);
|
|
}
|
|
|
|
.star {
|
|
padding: 0.5rem;
|
|
-webkit-transform: scale(1.5);
|
|
-ms-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
-webkit-animation: fade 2s ease-in 1s infinite;
|
|
animation: fade 2s ease-in 1s infinite;
|
|
}
|
|
|
|
@-webkit-keyframes fade {
|
|
0% {
|
|
color: rgba(0, 0, 0, 0.9);
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
50% {
|
|
color: rgba(0, 0, 0, 0.1);
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
color: rgba(0, 0, 0, 0.9);
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
color: rgba(0, 0, 0, 0.9);
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
|
|
50% {
|
|
color: rgba(0, 0, 0, 0.1);
|
|
-webkit-transform: scale(1);
|
|
transform: scale(1);
|
|
}
|
|
|
|
100% {
|
|
color: rgba(0, 0, 0, 0.9);
|
|
-webkit-transform: scale(1.5);
|
|
transform: scale(1.5);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|