⚠️ NOTE: This project is no longer being maintained. If you're interested in taking over maintenance, please contact me.
このブログでも何度か細々登場してきたアイコンWebフォントの Font Awesome。使い方の基本を知っていることで、利用できる幅がかなり広がるので、今日はその使い方のと活用のための Tips を幾つか書いておきます。 Font Awesome, the iconic font designed for Bootstrap ※ なお、本エントリーはバージョン4.0.3をもとに書いているため、バージョンアップによって、掲載しているコードも変わっている可能性があります。利用前に、使うバージョンとそのスタイルを確認してから使うことをオススメします。 Font Awesome とは？Font Awesome は サイト上で使われるようなさまざまなアイコンを Webフォント として利用できるようにしたものです。フォントとして利用できるため、サイズや色などすべて CSS で調整して利用することができ
.load1 .loader, .load1 .loader:before, .load1 .loader:after { background: #ffffff; -webkit-animation: load1 1s infinite ease-in-out; animation: load1 1s infinite ease-in-out; width: 1em; height: 4em; } .load1 .loader { color: #ffffff; text-indent: -9999em; margin: 88px auto; position: relative; font-size: 11px; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0
WebFont作成をGrunt.jsで自動化 WebFontを作成するサービスなどには、いろいろあり便利ですが、ちょっとした修正を入れる度にWebFont化するのは面倒くさいです。そこで、grunt-webfontという便利なプラグインがあったので自動化してみました。 ここでは、macにインストールしていきます。 下準備 homebrew node grunt ここらへんをインストールしておいて下さい。 インストール grunt-webfontのreadmeに沿ってインストールしていきます。 まずはhomebrewでfontforgeとttfautohintをインストールするのですが、 readmeにnodeエンジンを使用するならfontfogeは必須でないとあるので、 ここではttfautohintのみをインストールします。 $brew install ttfautohint cairo
Ready-to-use foundational React components, free forever.
Formstone is a front end library that aids in the rapid development of web projects by abstracting modern web patterns into highly customizable jQuery plugins. Build the web faster with Formstone. Modular Components are name-spaced for minimal overlap with your existing styles and scripts. Responsive Components are designed mobile-first to ensure fast, usable interfaces, no matter the screen size.
What? Sprite Cow helps you get the background-position, width and height of sprites within a spritesheet as a nice bit of copyable css. Load the example image, and have a click around. It becomes pretty obvious. Why? Automated spritesheet generators are pretty cool, but I prefer the control over optimisation and compression you get by making them manually. However, copying all the positions & size
for web designers A set of basic grid mixins written in SASS, for use with Libsass, owing to Steve Hickey. Install You can download Brockmann, clone the repo or install it using Bower. bower install the-basic-brockmann Setup Include _grid.scss & _mixins.scss in your project, then declare these variables in a preceeding file: $max-width: 1360px; $column-width: 6.38298%; $gutter-width: 2.12766%; $ma
Take control of your web typography. CSS, meet kerning. Kerning, meet CSS. Kern, style, transform, and scale your web type with real CSS rules, automatically. Print designers have had it easy for way too long. This is 2014; the web has been around for over two decades, yet web designers don’t get full control over their typography? Forget that, use Kerning.js! Getting started Using Kerning.js is a
jquery.animate-enhanced plugin Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ Properties supported: (more to come) left/right : using translate(x, y) or translate3d(x, y, z) top/bottom : using translate(x, y) or translate3d(x, y, z) opacity width height New features in v1.0: Animation 'queue' support (including
Inuit.css Kitchen Sink A list of Inuit.css component examples cobbled together from the css documention and Inuit.css's JsFiddle examples. The page contains minimal styling so components are pretty much as is from Inuit. Code used is from the v5.1.0 branch. Arrows It is a common design treatment to give an element a triangular points-out arrow, we typically build these with CSS. These following cl
beautons – a beautifully simple button toolkit Follow @csswizardry Download or View on GitHub Button Class Description Basic Button .btn Plain ol’ regular button. Sizes Button .btn .btn--small Smaller-than-normal button. Button .btn .btn--large Large button. Button .btn .btn--huge Huge button. Button .btn .btn--full Full-width button. Font sizes Button .btn .btn--alpha Huge text button. Button .bt
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-
Metro UI is a free and open-source library for building responsive, reactive, mobile-first web applications with a modern interface. Metro UI includes general styles, responsive grid, layouts, typography, 150+ components, 900+ built-in icons, Router, reactive DataModel, classes and functions to work with DOM, dates, colors, strings, Hooks (as in React), and data validation library. Are you making
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
