For a slideshow site, I have to display images of varying sizes which may be 300*250 to 1200*1800. I am aware of image maps, but they come with fixed dimensions requirements i.e. one needs to define specific area through coordinates like coords="0,0,82,126").
I have two questions:
1) Is there a way to make it variable, like 10% of left side image area should link to previous image, and 10% of right side image area should link to next image. For example, if an image is 300*300 px size, then 30px (horizontal bar area) from the left and 30 px from the right should be the clickable area
2) Is there a CSS way to display left and right arrows on the above mentioned areas, like we usually see while navigating Facebook albums. The only difference is that these left and right arrows should actually show up in TRANSPARENT form on top of the left and right clickable areas on the images, overlapping with image for the width of the arrow picture.
Appreciate any help.
This might get you started.
html {
font-size: 10px;
}
.wrapper {
width: 1%;
display: table;
}
#images {
position: relative;
}
#left, #right {
position: absolute;
top: 0;
width: 10%;
height: 100%;
opacity: 0.8;
background-color: lightgray;
}
#left {
left:0;
}
#right {
right:0;
}
.arrow {
position: absolute;
top: 50%;
width: 2rem;
height: 2rem;
background: transparent;
border-top: .4rem solid white;
border-right: .4rem solid white;
box-shadow: 0 0 0 lightgray;
transition: all 200ms ease;
}
.arrow.left {
left: 40%;
transform: translate3d(0, -50%, 0) rotate(-135deg);
}
.arrow.right {
right: 40%;
transform: translate3d(0, -50%, 0) rotate(45deg);
}
.arrow:hover {
border-top: .4rem solid white;
border-right: .4rem solid white;
box-shadow: .2rem -.2rem 0 white;
}
.arrow:hover.left {
left: 10px;
}
.arrow:hover.right {
right: 10px;
}
<html>
</body>
</html>
<body>
<div class="wrapper">
<div id="images">
<img src="http://i.istockimg.com/file_thumbview_approve/39758696/6/stock-photo-39758696-man-on-top-of-skyscraper.jpg">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
Related
I'm trying to create a bar graph with HTML/CSS and I'm having trouble with CSS's scale property. Here's my code so far:
.main {
position: absolute;
top: 350px;
width: 80%;
height: 65%;
background-color: #1d1d1d;
border: 20px #3f3f3f solid;
left: 50%;
transform: translate(-50%, 0);
}
.bar {
position: relative;
display: inline-block;
width: 30px;
margin-left: 1.1%;
background-color: #38ff90;
border-top: 5px #1d6d41 solid;
border-left: 5px #1d6d41 solid;
border-right: 5px #1d6d41 solid;
transform-origin: bottom;
transform: scaleY(10);
}
.bar-height {
position: relative;
display: inline-block;
opacity: 0;
}
<div class="main">
<div style="height: 100%;" class="bar-height"></div>
<div style="height: <?php echo $height ?>px;" class="bar"> </div>
</div>
When I use scale(), this ends up scaling the border on each bar. How can I scale the bar element without scaling the border?
You've some examples here:
note that it's usually done with SCSS or JS /any JS framework.
https://codepen.io/Victa/pen/xDqbf
https://codepen.io/dxdc100xp/pen/WwMQwE
https://codepen.io/baletsa/pen/oHcfr
the code provided is only to see the logic and the procedure for reach this. SCSS is a good option and not too difficult to use it's like CSS on steroids.
I currently have an ng-repeat that looks like this:
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}"/>
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
Here is the CSS pulled from this codePen:
.corner-ribbon{
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky{
position: fixed;
}
.corner-ribbon.shadow{
box-shadow: 0 0 3px rgba(0,0,0,.3);
}
.corner-ribbon.bottom-right{
top: auto;
right: -50px;
bottom: 25px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green{background: #2c7;}
I am trying to figure out how to get the ribbon to be restricted to the wrapper class. Does anyone know how I can do that? so I'm still using the same ribbon, but instead of being in the bottom right of the screen, it is at the bottom right of the image for which it applies?
you need to use relative/absolute position and reset display of .wrapper to shrink on image. Then add overflow:hidden to cut off edges of ribbon:
.corner-ribbon {
width: 200px;
background: #e43;
position: absolute;
top: 25px;
left: -50px;
text-align: center;
line-height: 50px;
letter-spacing: 1px;
color: #f0f0f0;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.sticky {
position: absolute;
}
.corner-ribbon.shadow {
box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}
.corner-ribbon.bottom-right {
top: auto;
right: -50px;
bottom: 30px;
left: auto;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.corner-ribbon.green {
background: #2c7;
}
.wrapper {
position: relative;
display: table-cell;/* or inline-block or float */
overflow: hidden;
}
img {
display: block;
}
<div class="repeaterDiv" data-ng-repeat="item in itemArray">
<div class="wrapper">
<img class="imageClass" ng-src="{{item.image}}" src="http://lorempixel.com/300/200" />
<div class="corner-ribbon bottom-right sticky green shadow">Changed</div>
</div>
</div>
The class has fixed positioning.
.corner-ribbon.sticky{
position: fixed;
}
So for exact css you may not be able to attach ribbon to each img, rather ribbon would go to specific place in window only. However, you can adjust css a bit. Make wrapper class relative, and .corner-ribbon.sticky absolute position. Then adjust your css fot top/bottom/left/right properties to align them.
.wrapper{
position: relative;
}
.wrapper .corner-ribbon.sticky{
position: absolute;
/* put top/bottom/left/right values here*/
}
I'm trying to get a modal window that will size with its content up to 80% of the height of the window, and then scroll. I also need the close button (represented by the "X" in the top-right) to stay fixed. This is what I have so far:
HTML
<div>
<div class="dialog-overlay"></div>
<div class="dialog" style="left:75%;">
<span class="close">X</span>
<div class="dialog-wrap">
<div class="dialog-content">
<!-- Long amounts of content here -->
</div>
</div>
</div>
</div>
CSS
.dialog-overlay {
background-color: rgb(0, 0, 0);
position: fixed;
z-index: 88;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
}
.dialog {
background-color: rgb(66, 66, 66);
position: absolute;
height: 80%;
max-height: 80%;
width: 40%;
top: 50%;
left: 50%;
z-index: 89;
border-width: 1px;
border-style: solid;
border-color: #666;
border-radius: 5px;
box-shadow: 4px 4px 80px #000;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.dialog .close {
position: absolute;
top: 0px;
right: 20px;
}
.dialog-wrap {
overflow-y: auto;
height: 100%;
}
.dialog-content {
color: #ccc;
padding: 20px;
}
With this code, I got as far as the codepen below, but I'm stuck. The one on the right works as desired, but then the one on the left, where the content is small, is too big with unnecessary empty space. If I comment out the "height: 80%" from .dialog, the one on the left is fixed, but then the scrolling one on the right ceases to work correctly. I don't want to have to set the height, but it seems to be required for the inner content to scroll for some reason, even though I thought max-height should do it as well.
http://codepen.io/evshell18/pen/QNPyGr
I'm scaling a div up with the transform property, but I want to keep its children (which have 1px width or height) the same size. I counter-scaled them by .5, with the expected result that an element of 1px scaled by 2, and then .5, should end up back at 1px, but they wind up a blurry 2px.
Here's the box before scaling it:
.container {
width: 200px;
height: 200px;
margin: 100px;
background-color: #EEE;
position: absolute;
}
.outline {
position: absolute;
background: #1899ef;
z-index: 999999;
opacity: 1 !important;
}
.outlineBottom, .outlineTop {
width: 100%;
height: 1px;
}
.outlineLeft, .outlineRight {
height: 100%;
width: 1px;
}
.outlineRight {
right: 0px;
}
.outlineBottom {
bottom: 0px;
}
<div class="container">
<div class="outline outlineTop"></div>
<div class="outline outlineRight"></div>
<div class="outline outlineBottom"></div>
<div class="outline outlineLeft"></div>
</div>
As you can see, the elements at the edges are a clear, dark 1px blue. Here's what the box looks like after scaling, though:
.container {
width: 200px;
height: 200px;
margin: 100px;
background-color: #EEE;
position: absolute;
transform: scale(2);
}
.outline {
position: absolute;
background: #1899ef;
z-index: 999999;
opacity: 1 !important;
transform: scale(.5);
}
.outlineBottom, .outlineTop {
width: 100%;
height: 1px;
transform: scale(1,.5);
}
.outlineLeft, .outlineRight {
height: 100%;
width: 1px;
transform: scale(.5,1);
}
.outlineRight {
right: 0px;
}
.outlineBottom {
bottom: 0px;
}
<div class="container">
<div class="outline outlineTop"></div>
<div class="outline outlineRight"></div>
<div class="outline outlineBottom"></div>
<div class="outline outlineLeft"></div>
</div>
And here's a post-scaled render from Chrome 41.0.2272.89 Mac, which is what I'm running.
Adding transform-3d(0, 0, 0) didn't appear to help. A solution was found using the zoom property, but since zoom isn't well supported I'd like to avoid that. Adding filter: blur(0px); didn't appear to have any effect either.
It was posited in chat that perhaps the children are first scaled to .5 and then doubled in size, causing them to be scaled down to .5px and then back up from there. Is there any way to ensure the order that they're rendered in causes them to first be scaled up to 2px and then halved? Against my better judgement, I tried forcing the render order with JS, but unsurprisingly, that didn't have any effect (though, interestingly, the bottom element did maintain its original color).
Failing that, are there any other solutions floating around out there? I can't be the only one who's run into this problem.
It is to do with the default transform-origin on the scaled elements. It defaults to 50% 50% for any element being transformed, but this has issues when scaling down 1px values as it has to centre the scale on a half pixel and the rendering of the elements has issues from here on out. You can see it working here with the transform-origin moved to the relevant extremes for each item.
A bit of playing about shows that this same blurring happens on scaled elements for any dimension where the scaling ends up halving a pixel.
body {
padding: 1em;
}
.container {
width: 200px;
height: 200px;
margin: 100px;
background-color: #EEE;
position: absolute;
transform: scale(2);
}
.outline {
position: absolute;
background: #1899ef;
z-index: 999999;
opacity: 1 !important;
}
.outlineBottom, .outlineTop {
width: 100%;
height: 1px;
transform: scale(1, 0.5);
}
.outlineBottom {
bottom: 0;
transform-origin: 0 100%;
}
.outlineTop {
transform-origin: 0 0;
}
.outlineLeft, .outlineRight {
height: 100%;
width: 1px;
transform: scale(.5,1);
}
.outlineRight {
right: 0px;
transform-origin: 100% 0;
}
.outlineLeft {
left: 0px;
transform-origin: 0 0;
}
<div class="container">
<div class="outline outlineTop"></div>
<div class="outline outlineRight"></div>
<div class="outline outlineBottom"></div>
<div class="outline outlineLeft"></div>
</div>
I am trying to achieve this effect in my webpage..
The red box is where I will be placing a menu, I would like the bottom of the red box to be slanted. The section on the right of the slant needs to be transparent as there may be an image in the background where the grey color is.
The only thing I can come up with is to rotate the element but that would also rotate the contents of the element which I do not want.. Only the bottom bg of the red element (which will be a solid color) should be slanted.
you can do it like that, just highlighted the rotated part blue, that you see what happens ;)
you might have to play with the top: and left: values if you change the size
edit: added a small menu example (really small ^^)
jsfiddle link
here is the html part:
<div id="menucontainer">
<ul>
<li>some</li>
<li>menu</li>
<li>here</li>
</ul>
</div>
<div id="rotatedDiv">
</div>
<div id="background"></div>
and here the css part:
#menucontainer{
position: relative;
z-index: 100;
background: red;
height: 100px;
}
#menucontainer ul {
position: absolute;
bottom: 0px;
left: 30px;
}
#menucontainer li {
list-style: none;
margin-left: 10px;
background: #123;
display: inline-block;
}
#rotatedDiv {
z-index: 99;
background: blue;
position: absolute;
top: 14px;
left: -5px;
height: 90px;
width: 200%;
-moz-transform: rotate(-2deg);
-webkit-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
}
#background {
background: green;
}
you might want to modify it in any way you can think of, but the main part should be clear i think ;)
You can do it with a transparent border:
html
<div class="bgone">
<div class="content">This is where the menu would go.</div>
</div>
<div class="bgtwo"></div>
css
.bgone {
height: 100px;
background: black;
position: relative;
}
.bgtwo {
height: 50px;
border-top: 100px solid black;
border-right: 1000px solid transparent;
}
.content {
position: absolute;
top: 10px;
left: 10px;
color: #FFF;
}