Сложная верстка
Добрый день! У меня есть не простые задания. Ломаю голову, думаю как их сделать, если кто нибудь знает прошу помочь, буду очень очень признателен (или хотя бы скинуть информацию где это можно найти)
http://joxi.ru/dKMEU_3JTJB8WSyJq2k - первое http://joxi.ru/sqMEUxjKTJATR6BW7dk - второе http://joxi.ru/VagEUxjKTJDvSIf6OCA - третье |
Цитата:
|
А первое как сделать? В частности отросток треугольный, чтобы туда бэкграунд продолжался. Тем более, что там все от шрифта зависит
|
При помощи svg - элементарно, без - с ограничениями.
|
все можно сделать и без SVG простым HTML, CSS и JS.
|
Цитата:
|
Aetae,
Ты хочешь сказать, что эту кнопку просто нужно нарисовать в формате svg??? А с помощью canvas можно сделать? |
Можете подсказать как сделать это через svg??? В редакторе нарисовать эту кнопку, или посредством <svg>. Даже если нарисую кнопку, не понимаю как два фона сделать. Синий еще с радиусом О_о
|
Цитата:
Цитата:
|
Цитата:
|
Вы блин друг с другом разговариваете что ли? Лучше бы подсказали как сделать
|
Естесно друг с другом, смертные лишь дают повод поболтать.)
Второе если по-дедовски и в лоб, то примерно так:
<!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>
Первое и третье - лениво делать. |
Блин, как раз это я сделал(((((((((((((( А вот первое и второе вообще не могу. Там кстати в обоих случаях нужно svg использовать? Просто я читал что еще анимация есть (это про 3е задание)
|
Цитата:
|
Изобразал что-то без 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>
|
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>
|
А фурифокс может вообще svg в clip-path использовать и те же svgшные фильтры к html элементам применять. Увы пока всё это очень специфично, и удобно разве что в написании расширений под конкретный браузер.
P.S. Самое забавное свойство, что видел - -moz-element(#id) .=) |
Посмотри вот этот код! ;-) http://codepen.io/GreatRash/pen/vaJFh
|
Gasherez, примерно это я имел ввиду когда в самом начале говорил об svg - там только чуточку допилить.
|
Попробую допилить, только когда я рисую фигуру (прямоугольник с выступающим треугольником), а рисую их сплошной фигурой, чтобы бордер был. Дак вот, сторона с этим выступающим треугольником имеет толщину в два раза больше, чем сторона слева, сверху и с низу. Ничего не понимаю(( http://joxi.ru/taUJU_3JTJCCWUG3oUQ
|
Короче, вот что у меня в итоге получилось, не могу допереть как поставить бордер и закруглить углы. Может кто нибудь знает как делать дальше??? http://jsfiddle.net/Gasherez/XjNBs/
|
Не, это не вариант. Такое и без svg можно, даже без transform.
|
Может это вообще нереально сделать?))
|
Вот набросок svg(работает в ff и ie), в хроме не завелось но лень думать в чём проблема, может позже.
<!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 {
display: inline-block;
position: relative;
margin:20px;
}
.tooltip-svg {
overflow: visible;
top: 0px;
left: 0px;
position: absolute;
}
.tooltip-content {
position: relative;
padding:0.6em;
text-align: left;
color: #fff;
font-size:18pt;
text-shadow: 0 0 2px black;
}
</style>
</head>
<body>
<div class="tooltip">
<svg width="100%" height="100%" class="tooltip-svg">
<defs>
<polyline id="tooltip-arrow" points="-1,-15 15,0 -1,15" />
<pattern id="tooltip-background" patternUnits="userSpaceOnUse" width="1304" height="847">
<image xlink:href="http://fc08.deviantart.net/fs71/f/2014/054/2/8/damages_by_destinyblue-d77jr43.jpg" x="0" y="0" width="1304" height="847" />
</pattern>
<mask id="tooltip-mask">
<g id="tooltip-box" fill="#fff">
<use xlink:href="#tooltip-arrow" x="100%" y="50%"/>
<rect x="0" y="0" rx="20" ry="20" width="100%" height="100%" />
</g>
</mask>
</defs>
<use xlink:href="#tooltip-box" stroke="black" stroke-width="4"/>
<rect x="0" y="0" width="120%" height="100%" fill="url(#tooltip-background)" mask="url(#tooltip-mask)" />
</svg>
<div contentEditable="true" class="tooltip-content">Продавай человеку рыбу <br>и будешь сыт каждый день,<br> научи человека ловить рыбу<br> и будешь сыт всего лишь раз.</div>
</div>
</body>
</html>
|
Пофиксил для хрома, однако во-первых надо будет обрезать выпирающий кусок svg(прозрачный), во-вторых в хроме всё-равно почему-то не работает динамическая отрисовка маски(по условиям задачи это не имеет значения, ибо при первой отрисовке всё ок, но неприятно).
<!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 {
display: inline-block;
position: relative;
margin:20px;
}
.tooltip-svg {
overflow: visible;
top: 0px;
left: 0px;
height: 200%;
width: 200%;
position: absolute;
}
.tooltip-content {
position: relative;
padding:0.6em;
text-align: left;
color: #fff;
font-size:18pt;
text-shadow: 0 0 2px black;
}
</style>
</head>
<body>
<div class="tooltip">
<svg width="200%" height="200%" class="tooltip-svg" >
<defs>
<polyline id="tooltip-arrow" points="-1,-15 15,0 -1,15" />
<pattern id="tooltip-background" patternUnits="userSpaceOnUse" width="1304" height="847">
<image xlink:href="http://fc08.deviantart.net/fs71/f/2014/054/2/8/damages_by_destinyblue-d77jr43.jpg" x="0" y="0" width="1304" height="847" />
</pattern>
<mask id="tooltip-mask">
<g id="tooltip-box" fill="#fff" transform="translate(2,2)">
<use xlink:href="#tooltip-arrow" x="50%" y="25%"/>
<rect x="0" y="0" rx="20" ry="20" width="50%" height="50%" />
</g>
</mask>
</defs>
<use xlink:href="#tooltip-box" stroke="black" stroke-width="4"/>
<rect x="0" y="0" width="100%" height="100%" fill="url(#tooltip-background)" mask="url(#tooltip-mask)" />
</svg>
<div contentEditable="true" class="tooltip-content">Продавай человеку рыбу <br>и будешь сыт каждый день,<br> научи человека ловить рыбу<br> и будешь сыт всего лишь раз.</div>
</div>
</body>
</html>
Кому надо, тот пускай и допиливает.) |
Супер!!! +++++++++++++++++++++
|
| Часовой пояс GMT +3, время: 02:40. |