SVG線画が美しいリッチアニメーションの作り方 (1/2)
ページ遷移が楽しい繊細で滑らかな動き CSS3を使った滑らかな動きと大胆なタイポグラフィが魅力的な「Beatrice Creations」。黒と白を基調とした至ってシンプルなデザインながら、つい全ページを見てみたくなる、飽きのこない演出が施されている。 Béatrice Créationsでは、複数ある作品のロゴにSVGが使われており、作品ページを移動するたびに美しいカーブを描く。軽量で、枠線や線画によって繊細でリッチな世界観を演出する、今注目のSVGアニメーションを有効に活かしたサイトだ。 今回はこのサイトをヒントに、SVGの基本と、CSS3アニメーションを使った動かし方を解説する。CSSとHTMLのみで次のような枠線とテキストを描き、最終的にはjQueryを使って色を変えるデモを制作する。 STEP 1：SVGのパスを作成する アニメーションを作る前に、Illustratorを使って素
コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 ｜https://wp.yat-net.com/name
2012年 10月 31日 コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 カテゴリ： Sass タグ：CodingSassScssコーディング効率化 \ CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass（Scss）ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
Free Web Hosting - Your Website need to be migrated
Transfer your website 24/7 Customer support 99.99% Uptime guarantee Unlimited websites Start Now Meet your success halfway. Web hosting with Real power. Single & Premium Hosting plans for any project! The power of cutting-edge hardware meets intuitive software built on years of experience - you get all this and more with Hostinger. Every tool you need to start your online success story. Take advan
犯してはいけないHTMLタグの過ち10個
【追記】 HTML5ではインラインとブロックの要素分類がなくなり、代わりに、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。 2. 画像に代替テキストのalt属性が入っていない <img src="sample.gif" /> alt属性は、Webページに表示されるすべての画像に必須の要素ですので、必ず使用する必要があります。 <img src="sample.gif" alt="サンプル" /> 必須の要素ですので、特にテキストで表示する必要がない場合でも、alt=""としておく必要があります。 【追記】 HTML5では「Images whose contents are not known(どのような内容かわからない画像)」に限り、alt属性を省略することができます。写真共有サイトにユーザーが画像を
cssのテクニックなどを学びたい時に見ておきたい12サイト - かちびと.net
cssが苦手で嫌いなので 好きになろうと思い、勉強に なりそうなサイトを国内外で 選んで絞ってみました。 同じ思いをしている方とシェア したいと思ったので記事にします。 リファレンスサイトは今回は割愛しました。勉強するなら抑えて当たり前ですしね。国内外合わせて11サイトとおまけが1サイトあります。まずは国内サイトから。 CSS HappyLife 個人的に国内でcssといえばCSS HappyLifeさん思い出します。基本から応用まで幅広く情報を配信。 CSS HappyLife CSS-EBLOG ほぼcss中心に情報を配信してくれています。こちらもかなり勉強になるサイト。サイト自体も見やすいですし、cssで困った時には必ず訪れたいサイトです。 CSS-EBLOG CSS Lecture cssで出来るテクニックを公開してくれています。デモページを用意してくれるのが凄く嬉しい。親切で分か
崖っぷちWEBデザイナーブログ | CSS「ul li」IE Firefox ズレ解消メモ
久々CSSコーディングしてて、 どっぷりハマッてしまった部分メモ。 「li」部分に背景画像を指定した時、 margin,paddingを0に指定しても、 背景画像と文字部分がズレてしまって、 2時間ぐらいハマりました。。。 回避方法は、 「li」部分に list-style-position:outside; を指定するだけ。 trackbacks trackbackURL: li要素の左側マージン調整がうまくいかなかった原因 from Rain or Shine 解決した後に見つけたのですが、少し前にも俺と同じ理由で同じくらいの時間ハマってた人がいたようです。。。 崖っぷちWEBデザイナーブログ | CSS「ul ... on 2008年04月12日 01:38 read more
第1回 定義リストへのスタイルの付けかた - MdN Design Interactive
一般的にリンク先の内容を説明するような場合、文章で説明するより視覚情報を利用するのが機能的かつコンテンツの魅力にもつながる。写真入りのボックスを濃いグレーや黒の線で区切ってしまうと画面がうるさくなりやすいので、作例のようにライトグレーの地色に余白を加えたスタイルを使うとうまくまとめることができるだろう。囲みの背景に淡いグラデーションを使ってみるのもよい方法だ。また、写真の周囲に白い枠を設けているのは、矩形の連続が強調されすぎないように、写真の印象自体をほんの少し弱めるため。サムネイルの羅列などに使える技だ。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フォームのテキストエリアをより使いやすくするテクニック集%26utm_content%3DGoogle%2520Reader)
css-lecture.com
Apple風のクールなパンくずリストをクールに実装するサンプル:phpspot開発日誌