I want to create a perspective crop like effect with CSS3 like this:
I did try it doing my self but couldn't, any help would be appreciated.
here's my attempt: http://jsfiddle.net/krish7878/y9eusob9/
HTML Code:
<div class="container">
<img src="http://img.netcarshow.com/Lotus-Evora_GX_Racecar_2013_1600x1200_wallpaper_01.jpg" alt="main image" />
</div><!-- /.container -->
CSS Code:
.container{
overflow: hidden;
width: 300px;
height: 200px;
margin-top: 30px;
margin-left: 30px;
border-top-right-radius: 20px;
}
One option could be to add a container <div>, e.g..perspective, that gets the yellow background color and to use a polygon clip-path on the image.
A good tool to create these polygons is Bennett Feely's clippy. Browser support for clip-path isn't quite there yet though. See Clipping and Masking in CSS for more background information and options.
.perspective {
display: inline-block;
background-color: #ff0;
}
.perspective__image {
display: block;
-webkit-clip-path: polygon(10% 20%, 90% 10%, 90% 90%, 10% 80%);
clip-path: polygon(10% 20%, 90% 10%, 90% 90%, 10% 80%);
}
<div class="perspective">
<img src="http://www.nicenicejpg.com/400/300" class="perspective__image"/>
</div>
You might be able to accomplish this effect using a layering technique like what is found here:
http://cssglobe.com/angled-content-mask-with-css/
Basically, the author used a few nested elements that were rotated back and forth with overflow: hidden on the container elements.
For maximum browser support you could use svg's clipPath.
<svg width="400" height="400">
<defs>
<clipPath id="shape">
<path d="M50,50 L400,0 L400,400 L50,350" />
</clipPath>
</defs>
<foreignObject clip-path="url(#shape)" width="400" height="400">
<img src="http://www.lorempixel.com/400/400" />
</foreignObject>
</svg>
I found a great tutorial on css-tricks that talks about doing exactly this:
http://css-tricks.com/almanac/properties/p/perspective/
You'll be making use of the transform property to make the rotations you need to simulate the perspective change.
Hope this helps!
Related
I am trying to create a triangle using internal and external SVG.
However for some reason it won't work.
I tried to use this tool here: http://cssplant.com/clip-path-generator
and get it's "POINTS" coordinates to create a perfect clip TRIANGLE on my internal and external SVG but no luck.
Here's my HTML:
<figure class="clip-holder">
<img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" class="clip-svg-inline" width="200" height="200">
<figcaption>Inline SVG</figcaption>
</figure>
<figure class="clip-holder">
<img src="https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg" width="200" height="200">
<figcaption>External SVG</figcaption>
</figure>
</div>
<svg class="clip-svg">
<defs>
<clipPath id="triangle" clipPathUnits="objectBoundingBox" >
<polygon points="120 263,325 262,222 42"/>
</clipPath>
</defs>
</svg>
And here's the CSS:
.clip-holder {
display: inline-block;
padding: 0;
margin: 30px;
}
.clip-css {
-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.clip-svg {
width: 0;
height: 0;
margin: 0 auto;
}
.clip-svg-inline {
-webkit-clip-path: url("#triangle");
clip-path: url("#triangle");
}
.clip-svg-external {
-webkit-clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpgt");
clip-path: url("https://www.thesun.co.uk/wp-content/uploads/2016/06/nintchdbpict000244881006.jpg");
}
Am i making any mistakes?
Here's the JSFIDDLE: https://jsfiddle.net/stjtudvj/
(show me jsfiddle solution for better understanding)
The actual value of the clip-path property has to be an SVG clipPath. It can never be an image (like a JPG). It always to be the actual shape that should be applied on your image.
For example these are clipPath elements: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Grundformen_.28basic_shapes.29.
There is an example too, which pretty much looks like what you try to accomplish: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Anzeige/clip-path#Anwendungsbeispiel.
So basically you apply a your predefined shape (e.g. by using your linked generator) to an image using the CSS-property clipPath (which describes the shape). Like this:
HTML
<img src="/path/to/my/image.jpg" id="triangle" />
CSS
img#triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
You can use the clip-path property to supply an actual shape (like I mentioned above) or via url(). Latter is pointing either to an existing SVG in the DOM ("internal SVG") or to an actual URL containing an SVG ("external SVG").
An example you can find here: http://codepen.io/imohkay/pen/GJpxXY
Based on that example I updated your fiddle: https://jsfiddle.net/stjtudvj/2/
I fixed the inline #triangle SVG. Your values were exceeding the image dimensions.
Please keep in mind, that not all browsers support this property fully yet: http://caniuse.com/#search=clip-path
I recently ran into a PSD template that has an unusual border with triangles. I know how to create triangles by itself using pure CSS, but the question is (just for interest) about this images:
Are these created just by a background that is already cut like this, or can I do it using the same CSS?
There are multiple ways in which this shape could be achieved. Using clip-path, CSS triangles, SVG, Canvas and image backgrounds are some of them. Each method has their own pros and cons. We cannot suggest one without knowing your needs fully. You should choose the method which fits your needs the best. Generally I would suggest using SVG to create such complex paths/shapes.
Below are a couple of sample snippets for creating this with CSS and SVG clip-path feature. It is not 100% exactly as you want it to be but I would leave the fine tuning part to you.
You would also need to adjust the content position such that part of it also doesn't get clipped. In the snippet I have used padding-top to achieve this. You can use other methods like positioning also.
Using CSS:
Using CSS clip-path, you can create a polygonal path and clip the element into the required shape. The main drawback of this approach would be the poor browser support for CSS clip-paths. Currently only Webkit powered browsers support the CSS clip-path feature.
.unusual-border{
box-sizing: border-box;
height: 200px;
width: 100%;
padding-top: 10%;
background: rgb(74,139, 207);
-webkit-clip-path: polygon(0% 25%, 40% 5%, 55% 20%, 60% 15%, 75% 25%, 100% 10%, 100% 100%, 0% 100%);
clip-path: polygon(0% 25%, 40% 5%, 55% 20%, 60% 15%, 75% 25%, 100% 10%, 100% 100%, 0% 100%);
}
/* Just for demo */
body{
background: url(http://lorempixel.com/600/400/abstract/1);
}
*{
margin: 0;
padding: 0;
}
<div class="unusual-border">Some content</div>
Using SVG:
SVG clip-path is very similar in working to the CSS version except that it has much better browser support than its CSS counterpart.
.unusual-border {
box-sizing: border-box;
height: 200px;
width: 100%;
padding-top: 10%;
background: rgb(74, 139, 207);
-webkit-clip-path: url("#unusual-border");
clip-path: url("#unusual-border");
}
/* Just for demo */
body {
background: url(http://lorempixel.com/600/400/abstract/1);
}
* {
margin: 0;
padding: 0;
}
<svg width="0" height="0">
<defs>
<clipPath id="unusual-border" clipPathUnits="objectBoundingBox">
<path d="M0,0.25 0.4,0.05 0.55,0.2 0.6,0.15 0.75,0.25 1,0.1 1,1 0,1z" />
</clipPath>
</defs>
</svg>
<div class="unusual-border">Some content</div>
Note: Clip paths (either version) are not supported in IE. If you wish to support IE then you can use pure SVG path element (not clipPath) to create the background image (or) use an image (or) use complex CSS transformations with multiple elements. I would certainly not recommend using CSS transformations and multiple elements.
Technically you could build something like that using pure CSS3, but that doesn't mean that it's a good idea.
More than likely, the template uses transparent PNG images which are defined as the background-image to the section's :before and :after pseudo-elements. Another option may be the use of <canvas>, or SVG.
Of course, without seeing the markup and CSS, it's almost impossible to say for certain how this designer has handled it. And of course you could have quite easily checked the source code to find the answer yourself...
I have a <div> that has a background-color sitting in front of an image. I'm trying to apply a multiply effect using an SVG so that the background image behind the div comes through:
<svg>
<filter id="multiply">
<feBlend mode="multiply"/>
</filter>
</svg>
Unfortunately, only the solid background color is being changed, and I get no transparency through to the background.
Here's the fiddle: https://jsfiddle.net/0p58bxsp/1/
The effect I'm expecting is something like this:
I know the visual effect could be fudged using an rgba value as the background color, but I'm very specifically looking for the combination of a solid color having a multiply filter applied to it.
Is this a limitation of the current SVG implementation?
Here's the definition of a multiply blend:
Multiply blend mode multiplies the numbers for each pixel of the top layer with the corresponding pixel for the bottom layer. The result is a darker picture. , where a is the base layer value and b is the top layer value.
As such, using opacity or alpha doesn't give me the exact result that I'm looking for.
This was supposed to be possible if you stayed completely within SVG 1.1 by using the BackgroundImage pseudo input - but only IE10 ever supported it for inline SVG (Opera supported it for .svg files). Firefox, Chrome & Safari never supported it, and it's now formally declared "not to be implemented" by folks who work on those browsers.
You can import a copy of the background image using feImage and position it just right to match the actual background exactly. But depending on your design - that could take extensive javascript. And url() filters can behave strangely. https://jsfiddle.net/0p58bxsp/3/ shows how to do this - but it also surfaces a regression bug in Chrome with positioned primitives which will be fixed in next Chrome.
<div id="background">
<div id="effect">
Effect goes here
</div>
</div>
<svg width="100%" height="100%" viewBox="0 0 200 200">
<defs>
<filter id="multiply" x="0%"
y="0%" height="300%" width="300%">
<feImage x="0" width="400" height="400" y="0" preserveAspectRatio="xMaxYMax meet" xlink:href="http://lorempixel.com/400/400/" />
<feOffset dx="-100" dy="-100"/>
<feBlend mode="multiply" in="SourceGraphic"/>
</filter>
</defs>
</svg>
Safari 9(and only Safari 9) has a "backdrop-filter" that will do this, and you can also specify a mix-blend-mode which has broader support, but this is still pretty edge.
If you need a multiply blend, it might be best to just keep everything in SVG.
You should add opacity: 0.4; into effect class. It will work fine.
#effect {
color: #fff;
height: 200px;
margin: 100px 0 0 100px;
width: 200px;
opacity: 0.4;
background-color: #3d3934;
filter: url(#multiply);
-webkit-filter: url(#multiply);
-moz-filter: url(#multiply);
}
As far as I know, svg effects are limited to the elements itself. You can't use it to mix with another element.
You can however get this effect with standard CSS mix-blend-mode
#background {
background-image: url(http://lorempixel.com/400/400/);
height: 400px;
padding: 1px;
width: 400px;
}
#effect {
color: #fff;
height: 200px;
margin: 100px 0 0 100px;
width: 200px;
background-color: gray;
mix-blend-mode: multiply;
}
<div id="background">
<div id="effect">
Effect goes here
</div>
</div>
I am trying to create gradient text with plain HTML and CSS. Something like the text below
Check the FIDDLE. It is self explanatory.
I know how to achieve this in webkit-browsers only. But i need a Cross-browser solution which has backward compatibity till IE8 atleast.
I know how to generate the gradient. That is not an issue. In the fiddle i have only created gradient for webkit browsers but i know how to do it for IE too. My main issue is how can i make the text transparent so it shows me the gradient of the underlying div.
No JS/jQuery solutions please.
CODE
HTML
<div id="div1" style="width:200px;height:200px"></div>
<div id="div2" style="width:200px;height:200px">CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO HAVE COLORED GRADIENTS LIKE THE HELLO WORLD TEXT</div>
CSS
#div1 {
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(45deg, rgba(252, 234, 187, 1) 0%, rgba(252, 205, 77, 1) 50%, rgba(248, 181, 0, 1) 51%, rgba(251, 223, 147, 1) 100%);
}
#div1 {
z-index:-100;
position:absolute;
left:0px;
top:0px;
}
#div2 {
z-index:100;
left:10px;
top:10px;
background: black;
text-align:center;
font-size:20px;
color: rgba(255, 255, 255, 0.5);
position:absolute;
}
EDIT: I believe my question is not clear . I Know about gradients. I want my text to be transparent so that the gradient of the div below can be shown on the transparent text.
Something like this example
You could use SVG, its a little outside the box, but its cross browser compatible and gives you some more options.
Working Example
<svg height="50">
<linearGradient id="g1" x="0%" y="100%">
<stop stop-color="blue" offset="0%" />
<stop stop-color="green" offset="25%" />
<stop stop-color="yellow" offset="50%" />
<stop stop-color="orange" offset="75%" />
<stop stop-color="red" offset="100%" />
</linearGradient>
<text font-size="40" fill="url(#g1)">
<tspan x="10" y="40">Hello World!</tspan>
</text>
</svg>
Tested and working in Chrome, Firefox, and IE9
If you've really got your heart set on a cutout effect, it can also be done with SVG.
Working Example 2
<div class="wrap">
<div class="black">
<svg width="300" height="100">
<mask id="cutouttext">
<rect width="280" height="50" x="0" y="15" fill="white" />
<text x="50%" y="55%" text-anchor="middle" font-size="48">Hello World</text>
</mask>
<rect width="280" height="50" x="25" y="15" fill="black" mask="url(#cutouttext)" />
</svg>
</div>
</div>
Fall back for IE8 and below:
<!--[if lt IE 9]>
<style>
.wrap {
color: #ff0000;
font-size:48px;
text-align: center;
padding-top: 10px;
height: 90px;
}
.black {
background: black;
margin: 0 auto;
width:250px;
}
</style>
<![endif]-->
The way it looks in modern browsers:
and how it looks in IE8 and below:
Documentation:
MDN SVG Gradients
MDN SVG Text
MDN Mask
I think you are looking for background-clip.
The catch is that you need to use an image, you can't use a css gradient afaik
update:
it's only supported on webkit though..
Following trick will only work if your text/content is on solid background.
I'm summarizing points from this blog post
Put an empty span with in the text container, for eg.
<h1> <span> </span> This this heading
</h1> etc.
Embed background-image [png] through css to this
span
And position it absolutely, upon the text.
It works in IE6 onwards, but IE PNG hack is required!
Hope it helps! :)
There are 2 thing to be covered in IE
For IE10+:
background: -ms-linear-gradient(top, #1e5799 0%,#207cca 27%,#2989d8 50%,#207cca 79%,#7db9e8 100%); /* IE10+ */
background: linear-gradient(to bottom, #1e5799 0%,#207cca 27%,#2989d8 50%,#207cca 79%,#7db9e8 100%); /* W3C */
For IE6-IE9:
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
I think it will be easy for you to replace the color codes. I would also suggest you to take a look at ColorZilla for generating the CSS Gradient.
i dont think what you are saying is possible...because you have a parent div whose background is gradient and then you have an inner div whose background is not transparent but black (#000000) nou you have written text on inner div but want font's background as gradient which is in parent div...this is not posiible using css/css3 ...
now i can show you 2 ways (>=IE 9) by following which you can achieve same style with little alteration in your mark-up and css
OPTION 1::(need some photoshop work)
have a <div> set that <div>'s background black.then create gradient photoshop work(ex .png).now set that image as a font/text background using background-clip: text;
webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
OPTION 2:: (above process is little time consuming ..there is another smarter way)
first have div with black background then write the text in inner div...set inner div's background as gradient then use -webkit-background-clip: text;-webkit-text-fill-color: transparent;
for example ::
MARK-UP
<div class="black">
<div class="a">
CAN YOU SEE THIS? THIS TEXT IS SUPPOSED TO TRANPARENT TO SHOW COLOR OF UNDERLYING DIV SO THAT IT LOOKS LIKE THE "HELLO WORLD" TEXT
</div>
</div>
CSS
.black{
background:black;
overflow:hidden;
}
.a{
background: #000000 -webkit-linear-gradient(red, green);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
LIVE EXAMPLE
ALSO CHECK BROWSER COMPATIBILITY OF background-clip AT caniuse.com
OPTION 3::(to make this style for IE8) (this process is simple,straight but not smart because it is IE specific)
create a photoshop work..make a text with gradient effect..now declare a div with black background..and include that image with <img src="" /> tag . :)
Try this :
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* For < IE 7 */
-ms-filter : progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#000000'); /* For >= IE 8 */
I'm wanting to have a diagonal line drawn from the upper-right corner of a <div> or <span> to the lower-left corner. The problem is that the content will sometimes be longer or shorter. So, something like a static image won't work. Basically I want what's described here (How to create a diagonal line within a table cell?) but for a <div> or a <span>.
This has some interesting ideas: http://jsfiddle.net/zw3Ve/11/
So does this: http://css-tricks.com/forums/discussion/13384/diagonal-line/p1
This is kind of a retry at this post: How to strike through obliquely with css
I can't seem to figure any of this out though. It seems like a pure CSS solution should work here, but I just don't have the skills to make that happen. jQuery is an option for me as well.
You can do this with an inline SVG background, using only CSS and no javascript.
.background {
// Draw an SVG top left to bottom right
background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 10 10'> <path d='M0 0 L0 10 L10 10' fill='red' /></svg>");
background-repeat:no-repeat;
background-position:center center;
//scale it
background-size: 100% 100%, auto;
}
See my fiddle:
http://jsfiddle.net/3GWw2/
Is first fiddle as example with image in background instead not good enough?
http://jsfiddle.net/zw3Ve/410/
.line {
display:inline-block;
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
background:url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
background-size:100% 100%;
}
You can do this with linear-gradient. For example if I want a green and white square that cuts diagonally from bottom left to top right, I give it this background attribute:
background: linear-gradient(to bottom right, white, white 50%, green 50%, green);
This means that it starts as white at the top left corner and continues as white all the way to the diagonal line. The transition is immediately from white to green with no actual gradient as both are set at 50%. If you want a gray line between, you could try this:
background: linear-gradient(to bottom right, white, white 48%, gray 48%, gray 52%, green 52%, green);
You might use an SVG image like this one:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1 Tiny//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11-tiny.dtd">
<svg version="1.1" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="200px" height="50px" viewBox="0 0 200 50">
<line fill="none" stroke="#000" x1="0" y1="0" x2="200" y2="50"/>
</svg>
Set it as background of your span or div
.class-of-div-or-span { background: url("line.svg") no-repeat scroll 0 0 / 100% 100% transparent; }
Note: you have to give your span display:block or display:inline-block in order to work.
You could also inline the svg, use it in an object tag or embed it in your css.
Actually this is more of a question about geometry than coding. With squares this is easy, but with rectangles you'll have to do the math yourself. Remember those kids complaining that they'll never have to calculate a diagonal's length in "real life"? :P
Here's what I did:
div.container /*makes a square container (300x300)*/
{
width: 300px;
height: 150px;
background-color: #aaa;
padding-top: 150px;
}
div.line
{
position: relative;
z-index: 1;
left: -61px; /*this is something I don't understand but apparently is required*/
width: 423px; /*since container is a square this equals to its diagonal: 300*1.41*/
height: 1px;
background-color: #000;
transform: rotate(45deg); /*again, this is easy since its a square. In rectangle you'll have to find a tangent*/
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
HTML:
<div class="container">
<div class="line"></div>
</div>
and a jsfiddle: http://jsfiddle.net/LWAKn/