Any idea how can i make a text wrap inside a rotated div.
Text won't stay inside div after rotated..
Here's a screen of the idea...
Thanks in advance..
The only thing that comes to my mind to solve this problem are CSS Regions (http://html.adobe.com/webstandards/cssregions/).
I've set up a small demo to show you how it works, here's the code:
div {
-webkit-shape-inside: polygon(0% 50%, 50% 100%, 100% 50%, 50% 0%);
}
And here's the demo: http://jsfiddle.net/sandro_paganotti/ABdgB/.
Unfortunately it works only on the latest Chrome, plus you have to manually enable 'Enable experimental WebKit feature' in your chrome://flags panel.
Related
I rely on the using a wrapper to center most of my sites ala:
.wrapper {
margin:auto;
max-width: xxxpx;
}
Keeps things centered perfectly, BUT also clears the margins, which is causing my problems as I want to use a clip-path background to create a simple polygon background, which needs to go through the margins, like:
.wrapper {
background-color: #ebeef2;
clip-path: polygon(0 10%, 37% 0, 100% 10%, 100% 90%, 63% 100%, 0 90%);
}
How can I get all of the elements of my page centered without clearing the margins?
Every solution I've tried ends up with impossible to manage page centering of elements, or a cleared page margin.
Here is the full bleed clip path I want.
Here is the problem.
Here are codepens: no margin, margin with busted clip-path
Got clip-path set on div with background image. When in Chrome horizontal white lines appear through the div / background image. Anyone know how to remove this?
See screenshot:
Screenshot with horizontal white line bug
Here is also a link to the course page
https://www.sunderland.ac.uk/study/health-paramedic-clinical-sciences/undergraduate-biomedical-science/#facilities
Ran into this same issue recently. I added a -1px margin to the edge with the white line.
.clipped-box {
clip-path: polygon(0 0, calc(100% - 60px) 0%, 100% 60px, 100% 100%, 0 100%);
margin-bottom: -1px;
}
I had this issue when trying to stack two sections with clipping masks. The top section had the white line on the bottom. So I pulled the next section up into it.
This issue has been spotted before, see Clip-path on Chrome leaves a strange line on the edge and CSS - Strange border appearing on Chrome mobile with clip-path
It appears to be a Chrome rendering bug.
For your case, I was able to make the line disappear by setting a height to your polygon container:
.course_page #facilities .facility--menu {
clip-path: polygon(0 0,100% 5%,100% 95%,0 100%);
height: 25em;
}
The height is only slightly higher than current.
No other CSS properties I've tested seem to have an effect on the line.
I have an animation that is working beautifully in Chrome but is not registering at all in Firefox. It is an animation that mimics how an old tv might turn on. Starting from the middle of the 'box' spreading into a horizontal line, and then finally spreading upwards and downwards simultaneously to fill the 'box'.
The following is my CSS.
#keyframes tvOn{
0%{
clip-path: inset(49.9% 49%);
}
45%{
clip-path: inset(49.9% 0%);
}
100%{
clip-path: inset(0% 0%);
}
}
#box{
...
animation: 1s ease tvOn;
...
}
Is inset what is not supported? I even tried 'rectangle' and 'polygon' but neither seem to work. If you know of a Firefox polyfill that can solve this problem or an alternative I appreciate it. This clip-path inset is working beautifully, I can't achieve the same result this easily with any other css property I've tried. Even animating the width and height is tricky because those grow from the top left corner, instead of the direct center/middle of a 'box'.
Also I don't want to animate the box growing a bigger size, its more about revealing a completely hidden box in a unique way slowly across both axes to make it seem like a tv turning on.
I have a gradient background in my website, which basically divides it into two colors horizontally:
Here's the CSS:
html {
height: 100%;
}
body {
background: -webkit-linear-gradient(top, #f57171 0px, #f57171 600px, #FFFFFF 600px, #FFFFFF 100%);
}
This works fine, but if the contents of my website increases and I have to scroll down, the white color of the background won't go all the way to the end of the website. It should go from 600px to 100%, but it just stops.
Any ideas?
Thanks.
You are setting the html to 100% height, which is just the screen height. Try setting both html and body to min-height:100%;.
jsFiddle example.
Also, 600px is an arbitrary point, I would do 50% or something.
I'm trying to display only the top half of an image and the bottom half of the same image in 2 separate divs.
I've tried with the CSS property clip, but it doesn't seem to support % as a unit.
Is it just me? Do you have a solution for displaying only a half of an image?
Update (after 5+ years):
The CSS clip property is now deprecated. Consider using clip-path instead (allowing for a non-JS solution), which allows you to specify shapes with percentages. Example:
/* Bottom half of image */
clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
/* Top half of image */
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
Further example to create a triangle using percentages:
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
Original:
CSS clip property does not currently support percentages:
http://www.w3.org/TR/CSS2/visufx.html#propdef-clip , latest http://www.w3.org/TR/2011/REC-CSS2-20110607/visufx.html#clipping
A solution to your problem could be to use Javascript to determine the size of the area you want to show, and then use that value when setting the clip property. Something as simple as this should do the trick:
var heightOfImageToDisplay = image.height / 2;
Sorry that I don't have enough reputation to write a comment.
There's absolutely a solution without JS.
All you need to do is
Create an svg clipPath, which allows you define whatever path you want.
Set clipPathUnits="objectBoundingBox" for responsive clip path, which allows the usage of percentage path definition
Apply the clipPath in your css code.
#your-element {
clip-path: url(#clipPathId);
}
If you want more information, please refer this answer https://stackoverflow.com/a/28312070/5692151
You could have the div as position: relative; and overflow: hidden;
Have the image inside as position: absolute;
And control how the image is displayed but setting a height to the div and adjust the top and bottom properties of the image
If you are using fixed height images and fixed height div, and you are doing this manually, why not put the image as a background, with overflow:hidden and proper background-position so it only shows the top one from the top down and bottom one from the bottom up?