傾いたフレーム付き画像の表示

girl-3557636_1920.jpg

1 写真を少し傾ける
ときには、写真にフレームを付けて、傾けてみるのもワンポイントで効果的です。
※個人的な感想では、沢山ある画像の1枚程度がいいように思います。
多いと、逆効果な気がします。

下の事例の写真は、写真とフレームを傾けた感じにの表現です。写真の構図によっては、活き活きとした感じを演出できます。
この例では、時計回りに「9度傾け」ています。





※この画像は、2020年01月14日の記事「植物が水を根から吸収して高いところに運ぶ力」で使用した画像を何ら加工することなく使用しています

※追記(2/5):この記事の3種類の画像をコピー・保存すると全てが1/14日のオリジナルの画像と全く同じになります。
画像自体を一切加工していないため、傾き・枠・トリミングがない状態、例えばポラロイド写真をコピーしてもポラロイド写真状態ではコピーされず、オリジナル状態の樹木の画像だけがコピーされることから、その理由が分かると思います。

かなり雰囲気が変わった気がしませんか?

この画像の設定のソースは、次の項で紹介します。


2 ソース
上の項の画像の設定したHTMLとCSSのソースを紹介します。

HTMLのソース
<div class="frame">  <!--  CSSのクラス名を適用 -->
<img src="https://〇〇~画像へのリンク.jpg" >  <!--  画像を呼び出し -->
</div>

※追記(2/5):3行目の「</div>」が抜けていたので追加しました。同時に無用な2行目の「</a>」の部分だけ削除しました。

CSSのソース
.frame { /* HTMLで使用するクラス名 */
position: relative;
display: block;
margin-left: 60px; /* 画像の左の余白を指定 */
width: 340px; /* 画像サイズ、値は適宜 */
height: 400px; /* 画像サイズ、値は適宜 */
border: 10px solid #fff; /* 写真の枠の太さと色 */
box-shadow: 0 0 8px #999; /* 写真の枠の影の太さと色 */
transform: rotate(9deg); /* 全体を回転、今回はは9度 */
overflow: hidden; /* 不要部分は消す */
}

.frame img { /* HTMLで使用するクラス名の画像 */
transform-origin: 20% 20%; /* 左上からの回転の中心点の位置 */
/*  transform: rotate(-9deg);  枠だけ傾け写真は傾けない、今回は適用しない */
}



3 写真をもっと傾ける

変更した点
今度は、「25度傾け」(9→25deg)てみました。
また、写真の枠(10→15px)と影(8→12px)を太くしてみました。
※個人的には、このぐらいが限度かなあと感じます。

※なお、傾ける角度はマイナスを入力すると「反時計回り」となります。
通常の「時計回り」では「0~360deg」の範囲の値ですが、360に近いときはマイナスの値の方が分かりやすいと思います。






4 ポラロイド風に
今思いついたのですが、写真の枠を変えてポラロイド風にできないかなあ?
やり方は色々あると思いますが、上のソースを少し変えてやってみたいと思います。







それっぽくなりましたね。

写真のサイズは、最初の投稿は勘で指定しましたが、後で実際のポラロイド写真のサイズを調べて、値をmmで修正しました。

変更した点
画像の幅(width:340px→77mm)・高さ(height: 400px→79mm)
傾き(rotate(9→ -15deg))
影(box-shadow:8→12px)
影の色(box-shadow:#999→#888)
写真の枠(下記を参照)
に変更しました。

「写真の枠」の変更は、(border: 10px solid #fff;)部分を
border-width: 6.5mm 5.5mm 22.5mm 5.5mm; /* 写真の枠の上・右・下・左の太さ */
border-style: solid; /* 写真の枠のスタイル・実線 */
border-color: white; /* 写真の枠の色 */
と、太さ、スタイル、色の3つに分けて別々に指定しました。
※追記(3/7):「boder」を「top、right、bottom、left」4つで値を指定していましたが、このように修正しました。



今回は、アップした写真を画像処理ソフトで修正・加工することなしに、CSSで枠を付けたり、切り取ったり、傾けたりする方法を説明しました。


ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 71

なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
驚いた 驚いた 驚いた
ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス ナイス

この記事へのコメント

  • ジュン

    <HTMLのソース> や<CSSのソース> が
    理解できないので検索したり苦労してるのですが
    やっぱり駄目なんです
    理解出来たらいろいろ楽しむことが出来るのではと思うのですが。
    難しいです
    2020年02月03日 14:20
  • わけい

    ジュンさんへ
    コメントどうもありがとうございます。

    もし、表示されないとすると考えられる理由は2つです。

    理由① CSSを<style></style>でのくくり忘れ。
    理由② HTMLの画像のアドレス・ファイル名の部分。
    ②に関しては、ジュンさんの画像を挿入して、その中から「src="https://~.jpg」までの部分だけを、「<img src="https:://~.jpg">」の部分に貼り付ける。

    これで、表示されると思うのですが・・・
    (なお、「thumbnail2」と、ソースにある</a>は不要だと思います。)

    もし、差し支えなければ「理解できない」部分を具体的に教えていただければ、対応いたします。
    2020年02月03日 16:22
  • 小枝

    ご無沙汰してしまい申しわけございません。
    年末の断捨離・大掃除中に発症してしまった腰椎ヘルニア。
    どうにか激痛から解放されてまいりましたので
    今夕より少しずつ皆さま方をお訪ねしています。

    わけいさんのご紹介下さる設定方法はとても参考になります。
    また何かの記事で使用させていただくかもしれません。
    いつもご情報ありがとうございます。
    2020年02月03日 20:44
  • わけい

    小枝さんへ
    コメントどうもありがとうございます。
    お久しぶりです。
    とても重いものを持たれたようで、無理は新型コロナウイルスよりたちが悪いと聞いていますよ。
    私は、ペンより重いものは持たないように心がけています。
    とは言いつつ、実生活上はゴミ出しや買い物でもう少し重いものを持たざるを得ないこともあります。
    断捨離は私も数年前から心がけているのですが、思い出が邪魔をしています。
    でも、コレクション癖はすっぱりやめましたので、増えることが無くなりました。
    数年前に体重の断捨離をしたのですが、目標の10kgは簡単にクリアし、目標を5kg上乗せ、それもクリアさらに5kig追加で、半年程度で20kg以上の断捨離をしました。
    20kgを毎日持ち歩いていたのかと思うと、「ペンより重いもの」どころの話ではなくなり、恐怖のレベルです。
    おかげで、階段の上り下りは楽に、走ることもできるようになりました。
    (でも、いいことずくめではなかったのですが、話が長くなるので、またの機会に。)
    今日は、ご訪問いただきありがとうございます。
    2020年02月03日 22:14
  • ジュン

    ありがとうございます
    黒い部分が全くわからないのです
    以前は写真を大きいサイズにすることだけは出来ました
    今は写真も勝手に決まっていて大きく出来ません
    傾きも違う方法でしております
    ブログの基礎やPCは自己流で行っており限界がありますが
    自分なりに納得・・・ど素人なんです
    拝読させていただき頷くばかりです
    わかることは真似させていただきます
    これからもよろしくお願いいたします
    2020年02月04日 16:46
  • わけい

    ジュンさんへ
    コメントどうもありがとうございます。
    すみません、HTMLの黒い部分の3行目の</div>をコピペするのを忘れていました。今修正しました。
    これじゃあ、分からないのも無理ないですね、申し訳ありませんでした。
    今回紹介した方法は、画像自体に一切手を加えていないので、記事の3枚の画像をコピーすると3枚とも全く同じオリジナルの画像をコピーすることが出来るという点です。

    でもジュンさんも、画像処理ソフトで色々表現されているようなので、それで十分な気がします。
    またよろしくお願いします。
    2020年02月04日 22:27
  • winga

    おはようございます。
    わけいさんにかかったら、もう何でもできちゃう!って感じで、
    凄いです。
    でもわけいさんはみんなにその方法を教えてくださる。
    ここ、好きなとこです♡
    2020年02月05日 06:42
  • わけい

    wingaさんへ
    コメントどうもありがとうございます。
    ほめていただいたようで、くすぐったいですが、嬉しいです。
    気持玉も大量に頂きありがとうございます。
    おかげでかなり数が進みました。!(^^)!
    2020年02月05日 10:10