Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 20.02.2014, 14:15
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Вы блин друг с другом разговариваете что ли? Лучше бы подсказали как сделать
Ответить с цитированием
  #12 (permalink)  
Старый 20.02.2014, 14:37
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

Естесно друг с другом, смертные лишь дают повод поболтать.)

Второе если по-дедовски и в лоб, то примерно так:
<!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.
Ответить с цитированием
  #13 (permalink)  
Старый 20.02.2014, 16:34
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Блин, как раз это я сделал(((((((((((((( А вот первое и второе вообще не могу. Там кстати в обоих случаях нужно svg использовать? Просто я читал что еще анимация есть (это про 3е задание)
Ответить с цитированием
  #14 (permalink)  
Старый 20.02.2014, 19:33
sinistral
Посмотреть профиль Найти все сообщения от melky
 
Регистрация: 28.03.2011
Сообщений: 5,418

Сообщение от Aetae Посмотреть сообщение
Можно, но не нужно.)
значит есть другой способ. а какой ?)
Ответить с цитированием
  #15 (permalink)  
Старый 21.02.2014, 12:18
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

Изобразал что-то без 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.
Ответить с цитированием
  #16 (permalink)  
Старый 21.02.2014, 22:00
что-то знаю
Отправить личное сообщение для devote Посмотреть профиль Найти все сообщения от devote
 
Регистрация: 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>
__________________
хм Russians say завтра but завтра doesn't mean "tomorrow" it just means "not today."
HTML5 history API рассширение для браузеров не поддерживающих pushState, replaceState
QSA CSS3 Selector Engine
Ответить с цитированием
  #17 (permalink)  
Старый 21.02.2014, 23:57
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

А фурифокс может вообще svg в clip-path использовать и те же svgшные фильтры к html элементам применять. Увы пока всё это очень специфично, и удобно разве что в написании расширений под конкретный браузер.

P.S. Самое забавное свойство, что видел - -moz-element(#id) .=)
__________________
29375, 35

Последний раз редактировалось Aetae, 22.02.2014 в 00:01.
Ответить с цитированием
  #18 (permalink)  
Старый 22.02.2014, 11:09
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Посмотри вот этот код! ;-) http://codepen.io/GreatRash/pen/vaJFh
Ответить с цитированием
  #19 (permalink)  
Старый 23.02.2014, 09:03
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,588

Gasherez, примерно это я имел ввиду когда в самом начале говорил об svg - там только чуточку допилить.
__________________
29375, 35
Ответить с цитированием
  #20 (permalink)  
Старый 23.02.2014, 11:38
Интересующийся
Отправить личное сообщение для Gasherez Посмотреть профиль Найти все сообщения от Gasherez
 
Регистрация: 26.08.2013
Сообщений: 25

Попробую допилить, только когда я рисую фигуру (прямоугольник с выступающим треугольником), а рисую их сплошной фигурой, чтобы бордер был. Дак вот, сторона с этим выступающим треугольником имеет толщину в два раза больше, чем сторона слева, сверху и с низу. Ничего не понимаю(( http://joxi.ru/taUJU_3JTJCCWUG3oUQ
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
верстка для мобильных устройств torsar (X)HTML/CSS 3 25.04.2013 21:20
верстка блеать torsar (X)HTML/CSS 6 26.02.2013 12:15
При установке CSS для Body "overflow: hidden" съезжает верстка, в чем дело? Slevin Kelevra Общие вопросы Javascript 18 08.07.2012 20:27
Требуется верстка с использованием bootstrap projectdev2012 Работа 0 31.03.2012 19:35
верстка под 17 дюймовый монитор Артем125 (X)HTML/CSS 8 20.08.2010 23:09