I have tilted text and a background using -webkit-transform: rotate(-#deg); and background selectors, but the ends of the background stay perpendicular to the text. How can I customize the degree at which the ends are cut off (à la the Cinemax logo).
I've tried putting the span in a parent div to cut off the edges, but it's tricky. What's the best way to angle the ends of the background in CSS?
In addition to the rotate, you should also skew your element:
div {
transform: rotate(-5deg) skew(-10deg);
}
Here's the fiddle: http://jsfiddle.net/VANrX/
Related
This question already exists:
Make rounded bottom corners via css [duplicate]
Closed 2 years ago.
I have an image with the following sharp bottom corners:
I've tried border-radius but seems it's possible to create only smooth corners.
How to achieve these 'sharp bottom corners' effect using clip-path property or any other css technique?
You need to use ::after and ::before take a look at this link: https://css-tricks.com/the-shapes-of-css/
make a shape like those and put them on your background image.
As i figured out on your image your tag is white so when you color the shape's white they would be invisible and you can also do your corner or whatever.
I think you can use border-radius for sharp borders.
#sharp-img {
border-radius: 0% 0% 31% 33% / 0% 0% 16% 17%;
}
<img id="sharp-img" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&auto=format&fit=crop&w=1500&q=80" width="500" alt="technology" />
More visualize at Fancy Border Radius Generator.
Hover element - how Can I do something like this in attachment. This triangular as element after or is better way (simple)?
Width is diffrent of each element.
Main problem is in triangular, should I populate width of background? Position left?
Please see http://jsfiddle.net/jachu/AB3wx/
The only way you could do this (with just CSS) is by having a triangular image and when you hover you trigger it to show in CSS.
See this: http://jsfiddle.net/cranavvo/ze8GQ/
10x10 Triangle: http://i.imgur.com/3dxUiTX.png
ul#navigation>li:hover{
background: url('http://i.imgur.com/3dxUiTX.png') no-repeat 100% 100% black;
}
I have an extension to the wonderful jquery knob, which turns it into a degree range input. There's a transparent compass png image positioned on the knob within a div with a negative z-index, so mouse clicks will interact with the knob rather with the img.
Now, when I put the knob in a div without a background color, the compass png shows when the page loads.
However, if the containing div has a background color, the png shows only after the user starts marking the range (drag a clockwise range on the purple circle).
Here's a demonstration of the problem: http://infoxicate.me/testknob.html
Edit: The demo page doesn't demonstrate the problem anymore, since it is solved...
Do not take a negative z-index - make it positive and the div that covers it, give it a bigger z-index.
Another solution, if you worry that the pointer would affect the image and not the knob you could try pointer-events:none.
Put the following to your canvas:
canvas {
position: relative;
z-index: 2;
}
And this to the div with the image:
div{
position: absolute;
z-index: 1;
}
I have two columns that can stretch to variable heights, the designer wants to have a shadow between the two columns, but as you can see the image fades out at the top and the bottom. That means I can't just use a background image using css that is left aligned in the column on the right.
So then I though maybe I can use a css 3 border shadow that has a radial gradient. I am probably going to use table cells to do this because I need the shadow to stretch to the height of the tallest column. How do I do this?
Previous answers doesn't really answer your question: "How do I create a radial css3 border gradient shadow"
You can use a radial gradient to simulate a border shadow without images.
Demo: http://jsfiddle.net/sonic1980/wRuaZ/
background: -webkit-radial-gradient(50% 0%, 50% 5px, #aaa 0%, white 100%);
| | | |
| | | +--> color end
| | +--> color start
| +--> size of gradient ellipse (x-axis, y-axis)
+---> position of ellipse center
It's easy to modify to make it vertical or implement using :before or :after pseudo-classes.
Another example, an <hr> tag with shadow: http://jsfiddle.net/sonic1980/65Hfc/
i have a suggestion that you do not need use css3, you may use two different class, one is normal, and other has background. And when loading page finish, and call js method, settimeout to dely some seconds, toggle class.
I think I am just going to use the image, and set a min-height on the div :-)
.column.right {
padding-left: 30px;
background: url(/img/shadow.png) no-repeat left top;
min-height: 265px;
}
Another solution would actually allow for a dynamic height column, but it only has IE8+ support.
What you'd do is apply a background-image positioned to the edge of the tallest column. Then you could use the :before and :after pseudoelements, set to absolute positioning of top:0; and bottom:0 respectively, to set the 'cap' on the shadows.
Does that make sense? Here's a JSFiddle that shows it using a border and text, instead of images.
Of course, the height parameter of the div in the JSFiddle is of no consequence; it could be min-height or nonexistent. I just set it to give the div some size.
Is it possible to hide lower div background fully?
I have two fixed position divs with shadow - semi transparent background so they overlap and become darker.
Is there a way - in Adobe Air - to make the lower div's background fully hidden?
Not sure if this helps or what you mean by "in adobe air" but can you not position the background of the second div to start further down with css eg
.div2 {
background-position: 0 50%;
}
Or you can move it down a set number of pixels maybe.
read more about bg positioning: w3c schools
If you want to hide the seconde div why not use jquery to hide it?
$("div1.class").hide()