Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.07.2014, 00:14
Интересующийся
Отправить личное сообщение для iis_ Посмотреть профиль Найти все сообщения от iis_
 
Регистрация: 29.01.2014
Сообщений: 14

Как заверстать фигуру?
Всем привет! Подскажите по опыту те, кому доводилось верстать неправильные фигуры.
Нужно заверстать фигуру во вложении или что-то подобное без использования изображений и canvas-а. Желательном чистым css.
Кто что может посоветовать?
Фигура нужна для построения столбикового графика. Возможно дугу сделать немного другой, но похожей.
Заранее спасибо!
Изображения:
Тип файла: png figure.png (2.3 Кб, 2 просмотров)

Последний раз редактировалось iis_, 02.07.2014 в 00:18.
Ответить с цитированием
  #2 (permalink)  
Старый 02.07.2014, 00:27
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

Первый совет - прописать дизайнеру в щщи с вертушки.

А далее зависит от того что за фигура, будет ли она на одноцветном фоне или на рисунке, должна ли она обрезать содержимое итд.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 02.07.2014, 10:39
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

почему нельзя использовать SVG? Ну, а если только CSS, то на box-shadow технике можно сделать, как сделали здесь: http://cssdeck.com/labs/mona-lisa-with-pure-css, а тут либа которая конвертит картинку в CSS: https://github.com/jaysalvat/image2css
__________________
kobezzza
code monkey
Ответить с цитированием
  #4 (permalink)  
Старый 02.07.2014, 12:17
Интересующийся
Отправить личное сообщение для iis_ Посмотреть профиль Найти все сообщения от iis_
 
Регистрация: 29.01.2014
Сообщений: 14

Сообщение от Aetae Посмотреть сообщение
зависит от того что за фигура, будет ли она на одноцветном фоне или на рисунке, должна ли она обрезать содержимое итд.
Сообщение от kobezzza Посмотреть сообщение
почему нельзя использовать SVG?
Должна быть расширяемая контролируемая css-ом фигура.
В конечном итоге должно получиться так:
Изображения:
Тип файла: jpg graph.jpg (14.9 Кб, 8 просмотров)
Ответить с цитированием
  #5 (permalink)  
Старый 02.07.2014, 13:49
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Ну SVG тут идеально подойдёт, его даже можно как DATA:URI прям в CSS запихнуть, если принципиально важно редактирование через CSS.
__________________
kobezzza
code monkey
Ответить с цитированием
  #6 (permalink)  
Старый 02.07.2014, 13:58
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

Элемент с border-radius, обрезанный сверху overflow:hidden, закрытый слева следующим.
Примерно так:
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body{
			background: #99f;
		}
		.cicle{
			border-radius:50%;
			background: #ddf linear-gradient(#aaf 80px, #ccf 80px, #ccf 160px, #bbf 160px);
			background-size: 100% 240px;
			background-position: 0 50%;
			background-repeat: repeat-x;
			border: 2px solid #99f;
			position: absolute;

		}

		.block{
			overflow: hidden;
			position: absolute;
			bottom:0;
			left:-255px;
		}

		.cicle-6{
			width: 1800px;
			height: 1800px;
			z-index: 10;
			left:-904px; /* -(width/2 + border*2)*/
			bottom:-800px;
		}
		.cicle-6-block{
			width: 900px;
			height: 300px;	
		}

		.cicle-5{
			width: 1600px;
			height: 1600px;
			z-index: 11;
			left:-804px; 
			bottom:-700px;
		}
		.cicle-5-block{
			width: 800px;
			height: 350px;	
		}
		.cicle-4{
			width: 1400px;
			height: 1400px;
			z-index: 12;
			left:-704px; 
			bottom:-600px;
		}
		.cicle-4-block{
			width: 700px;
			height: 350px;	
		}
		.cicle-3{
			width: 1200px;
			height: 1200px;
			z-index: 13;
			left:-604px; 
			bottom:-500px;
		}
		.cicle-3-block{
			width: 600px;
			height: 400px;	
		}
		.cicle-2{
			width: 1000px;
			height: 1000px;
			z-index: 14;
			left:-504px; 
			bottom:-400px;
		}
		.cicle-2-block{
			width: 500px;
			height: 410px;	
		}

		.cicle-central{
			width: 800px;
			height: 800px;
			z-index: 15;
			left:-420px; 
			bottom:-308px;
			border: 10px solid #99f;
		}
		.cicle-central-block{
			width: 900px;
			height:500px;	
		}
		.cicle:after{
			content: attr(class);
			display: block;
			right:0;
			top:50%;
			height:1.5em;
			line-height: 1.5em;
			margin-top:-0.75em;
			position: absolute;
		}
	</style>
</head>
<body>
	<div class="cicle-6-block block">
		<div class="cicle-6 cicle">6</div>
	</div>
	<div class="cicle-5-block block">
		<div class="cicle-5 cicle">5</div>
	</div>
	<div class="cicle-4-block block">
		<div class="cicle-4 cicle">4</div>
	</div>
	<div class="cicle-3-block block">
		<div class="cicle-3 cicle">3</div>
	</div>
	<div class="cicle-2-block block">
		<div class="cicle-2 cicle">2</div>
	</div>
	<div class="cicle-central-block block">
		<div class="cicle-central cicle"></div>
	</div>
</body>
</html>


А вообще - svg.
__________________
29375, 35

Последний раз редактировалось Aetae, 02.07.2014 в 15:29.
Ответить с цитированием
  #7 (permalink)  
Старый 02.07.2014, 15:26
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

Также прошу заметить - кривенькая загогулина из первого поста имеет мало отношения к явным отрезкам правильной окружности из картинки.
Впредь сразу давайте нормальную картинку.
__________________
29375, 35
Ответить с цитированием
  #8 (permalink)  
Старый 02.07.2014, 16:10
Интересующийся
Отправить личное сообщение для iis_ Посмотреть профиль Найти все сообщения от iis_
 
Регистрация: 29.01.2014
Сообщений: 14

Сообщение от Aetae Посмотреть сообщение
Элемент с border-radius, обрезанный сверху overflow:hidden, закрытый слева следующим.
Круто! Спасибо огромное!!
Ответить с цитированием
  #9 (permalink)  
Старый 02.07.2014, 20:11
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,138

Aetae по моему можно проще это сделать без оберток и абсолютного позиционирования
Ответить с цитированием
  #10 (permalink)  
Старый 02.07.2014, 20:25
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,587

MallSerg, там много что можно улучшить. Те же классы наполовину лишние.
Это пруф оф концепт на коленке, не верстать же мне за тс полноценную реализацию.)
__________________
29375, 35
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как включить синхронное выполнение строк? SkaN Элементы интерфейса 1 26.04.2012 22:28
Как писать код который легко поддерживать, расширять, читать. Policeman Общие вопросы Javascript 3 24.03.2012 05:40
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47
Как отловить обратное событие "click" ? jsuse Общие вопросы Javascript 2 18.01.2012 00:16
Как сделать электронный каталог продукции? natarius Серверные языки и технологии 6 24.05.2009 20:56