Zurb-Foundation CSS clip property - html

I want to clip an img element from a CMS when it renders on the page so that, no matter the proportion of the XY dimensions of the original image, it looks the same as other buttons on the same page. The problem is when I build it with the following code, the Foundation grid breaks on smart phones and other mobile devices. Any suggestions?
.clipsquare {
overflow: hidden;
clip: rect(0px,60px,60px,0px);
position: absolute;
}
<div class="one columns">
<a class="th" href="http://my-url">
<div class="clipsquare"><img src="myImage.jpg" alt="title" width="90"></a></div>
</a>
</div>

class .one.columns on your div with the clipsquare image isn't correct foundation classes. In a standard 12 column layout you would do the following:
<div class="row">
<div class="large-12 columns">
<!-- Column content here -->
</div>
</div>
Further, there are two other questions I'd ask here:
Why aren't you using CSS to style your buttons? and/or...
Why aren't you letting your CMS resize your images for you?

clip has been deprecated. The new property that does the same thing and even more is called clip-path. It has few gotchas though,
AFAIK rect() doesn't work either. You need to use inset().
Dimensions need to be separated by space and not commas(,).
Webkit needs a prefix and positioning is not required.
Example,
.clipsquare {
overflow: hidden;
-webkit-clip-path: inset(0 60px 60px 0);
clip-path: inset(0 60px 60px 0);
}
For more information, on this topic, refer this excellent article on CSS Tricks,
http://css-tricks.com/clipping-masking-css/

Related

HTML & CSS working with images of different shapes

As some of you guys may know allowing users to upload images can be a hassle and especially if you have to create some sort of list with them.
I have been looking all over the web and have been unable to find concrete answers to what you do in the case where you need to show a list of images of different shapes. Therefor i turn to you.
Say User 1 uploads the following image:
And User 2 uploads this image:
As you can see these two images are very different in both height and width.
Now lets say that you have 10 images of different sizes and wish to display them in a grid 4 by 4 (for this purpose i use ng-repeat to show a loop)
<div class="col-xs-4" ng-repeat="image in images">
<img alt="" ng-src="{{image}}">
</div>
if you do this, this will create a list that is uneven! and will look very "ugly" to say the least.
So my question is what do you do? Are there any tricks using CSS to make it fit any images of any size so that everything is aligned?
I hope my description of the problem was accurate enough for the sake of demonstration here is a fiddle that shows this issue as well.
In short how do i make sure they are all the same size without making one of the images look cramped and / or distorting the individual image?
fiddle
As mentioned in my comment, one option is to crop all the images to a suitable format, a square might be a good compromise. You can do this by wrapping your images in a container first, and positioning the image in relation to the container. Example:
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.image-container {
width: 150px;
height: 150px;
overflow: hidden;
position: relative;
padding: 20px;
}
.image-container img {
width: 100%;
height: auto;
position: absolute;
margin: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-4">
<div class="image-container"><img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img src="http://pngimg.com/upload/girls_PNG6448.png" width="100%" height="100%" class="image image-responsive"></div>
</div>
<div class="col-xs-4">
<div class="image-container">
<img class="image image-responsive" width="100%" height="100%" src="http://yeemei.mobile9.com/download/media/442/niceandsim_s8mhs1do.jpeg"></div>
</div>
</div>
</div>
Fiddle
You can also position the image in the container. For example if you wanted to center it you could add:
top: -100%;
bottom: -100%;
left: -100%;
right: -100%;
One solution is to provide the users with a cropper to your preferred ratio and allow them to select the part of the image to show.
An alternative is to use the images as background on a div with specific ratio and hope that it does not show irrelevant areas.
Here is a solution for the second case (with a - just for laughs - animation to show the whole of the image)
http://jsfiddle.net/mrccf3sv/
.image{
display:block;
background: url('') 50% 0% no-repeat;
background-size:cover;
border:1px solid #ccc;
animation:pan 10s linear infinite alternate;
}
.image:before{
content:'';
display:block;
padding-top:56.25%; /*ratio of 16:9*/
}
And see it responsive by using different bootstrap column count for each breakpoint.
http://jsfiddle.net/mrccf3sv/1
Scaling with CSS is incredibly bad practice. I mean, we all have to do it sometimes, but if you CAN scale server-side, better do that. Try PHP's imagick, if available.

CSS Replace Image by accessing image URL

I have a banner which is scrolling multiple images using MD-Slider module (JCarousel). The website is responsive hence there would be 3 different layouts of any image inside the banner:
Normal Resolution:
Layout for iPads and bigger tablets:
Layout for Mobile:
Currently I have used temporary images in the banner in the following fashion:
banner1.jpg
banner1-iPad.jpg
banner1-mobile.jpg
So, "banner1" is the key here. This is how my div looks for normal layout:
<div class="md-slide-item slide-1" data-timeout="8000" data-thumb="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/styles/md_slider_1_thumb/public/banner1.jpg?itok=y4RT2g4r" style="height: 268px; left: 0px; top: 0px; opacity: 1; display: block;">
<div class="md-mainimg">
<img class = "mdslider-img-tag" src="http://xxxxxxxxxx.com/TestWebsite/sites/default/files/banner1.jpg" alt="" style="width: 100%; height: auto; top: -59.3653846153846px; left: 0px;">
</div>
<div class="md-objects" style="font-size: 99%;">
</div>
</div>
I can use the class mdslider-img-tag to replace the image in CSS using some of the literature mentioned below:
1.https://css-tricks.com/replace-the-image-in-an-img-with-css/
2.http://www.emailonacid.com/blog/details/C13/a_slick_new_image_swapping_technique_for_responsive_emails
However, my problem lies in getting the key "banner1" inside the css before appending -iPad or -mobile part of the text to same so that the right image for the layout is displayed.
Is there an elegant way to achieve this?
Take a look at Interchange by Zurb, this works independent of Foundation themes but works best with them.
http://foundation.zurb.com/docs/components/interchange.html
While not a CSS solution I think this would actually be your best solution rather than creating a less than ideal CSS hack, CSS just isn't able to do what you want yet.

Scroll not working even though I have overflow: scroll set

There are scads of questions on this, but after 2 hours of looking, I haven't found an answer:
I have a div that has a canvas inside it. (Although I've also tried with just ordinary text).
<div class="gpdialog" style="width: 90%; display: block; position: fixed; left: 23.25px; top: 41.95px;">
<div id="colorSchemeEditor" ;="" style="overflow :scroll">
<h1 class="centered">
Color Scheme Picker
</h1>
<div class="widget_container">
<canvas id="color_picker_canvas" ;="" height="600" width="500"></canvas>
<div class="yui3-g">
<div class="yui3-u-1-1"></div>
</div>
</div>
</div>
</div>
I draw on the canvas, and the drawing extends down below the page. The scrollbar shows up on the right hand side, but isn't activated. This happens in both Chrome and Firefox. (Haven't tried any other browsers.) There is no access to the bottom of the page (where there are buttons). I'm not sure what else to look for.
TIA.
Your syntax is wrong.
<div id="colorSchemeEditor" ;="" style="overflow :scroll">
Should be..
<div id="colorSchemeEditor" ;="" style="overflow :scroll;">
You forgot the semi-colon. But what's up with ;=""?
There are multiple factors here, and I haven't tested all cases but:
(1) The 'overflow: scroll' probably should be in the immediately enclosing div
(2) The div with the scroll needs to have height and width specifiers.
(3) The height and width specifiers need to be IN THE SAME STYLE ELEMENT with the overflow specifier.
Thus:
<div style="height: 300px; width:300px; overflow :scroll;">
But NOT
<div height="300px"; width="300px"; style="overflow: scroll;">

margin-bottom doesn't work

I am trying to position a loading image in the buttom right of the page, but everything works fine except margin-bottom.
<div id="preload">
<div align="right" style="margin-bottom:40px; margin-right:50px;">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br>
<a style="color:#00ff24;"><b>Please wait while the page is loading...
<br>If the website doesn't load within one minute please refresh your page!</b>
</a>
</div>
</div>
Can anybody tell me what or how to make it work?
Thanks
It's the nature of margins vs padding. Since margins sit outside of the element, they won't render unless there's another element following. You could use bottom-padding of 1px on the parent; that should trigger the render.
You should assign position absolute and use bottom and right proprietes.
http://jsfiddle.net/7yrUy/
<div id="preload">
<div align="right" style="position:absolute; bottom:40px; right:50px">
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" />
<br><a style="color:#00ff24;"><b>Please wait while the page is loading...<br>If the website doesn't load within one minute please refresh your page!</b></a>
</div>
try absolute position and use bottom/right instead of respective margins:
<img src="http://thc-racing.ucoz.com/design/loading.gif" alt="" style="position: absolute; bottom:40px; right:50px;"/>
Here - http://jsfiddle.net/maximua/SKcvr/
If you want it in the bottom right of the page just use this css:
.yourClass {
position: absolute;
right: 0;
bottom: 0;
}
If you want to change the amount of pixels change 0 to what you want
I had a case where I needed to add display: inline-block.
I can't explain why this worked, but it did! :-) Hope it helps someone.
Even when set display:block to parents and child divs, the margin bottom may not work. The best thing to solve this, after testing with paddings and big margin top values, is using position:relative; for the parent container, and position:absolute; for the child div. The div and other elements have already the display-block for default, so we don‘t need to declare it, as follows:
.parent{
position:relative;
height: 20rem;
/* A big value for height will help you to see the “margin-bottom” with clarity. */
}
.child{
position:absolute;
bottom:0.25rem;
/* or whatever measurement you want: 1rem, 1em, 15px, etc. Be AWARE that it‘s not “margin-bottom” property; it‘s just “bottom” within the absolute position. */
}
In the HTML just consider:
<header class="parent">
<p>This is your main container which has 20rem of height.</p>
<div class="child">
<p>This text is very close to the bottom.</p>
</div>
</header>
In the CSS I consider only the most relevant properties. You can add colors, backgrounds, font-families and so on, which will not affect the layout. I just coded the key properties to create the “effect margin-bottom”.
Example more fancy.

css horizontal scroll within a table

I want to construct a timeline that has horizontal scrolling.
I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
This almost works, but because my clients site uses tables for layout the scroll bars don't work. This fails:
<table><tr><td>
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
</td></tr></table>
Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/
NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)
How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.
This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I'd prefer that it was IE8 compatable (just for my own curiosity)
If you can fix the width of that text (in pixels or percents) use this solution:
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 100px; /* or width: 15%; */
}
Note that you can use a different selector for the text (like a class)
Possible solution....
The main issue may be that the "Site Navigation" cell is part of the scroll area.
table { display: block; }
Then assign the .wrap class to the table and remove the div encompassing the months.
Fiddle here
only tested in Chrome.
You could just put a width on the div.wrap, say 400px- that works and is just one line of code:-)