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.
Related
Please check this image. (The black slate)
Is there any way of achieving these edges through CSS?
The only way I can think of is by using an image editor.
Thanks for your time.
To follow on from the comments, I don't think what your asking for is possible through CSS. I think you're right is through editing the image itself.
But what you can do is create an image to give you the effect, to save you editing each image separately, and then applying the image as a background on a wrapping element, so your mark-up could look like this for example:
<span class="chiseled">
<img />
</span>
You can then use your created image and apply that to the span and overlay it on the image to have the effect.
I wonder what will happen if I have a wrapper of class "col-md-4" wrapping over an image having a larger width.
I have tested on my own browser, it seems that the image will not be limited by the col-md-4 class; that is, it will go across the column wrapper, which makes the whole page's structure hard to manipulate.
Can anyone give me any idea how to solve this?
Have you tried adding class="img-responsive" to the image tag and checking it?
I'm trying to make a HTML "showcase". I am thinking of using elements like this:
<div id="index-showcase-tabs">
<div id="index-showcase-tabslide">
<div class="index-showcase-tab" id="showcase-tab-1">Item1</div>
<div class="index-showcase-tab" id="showcase-tab-2">Item2</div>
...
<div class="index-showcase-tab" id="showcase-tab-N">ItemN</div>
</div>
</div>
The showcase items are floated left, and I don't know their precise width, nor the number of them.
Problem is: if the combined width of the items is bigger than the container (index-showcase-tabs), I don't want them to break line (which they do by default). I want them in one line, and I want to hide the overflow and then let the user scroll them with javascript (not by scrollbar...).
How would I do that?
PS: There's not much css for the items yet. I only gave the slider a specific heigth:
#index-showcase-tabslide
{
height: 34px;
}
Edit: Here you can see my problem.
Edit2: explaining more with a fiddle: http://jsfiddle.net/TbSfj/19/
For this, you cannot use float: left. Instead use display: inline - this will have the same effect for what you want to accomplish, and it will not be constrained to the parent div in the DOM model.
check out this sexy control:
http://jsfiddle.net/SoonDead/U6QdQ/20/
this way made for my project, but I think it does what you want.
The tricks are:
Because you use a lot of characters that can "linebreak" and even forcefully disable linebreaks have different results in 1-2 browsers, I would recommend against it.
Instead make the overflowing width wide enough to hold all the elements easily, so if javascript is disabled it will not look ugly.
(I know that you are fine with jquery, so I use it within the example, also the outerWidth property in simple js has bugs in webkit (tends to be 0 in some cases).)
So you need to sum up the elements' outerWidth() and set the content holder's width, so you can use scrollLeft, and not overscroll.
There is no other trick, just a scrollTo function because calculating positions are not that trivial if you are new to jquery and you might want to use that.
Is there any way to have a custom-shape image container? To use something instead of <div />?
The problem appears when I need to add corners on top of the #content-box ( http://img855.imageshack.us/img855/8343/screenshot20111027at163.png ). The corner-images are using only half of the block element, the rest (the pink alpha-background) are blocking the active-elements underneath it.
Is there any workaround for this?
To answer my own questions:
It is not possible to have a custom shape HTML element without parent block element holding it anyway, e.g. in case of SVG.
However, the one workaround that I've managed to come across is magic CSS pointer-events rule, which, as you might have guessed already, helps to click through the element.
pointer-events: none;
That did solve my issue.
It's not possible to have custom shaped containers. You could do this though using <div> wrappers, each containing a different background image. For example:
html
<div id="content-wrapper">
<div id="content-box">
<!-- Upload photo content box --->
</div>
</div>
css
#content-wrapper,
#content-box{
width:500px;
height:500px;
}
#content-wrapper{background:url('images/four-corners.png') no-repeat}
#content-box{background:url('images/octagon.png') no-repeat}
This way the images won't block any active elements on the page.
does anyone know how to create a tooltip on the div. On my page, i have 4 div and I want every time the user mouse over on a div, it will show down the tooltip from the top and after few seconds the tooltip will be automatically hidden..
THANKS
You can use the title attribute:
<div id="myDiv" title="My Tool Tip Text here">Div Stuff</div>
Or take a look at this (A javascript example, does not automatically hide, but could be easily modified to do so):
http://djgdesign.co.uk/display.php?id=47
If you can use javascript and JQuery it's pretty simple, take a look at
http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/ for example
Doing it in pure html and css would be more complicated. You could play with :hover, absolute
positioning and z-index to achieve it.
I would recommend you the TipTip jQuery Plugin its very easy to adapt and also easy to extend. Ask if you need help with this.