[B! ui][css] ikosinのブックマーク

Park UI

Build your own Design System Beautifully designed components built for your choice of JS and CSS frameworks. Get Started Make it yours@s`j�U@G�d�U

ikosin 2023/11/20

リンク

Radix UI

An open source component library optimized for fast development, easy maintenance, and accessibility. Just import and go—no configuration required.

ikosin 2023/10/20

リンク

https://csslayout.io/patterns/

ikosin 2019/12/13

リンク

よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ

Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。

ikosin 2019/12/13

リンク

Semantic UI

Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit

ikosin 2017/02/19

リンク

USWDS: The United States Web Design System

Official websites use .gov A .gov website belongs to an official government organization in the United States. Secure .gov websites use HTTPS A lock ( Locked padlock icon ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

ikosin 2015/09/29

リンク

http://components.onsen.io/

ikosin 2015/03/21

リンク

ついつい押したくなる、CSS3を使ったラジオボタンのデザイン

フォームってあまり使うこともないのですが、CSS3を使ってデザインするとなかなか面白かったので、今回はラジオボタンを使ったサンプルを紹介します。ではサンプル１からコードを紹介していきます。サンプル１二択のラジオボックスです。「はい」を押したときと、「いいえ」を押したときの色を変えています。 HTML では、HTMLから。 <div class="sample"> <input type="radio" name="s2" id="on" value="1" checked=""> <label for="on" class="switch-on">はい</label> <input type="radio" name="s2" id="off" value="0"> <label for="off" class="switch-off">いいえ</label> </div> 特に問題

ikosin 2013/08/27

CSS
UI

リンク

Creative Button Styles | Codrops

Some creative and modern button styles and effects for your inspiration. Today we would like to give you some button inspiration. This button set consists of some simple, creative and subtle styles and effects to inspire you. The effects can be seen when hovering on some buttons and clicking on others. Mostly, CSS transitions are used but also CSS animations and for some buttons we use a bit of Ja

ikosin 2013/06/16

CSS
ui

リンク

[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ

ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。スクリプト無し、エフェクトはスタイルシートのみで実装されています。左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。ふわっとナビゲーションのアイテムが集まってくるの、かっこいいですね。解除して散っていくのも！実際のデモは、こちらからどうぞ。 Chrome, Safariでご覧ください。デモページこれをベースにいろいろなアイデアが膨らんできますね。参考までに、実装もご紹介。 HTML オーバーレイでステイになるのは、チェックボックスを使用しています。  <header id="head"> <div class="container"> <

ikosin 2013/06/14

CSS
UI

リンク

Almost Flat UI

Provides extra visual weight and identifies the primary action in a set of buttons

ikosin 2013/05/20

リンク

垂直なタイムラインをデザインするHTML＋CSSチュートリアル:phpspot開発日誌

Vertical Timeline | Codrops 垂直なタイムラインをデザインするHTML＋CSSチュートリアル次のようなフラットで美しい垂直方向のタイムラインを実装するマークアップ例が紹介されていますソースをダウンロードすることもできます時系列で何かをならべるようなUIに使えそう関連エントリモダンなサイトを作成するためのCSS3チュートリアル集 CSS3でChrome風ウィンドウを作成するチュートリアルテキストを円形に描画するチュートリアル PHPでOAuthサーバを作成するチュートリアル