The principle is straightforward: when Hide is clicked, we add a hidden class to the banner. We can then set this class to opacity:0 in our CSS.
You have 3 unread messages.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
/* Font styles, colors, etc. omitted for clarity */
#notification {
transition: .8s
}
#notification.hidden {
opacity: 0
}
</style>
<div id=notification>
<p>You have 3 unread messages.</p>
<button class=hide>Hide</button>
</div>
<code>
clicking on ".hide" adds class "hidden" on "#notification"
</code>Instead of adding a class, we’ll now use uilang’s toggle class to switch between the active and inactive state when the control is clicked.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
#switch, #circle {
transition: .4s
}
#switch {
background: #FAFAFB /* gray */
}
#switch.active {
background: #52D468 /* green */
}
#circle {
width: 50%
}
#switch.active #circle {
transform: translateX(100%)
}
</style>
<div id=switch>
<div id=circle></div>
</div>
<code>
clicking on "#switch" toggles class "active" on "#switch"
</code>Same principle as the previous example: when More is clicked, we fade the popover in and out by simply toggling a CSS class on it.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
#popover {
opacity: 0;
pointer-events: none;
transform: scale(.8) translateY(-30%);
transition: .4s cubic-bezier(.3, 0, 0, 1.3)
}
#popover.visible {
opacity: 1;
pointer-events: auto;
transform: none
}
</style>
<ul id=nav>
<li><a href=#>Home</a>
<li><a href=#>Services</a>
<li><a href=#>Portfolio</a>
<li>
<a href=# class=more>More</a>
<ul id=popover>
<li><a href=#>About</a>
<li><a href=#>Blog</a>
<li><a href=#>Contact</a>
</ul>
</ul>
<code>
clicking on ".more" toggles class "visible" on "#popover"
</code>This example introduces the target keyword which matches the clicked element. We’ll then use the CSS adjacent selector to select the content.
Hi! My name’s Ben, I’m a 30-year old interface designer.
You can see some of my recent work on Dribbble.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
h1 {
background: #FAFAFB
}
h1.active {
background: white
}
p {
display: none
}
h1.active + p {
display: block
}
</style>
<h1 class=active>About me</h1>
<p>Hi! My name’s Ben, I’m a 30-year old interface designer.
<h1>Work</h1>
<p>You can see some of my recent work on Dribbble.
<h1>Contact</h1>
<p>Feel free to send me an email or ping me on Twitter!
<code>
<!-- start by removing the previous "open" class -->
clicking on "h1" removes class "active" on "h1.active"
<!-- then add it to the clicked title -->
clicking on "h1" adds class "active" on "target"
</code>Exactly the same logic as with the tabs: set an open class to the clicked element, use this class in CSS to style that element and its siblings.
Hi! My name’s Ben, I’m a 30-year old interface designer.
You can see some of my recent work on Dribbble.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
h1, h1::before, p {
transition: .4s
}
h1 {
cursor: pointer
}
h1::before {
background: url(blue-arrow.svg);
transform: rotate(-90deg)
}
h1.open::before {
transform: none
}
h1.open ~ h1 {
/* slide down all the h1 following the open one */
transform: translateY(24px)
}
p {
opacity: 0;
pointer-events: none
}
h1.open + p {
opacity: 1;
pointer-events: auto;
transform: translateY(8px)
}
</style>
<h1 class=open>About me</h1>
<p>Hi! My name’s Ben, I’m a 30-year old interface designer.
<h1>Work</h1>
<p>You can see some of my recent work on Dribbble.
<h1>Contact</h1>
<p>Feel free to send me an email or ping me on Twitter!
<code>
clicking on "h1" removes class "open" on "h1.open"
clicking on "h1" adds class "open" on "target"
</code>Add a visible class to the overlay when RSVP is clicked, remove that class when close or confirm is clicked. The rest is good ol’ CSS.
Design Meetup.
<!doctype html>
<title>Example</title>
<script src=uilang.js></script>
<style>
#overlay, #registration {
opacity: 0;
transition: .5s
}
#overlay {
pointer-events: none
}
#overlay.open {
opacity: 1;
pointer-events: auto
}
#registration {
transform: translateY(80%) scale(.8);
transition-timing-function: cubic-bezier(.3, 0, 0, 1.3);
transition-delay: .4s
}
#overlay.open #registration {
opacity: 1;
transform: none
}
</style>
<p>Design Meetup. <button class=rsvp>RSVP</button>
<div id=overlay>
<div id=registration>
<a href=# class=close>Close</a>
<h1>Design Meetup</h1>
<input placeholder=Name>
<input placeholder=Email type=email>
<a href=# class=confirm>Confirm</a>
</div>
</div>
<code>
clicking on ".rsvp" adds class "open" on "#overlay"
clicking on ".close, .confirm" removes class "open" on "#overlay"
</code>code element containing your uilang code at the very end of the page, just before the closing body tag. Don’t worry about having other code elements on the page, the script will only execute the uilang one.
clicking on ".try-it" toggles class "hidden" on ".info-box"
clicking on ".hide" adds class "hidden" on "#notification"
clicking on "#switch" toggles class "active" on "#switch"
clicking on ".more" toggles class "visible" on "#popover"
clicking on "#examples li:nth-child(4) .preview h1" removes class "active" on "h1.active"
clicking on "#examples li:nth-child(4) .preview h1" adds class "active" on "target"
clicking on "#examples li:nth-child(5) .preview h1" removes class "open" on "h1.open"
clicking on "#examples li:nth-child(5) .preview h1" adds class "open" on "target"
clicking on ".rsvp" adds class "open" on "#overlay"
clicking on ".close, .confirm" removes class "open" on "#overlay"