I am available for hire!

Advent

Day 21: Notification 🤫

A notification component usually displays a message that communicates information to the user.

The component could be seen at the bottom left corner of the site.

A few notes about this notification component:

  • CSS Variables are used for colors and spacing,
  • the position: fixed declaration is used to stick the component to the bottom left of the screen,
  • CSS animation is used to animate the notification,
  • to respect the user preference for reduced motion, --transition-duration-xmas CSS variable is set to 0s (read more about using CSS Variables for reduced motion on a global scale).

The code:

<a class="advent-notification" href="#link">
<p>Psst! Did you already check the Advent of the UI components? 🤫</p>
</a>
.advent-notification {
--color-xmas-alpha: #f7efef;
--color-xmas-beta: #d72621;
--color-xmas-gamma: #639565;
--transition-duration-xmas1: .6s;
--transition-duration-xmas2: .3s;
--size-xmas: 1em;

background-color: var(--color-xmas-alpha);
color: var(--color-xmas-beta);

max-width: 66%;
padding: calc(var(--size-xmas) / 4) calc(var(--size-xmas) / 2);
border: 1px solid var(--color-xmas-gamma);
border-radius: calc(var(--size-xmas) / 4);

position: fixed;
bottom: var(--size-xmas);
left: var(--size-xmas);
z-index: 1;

transform: translateX(calc(-100% - var(--size-xmas)));
animation: show var(--transition-duration-xmas1) forwards var(--transition-duration-xmas2);
}

.advent-notification:hover,
.advent-notification:focus,
.advent-notification:active
{
background-color: var(--color-xmas-beta);
color: var(--color-xmas-alpha);
}

.advent-notification p {
margin: 0;
}

@keyframes show {
0% {
transform: translateX(calc(-100% - var(--size-xmas)));
}
90% {
transform: translateX(calc(var(--size-xmas) / 4));
}
to {
transform: none;
}
}


@media (prefers-reduced-motion: reduce) {
.advent-button {
--transition-duration-xmas1: 0s;
--transition-duration-xmas2: 0s;
}
}

Psst! Did you already check the Advent of the UI components?

Advent of UI components 🎄

Check other UI components.

Day 24: Details 🎹

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 24: Details.

Day 23: Radio button 📱

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 23: Radio button.

Day 22: Checkbox 🧦

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 22: Checkbox.

Day 20: Code block 💻

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 20: Code block.

Day 19: Pagination 📖

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 19: Pagination.

Day 18: Social share 🔗

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 18: Social share.

Day 17: Card 🎴

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 17: Card.

Day 16: Table 🎶

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 16: Table.

Day 15: Breadcrumb 🍞

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 15: Breadcrumb.

Day 14: Blockquote 💬

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 14: Blockquote.

Day 13: List 🗒️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 13: List.

Day 12: Figure 🖼️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 12: Figure.

Day 11: Video embed 📺

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 11: Video embed.

Day 10: Footer 👇

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 10: Footer.

Day 9: Header ☝️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 9: Header.

Day 8: Hero 🦸‍♂️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 8: Hero.

Day 7: Intro 💬

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 7: Intro.

Day 6: Horizontal rule 〰️

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 6: Horizontal rule.

Day 5: Split 💔

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 5: Split.

Day 4: Banner 🚩

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 4: Banner.

Day 3: Gallery 🍿

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 3: Gallery.

Day 2: Tag 🎁

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 2: Tag.

Day 1: Button 🎅

During every day of the Advent of UI components, I am showcasing a new UI Component built with HTML, CSS, and JavaScript. Day 1: Button.

Latest Last.fm tracks:

♬ See the full Last.fm profile