AP*DesignFactory

BLOG

cssのみでグラデーションのマウスオーバーをフェード処理する

下記サンプルページのような、グラデーションで表現されたボタンのマウスオーバーを、cssのみでフェード処理をする方法をご紹介いたします。 グラデーションボタンマウスオーバーのサンプルページ ボタンなどに使うhoverの変化…

2019.1.4html5/css3

縦横比を固定したままiframeや画像を表示する

margin と padding を %で表すときは、親要素の横幅が基準となります。 上下のmargin/paddingも、親要素の【横幅】が基準です。 レスポンシブコーディング時は、これを便利にいろいろなところで活用し…

2018.4.25html5/css3, responsive

横幅いっぱいのメイン画像を配置したレスポンシブコーディング

用意されたデザインファイルは下記のような感じ。 メインイメージの青枠の部分はマストで表示されるようにする。 コーディング後のメインイメージ部分の表示 ウィンドウサイズが1600px以上の時 メインイメージ部分はウィンドウ…

2018.3.21html5/css3, responsive

背景画像位置 px→%の計算方法

水平方向(X軸) {%指定値} = {px指定値} / ( {背景画像を指定する要素のwidth} – {背景画像のwidth} ) * 100 垂直方向(Y軸) {%指定値} = {px指定値} / ( {背景画像を指…

2018.3.17html5/css3