css3

background-clipを使って文字にグラデーションをかける

以前はグラデーションはビットマップで表現していましたが、今cssで描画するのが一般的です。cssで描画するものはベクター形式になるので、ビットマップよりも滑らかなグラデーションが表現できます。 webdesign-trends.net 「background-clip」を使う事で文…

モダンリセットCSSのress.css

リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…

cssプラグインを使ってハンバーガーメニューを作る

css3 jQuery プラグインを使う事でハンバーガーメニューを簡単に作る事が出来ます。 jonsuh.com アイコンの切り替えはjQueryでclass「is-active」をトグルさせるだけで良いので自身で記述してしまいましょう。 <p class="hamburger " id="btn"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </p>

cssで作るドロップダウンメニュー

コーポレートサイトなど情報量が多いサイトでは、リンク先のページに飛んでからさらにそのページの中から目当てのコンテンツを探さなければならない、といった手間がかかります。メガドロップダウンメニューであれば、リンク先のページの中の目当てのコンテ…

SVGとCSSを使ったアニメーション

SVGとCSSを使ったアニメーション css3 tympanus.net gardenstudio.com.br jakearchibald.com SVGとは? SVG【 Scalable Vector Graphics 】とは、XMLベースの2Dベクター画像記述言語。2001年9月にW3C勧告として公開された。ベクター画像は画像をビットマップ…

モダンリセットCSSのress.css

リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。 html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:afte…