デザインコード抽出/共有/履歴/管理ツール『Avocode』 - Qiita
超昔の記事なので、最新の情報は各自確認して頂ければ幸いです。今はもうzeplinの方が使ってる人多そう。 こんな悩みを持ったことはないでしょうか？ [プログラマー] 自分が持っていないデザインツールのデザインを渡されて確認できない デザインを実現するCSSを考える時間を無くしたい デザイナーに画像/レイヤー切り出しを依頼する時間を無くしたい [デザイナー] エンジニアへのデザイン共有時、重たいファイルや画像を一々送りたくない エンジニアへのデザイン指示書を作りたくない(ファイルを見てわかってほしい！) かなり前の修正前デザインを確認/保存したい [ディレクター] 大量にある重いデザインファイルを一目でプロジェクト別に管理したい デザインへのフィードバックを簡単に明確に伝えたい [誰でも全員] PhotoshopでもSketchでもXDでもIllustratorでもどんなデザインファイルでも
【Bootstrap製】90ページ超えの無料HTML5／CSS3テンプレート素材 Titan
ウェブサイトやアプリ制作に必要なスタイルがあらかじめ定義された、人気CSSフレームワーク Bootstrap。しかし、デザインが他のサイトとかぶってしまうとお悩みの方も多いのではないでしょうか。 今回は、Web制作をより手軽に行うことができる、Bootstrap対応の無料HTML5/CSS3テンプレート素材 Titan をご紹介します。90ページにおよぶ大量のサンプルHTMLページが用意されており、あらゆるプロジェクトに活躍してくれるフリー素材となっています。 Bootstrap を拡張パワーアップ！参考にしたい50個の無料プラグイン、コンポーネントまとめ 無料HTML/CSSテンプレート Titan について Titan はHTML5/CSS3で制作されたBootstrap対応テンプレートで、過去5年間のウェブデザインの傾向を分析して作成されたスタイリッシュな素材です。 じっくりと検討さ
ユーザーにスクロールを予測させるCSSの書き方について | mkasumi.com
受託案件でレスポンシブ対応をするようになって4年半ほど。未だに悩むのがテーブルのレスポンシブ対応。 テーブル要素をレスポンシブ対応する方法はいろいろとあると思うのですが、私がよく使うのはテーブルをスクロールさせる方法。ただ、このテーブルにはデザインの面で抱えている問題があります。それは、スクロールできることがユーザーには伝わらないこと。ぱっと見、途中でコンテンツが切れているように見えてしまう。もっとひどい場合にはthやtdの区切り線と同じタイミングで見切れてしまっていてその先にもっとコンテンツが存在することが予測できない可能性があります。 今回は続きのコンテンツの存在をグラデーションで表現し、CSSのみでスクロールを予測させる方法について記述しています。 実装方法 box-shadowやbackgroundプロパティでグラデーションを適用すればいいと思ってしまいがちですが、ただ単にこのプロ
うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。
なんか、このサイトBootstrapくさい。そう感じることはありませんか? その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。 それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。 そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。 しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。 1. line-heightで行間にゆとりを。明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。 欧文をベースに設計されたBootstrapをそのまま
CSS Isometric Pokemon
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-
捕獲シーンも完全再現！ポケモンGOの面白HTML/CSSスニペットまとめ
すでにアメリカなどを中心に、世界的大ブームとなっているポケモンGO が、ついに日本でも配信が開始されました。この人気はウェブデザインのアイデアとして、じわじわ影響を与えはじめているようです。 今回はコード共有サイト CodePen より、ポケモンGO をモチーフにしたHTMLスニペットをいくつかご紹介します。モンスターの捕獲シーンを再現したり、コミカルな動きをCSSアニメーションで表現したり、面白い作品が公開されていました。 詳細は以下から。 ポケモンGOをモチーフにした面白HTMLスニペットまとめ Pokemon Go – ZingTouch x Anime.js 軽量なアニメーションJSライブラリ Anime.js を利用し、モンスターの捕獲シーンを再現しています。サークルの大きさに合わせて、スワイプしてボールをタイミングよく投げることで、実際にキャッチすることもできます。 See t
phiary
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python はじめに 「webpack インストールしといてー」, 「gulp 導入して watch しながら開発してー」, 「React だから ES6 でコード書いてー」 最近こんな会話が当たり前のように現場で飛び交っています. フロントエンドの開発者には HTML, CSS に特化している人 (coder, markup engineer) JavaScript は得意だけど CSS はちょっと弱い人 (javascripter) HTML, CSS, JavaScript 全てを統べる者 (frontend
spin.js
Share it! If checked, the option values will be stored in the URL so that you can easily share your settings. Features No images No dependencies Highly configurable Resolution independent Uses CSS keyframe animations Works in all major browsers Includes TypeScript definitions Distributed as a native ECMAScript module MIT License Spin.js dynamically creates spinning activity indicators that can be
[SB Admin 2] BootstrapのAdmin Theme
BootstrapのAdmin ThemeであるSB Admin 2を少し修正してみました。 修正した部分は以下のようになります。 1. TOPメニュー固定 Fixed Top Navbar ・TOPのキャプチャーです。 ・スクロールしてもTOPメニューが固定されています。 2. サイドメニューの伸縮(？) Sidebar Toggle ・TOPのキャプチャーです。 ・ロゴ(SB Admin v2.0)の横にあるトグル(toggle)ボタンを押すとアイコンのみ表示されます。 ・それぞれのアイコンにマウスオーバーすると詳細メニューが表示されます。 主な修正個所 ・HTMLファイル(/pages/ディレクトリ)： bodyの開始タグから<div id="page-wrapper">まで、TOPメニューとサイドバー部分修正 下段のJavascript部分にjquery.cookie.jsを追加
![[SB Admin 2] BootstrapのAdmin Theme](https://cdn-ak-scissors.b.st-hatena.com/image/square/6da0f11ab831ed5970f5405f17174c99e9e7aaf6/height=288;version=1;width=512/http%3A%2F%2F4.bp.blogspot.com%2F-gnXKalQ_l1I%2FVLXldKQBJxI%2FAAAAAAAAAV0%2FRhUx0raNyhI%2Fw1200-h630-p-k-no-nu%2Ffixed-top-navbar1.png)
CSS · Bootstrap
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system. Overview Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at th
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
