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
CSSで円グラフを描く - なおしむ論
ひとりアドベントカレンダー２日目はCSSです。 CSSで円グラフを描きます。 とりあえず結果はコレです。 See the Pen LGPLvX by なおしむ (@naosim) on CodePen. 描き方 基本的には「50%のグラフ＋半円」で作ります。 ０〜１８０度 左半分に青い半円を重ねて回転させます。 イメージはこんな感じ。 CSSで書くとこんな感じ。 .pie { width: 100px; height: 100px; border-radius: 50%; background: yellowgreen; background-image: linear-gradient(to right, transparent 50%, #655 0); } .pie::before { content: ''; display: block; margin-left: 50%; he
EightShapes Text Crop
@mixin text-crop($line-height: 1.3, $top-adjustment: 0px, $bottom-adjustment: 0px) { // Configured in Step 1 $top-crop: TOPCROP; $bottom-crop: BOTTOMCROP; $crop-font-size: FONTSIZE; $crop-line-height: LINEHEIGHT; // Apply values to calculate em-based margins that work with any font size $dynamic-top-crop: max(($top-crop + ($line-height - $crop-line-height) * ($crop-font-size / 2)), 0) / $crop-font
Animated CSS Gradient Border
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
CSS: Cat Swinging on String
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Single div challenge
CSS：ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 - NxWorld
Curve SVG Background Animation
Full-Width Panel Expansion, CSS only
CSS-only image slider using SVG patterns
Scrolling half by half pure #CSS by @Kseso
CSS-Only Direction-Aware Cube Links
Breadcrumbs Navigation
Parallax Flipping Cards
Simple CARD hover effect
Pure CSS News Timeline - Responsive
Friction.
Hearthstone Style Card Hover
CSS Snippets - NxWorld
最近のWebサイトで使われてる、UI要素をデザインするテクニックのまとめ -Little UI Details by Steve Schoger
