[CSS]三角・丸・アロー・吹き出し・アイコンなど、全200種以上のさまざまな形状をつくるスタイルシート -Neo CSS
何がしたいかと言うと、 こういうレイアウトを考えているとします。 背景がグレーのボックスにサムネイル画像が9枚並んでいますね。 floatでずら~っと並べるのが一般的かと思いますが、サムネイルのボックスにつけたclassに一括でmarginを指定すると こういう感じになり、両端か片端に隙間が空いてしまいます。 隙間を空かないようにするには、端にくるボックスにのみ違う指定をしてあげればいいのですが、 「ループ処理で表示させている」、「ECサイトのシステムなどで個別にclass名をふることが出来ない」 という状況がちょいちょい訪れます。 そこで、サムネイルボックスに同じcss指定をしつつ、左右ピッタリに並べる方法を紹介します。 まずhtmlから。 <div id="container"> <div class="outer"> <div class="inner"></div> <div cl
vectipsで、クールなTipsが紹介されています。illustratorでどんなフォントもスケッチフォントに変える方法ですね。 ↑みたいなフォントが作れます。 1. テキストツールでテキストを入力 2. 塗りと線をなしにする 3. アピアランスパネルで、新規塗りを追加 黒を選択 4. 効果 > スタイライズ > 落書き で以下のように設定 5. 2ptの黒で線を追加 6. 線を選択した状態で 効果 > パスの変形 > ラフ で以下のように設定 以上ですね。 さらに、1クリックでこの効果が適用できるように、グラフィックスタイルパネルで新規グラフィックスタイル登録しておけば、1発で効果を適用できますね。 詳しくは以下からどうぞ。 » Turn Any Font Into a Sketch Font MacのDockを自動的に隠す設定にしてウィンドウが広くなりました☆表示するの好きだったんだ
インスピレーション designlogo Share ロゴデザインって苦手なんです。そんな苦手を克服するために、分かりやすいアルファベットをモチーフにしたロゴばかり集めてみました。インスピレーションの素。 ロゴを作る時にアルファベットをモチーフにする事も多いと思います。 そんな時に参考にしたいと思ったアルファベットをモチーフにしたロゴばかり84個集めてみました。 シンプルなもの、凝ったもの、白黒でもカッコいいものなど様々なデザインのロゴたちです。 参照サイト:http://logofaves.com/ Browsera McMilan Quick Meals Candeo Qwell WebMynd Capa Zipliner Crunch Page Fold Blue Bear Thymes Bloob Seven Fido Fold It Flodeco Sleep Record
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
Empowering Your Business with IT Excellence Experience the synergy of flawless integration and unparalleled solutions, unlocking the full potential of your business with IT excellence Learn more Expertise in Bridging Technology for Business Excellence Your Trusted System Integrators We specialize in system integration, providing bespoke IT services and solutions tailored to small and mid-sized (SM
jQueryを用いて簡単なロールオーバーを実行する場合には、 対象となる、エリアを指定してアルファを下げてあげる方法が有名です。 $("a.hover img").hover(function(){ $(this).fadeTo(400,0.6); },function(){ $(this).fadeTo(400,1) }) でマウスオーバー時には、alpha=0.6になり、簡易なマウスオーバーができました。 今回はimgをターゲットにしましたが、通常のdivやpタグでも変更は可能です。 実行をしてみると、マウスを乗せると0.4秒で薄く、マウスを離すと0.4秒で濃くなります。 マウスを対象の上でいったりきたりしてみましょう! そうすると、マウスオーバーのフェードイン、フェードアウトが交互に止まらなくなります! マウスを離しているのに。。 これは、jQueryが関数の実行を1つづつ行う為です
*device-widthはiPhone横持ちの場合でも必ず320px、device-heightはiPhone縦持ちの場合でも必ず480pxとなります 例えば以下は、Viewportの横幅がiPhoneのディスプレイのサイズで、倍率は1、2倍まで拡大可能、という内容です。 描写のプロセスを検証するに当たっての条件 以下の説明では複雑な状況を説明する場合もあるため、特定の語句を特定の意味でのみ使用しています。特定の語句は以下です。 viewport Viewportのメタタグで指定した値または後にSafariが計算した値。initial-scale/width/heightの3つ。 コンテンツ(サイズ) HTMLに設置したコンテンツのサイズ ドキュメント(サイズ) 余白を含めたHTML全体のサイズ。ウィンドウよりも大きい場合は、スクロールすることで見ることが出来る全体のサイズ。 ウィンドウ
jQueryを使用して、サイトにフェードやスライド、表示・非表示、タイマーなどのアニメーション効果を取り入れるチュートリアルを紹介します。 Super-Easy Animated Effects with jQuery チュートリアルは英語ですが、使用する関数、ソース(HTMLとJavaScript)が必要最小限でまとめられており、デモページ(シンプルすぎかも)もあるため、英語が苦手な人でも大丈夫だと思います。 下記に、チュートリアルをいくつかご紹介。 アニメーションでフェードイン・フェードアウト <textarea name="code" class="html" cols="60" rows="5"> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascr
Install Download isotope.pkgd.js un-minified, or isotope.pkgd.min.js minified CDN Link directly to unpkg. <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script> <!-- or --> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> Package managers Install with npm: npm install isotope-layout Install with Bower: bower install isotope-layout --save
jQueryのフィルターが便利なんですが、 なかなか全部把握出来ないので自分用 にまとめることにしました。マイチート みたいな記事です。フィルターはかゆい ところに手が届く便利なもので、場合 によってはコードも短く済ませること も出来るかもしれません。 というわけでフィルター一覧です。あんまり把握出来てなかったのでこの機会に全部目を通して触ってみました。機能というか、どんな感じで要素を取得出来るか、みたいな内容になります。 しっかり使いこなしてきた人間の書いてる記事じゃないので、もしかしたら解説が間違ってるかもしれません。一応公式のリファレンス見ながらやってますけどそれでも勘違いしていたらご指摘頂けると嬉しいです。 カテゴリごとにjsfiddleで全サンプルを用意してありますのでフォークしてご自身向けに変更して頂ければと思います。 Basic Filter(基本フィルタ) Sample 基
Webフォントに関して調べ物をしたので 個人的なメモ。少し利用頻度があがって 来たので探しやすいようにまとめておき ます。まだちょっと使い慣れてないので もう少し勉強しないとダメですね・・ スマフォ向けのリソースもあります。 というわけでWebフォントに関するメモです。以前触りだけしか書かなかったのでもう少し深く調べておこうと思い記事にしました。ので、過去の記事と結構重複します。 最低限の知識 最低限かどうか分かりませんけどw 少し不明瞭な点もありますので間違いがあればご指摘頂けると幸いです。 ライセンス まずライセンスですが、通常、Webフォントとして利用するには当然フォントの著作者次第になります。 Webフォントとして使うにはサーバーにフォントファイルをアップロードしてcssでファイルのパスを指定して利用するので、フォントファイルが誰でも手に入れられてしまう事になります。(アイコンなん
ちょっと面白かったのでメモ。 ミニマルなアイコンやシンボル をWebフォントとして使えるよう にしてくれたフリーフォント、 Web Symbols typefaceのご紹介 です。割と嬉しいかもw 以前、シンボルやアイコンタイプのフォントをご紹介しましたが、こちらは最初からWebフォントとして使う目的で作ったそうです。 アイコンをWebフォントにすることで、毎回アートディレクターにスライス等を頼まずにすむんや!って言ってました。 あんまり大きいサイズにするとちょっとアレですけどね・・ミニアイコンとして使うことのほうが多そうなのであんまり気にならないかな。css3でエフェクトをつけるのも面白いかもです。 こんな感じで使う。 css @font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.
2021年3月19日 一面に広がるキレイなお花に思わずうっとり!春に訪れたい全国のカラフルな花畑10選
カテゴリー カレンダー (1) タイムライン (5) ダイアモンド (1) チートシート (1) トーナメント (2) ピクトグラム (44) フロー (4) ベン図 (4) マップ (3) ムービー (1) メトロマップ (3) メニュー (2) ランキング (6) ルーツ (1) 位置 (2) 円グラフ (3) 分量 (1) 割合 (2) 早見表 (5) 案内 (1) 棒グラフ (7) 比較 (2) 相関図 (1) 系譜 (2) 色分け (7) 蜂の巣 (1) 表 (1) 説明 (17) 階層 (1) Facebookページ
A new way to think about content creation. Specialized creative talent, online and on-demand. HIGHEST QUALITY TALENTOver 1000 specialized creative professionals.Hand picked and vetted for your needs.We simplify complexity FULL CREATIVE SERVICEWe can start with strategy.Integrated products and services.An extension of your team
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く