CSS Pills
Rust UI component that displays CSS Pills.
css
Demos
1. CSS Pill (Lighthouse)
use leptos::prelude::*;
use leptos_meta::Stylesheet;
#[component]
pub fn DemoCssPillLighthouse() -> impl IntoView {
view! {
<Stylesheet id="css-pill-lighthouse" href="/components/css-pill-lighthouse.css" />
<div class="flex justify-center items-center mx-auto w-full max-w-2xl">
<div class="container-pill">
<div class="shooting">
<div class="star"></div>
<div class="star0"></div>
</div>
<div class="lens"></div>
<div class="flash"></div>
<div class="pPos">
<div class="pyramid one"></div>
<div class="pyramid two"></div>
<div class="pyramid three"></div>
<div class="lPos">
<div class="lightTop"></div>
<div class="lightMid"></div>
<div class="lightBot">
<div class="window1"></div>
<div class="window2"></div>
</div>
</div>
</div>
<div class="cPos">
<div class="cc">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
<div class="circle five"></div>
</div>
</div>
</div>
</div>
}
}
2. CSS Pill (Ocean)
use leptos::prelude::*;
use leptos_meta::Stylesheet;
#[component]
pub fn DemoCssPillOcean() -> impl IntoView {
view! {
<Stylesheet id="css-pill-ocean" href="/components/css-pill-ocean.css" />
<div>
<div class="cssPillOceanContainer">
<div class="whaleContainer">
<div class="whalePos size1">
<div class="whaleRotate size1">
<div class="whale"></div>
<div class="fin"></div>
</div>
</div>
<div class="whalePos size2">
<div class="whaleRotate size2">
<div class="whale"></div>
<div class="fin"></div>
</div>
</div>
<div class="whalePos size3">
<div class="whaleRotate size3">
<div class="whale"></div>
<div class="fin"></div>
</div>
</div>
<div class="whalePos size4">
<div class="whaleRotate size4">
<div class="whale"></div>
<div class="fin"></div>
</div>
</div>
</div>
<div class="cPos">
<div class="cc">
<div class="circle one"></div>
<div class="circle two"></div>
<div class="circle three"></div>
<div class="circle four"></div>
</div>
</div>
<div class="triangleContainer">
<div class="triangleBar"></div>
<span class="triangle"></span>
<span class="triangle"></span>
</div>
<div class="gradientContainer">
<div class="overlay one"></div>
<div class="gradient">
<span class="ray1"></span>
<span class="ray2"></span>
</div>
</div>
<div class="rocks">
<div class="rock one"></div>
<div class="rock two"></div>
<div class="rock three"></div>
<div class="rock four"></div>
</div>
<div class="bubbleContainer">
<span class="bubbleY1">
<span class="bubbleX1"></span>
</span>
<span class="bubbleY2">
<span class="bubbleX2"></span>
</span>
</div>
</div>
</div>
}
}
3. CSS Pill (Mountain)
use leptos::prelude::*;
use leptos_meta::Stylesheet;
// Source: https://codepen.io/tdoughty/pen/bGGZWqg (more trees and birds)
#[component]
pub fn DemoCssPillMountain() -> impl IntoView {
view! {
<Stylesheet id="css-pill-mountain" href="/components/css-pill-mountain.css" />
<div class="flex justify-center items-center mx-auto w-full max-w-2xl">
<div class="mx-auto w-full max-w-2xl">
<div class="containerPillMountain">
<div class="birds front">
<div class="bird b1">
<div class="body">
<div class="wing1">
<div class="wing2">
<div class="wing3"></div>
</div>
</div>
</div>
</div>
<div class="bird b12">
<div class="body">
<div class="wing1">
<div class="wing2">
<div class="wing3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="birds back">
<div class="bird b1">
<div class="body">
<div class="wing1">
<div class="wing2">
<div class="wing3"></div>
</div>
</div>
</div>
</div>
<div class="bird b12">
<div class="body">
<div class="wing1">
<div class="wing2">
<div class="wing3"></div>
</div>
</div>
</div>
</div>
</div>
<div class="cloud big">
<div class="circle c0"></div>
<div class="circle c8"></div>
</div>
<div class="cloud small">
<div class="circle c0"></div>
<div class="circle c8"></div>
</div>
<div class="mountain">
<div class="backdrop"></div>
<div class="zig zag0"></div>
<div class="zig zag4"></div>
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
<div class="base"></div>
</div>
<div class="range">
<div class="r1"></div>
<div class="r7"></div>
</div>
<div class="tree treeBack tree1">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
<div class="base"></div>
</div>
<div class="tree treeBack tree8">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
<div class="base"></div>
</div>
<div class="tower">
<div class="shadow"></div>
<div class="flagPole"></div>
<div class="roof1"></div>
<div class="roof2"></div>
<div class="wall">
<div class="w1"></div>
<div class="w5"></div>
</div>
<div class="legs">
<div class="left"></div>
<div class="right"></div>
<div class="support1">
<div class="criss"></div>
<div class="cross"></div>
<div class="flat"></div>
</div>
<div class="support2">
<div class="criss"></div>
<div class="cross"></div>
<div class="flat"></div>
</div>
</div>
<div class="railing">
<div class="top"></div>
<div class="bot1"></div>
<div class="bot2"></div>
<div class="r1"></div>
<div class="r9"></div>
</div>
</div>
<div class="tree treeMid tree1">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
<div class="base"></div>
</div>
<div class="tree treeMid tree5">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
<div class="base"></div>
</div>
<div class="tree treeFront tree1">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
<div class="base"></div>
</div>
<div class="tree treeFront tree4">
<div class="top"></div>
<div class="mid"></div>
<div class="bot"></div>
<div class="base"></div>
</div>
</div>
</div>
</div>
}
}
Installation
# Coming soon :)
Usage
// Coming soon 🦀