flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-30 02:40:08 +00:00
Code Issues Packages Projects Releases Wiki Activity
ImageGrid/ui/experiments/seporate-image-and-background.html

176 lines
3.7 KiB
HTML
Raw Normal View History

started experimenting with image structure -- want filters to affect only the image (not the bg and all that's inside) and at the same time keep it at 1 tag... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 06:23:19 +04:00
<html>
<style>
.image {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
width: 300px;
height: 300px;
font-size: 12pt;
overflow: hidden;
box-sizing: border-box;
color: white;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
background: no-repeat 50% black;
background-size: contain;
/* XXX do we need this? */
border: solid black 5px;
/*-webkit-filter: invert(1);*/
}
.current.image {
background: no-repeat 50% black;
background-size: contain;
/* XXX remove this... */
border: solid red 5px;
}
re-did image/ribbon structure to prevent filters affecting anything but the image (still not done for marks)... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 08:50:43 +04:00
.ribbon {
position: relative;
display: block;
height: auto;
min-width: 0px;
overflow: visible;
white-space: nowrap;
font-size: 0;
margin-top: 20px;
margin-bottom: 20px;
}
.ribbon:empty {
display: none;
}
.ribbon:first-child {
margin-top: 0px;
}
.ribbon:last-child {
margin-bottom: 0px;
}
started experimenting with image structure -- want filters to affect only the image (not the bg and all that's inside) and at the same time keep it at 1 tag... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 06:23:19 +04:00
/*********************************************************************/
.image2:before,
.image2 {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
font-size: 12pt;
overflow: visible;
color: white;
}
.image2 {
width: 290px;
height: 290px;
background: no-repeat 50% transparent;
background-size: contain;
margin: 5px;
-webkit-filter: invert(1);
}
.ribbon {
display: inline-block;
background: black;
}
.current.image2:before {
position: relative;
content: "";
top: -5px;
left: -5px;
width: 100%;
height: 100%;
/* XXX this is affected by the filter... */
border: solid 5px red;
}
/*********************************************************************/
some experimenting... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 09:31:53 +04:00
.image3 div,
.image3 {
position: relative;
display: inline-block;
vertical-align: middle;
text-align:left;
width: 300px;
height: 300px;
font-size: 12pt;
overflow: hidden;
box-sizing: border-box;
color: white;
background: black;
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
border: solid black 5px;
}
.image3 div {
position: absolute;
width: 100%;
height: 100%;
background: no-repeat 50% transparent;
background-size: contain;
border: none;
-webkit-filter: invert(1);
}
.current.image3 {
background: no-repeat 50% black;
background-size: contain;
/* XXX remove this... */
border: solid red 5px;
}
started experimenting with image structure -- want filters to affect only the image (not the bg and all that's inside) and at the same time keep it at 1 tag... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 06:23:19 +04:00
</style>
<body>
re-did image/ribbon structure to prevent filters affecting anything but the image (still not done for marks)... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 08:50:43 +04:00
The current structure...
<div>
<div class="image" style="background-image: url(image.jpg)"></div>
<div class="current image" style="background-image: url(image.jpg)"></div>
</div>
started experimenting with image structure -- want filters to affect only the image (not the bg and all that's inside) and at the same time keep it at 1 tag... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 06:23:19 +04:00
<hr>
re-did image/ribbon structure to prevent filters affecting anything but the image (still not done for marks)... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 08:50:43 +04:00
Image bg transparent while the ribbon's bg is black...<br>
started experimenting with image structure -- want filters to affect only the image (not the bg and all that's inside) and at the same time keep it at 1 tag... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 06:23:19 +04:00
<div class="ribbon">
<div class="image2" style="background-image: url(image.jpg)"></div>
<div class="current image2" style="background-image: url(image.jpg)"></div>
</div>
some experimenting... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 09:31:53 +04:00
<hr>
Add a seporate bg tag<br>
- this effectively doubles the number of tags used for a ribbon...<br>
+ the only API that needs changing is what deals with previews and filters<br>
+ will simplify different image indicator CSS<br>
<s>+ will remove LOTS of code dealing with scaling, sizing and rotation...</s> this will not change!<br>
<div class="ribbon">
<div class="image3"><div style="background-image: url(image.jpg)"></div></div>
<div class="current image3"><div style="background-image: url(image.jpg)"></div></div>
</div>
<br>
<!-- XXX this shows that we will still need margin-patching and resizing when rotating...
<div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg)"></div></div><br>
<div class="image3" style="width: 400px;"><div style="background-image: url(image.jpg); -webkit-transform: rotate(90deg)"></div></div-->
started experimenting with image structure -- want filters to affect only the image (not the bg and all that's inside) and at the same time keep it at 1 tag... Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
2013-12-02 06:23:19 +04:00
</body>
</html>
Reference in New Issue Copy Permalink