20.02.2014, 14:15
|
|
Интересующийся
|
|
Регистрация: 26.08.2013
Сообщений: 25
|
|
|
Вы блин друг с другом разговариваете что ли? Лучше бы подсказали как сделать
|
|
20.02.2014, 14:37
|
 |
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
Естесно друг с другом, смертные лишь дают повод поболтать.)
Второе если по-дедовски и в лоб, то примерно так:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
.black{
background: linear-gradient(to right, #eee 0%,#eee 50%,#000 50%,#000 100%);
color: #eee ;
width: 50%;
position: relative;
margin: 25px auto;
overflow: hidden;
resize: both;
}
.white{
color: #000;
width: 200%;
pointer-events: none;
}
.clip{
pointer-events: none;
top:0;
left:0;
bottom:0;
right:50%;
position: absolute;
overflow:hidden;
}
</style>
</head>
<body>
<div class="black">
<div class="clip">
<div class="white">
Между тем, подобно тому, как сам дух не есть нечто абстрактно-простое, а есть система движений, в которой он различает себя в моментах, но в самом этом различении остается свободным, и подобно тому, как он вообще расчленяет свое тело по различным отправлениям и каждую отдельную часть тела определяет только для одного отправления, точно так же можно представить себе и то, что текучее бытие его внутри-себя-бытия есть бытие расчлененное и, по-видимому, его так и нужно представлять...
</div>
</div>
Между тем, подобно тому, как сам дух не есть нечто абстрактно-простое, а есть система движений, в которой он различает себя в моментах, но в самом этом различении остается свободным, и подобно тому, как он вообще расчленяет свое тело по различным отправлениям и каждую отдельную часть тела определяет только для одного отправления, точно так же можно представить себе и то, что текучее бытие его внутри-себя-бытия есть бытие расчлененное и, по-видимому, его так и нужно представлять...
</div>
</body>
</html>
Первое и третье - лениво делать.
__________________
29375, 35
Последний раз редактировалось Aetae, 20.02.2014 в 14:49.
|
|
20.02.2014, 16:34
|
|
Интересующийся
|
|
Регистрация: 26.08.2013
Сообщений: 25
|
|
|
Блин, как раз это я сделал(((((((((((((( А вот первое и второе вообще не могу. Там кстати в обоих случаях нужно svg использовать? Просто я читал что еще анимация есть (это про 3е задание)
|
|
20.02.2014, 19:33
|
|
sinistral
|
|
Регистрация: 28.03.2011
Сообщений: 5,418
|
|
Сообщение от Aetae
|
|
Можно, но не нужно.)
|
значит есть другой способ. а какой ?) |
|
21.02.2014, 12:18
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
Изобразал что-то без svg. Но тут выравнивание bg привязано к right center. Вообще по-моему я что-то перемудрил.)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
*{margin:0; padding:0;}
html,body{
width:100%;
height:100%;
background-image:url(http://fc01.deviantart.net/fs31/f/2008/215/f/f/texture_1_by_Texture_Mania.jpg);
background-size:cover;
text-align: center;
}
.tooltip{
background-image: url(http://fc09.deviantart.net/fs71/i/2010/290/a/6/seamless_wet_grass_texture_by_hhh316-d30xrvv.jpg);
background-repeat: no-repeat;
background-position: -1000% -1000%;
margin: 25px auto;
position: relative;
display:inline-block;
}
.tooltip-content{
z-index:2;
position:relative;
padding: 1em;
text-align: left;
color: #fff;
font-size:18pt;
text-shadow: 0 0 2px black;
}
.tooltip-backgrond{
position:absolute;
top:0px;
right:0px;
left:0px;
bottom:0px;
background-image: inherit;
overflow:hidden;
border: 5px solid #fff;
border-radius: 15px;
}
.tooltip-backgrond:after{
content:'';
display:block;
position:absolute;
right:-125px; /* arrow:after_right - arrow_width/2 */
top:0px;
left:0px;
bottom:0px;
background-image: inherit;
background-position: right center;
}
.tooltip-arrow{
position: absolute;
right:0;
top:50%;
transform: rotate(45deg);
-webkit-transform:rotate(45deg);
background-image: inherit;
background-repeat: no-repeat;
background-position: -1000% -1000%;
overflow: hidden;
margin-right:-25px; /* -width/2 */
margin-top:-30px; /* -height/2 - border*/
width: 50px;
height: 50px;
border-right: 5px solid #fff;
border-top: 5px solid #fff;
border-left: 5px solid transparent;
border-bottom: 5px solid transparent;
}
.tooltip-arrow:after{
content:'';
display:block;
background-image: inherit;
background-position: right center;
transform: rotate(-45deg);
-webkit-transform:rotate(-45deg);
position:absolute;
top:-100px; /* больше чем (sqrt(width^2 + height^2) - width)/2 =) */
right:-100px;
left:-100px;
bottom:-100px;
}
</style>
</head>
<body>
<div class="tooltip">
<div class="tooltip-backgrond"></div>
<div class="tooltip-arrow"></div>
<div class="tooltip-content" contenteditable="true">
Потом отаку настолько погрязли<br> в поклейке фигурок гандамов, что оказалось,<br> что действительность за окном<br> для них гораздо более неизведанный предмет,<br> чем космос, в котором Белая База<br> бороздит ватаги Заку,<br> и родился жанр повседневность.
</div>
</div>
</body>
</html>
__________________
29375, 35
Последний раз редактировалось Aetae, 21.02.2014 в 12:21.
|
|
21.02.2014, 22:00
|
|
что-то знаю
|
|
Регистрация: 24.05.2009
Сообщений: 5,176
|
|
Aetae,
есть, а точнее будут везде новые возможности для реализации подобного с использованием лишь одного HTML элемента:
Использование масок через clip-path и calc(). Хотя сегодня это работает глючно:
Вот только calc() на вертикальную координату почему то не работает. От того никак не сделать блок резиновым в высоту, хотя горизонтальная калькуляция работает норм. Надо этот глюк сообщить в баг-трекер. Но я хз куда им об этом писать.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body, html {
width: 100%;
height: 100%;
background-image: url(http://fc01.deviantart.net/fs31/f/2008/215/f/f/texture_1_by_Texture_Mania.jpg);
background-size: cover;
text-align: center;
}
.mega-button {
display: inline-block;
position: relative;
border: 4px solid #fff;
border-radius: 16px 25px 25px 16px/16px 60px 60px 16px;
-webkit-clip-path: polygon(0 0, 0 100%, -webkit-calc(100% - 10px) 100%, -webkit-calc(100% - 10px) 55%, 100% 50%, -webkit-calc(100% - 10px) 45%, -webkit-calc(100% - 10px) 0);
background-color: #fff;
padding: 0 10px 0 0;
font-size: 18pt;
color: #fff;
text-shadow: 0 0 2px black;
}
.mega-button:before {
background-image: url('http://fc09.deviantart.net/fs71/i/2010/290/a/6/seamless_wet_grass_texture_by_hhh316-d30xrvv.jpg');
background-origin: border-box;
border: inherit;
border-right: 0;
border-radius: inherit;
-webkit-clip-path: inherit;
content: ' ';
display: block;
position: absolute;
margin: -4px;
width: 100%;
height: 100%;
z-index: -1;
}
</style>
</head>
<body>
<div class="mega-button">Потом отаку настолько погрязли<br> в поклейке фигурок гандамов, что оказалось,<br> что действительность за окном<br> для них гораздо более неизведанный предмет,<br> чем космос, в котором Белая База<br> бороздит ватаги Заку,<br> и родился жанр повседневность.</div>
</body>
</html>
|
|
21.02.2014, 23:57
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
А фурифокс может вообще svg в clip-path использовать и те же svgшные фильтры к html элементам применять. Увы пока всё это очень специфично, и удобно разве что в написании расширений под конкретный браузер.
P.S. Самое забавное свойство, что видел - -moz-element(#id) .=)
__________________
29375, 35
Последний раз редактировалось Aetae, 22.02.2014 в 00:01.
|
|
22.02.2014, 11:09
|
|
Интересующийся
|
|
Регистрация: 26.08.2013
Сообщений: 25
|
|
|
|
|
23.02.2014, 09:03
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,577
|
|
|
Gasherez, примерно это я имел ввиду когда в самом начале говорил об svg - там только чуточку допилить.
__________________
29375, 35
|
|
23.02.2014, 11:38
|
|
Интересующийся
|
|
Регистрация: 26.08.2013
Сообщений: 25
|
|
Попробую допилить, только когда я рисую фигуру (прямоугольник с выступающим треугольником), а рисую их сплошной фигурой, чтобы бордер был. Дак вот, сторона с этим выступающим треугольником имеет толщину в два раза больше, чем сторона слева, сверху и с низу. Ничего не понимаю(( http://joxi.ru/taUJU_3JTJCCWUG3oUQ |
|
|
|
