そのままコピペOK!CSSで写真に枠をつける

てっちゃん
てっちゃん

CSSで写真にフレームをつけちゃおう!
そのままコピペしてつかっても、カスタマイズしてもOKです

デモページ

フレームのソース

HTMLは全部共通です!

  1. <section>
  2. <p><img src="css-photo-frame.png" alt="フレームサンプル">
  3. </section>

CSS:パターン1

CSSフレーム

  1. p img{ padding:10px; border:1px #dcb89f solid; }

CSS:パターン2

CSSフレーム

  1. p{
  2. width:600px;
  3. margin:0 auto;
  4. position: relative;
  5. }
  6. p::before,
  7. p::after {
  8. content: "";
  9. width: 60px;
  10. height: 60px;
  11. position: absolute;
  12. }
  13. p::before {
  14. border-top: 2px solid #625569;
  15. border-left: 2px solid #dcb89f;
  16. top:-20px;
  17. left:-20px;
  18. }
  19. p::after {
  20. border-right: 2px solid #dcb89f;
  21. border-bottom: 2px solid #625569;
  22. bottom:-20px;
  23. right:-20px;
  24. }

CSS:パターン3

CSSフレーム

  1. p{
  2. width:600px;
  3. margin:0 auto;
  4. position: relative;
  5. }
  6. p::before,
  7. p::after {
  8. content: "";
  9. width: 0;
  10. height: 0;
  11. position: absolute;
  12. z-index: 1;
  13. }
  14. p::before {
  15. border-top: 30px solid #f0897f;
  16. border-right: 30px solid transparent;
  17. border-bottom: 30px solid transparent;
  18. border-left: 30px solid #f0897f;
  19. top:-10px;
  20. left:-10px;
  21. }
  22. p::after {
  23. border-top: 30px solid transparent;
  24. border-right: 30px solid #f0897f;
  25. border-bottom: 30px solid #f0897f;
  26. border-left: 30px solid transparent;
  27. bottom:-10px;
  28. right:-10px;
  29. }

CSS:パターン4

CSSフレーム

  1. p{
  2. width:600px;
  3. margin:0 auto;
  4. position: relative;
  5. }
  6. p::before,
  7. p::after {
  8. content: "";
  9. width: 100px;
  10. height: 100px;
  11. display:block;
  12. transform: rotate(-35deg);
  13. background: #fff;
  14. position: absolute;
  15. z-index: 1;
  16. }
  17. p::before {
  18. border-bottom: 1px solid #aaa;
  19. top:-70px;
  20. left:-50px;
  21. }
  22. p::after {
  23. border-top: 1px solid #aaa;
  24. bottom:-70px;
  25. right:-50px;
  26. }

CSS:パターン5

CSSフレーム

  1. p{
  2. width:600px;
  3. margin:0 auto;
  4. position: relative;
  5. }
  6. p::after {
  7. content: "";
  8. width: calc(100% - 10px);
  9. height: calc(100% - 10px);
  10. border-image-source: repeating-linear-gradient(45deg, #fff 0, #fff 2px, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 6px);
  11. border-width: 15px;
  12. border-image-slice: 20;
  13. border-image-repeat: round;
  14. border-style: solid;
  15. position: absolute;
  16. z-index: 1;
  17. top: 50%;
  18. left: 50%;
  19. transform: translate(-50%, -50%);
  20. }

CSS:パターン6

CSSフレーム

  1. p{
  2. width:600px;
  3. margin:0 auto;
  4. position: relative;
  5. }
  6. p::before{
  7. content:"";
  8. width: 100%;
  9. height: 100%;
  10. display:block;
  11. border:30px rgba( 0,0,0,.4 ) solid;
  12. box-sizing:border-box;
  13. position: absolute;
  14. top:0;
  15. left:0;
  16. }
  17. p::after{
  18. content:"";
  19. width: calc( 100% - 60px );
  20. height: calc( 100% - 60px );
  21. display:block;
  22. border:1px rgba( 255,255,255,.4 ) solid;
  23. box-sizing:border-box;
  24. position: absolute;
  25. top:30px;
  26. left:30px;
  27. }

CSS:パターン7

CSSフレーム

  1. p{
  2. width:600px;
  3. margin:0 auto;
  4. position: relative;
  5. }
  6. p::after {
  7. content: "";
  8. width: 100%;
  9. height: 100%;
  10. background-image: radial-gradient(#00aec9 30%, rgba(0, 174, 201, 0) 31%), radial-gradient(#00aec9 30%, rgba(0, 174, 201, 0) 31%);
  11. background-size: 6px 6px;
  12. background-position: 0 0, 3px 3px;
  13. position: absolute;
  14. bottom: -15px;
  15. right: -15px;
  16. z-index: -1;
  17. }

関連記事