I'm trying to center a before pseudo element relative to its parent and I'm wondering whether there is a tailwind syntax to apply negative values to the translation of the before element.
My div looks like
<div class="relative before:absolute before:content-['centered'] before:left-1/2">
I'm a div and my before element is perfectly centered
</div>
I would like to use something like before:-translate-x-1/2 or -before:translate-x-1/2 but this does not seem to work.
I can work around by defining an extra center class like
.center::before{
transform: translate(-50%);
}
Is there a way to achieve this using only tailwind utility classes ?
Turns out you can do before:-translate-x-1/2.
If you have a similar issue, for me the fix was that for some reason the tailwind layer base was commented out so some utilities didn't work.
Related
I've been trying for some time to find a way to have a video as a background in a div which has an overlay making it darker. Also, there should be text in the div container, does anyone have a suggestion on how to do this in Tailwind?
I have presented the whole thing like this. Thanks for your ideas and help.
You can use the brightness-* class utilities to darken the video applying the filter property without another element.
<video class="... brightness-50"></video>
Or if the element containing the text has the same width and height as the video, you can use the backdrop-brightness-* class utilities to apply the backdrop-filter to the div
<div class="w-full h-full backdrop-brightness-50">
...
</div>
Assuming the video gives your div "volume", the easiest way is to use a structure like this:
https://play.tailwindcss.com/DS33YxNtF5
But there are a million ways to achieve something like this. Also. it depends a lot on various other factors that themselves depend on your page structure, etc.
I would refrain from adding opacity to the video because it can be heavy to continuously render.
I have a couple of divs, one inside the other, I'm using border-radius and overflow: hidden on the outer div which creates a circular mask over the inner div.
It works, however, when using backface-visibility: hidden; on the child div the border-radius is no longer applied.
Here's an example of the issue, can be seen in chrome and safari
Looks like this is a bug in webkit it's being tracked on the chromium issue track. Looks like no sign of a fix being merged any time soon.
Ok, i've tried a few things with your example. The W3schools states that "backface-visibility:hidden;" is not yet well supported. This property has to do with 3d transformations, right? Specially rotation.
I found a workaround. Apply the "backface-visibility" on the mask div, not the inner one. If you do that, you'll see that it breaks the round as well. But if you apply a rotation transform on the mask div, the rounded border appears back to normal.
So, if you really want to hide the backface without losing the radius, apply this style only after you started rotating the element. Check this out:
<p>Backface hidden:</p>
<div class="ex">
<div class="mask bfh">
<div class="bg"></div>
</div>
</div>
And the css:
.bfh {
-webkit-backface-visibility:hidden;
-webkit-transform: rotateY(30deg);
}
In #Rob linked track on chrome issue there is also a workaround that was added by user viktorli.
Simply add a transform rule on the parent element of the rogue child not respecting the overflow:hidden rule and it will be fixed! something like:
-webkit-transform: scale(1);
Is it possible to affect the parent object on user hover over it's child in just CSS3?
i.e.
<div class="random">
<img src="image.png">
</div>
.random img:hover {
somehow affect .random?
}
I know it's pretty easy to do with JQuery, JS etc. But want to steer away from JS as much as possible.
Using ONLY css is impossible today, but if you want to do simple things, like changing the parent's background when you hover the inner element, you can simulate the background using a sibling. This way you will be able to achieve the result using the "+" selector.
<div class="container">
<span class="content">something</span>
<span class="bg"></span>
</div>
However, to do this, you'll have to work using absolute positioning and deal with it's side effects, like centering things and explicit dimensions, here's an example: http://jsfiddle.net/PYN6P/
I've set up a test case, where a CSS pseudo-element (::after) is displayed on mouse-hover on the given (parent-) element. Everything works fine so far, but the negative top-margin for the pseudo-element affects the parent instead of the generated element. (While the negative left-margin works as expected.)
Can anyone explain this behavior and/or know a workaround?
The first thing to be aware of is that when you use ::after, the DOM looks like this:
<div class="land" lang="de">[content of element]<after></after></div>
So, this behaves in exactly* the same way: (use Chrome or Firefox)
http://jsfiddle.net/MLThM/7/
And with some extraneous properties removed:
http://jsfiddle.net/MLThM/8/
The reason that the parent element moves is collapsing margins.
One way to "fix" that is to add overflow: hidden to .land:
http://jsfiddle.net/MLThM/9/
And the fix applied to your original demo:
http://jsfiddle.net/MLThM/10/
* = let's forget about possible bugs in ::after and ::before for the moment, they aren't relevant to the current question.
You could always set your container div to position:relative and then the new content to absolute. This way you won't affect any of the margins on the containing div.
Example : http://jsfiddle.net/MLThM/6/
I realize this is a a pretty basic question, and perhaps I'm taking advantage of you all while I should be sifting through some dense css books/materials. But I can't figure out why my code doesn't work.
I'm trying to create two divs on a page, one below the other and it seems like I should be able to give the lower and absolute position which is below the top div.
I've got to div box whose css layouts are all the same but they don't look anything like eachother. Why is it that the second one looks completely unlike the first, why can't I make a "copy" of the first and place it below the first?
Heres the code. the top is the desired scroller is the desired effect. http://jsfiddle.net/7YueC/
Take out the IDs on the divs and/or add the class .same and then switch the #lasteventimg styles to .same. Remove the #2 styles.
Fiddle: http://jsfiddle.net/7YueC/7/
You don't have to use absolute positioning to position one div below another.
Check out this, a jsFiddle I did to demonstrate how to get one div below another.
since you are trying to achieve the exact same effect on both divs and all the contained elements - why not define a class that is applied to each div. div is a block level element, so they will stack on top of one another by default - no absolute positioning needed.
Here is your code, with the addition of the class eventimg and slightly modified CSS http://jsfiddle.net/ZXGUt/
Like mentioned prior if you are duplicating the same effect on two divs, change the styling to a class and use it on both. Secondly an ID cannot start with a number, otherwise the styling will not take affect. Change it to secondEventImage or similar. If you are programming websites, I would suggest using Firefox and plugin Firebug. It allows you to check if the styling is being applied and make quick edits to view how things will be prior to making changes in the code.
CODE - Example
div#two {margin-left: 10%;margin-right: 10%;overflow-x: scroll;overflow-y: hidden;}
div#two ul {list-style: none;height: 100%;width: 8000px;}
div#two ul li{float:left;}
div#two img {width: 200px;float: left;}
OR
div.sameDivs {..........}
div.sameDivs ul {..........}
div.sameDivs ul li {..........}
div.sameDivs img {..........}
<div id="lasteventimg" class="sameDivs"> ....... </div>