[B! generator][css] clavierのブックマーク

複雑なコードは不要！簡単に使えるHTML/CSSジェネレーター22選

今回はWeb制作で役立つHTML/CSSを生成してくれるジェネレーターを紹介します。 CSS3の登場でより高度なアニメーションや表現ができるようになりました。一方、CSS3のコードは複雑になりがちでプロパティの使い方を覚えるのも大変です。ジェネレーターはリアルタイムでデザインを確認できたり、GUIで簡単にデザインを調整できたりします。より効率的なWeb制作を行うために、ぜひ活用してみてください。 WAIT! Animate http://waitanimate.eggbox.io/#/ CSSのループアニメーションで遅延を挿入するのは簡単ではありません。こちらのサービスでは一時停止機能をもったループアニメーションのコードを生成してくれます。いくつかの主要なアニメーションのテンプレートが提供されており、さらにカスタマイズも可能です。 Stylie http://jeremyckahn.gi

clavier 2016/10/12

リンク

CompassでSpriteなんてもう古い！？grunt-spritesmithのすすめ - Thujikun blog

釣りっぽいタイトルになってますが、ようはCompassのSprite Generatorだと解決できないことをgrunt-spritesmithならやってくれるよって話です。 Compassの方については山ほど記事があるので、あまり知らないよって方はてきとーにググってください。 Compassの問題点 Sassでしか使えない一つ目は当然ですが、CompassはSassのフレームワークなのでLessとかStylus派の人は使えないってことです。私は最近はStylus派なので、なにか良いSpriteツールないかなーと探し始めたのが最初でした。 SassのCompileのたびにSprite化処理が実行されるこれは画像が多いサイトではかなり深刻な問題となります。画像とは関係ないStyleの変更時でも毎回Sprite化が実行されるため、確認までかなりの時間をロスします。正方形に画像を並べると

clavier 2014/08/11

リンク

Webデザイン作成に必須のツール＆効率化できるサイトまとめ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

デザインを行う上では、ツールを使うのが必須です。有名なものだとPhotoshopやIllustratorがありますが、「まずは無料で気軽にWebデザインをしてみたい」という人もいますよね。そこで今回は、Webデザインに使える無料のツールやWebデザインを効率化できるサイトをまとめて紹介します。今回紹介する無料のWebデザインツール・ソフトワイヤーフレーム・モックアップ・プロトタイプ作成ツールグラフィックデザイン作成ツール（写真加工・イラスト作成）テキストエディタ（HTML・CSSのコーディング）配色選びに使える無料オンラインサービス Webサイトが制作できるオンラインサービス（編集部注：この記事は2013年08月29日に公開された記事を再編集したものです。）ワイヤーフレーム・モックアップ・プロトタイプ作成ツール ※ワイヤーフレーム・モックアップ・プロトタイプとは？ワイヤー

clavier 2013/08/29

リンク

面倒なシャドウもグラデも簡単に作成できるCSS3のボタンを作成するジェネレーター -CSS Button Generator

ボタンのカラー、グラデーション、角丸、ブラー、テキストシャドウ、ボックスシャドウなど、さまざまなスタイルを簡単に適用できるCSS3のボタンを作成できるオンラインツールを紹介します。

clavier 2013/01/16

リンク

Jquery Eight-Bit Plugin

Eight-Bit.js A CSS/JQuery plugin to display eight bit sprites in pure CSS. How to Use Go to the generator and build your eight-bit sprite. Rem ember the character name. It is how you will be generating your sprite later. Once your are finished with your grid. Click finished and copy the code. Open you version of eight-bit.js and paste the code under the //Add your eigth bit objects here comment //

clavier 2012/10/29

リンク

グリッドレイアウトでWebサイト構築したい時にはGrid calculator and generatorが手軽で良さそう

なかなか手軽で自分向きだったのでメモ。グリッドレイアウトを意識したWebサイトの構築の際に、希望の幅を入れれば、その幅に応じたグリッドレイアウト用のcssが生産されます。ファイルはフレームワークの Blueprint　cssが生成されます。手軽で自分好みだったのでメモがてらご紹介。いわゆるグリッドレイアウト用の計算機です。幅を入れるだけで、作れるレイアウトを自動で計算してcssも出してくれます。cssはBlueprintベースのようですね。この設定だけでＯＫ。例えば、960pxで164～200pxくらいのカラムを10px以内の感覚で開けて並べたいという時の設定値だと3通りのレイアウトがあるようです。条件の幅を広げれば、作れるグリッドの種類も増えます。レイアウトが決まったら Preview & Download CSSをクリックすればプレビューとDLが可能です。コンテン