08.08.2017, 11:17
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Сообщение от ksa
|
|
Я приготовил свой книжечка для записи.
|
Здесь парень трудился 2 часа (последний пример) и сделал, коли надо было, а огрызок под какой-то паршивый айфонь что нельзя? 
Если экономить и к примеру в телефоне изображение, это только экран, а остальное стили, так почему и тень не стилями. Если все картинка, ну так тогда какой смысл. Это так, но сделать можно, однозначно. |
|
08.08.2017, 11:41
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
|
Сообщение от laimas
|
|
а огрызок под какой-то паршивый айфонь что нельзя?
|
Ответ кагбэ жду от тебя... 
|
Сообщение от laimas
|
|
сделать можно, однозначно
|
Пример будет? |
|
08.08.2017, 11:43
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
Ага, делай мне больше нех... как сидеть и ... )
|
|
08.08.2017, 11:45
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
laimas, слив защитан... 
|
|
08.08.2017, 12:56
|
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
|
ksa,
я не пионер из 5Б, доказывать с соплями у рта не буду, просто мне нахрен не нужно ради этого сидеть подбирая тень с заливкой. Но блин, с учетом того, что радиусом бордюра можно изменить и форму, и тень комбинировать, считать, что это невыполнимая задача.... Ну считаете так, на здоровье.
|
|
08.08.2017, 13:29
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
laimas, бла, бла, бла... А примера так и нет. 
|
|
10.08.2017, 09:05
|
 |
Профессор
|
|
Регистрация: 05.03.2012
Сообщений: 477
|
|
Сообщение от ksa
|
|
laimas, бла, бла, бла... А примера так и нет.
|
Играйся
<!DOCTYPE html>
<html lang="en">
<head>
<title>Duremar Limited Corporation</title>
<meta charset="utf-8">
<style>
body {
background:transparent;
min-height: 120em;
}
div#wrapper {
background:#fff;
padding:0;
width: 773px;
margin: 0 auto;
position: relative;
}
.afterlife{
background-image: linear-gradient(rgb(0, 128, 128) 0%, rgb(0, 128, 128) 30%, rgb(255, 255, 255) 30%, rgb(255, 255, 255) 70%);
}
.rock{
position: absolute;
top: 7em;
left: 2%;
background: none;
margin: 0;
width: 190px;
border-radius: 10px;
padding: 1em;
background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgb(238, 238, 238) 100%);
z-index: 4;
}
.rock:after{
top: 0px;
box-shadow: 5px -12px 24px -7px rgba(0, 0, 0, 0.25);
content: '';
height: 100%;
width: 100%;
position: absolute;
right: 1px;
z-index: -1;
border-radius: 10px;
-webkit-transform: skew(-4deg);
transform: skew(0deg);
}
h2{
color: rgb(0, 128, 128);
font-size: 1.4em;
margin: 0;
}
p{
color: rgb(153, 153, 153);
text-decoration: none;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
[alt=ring]{
display: block;
margin: 0 auto;
position: relative;
z-index: 2;
}
.alloyofshadows{
width: 190px;
margin: 0 auto;
position: relative;
top: 13px;
z-index: 0;
}
[class$=side]{
border-radius: 50%;
position: absolute;
}
.inside{
box-shadow: 0 0px 25px 1px rgba(0, 0, 0, 0.59);
height: 7px;
left: 10%;
width: 80%;
top: -20px;
background-color: rgb(158, 158, 158);
border-radius: 0 0 100% 100%;
}
.outside{
top: -50px;
box-shadow: 0 30px 30px rgba(0, 0, 0, 0.31);
height: 10px;
left: -10%;
width: 120%;
}
[type=range]{
width: 180px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="afterlife">
<img src="https://thegoodguys.sirv.com/products/50047689/50047689_505149.PNG?scale.height=505&scale.width=773&canvas.height=505&canvas.width=773&canvas.opacity=0&format=png&png.optimize=true" alt="ring" />
<div class="alloyofshadows">
<div class="outside"></div>
<div class="inside"></div>
</div>
</div>
<div class="rock">
<h2>One Collector says:</h2>
<p>Люди обросли кредитами, как дуремар пияками.</p>
<form class="range">
<input type="range" id="ra" min="10" max="100" step="1" value="13"/>
</form>
</div>
</div>
<script>
;(function(){
var d = document.getElementById('ra');
var o = document.getElementsByClassName('alloyofshadows')[0];
d.addEventListener('input', function(e){
var v = e.target.value;
o.style.top = v+'px';
});
})(window);
</script>
</body>
</html>
|
|
10.08.2017, 10:56
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
|
Сообщение от join
|
|
Играйся
|
Тень не такая! Она толстая, не тоненькая как нужно.
Вся проблема как раз в том и состоит, что я больше склоняюсь к невозможности такое сделать только используя ЦСС. И примеров таких теней я еще не встречал.
Т.е. такие тени я видел.
Но это либо была одна картинка вместе с самим элементом... Либо это была просто порезанная картинка, с "краями" и повторением "средней части"... |
|
10.08.2017, 18:17
|
|
Профессор
|
|
Регистрация: 05.03.2012
Сообщений: 477
|
|
|
|
|
11.08.2017, 08:43
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,298
|
|
|
Сообщение от join
|
|
годный пример.
|
О, эта тень похожа.
Спасибо.  |
|
|
|
