http://ideahacker.net/2015/02/14/9779/
画像を使わずに、CSSのみでリストアイコンを表現したサンプル 10 - NxWorld
いずれもli要素と組み合わせて使えそうなリストアイコンのサンプルで、画像は使用せずに全てCSSのみで実装してみたものです。 最近ならwebフォントやSVGで使い勝手良いものが実装できたり、あとは使用できるブラウザは限られてきたりしますが、問題ないブラウザであればサイズやカラー変更といったこともCSSのみで簡単に変更できます。 はじめに 最後のサンプルのみol要素使ってますが、その他に関しては全てHTMLは下記のように単純なul, li要素を使ってます。 <ul> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li>Lorem ipsum dolor sit amet,
CSSで作るシンプルな矢印アイコン29個 | 株式会社プレスマン
最近ではCSS3の対応ブラウザが増えたおかげで、画像を使わずともサイト上で色々な表現ができるようになりました。 CSSでデザインの実装を行う場合、｢カスタマイズやメンテナンスが容易」｢レスポンシブWebデザインとも相性が良い」｢画像を読み込まないのでモバイルユーザーにも優しい」｢Retinaディスプレイなど高解像度の環境で見ても綺麗」等、制作側とユーザーの両方にメリットがあります。 今回は、フラットデザインのWebサイトなどでよく見かける、シンプルな矢印アイコンのCSSをいくつかご紹介したいと思います。 目次： 共通HTML＆CSS シンプルな矢印アイコン シンプルな矢印アイコン シンプルな矢印アイコン（大） シンプルな太い矢印アイコン シンプルな太い矢印アイコン（大） 斜めの矢印アイコン 右上向きの矢印アイコン 右上向きの矢印アイコン（大） 右下向きの矢印アイコン 右下向きの矢印アイコン
スパンコールにもできる！Illustratorでモザイクアイテムを作る方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。モザイク大好き白浜です。今回はIllustratorでモザイク柄のアイテムを作ってみたいと思います。 1.モザイクの素を作る オブジェクトをタイル状に分割する手順 まずは正方形のオブジェクトを作成します。 次に「オブジェクト」→「ラスタライズ」します。 一度この手順を踏まないと「モザイクオブジェクトを作成」ができないのでいつもこうしています。 次に「オブジェクト」→「モザイクオブジェクトを作成」を選択します。 分割したい数を入力してOKを押すと・・・ 格子状に分割されました～。 色をつけてモザイク柄にする 格子状に分割されたオブジェクトはグループ化されているので、これを解除します。 するとタイルひとつひとつを個別に選択できるようになるので・・・あとは根気強く色付けします。色はあとから変更できるのでよしなにやってください。 0to255 同系色でまとめたいときは明度の違うグラデー
【第2弾】少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS はるか6年前に書いた記事「少しのコードで実装可能な20のCSS小技集」の第二弾です！（スパンながっ）簡単なコードで素敵な効果が得られる小技をダダっと紹介してみます。前回に引き続き、初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ 目次 画像を丸く表示 1本線のテーブル 1本線の水平線 線色を指定しなくても文字色と同一色になる 複数の背景画像 背景画像のサイズ Webフォントを使う 画像をモノクロやセピアにする リストマーカーの色を変更 グラデーション グラデーションボーダー フラットだけど立体的ボタン 画像をぼかす レスポンシブに対応した動画 要素を真ん中に配置 カンマで分けたリスト 文字を縦書き フォーカスすると伸びるテキストボックス iOSでボタンのスタイルをリセット 線のオフセット設定 HTML・CSSの全
Illustratorでピクセル単位の作業を奇麗に行うための方法（イラレのピクセルずれ問題） - フリーでWebデザインとかやってる紳士。
2017年の追記（CC2017向け） 次の点に留意して作業すればOK。基本的にイラレのピクセル周りの扱いはモリモリ改善されているのでだいぶ楽になった。 次セクション「2016年の追記」との違いだけを列挙する。 変形パネルの「ピクセルグリッドに整合」と「新規オブジェクトをピクセルグリッドに整合」が廃止され、あらたに「コントロール」バーの一番右に「ピクセルのスナップオプション」が追加された。これをオンにする。またその中の詳細項目にも全部チェックをつけておく。 それでも作業中に何かのはずみであるオブジェクトが整数ピクセルじゃない状態になったら、「ピクセルのスナップオプション」の隣にある「選択したアートをピクセルグリッドに整合」ボタンをポチして位置調整する。私は今までコントロールバーは邪魔なので非表示にしていたが今はこのボタンのためだけに表示している（スクリプトでなんとかなりそうな気もするが調べて
jQueryで背景画像をアニメーションで無限ループさせる
画像の準備 とりあえずアニメーションさせる画像を用意します。ループさせるので継ぎ目のない画像を作成した方がいいかもです。 作成したら「bg.png」という名前で保存します。 今回はこんな画像を作成してみました。 デザインがしょぼいとか言ってはいけない！ html+cssでバックグランドに画像を配置 html+cssは特別なことはなく普通に作ります。 画像はbodyの「background」で配置してみました。 html <body> <div id="container"> <h1>jQueryでバックグラウンドを無限ループ</h1> <p> このページはjQueryでバックグランド画像をアニメーションループさせるサンプルページです。 </p> </div> </body> css body{ background: #A6E9FF url(bg.png) repeat-x; margin
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
