I've created a fiddle to better show what I'm trying to ask.
angle crop of pseudo element
Here's a image showing the desired result:
li.active::after {
content: '';
position: absolute;
background: #fff;
width: 10em;
height: 100%;
height: 20em;
top: 5%;
left: 15%;
transform: rotate(-75deg);
}
What I'm looking to do is have the li active class display a colored background with a cropped angled at the bottom.
it should adapt to the length of the link
needs to see through to the background
include the angle part within the link
be responsive
Is this possible in pure css?
The best way I have found to do this in pure CSS is using a the background-image property with a linear-gradient, going from one color to transparent.
You can use the color of the element itself as a mask, or you can use the background. The difference with be how you define the gradient angle and gradient color.
In this example, I have used your object color to get the effect:
http://jsfiddle.net/948ud6f7/
You will notice it is pretty jagged and not as crisp as if you were to use an image. I am not sure of a workaround with this yet, but different browsers render the edges differently, so this at least gives you a starting point.
Good luck!
You can do that by using one of three methods:
transform/rotate
border-width/border-color(transparent)
box-shadow
Related
Few hours ago, I asked, how can I implement triangle as an arrow in a tooltip.
I got perfect answer which is here:
How to create triangle and use it as a arrow in tooltip
Now I am working on tooltip from antd library. Arrow in this tooltip is not look quite as I want to. I would like to style this same as in the previous question - as in the link above.
Here's the link to codebox where I tried to style tooltip from antd library using code from the previous question - as in the link above.
https://codesandbox.io/s/colorful-tooltip-antd-4-21-0-forked-bre16f?file=/demo.js
The problem:
As you can see the corner of the arrow is a bit too long, there are white gaps at the lower border. Nothing like that happens in the previous example. Everything is perfectly fit there
Where's the problem?
You can change the height of the arrow as pointed below.
.ant-tooltip-inner:after {
content: "";
position: absolute;
top: 100%;
height: 12px; /* <=======control the height here */
right: calc(-1 * var(--t));
border-right: var(--b);
box-sizing: initial;
}
I didn't get the white gaps at the lower borders. Can you point it out with an image/screenshot?
I am trying to make a sidebar that is similar to the one shown here: https://www.sketchapp.com/docs/ .I made everything working fine except making the box shadow opacity at top and bottom, I tried box shadow but couldn't make it the way its shown in the page. what I did so far
Thanks in advance! ^^
image to see
Welcome to SO.
You can use pseudo selectors and add to them a background with a linear gradient.
for example:
div::before {
background: linear-gradient(180deg, #fcfcfc, rgba(252,252,252,0));
content: '';
display: block;
width: 100%;
height: 4rem;
position: absolute;
z-index: 0;
}
here i am doing the following:
I set the background to a linear gradient fades the color, I put display block in order to make it behave like a div, finally I set the z-index to 0 in order to place it at the top of the other elements.
here is a working demo: https://jsfiddle.net/hdsma1fv/5/
references:
about pseudo elements: https://www.w3schools.com/CSS/css_pseudo_elements.asp
about linear gradients: https://www.w3schools.com/css/css3_gradients.asp
Edit:
If you need the shadow to hide with the scroll then you need to attach the pseudo selector ::before to an element inside the scroll and remove the position: absolute;.
Also if you want it to show in the bottom also, you need two things: first - rotate the linear gradient angle and second - use the pseudoselector ::after instead of the ::before one.
check https://jsfiddle.net/hdsma1fv/34/ for an updated example with both modifications.
I am creating a slider with custom "prev/next" navigation-arrows.
All the animations works fine. I use the transform: scale() to scale up the arrows when hovering and it all works fine. I just have one problem..
I want to prevent the arrow images to scale too.
I think I have tried everything: I've used somekind of :before/:after (see below) and it worked pretty good. But not in Safari (No transition when hover).
http://jsfiddle.net/XF4Qj/5/
Then I tried something else: Putting a span inside the arrow container, and when the arrow container was scaled up, the span was scaled down, but it didn't looked good at all (See below).
http://jsfiddle.net/Ajngc/1/
I have tried for hours, but I cannot get it to work in all major browsers.
So the question is: How to I prevent the arrow-images from scaling too, and just preserve their original dimensions?
It's only the white circle that schould be scaled up, and not the background image.
I've created a third fiddle, which has all the working code from my slider-arrow-functions:
http://jsfiddle.net/Ajngc/2/
Could be really great if someone could help me with this.
Thank you very much
- Jesper
Instead of transform()ing those elements, why not just change the size? See this updated fiddle.
.arrow:hover {
width: 50px;
height: 50px;
top: -5px;
bottom: -5px;
}
.prev:hover {
left: 35px;
}
.next:hover {
right: 35px;
}
I'm creating a wordpress theme and both sides of the content should have diagonally border. I can solve this with pictures but this is the ugly way and the content has not the same length on every page.
In this case i think two triangles on the right and left side is the correct solution. I tried it with this tutorial, but the problem is that I have to use fixed width for the borders and the triangle should have the height of the content, dynamically adjusted.
How can I solve this, that I come up with two triangles (marked red in the sketch).
You can achieve this (albeit somewhat imprecisely) with the CSS skew transform:
Demo: http://jsfiddle.net/cUWm2/2/
<div class="shape">
A variable amount of content.
</div>
.shape {
position: relative;
}
.shape:before {
content:"";
-moz-transform: skewX(10deg);
-webkit-transform: skewX(10deg);
transform: skewX(10deg);
width: 140%;
left: -20%;
height: 100%;
background-color: #555;
position: absolute;
top: 0;
z-index: -1;
}
This achieves the requested shape with minimal markup and decent (IE9+ and all other modern) browser support. However, when scaling height up or down, eventually the triangles cease to be triangles and a fourth edge becomes visible. You have several options:
Find dimensions that work for a practical amount of content and code to that.
Dynamically alter the skew amount using JavaScript.
Blend the background of the edge shapes with the main shape.
Ignore it (depending on the layout, it doesn't necessarily look bad).
All that said (after playing with various CSS options) I'd probably consider an image-centric solution first. You can use the :before and :after pseudo-elements to create containers which resize vertically along with your main content while staying the same width. You can then use a background image to cover the desired area, or put a 100% x 100% image into the container.
I also agree with using SVGs. I find them easier to manipulate since they're scalable and cross compatible between browsers as they're images. Here's an answer I posted to a similar question, which should get you started: Make CSS3 triangle with linear gradient
From there, it will be easy to set the image heights to match the content's. Here's a jQuery example:
$(document).ready(function() {
$(".triangle").height($(".content").height());
});
I would solve this by the use of SVGs (Scaleable Vector Graphics). You create the two triangle-SVGs and then make a 3 column layout where all columns are equally heigh (for example by using display: table-cell). You chose the left triangle as background-image for the left column and the right triangle as bg-image for the right one. The middle one is for your content.
Dont forget to use preserveAspectRatio(https://developer.mozilla.org/de/docs/SVG/Attribute/preserveAspectRatio) in your SVG.
Bear with me here, but assuming this code:
<style>
span {
color: black;
background-color: black;
}
</style>
<span>Hello world</span>
Hello world
Gives a result that looks like this:
███████████
Is it possible to apply style to just the letter height, versus the font/line height? In effect ending up with something that looks like this:
█▄██▄ ▄▄▄██
No (not with a background color anyway). Background colors apply to the entire element (e.g., span element), which is essentially a box as determined by the CSS box model. The official recommendation from the W3C specifies that a background color will fill the content, padding, and border areas of the box model. The CSS3 background (candidate recommendation) offers a bit more power for you to control where background colors apply, but not much.
If you really want the effect you've just demonstrated in your question, I think a JavaScript function to convert "short" characters (e.g., "w") to "▄" and "tall" characters (e.g., "h") to "█" would work nicely. Here's a demo on jsfiddle.
I can't think of a way using ONLY CSS, but you could use a function in PHP like imagefontheight: http://php.net/manual/en/function.imagefontheight.php and dynamically create your block elements from the specified font...
The only way I can think of to get the effect purely by CSS requires:
An obscenely excessive amount of extra html markup.
A willingness to allow for some slight inexactness to the height of the background in comparison to the character itself.
A meticulous amount of testing on the particular font(s) you are going to use it on to see what results you are likely to get across browsers.
In other words: it really better be well worth the effort, and it probably ought to be used on only a very short string of text.
Here's an example fiddle with the word color left contrasting to see how the background fits the letters. Note: this undoubtedly will have some variation on height and spacing above/below letters based on browser and font's being seen by you. The use of a :before pseudo-element to achieve the effect means accommodations would need to be made for older browsers (IE7 and under).
Here's the basic code in the fiddle.
<span>H</span><span class="short">e</span><span>l</span><span>l</span><span class="short">o</span><span class="short">w</span> <span class="short">w</span><span class="short">o</span><span class="short">r</span><span>l</span><span>d</span>
span {
color: white;
display: inline-block;
position: relative;
height: 1em;
}
span:before {
content: '';
position: absolute;
top: .2em;
right: 0;
bottom: .1em;
left: 0;
background-color: black;
z-index: -1;
}
span.short:before {
top: .4em;
}