Movatterモバイル変換

[0]ホーム
URL:

コリス

便利なのが登場！ 最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

サイト構築 -制作

Post on:2023年1月18日

sponsorsr

Webサイトやスマホアプリでよく使用される、ボタン、カード、検索ボックス、チェックボックス、ローダーなど、HTMLとCSSで実装されたUI要素がオープンソースで利用できるUIverseを紹介します。

2023年現在、UI要素は654種類！ すべて単独のHTMLとCSSで実装されているので、コピペでそのまま利用できます。

さまざまなデザイン、さまざまな動作のUI要素があり、見ているだけでもインスピレーションが刺激されます。

最近見かけるさまざまなUI要素600種類以上をシンプルなHTMLとCSSで簡単に実装できる -UIverse

UIverse

UIverseの利用方法は簡単、登録など面倒なことは一切不要です。
下記ページからアクセスし、気になったUI要素をクリックすると、コピペ用のコードが表示されます。

サイトのキャプチャ

UIverse

すべてのコードはMITライセンスで、商用プロジェクトでも無料で利用できます。詳しくは、Terms and Conditionsをご覧ください。

たとえば、ボタンを見てましょう。

サイトのキャプチャ

Button by ShadowShahriar

ボタンのHTMLはシンプルです。

HTML
1
<button>Hoverme!</button>

あとは、下記のCSSをコピペするだけ。

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
button{
--border-radius:15px;
--border-width:4px;
appearance:none;
position:relative;
padding:1em2em;
border:0;
background-color:#212121;
font-family:"Roboto",Arial,"Segoe UI",sans-serif;
font-size:18px;
font-weight:500;
color:#fff;
z-index:2;
}
 
button::after{
--m-i:linear-gradient(#000, #000);
--m-o:content-box,padding-box;
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
padding:var(--border-width);
border-radius:var(--border-radius);
background-image:conic-gradient(
#488cfb,
#29dbbc,
#ddf505,
#ff9f0e,
#e440bb,
#655adc,
#488cfb
);
-webkit-mask-image:var(--m-i),var(--m-i);
mask-image:var(--m-i),var(--m-i);
-webkit-mask-origin:var(--m-o);
mask-origin:var(--m-o);
-webkit-mask-clip:var(--m-o);
mask-composite:exclude;
-webkit-mask-composite:destination-out;
filter:hue-rotate(0);
animation:rotate-huelinear500msinfinite;
animation-play-state:paused;
}
 
button:hover::after{
animation-play-state:running;
}
 
@keyframesrotate-hue{
to{
  filter:hue-rotate(1turn);
}
}
 
button,
button::after{
box-sizing:border-box;
}
 
button:active{
--border-width:5px;
}

UIverseには、UI要素が6つのカテゴリでまとめられています。
まずは、ボタン。200種類以上のボタンがあり、見ているだけでもインスピレーションが刺激されます。一覧はサムネイル画像ではなく、デモなのでホバー時などの動作を確認できます。

サイトのキャプチャ

Buttons -UIverse

チェックボックスは、見た目をかっこよくするだけでなく、オンオフを利用して見た目を変化させるものもあります。

サイトのキャプチャ

Checkboxes -UIverse<

トグルにもさまざまなデザインのトグルがあります。右上の飛行機のトグルが面白いです。

サイトのキャプチャ

Toggle switches -UIverse<

カードもシンプルなものから、アニメーションが気持ちいいものまでたくさんあります。

サイトのキャプチャ

Cards -UIverse<

ローダーも他ではちょっと見かけたことない面白いものがたくさんあります。

サイトのキャプチャ

Loaders -UIverse<

インプットはテキスト入力欄をはじめ、検索ボックスなどもあります。一覧で動作が確認できるので、便利ですね。

サイトのキャプチャ

Inputs -UIverse<

sponsors

Related Posts

top of page

  • ワードプレステンプレート

Sponsors

  • Eagle
  • ソースネクスト
  • 広告掲載募集中
coliss

Recnet Entry

Pickup Entry

Recommend

top of page

Category

Blog Info

当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。
©2025 coliss
[8]ページ先頭
©2009-2025 Movatter.jp