Показать сообщение отдельно
  #100 (permalink)  
Старый 29.03.2019, 21:19
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Блондинка, вот ещё вариант подсветки ссылок...

<!doctype html>
<html>
<head>
	<meta name="viewport" content="width=device-width">
	<title>transform</title>
</head>
<body>
<style>
	body { font: 1em sans-serif; }
	.box {
		border: thin solid #ccc;
		padding: .5em;
		margin: .5em;
	}
	a {
		text-decoration: none;
		color: #3c3cff;
		display: inline-block;
		padding: .5em;
	}
	[href*="css"] { color: #009900; }
	[href*="css-"] { color: #11bb11; }
	:target {
		color: #28cc28;
		text-shadow: 0 0 .05em;
		pointer-events: none;
		text-decoration: underline;
		outline: none;
	}
</style>
<div class="box">
	<a href="#html">HTML</a> 
	<a href="#css">CSS</a> 
	<a href="#js">JS</a> 
</div>
<div class="box">
	<a href="#css-transforms">CSS Transforms</a>
	<div class="box">
		<a href="#css-transforms/properties/transform">transform</a>
		<a href="#css-transforms/properties/transform-origin">transform-origin</a>
		<a href="#css-transforms/properties/transform-box">transform-box</a>
		<a href="#css-transforms/properties/transform-style">transform-style</a>
		<a href="#css-transforms/properties/perspective">perspective</a>
		<a href="#css-transforms/properties/perspective-origin">perspective-origin</a>
		<a href="#css-transforms/properties/backface-visibility">backface-visibility</a>
	</div>
</div>
<script>
	
(function() {
	for(var index = 0, length = document.links.length, link, parts; index < length; index++) {
		link = document.links[index];
		parts = link.href.split("#");
		link.name = parts[1];
	}
})();


</script>
</body>
</html>


UPD
Сообщение от laimas
Это даже на шутку не тянет.
А почему это должно быть смешно?

Или в чём проблема моего предложения? Вместо того, чтобы свалить всё в мистическую папку ccs3 (никто не знает, что это такое!), я предлагаю разбить свойства по спецификациям, и соответственно хлебные крошки в разных видах приложения будут выглядеть так (и это хорошо!):

CSS » Transforms Level 1 » transform-origin
CSS » Basic User Interface Level 4 » caret-shape
CSS » Media Queries Level 5 » scripting

А не так, как предлагает Блондинка (это очень плохо!):

CSS » CSS3 » transform-origin
CSS » CSS3 » caret-shape
CSS » CSS3 » scripting

Это вообще ни о чём! Кроме манипуляции вниманием человека это меню ничего и не достигает! Оно совершенно не информативно!

Последний раз редактировалось Malleys, 29.03.2019 в 21:45.
Ответить с цитированием