Можно ли отображать контент с помощью CSS?

Question

В основном я пытаюсь создать отражение изображения с помощью CSS, как показано ниже (и/или jQuery, но не то, что действительно повлияет на производительность). Это также потребует отклика.

Идея заключается в том, что iMac PNG (с отверстием, вырезанным для скриншотов сайта), а затем с помощью системы управления контентом я загружу скриншот сайта, и он будет помещен в и за экраном, чтобы показать через .... это все работает отлично, но я тогда хочу, чтобы экран и скриншот сайта отражались ниже. Я знаю, что это только тонко, но если это возможно, я бы хотел это сделать.

Это структура кода я планирую использовать, не стесняйтесь использовать это в любых примерах :)

DEMO: http://codepen.io/anon/pen/gKnry

<div class="screen_contain"> 
    <img src="imac-image.png" class="imac"> 
    <img src="website_image.png" class="website"> 
</div> 

.screen_contain { 
    display:inline-block; 
    position: relative; 
    width:33%; 
} 

.imac { 
    width: 100%; 
    position: relative; 
    z-index: 10; 
} 

.website { 
    position: absolute; 
    left: 5.0%; 
    top: 5%; 
    width: 90%; 
    z-index: 5; 
} 

Примечание:

• я, очевидно, буду в состоянии объединить изображение ИМАКА так, что он имеет главный ИМАК И это отражение в одном образе ... экономить на запросах и грязный коде.
• Это будет заполнено клиентом, поэтому все, что они смогут сделать, это загрузить скриншот веб-сайта.

Спасибо!

Answer 1

Используйте CSS-преобразование, чтобы перевернуть изображение. Затем используйте маску CSS для создания альфа-маски изображения (http://www.html5rocks.com/en/tutorials/masking/adobe/#toc-alpha-mask).

К сожалению, CSS-альфа-маски, похоже, не поддерживаются широко. http://caniuse.com/#search=mask. Альтернатива, если у вас есть сплошной цвет фона, заключается в том, чтобы поместить изображение iMac в элемент (скорее всего, в качестве фона) и поместить изображение градиента PNG-24 сверху, которое исчезает до цвета фона.

Answer 2

Вот скрипка, показывающий чистый CSS жить отражает (если вы измените исходный элемент, отражение будет меняться, а): http://jsfiddle.net/scvprc2r/

Это работает только в Webkit и Gecko-браузеры (только проверенные в Chrome и Firefox). Если вы хотите улучшить поддержку браузера, пойдите с решением SVG или JS.

Измененная структура:

<div class="screen_contain"> 
    <div class="computer" id="one"> 
     <img src="http://ferncroft.co.uk/files/2014/08/ethernal-demo-imac.png" class="imac" /> 
     <img src="http://danzambonini.com/wp-content/uploads/2010/07/stack_overflow_initial.jpg" class="website" id="web1" /> 
    </div> 
    <div class="reflection"></div> 
</div> 

Я добавил дополнительную оболочку DIV вокруг изображений, добавлены уникальные идентификаторы с изображением сайта и оберточной дел. Я также добавил еще один div, чтобы удерживать отражение в Firefox и эффект угасания градиента в обоих браузерах.

CSS:

.computer { 
    -webkit-box-reflect: below 0px linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%); 
} 

Это создает отражение элемента ниже элемента с помощью -webkit-box-reflect. Градиент добавляется для получения более плавного эффекта.

.reflection { 
    transform: scaleY(-1); 
} 

Наша базовая концепция отражения. Мы переверните его вокруг так, что фон element() является Mozilla в правильной ориентации

#one + .reflection { 
     background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 32%, rgba(255, 255, 255, 0) 100%) 100% 100%, 
        -moz-element(#web1) no-repeat 50% -5%, 
        -moz-element(#one) no-repeat 100% 100%; 
} 

Это как делается отражение в Firefox. Это использует функцию element(), которая создает живое изображение элемента. Фоны элементов устанавливаются как второй и третий фон в div.

Этот код затем повторяется для каждого дополнительного повторного div.

В Firefox, размер и положение отраженного фоновых зависит от высоты DIV он помещен в Вот некоторые JQuery для динамического изменения размера отражения от размера исходного элемента:.

function resizeReflection() { 
    $('.reflection').each(function() { 
     $(this).height($(this).prev().height()); 
    }); 
} 

resizeReflection(); 

$(window).resize(function() { 
    resizeReflection(); 
}); 

Это не было необходимо, если ваши изображения были фиксированными.

Что это выглядит следующим образом:

Firefox Chrome

Если вы хотите SVG решение вместо CSS один, посмотрите на это (гораздо проще, и имеет лучшую поддержку браузера): http://jsfiddle.net/JeremiePat/bGD3J/

Answer 3

jsFiddle Example

CSS

.reflection { 
    transform: rotate(180deg); 
    width: 100%; 
} 

.gradient { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    z-index: 999; 
    background: -webkit-gradient(linear, left bottom, left top, 
     color-stop(0%,rgba(255,255,255,.5)), 
     color-stop(60%,rgba(255,255,255,1))); 
} 

избежать JQuery: Просто дублировать HTML, чтобы избежать Jquery

<div class="screen_contain"> 
    <img src="http://ferncroft.co.uk/files/2014/08/ethernal-demo-imac.png" class="imac" /> 
    <img src="http://danzambonini.com/wp-content/uploads/2010/07/stack_overflow_initial.jpg" class="website" /> 
    <div class="screen_contain reflection"> 
     <img src="http://ferncroft.co.uk/files/2014/08/ethernal-demo-imac.png" class="imac" /> 
     <img src="http://danzambonini.com/wp-content/uploads/2010/07/stack_overflow_initial.jpg" class="website" /> 
     <div class="gradient"></div> 
    </div> 
</div> 

---

С Jquery jsFiddle Example

var screen_captain = $('.screen_contain'); 

    $.each(screen_captain, function(){ 
    $(this).append($(this).clone().addClass('reflection').append('<div class="gradient"></div>')); 
    }) 

Answer 4

Это дубликат вопрос был дан ответ в StackOverflow Тема:

CSS property box-reflect compatibility?

возможны не только WebKit (последний хром или сафари), но и в последнем светлячок.

Вот пример: http://codepen.io/jonathan/pen/pgioE

репетит, благодаря Давиду на:

http://satreth.blogspot.com/2012/05/css3-reflection.html

HTML:

<div id="someid"> 
    <img src="image url" /> 
<div/> 

CSS (WebKit):

#someid { 
     /* need some space for the reflection */ 
     margin-bottom: 120px; 
     /* the gradient makes the reflection fade out */ 
     -webkit-box-reflect: below 0px -webkit-linear-gradient(bottom, rgba(255,255,255,0.3) 0%, transparent 40%, transparent 100%); 
} 

CSS (Firefox - Gecko):

#someid { 
     position: relative; 
     /* need some space for the reflection */ 
     margin-bottom: 120px; 
} 

#someid:before { 
     content:""; /* needed or nothing will be shown */ 
     background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px, -moz-element(#someid) 0px -127px no-repeat; 
     -moz-transform: scaleY(-1); /* flip the image vertically */ 
     position:relative; 
     height:140px; 
     width: 360px; /* should be > image width + margin + shadow */ 
     top: 247px; 
     left:0px; 
} 

Firefox использует -moz-element сделать отражения (https://developer.mozilla.org/en-US/docs/CSS/element), в то время как WebKit использует собственный префикс поставщика для отражения.

Другой пример:

http://lea.verou.me/2011/06/css-reflections-for-firefox-with-moz-element-and-svg-masks/

Ура!