Skip to content

Instantly share code, notes, and snippets.

@kizu

kizu/dabblet.css

Created July 29, 2013 13:56
Show Gist options
  • Save kizu/6104463 to your computer and use it in GitHub Desktop.
Save kizu/6104463 to your computer and use it in GitHub Desktop.
Download ZIP
Different alignments
Raw
dabblet.css
/* Different alignments
*/
body
{
margin: 0;
padding: 0;
background: url('../desktop.blocks/grid/grid.png');
}
.items {
position: relative;
z-index: 9;
overflow: hidden;
}
.item
{
font-size: 0;
display: inline;
margin: 0 10px 10px 0;
background: red;
}
.item:before {
content: "";
display: inline-block;
vertical-align: bottom;
width: 128px;
height: 1px;
background: red;
margin: 0 0 -1px -128px;
}
.item:after {
content: "";
display: inline-block;
vertical-align: top;
width: 128px;
height: 500px;
margin: 0 0 -500px -128px;
}
.item:hover .text {
background: lime;
}
@media (min-resolution: .001dpcm) {
_:-o-prefocus, .item { /* стиль только для Opera 12.00+ */
font-size: 1px;
};
}
.image
{
font-size: 13px;
display: inline-block;
width: 118px;
height: 100px;
margin: 1px 0 5px;
vertical-align: text-bottom;
background: aqua;
}
.text
{
font-size: 13px;
display: inline-block;
width: 118px;
margin: 0 0 0 -118px;
vertical-align: text-top;
background: yellow;
}
Raw
dabblet.html
<h2>Different vertical alignment</h2>
<div class="items"
><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" style="height: 120px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text</span
></a><a href="#" class="item"
><img class="image" style="height: 180px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text text text text text text text text text text text text text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text text</span
></a><a href="#" class="item"
><img class="image" style="height: 160px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" style="height: 140px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text text text text text text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" style="height: 120px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text</span
></a><a href="#" class="item"
><img class="image" style="height: 180px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text text text text text text text text text text text text text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text text</span
></a><a href="#" class="item"
><img class="image" style="height: 160px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" style="height: 140px;" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text text text text text text text text text text text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a><a href="#" class="item"
><img class="image" src="http://yandex.st/lego/_/aqjke1FqkrtypCn2kUAdsHbYCSo.png" alt=""
><span class="text">text</span
></a>
</div>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment