Пример:
HTML:
|
1 2 3 4 5 6 |
<div class="mobile-wrapper"> <div class="mobile"> <div class="photo"></div> <div class="screen"></div> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
.mobile-wrapper { width: 300px; position: relative; left: 50%; transform: translateX(-50%); } .mobile-wrapper:after { content: ''; width: 19%; height: 100%; position: absolute; right: 0; top: 0; border-radius: 25px; display: block; background: linear-gradient(90deg, #000000, 75%, #4c4c4c); z-index: -1; transform: perspective(1000px) rotateY(14deg) scale(0.85) translate3d(-35px, 0px, 0); } .mobile-wrapper:before { width: 100%; height: 5%; background: black; position: absolute; bottom: 7%; left: 4%; content: ''; border-radius: 50%; filter: blur(9px); opacity: .2; transform: perspective(100px) rotate3d(1, 0, 0.5, 25deg) scale3d(0.8, 0.8, 0.8); } .mobile-wrapper .mobile { width: 100%; padding-bottom: 216%; background: black; border-radius: 25px; transform: perspective(1000px) rotateY(-40deg) scale3d(0.8, 0.8, 0.8); } .mobile-wrapper .mobile .photo { border-radius: 0 0 15px 15px; background: black; width: 50%; padding-bottom: 13%; position: absolute; left: 50%; top: 0%; transform: translateX(-50%); z-index: 1; } .mobile-wrapper .mobile .photo:after { content: ''; width: 40%; padding-bottom: 5%; border-radius: 20px; background: #191919; border: 2px solid #191919; position: absolute; right: 30%; top: 50%; transform: translateY(-50%); } .mobile-wrapper .mobile .photo:before { content: ''; width: 8%; padding-bottom: 8%; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 2px solid #212121; position: absolute; right: 10%; top: 50%; transform: translateY(-50%); } .mobile-wrapper .mobile .screen { border-radius: 20px; width: 95%; height: 98%; background: url(photo.jpg) no-repeat center; /* Ссылка на фото */ background-size: cover; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } |
Альтернативный вариант смартфона: Смартфон на CSS для демонстрации фото
Найдено на codepen.io у пользователя LeFourbeFromage
Фотографии: kellepics
Здравствуйте. Что-то осенило и решил подставить видео прокрутки на телефоне. Не работает:( Как воспламенить видео на этом же смартфоне? Чтобы автоматически это видео естественно срабатывало. файл формата mp4 подставлял.
А можно как нибудь кнопочку позвонить поставить в телефон и блок слева с текстом, а телефон справа?Красиво будет