Блондинка, вот ещё вариант подсветки ссылок...
<!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
Это вообще ни о чём! Кроме манипуляции вниманием человека это меню ничего и не достигает! Оно совершенно не информативно!
|