I have tried all the help provided but still can't get it to work.
I need the video to be width: 100% and height: 500px and when I tried other solutions provided
here it worked but the video was a centered square in the middle rather then wide screen.
Any help will be appreciated.
Thank You.
Here is what I tried: HTML:
<div class="header-unit">
<div id="video-container">
<video autoplay loop class="fillWidth">
<video id="video-overlay">gfgfgfgf</video>
<source src="makak.mp4" type="video/mp4" />
<source src="http://Dimofinf.net/your-video-file.ogg" type="video/ogg" />
<source src="http://Dimofinf.net/your-video-file.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>hghgfhgh
</div>
<!-- end video-container -->
The SASS kokozino: SASS:
.header-unit
height: 500px
border: 2px solid #000
border-right: none
border-left: none
position: relative
padding: 20px
#video-container
position: absolute
z-index: 0
#video-container
top: 0%
left: 0%
height: 100%
width: 100%
overflow: hidden
position: absolute
z-index: 1
video
position: absolute
video.fillWidth
width: 100%
#video-overlay
position: absolute
z-index: 2
width: 600px
height: 500px
background: #333
Once again thank you!
I think you need to add maximum value of the z-index (z-index: 2147483647;) in to your overlay element. this trick will solve your problem.
check out this awesome fiddler example.
#overlay {
position: absolute;
top: 100px;
color: #FFF;
text-align: center;
font-size: 20px;
background-color: rgba(221, 221, 221, 0.3);
width: 640px;
padding: 10px 0;
z-index: 2147483647;
}
#v {
z-index: 1;
}
Related
I've got an image, with properties defined as follows:
.icon {
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
}
Due to the border-radius, the image is in a circle. Is there a way to tighten this circle by some number of pixels, such that some "outer layers" of the circle are shaved off, without scaling the image down with it?
A combination of background-size and background-position properties allow you to resize an image as a background relative to the element it is a background of. Sorry if that is a mouthful, in other words, if this is your initial approach:
.icon {
background-color: white;
border-radius: 50%;
width: 50px;
height: 50px;
}
<img src="https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg" class="icon" />
Instead if the image is applied as a background image you can control the size relative to the element:
.icon {
background-color: white;
background-image: url('https://barkpost-assets.s3.amazonaws.com/wp-content/uploads/2013/11/grumpy-dog-11.jpg');
background-position: center center; /* two values for horizontal and vertical positioning, you can use px or other units to configure distance too. */
background-size: 180% 180%; /* also two values for height and width, here I am using greater than 100% to make the image larger than the element, achiving the effect you are looking for */
border-radius: 50%;
width: 50px;
height: 50px;
}
<div class="icon" role="img" aria-label="this puppy looks a little closer, right?"></div>
I can think of a few different ways to do this, depending on how "clean" you need this to be. Read the comments in-line for a description of what is going on.
/* Your code, as is: */
img {
background-color: white;
border-radius: 50%;
width: 150px;
height: 150px;
}
/* Using clip-path (not supported in IE/Edge): */
img.clipped {
clip-path: circle(28.6% at 50% 50%);
}
/* Using a background image: */
span.image {
width: 150px;
height: 150px;
display: inline-block;
background: url(https://via.placeholder.com/150);
border-radius: 50%;
box-shadow: inset 0px 0px 0px 25px #fff;
}
/* Using a span as a 'wrapper': */
span.image_wrapper {
width: 150px;
height: 150px;
display: inline-block;
border-radius: 50%;
box-shadow: inset 0px 0px 0px 25px #fff;
}
<!-- Your code, as is: -->
<img src="https://via.placeholder.com/150" />
<!-- Using clip-path (not supported in IE/Edge) -->
<img src="https://via.placeholder.com/150" class="clipped" />
<!-- Using a background image: -->
<span class="image"></span>
<!-- Using a span as a 'wrapper' -->
<span class="image_wrapper">
<img src="https://via.placeholder.com/150" class="clipped" />
</span>
For clip-path see: https://caniuse.com/#search=css%20clip
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
<source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm">
</video>
</div>
#mission-statement {
margin-top: 0px;
margin-bottom: auto;
height: 100vh;
width: 100vw;
}
video#bgvid
{width: 100%; height: 100%; position: relative;}
Currently I have a video in the background of this div. However currently, when the screen is really wide, there is space on the left and right and when it is really narrow, there is space on the top and bottom.
Instead, I would like the video to zoom such that it is always touching all 4 sides. If the browser is narrow, it will be zoomed such that the left and right parts of the video are cut off. If the browser is really wide, it will be zoomed such that the top and bottom are cut off.
How can I accomplish this?
If you are only concerned with real modern browsers that conform to W3C standards (i.e. Not IE), use object-fit:cover. If IE is a must, there's a polyfill, but other than that, it would take too much effort and time to force a "browser" like IE to conform when it's obvious design is to conflict with everything that's sane and logical.
View in Full page mode
Demo
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
#mission-statement {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
video#bgvid {
height: 100vh;
width: 100vw;
object-fit: cover;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="https://i.pinimg.com/originals/28/6c/00/286c004a0cc4a49a5e6985b0e0812923.gif" id="bgvid">
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
</div>
Try this:
video#bgvid {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
I was wondering if it is possible to make a square with round corners and a indented border in pure CSS.
Currently I have this:
#custom-square {
position: relative;
display: block;
width: 75px;
height: 75px;
border: 2px solid #8A6EF1;
border-radius: 10px;
background-color: white;
}
Considering the hassle and amount of code needed to align double curves with CSS, SVG seems way more appropriate. A few other reasons to go for svg here are :
control of the path (color, width, curve...)
control the fill with a plain color, gradient or image
less code
you can display it over a non plain background (gradient or image)
maintain the boundaries of the shape for user interactions (hover, click...)
Here is a basic example using an inline svg with a path element.
The curves are drawn with Cubic Bezier curves :
svg{width:30%;}
<svg viewbox="0 0 10 10">
<path d="M1.5 0.5 Q5 1 8.5 0.5 Q9.5 0.5 9.5 1.5 Q9 5 9.5 8.5 Q9.5 9.5 8.5 9.5 Q5 9 1.5 9.5 Q0.5 9.5 0.5 8.5 Q1 5 0.5 1.5 Q0.5 0.5 1.5 0.5z"
fill="none" stroke-width="0.2" stroke="#8A6FF2" />
</svg>
Another pure CSS approach for creating this border would be to make use of border-image property. All that is required is create an image with the required border shape and set it to an element using the border-image-source property.
.shape.large {
height: 300px;
width: 300px;
border-image-source: url(http://i.stack.imgur.com/Qkh6A.png);
border-image-width: 34px; /* the width of the border portions in the image - refer to image at the end of the answer for the exact portion details*/
border-image-slice: 34; /* equal to border-image-width */
border-width: 34px; /* equal to border-image-width */
}
.shape.small {
height: 100px;
width: 100px;
border-image-source: url(http://i.stack.imgur.com/Mra4B.png);
border-image-width: 14px;
border-image-slice: 14;
border-width: 14px;
}
.shape.small.fill {
background: aliceblue content-box;
border-image-source: url(http://i.stack.imgur.com/Ovj03.png);
border-width: 14px;
}
/* Just for demo */
body {
background: url(http://lorempixel.com/800/800/abstract/2);
}
.shape.small {
float: left;
}
.shape.large {
clear: both;
}
<div class='shape small'>Some content</div>
<div class='shape small fill'>Some content</div>
<div class='shape large'>Some content</div>
At present this method is definitely not much advantageous compared to SVG but it is an option and in my opinion is better than the other CSS only approaches that are possible.
The advantages of this approach are:
Very minimal and low complexity code.
Better control over the curves and their radii (like with SVG) because the image with the required border curvature can be created separately.
Can be placed on top of an image or a gradient background.
Can be made to degrade gracefully (into a solid square border) in browser's that don't support it.
The drawbacks are:
The container is still a square and so hover effects will not be restricted to the boundaries of the shape unlike with SVG.
Adding solid color fill to the shape is possible (by using a filled version of the image) but adding a gradient or image fill is tricky because borders are still blocks (that is, there are transparent areas on either side of the curves).
The output is responsive but as dimensions increase or decrease beyond a threshold, the shape starts to look a bit compressed or stretched. So, this is more suited for break-point based design.
The browser support is not bad but is not great either. It works in Chrome, Firefox, Safari, Opera and IE11+.
Calculation of Border Image Width:
The width or height of border area (which becomes the border-image-width) is nothing but the width of the portion highlighted in the below image.
This draft mock up is as close as i could get it to pure CSS, but still requires a nested div. You would need to tweak the sizing / radius for the before / after circles.
Pen
div {
position: absolute;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 4px solid purple;
border-radius: 30px;
//overflow: hidden;
box-sizing: border-box;
&:before {
position: absolute;
top: -4px;
left: -94px;
content: ' ';
width: 100px;
height: 100px;
border: 4px solid purple;
border-radius: 50px;
box-sizing: border-box;
background-color: white;
clip: rect(0px, 100px, 100px, 90px);
}
&:after {
position: absolute;
top: -4px;
right: -94px;
content: ' ';
width: 100px;
height: 100px;
border: 4px solid purple;
border-radius: 50px;
box-sizing: border-box;
background-color: white;
clip: rect(0px, 10px, 100px, 0px);
}
}
div > div {
position: absolute;
top: -4px;
left: -4px;
transform: rotate(90deg);
border-color: transparent;
}
SVG is probably the way to go here, but here's a pretty close approximation in pure CSS. It could be made even better by increasing the size of the outer circles.
#middle {
width: 96px;
height: 96px;
border-radius: 10px;
background-color: green;
border: 2px solid #8A6EF1;
}
.outside {
width: 100px;
height: 100px;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
}
.cutout {
width: 96px;
height: 96px;
border-radius: 50%;
background-color: white;
border: 2px solid #8A6EF1;
}
#top {
top: -100px;
height: 10px;
}
#right {
top: -110px;
left: 90px;
width: 10px;
}
#bottom {
top: -120px;
height: 10px;
}
#left {
top: -220px;
width: 10px;
}
#top > .cutout {
margin-top: -90px;
}
#left > .cutout {
margin-left: -90px;
}
<div id="wrapper">
<div id="middle">
</div>
<div id="top" class="outside">
<div class="cutout">
</div>
</div>
<div id="right" class="outside">
<div class="cutout">
</div>
</div>
<div id="bottom" class="outside">
<div class="cutout">
</div>
</div>
<div id="left" class="outside">
<div class="cutout">
</div>
</div>
</div>
Similar to these, but with a separate border. I asked this question earlier, but didn't realize there were other methods besides using linear gradients.
Examples: http://i.imgur.com/TqVR67J.png
It's not pure CSS (and probably not exactly what you're looking for), but you could just do a larger element first that just forms the border, and then have a smaller sibling element with offset afterwards:
<div id="background"></div>
<div id="foreground"></div>
and then the css:
#background{
position: absolute;
}
#foreground{
position: relative;
top: 5px;
left: 5px;
}
(Obviously, you would have to add all of the styling and extra tags for the beveling.)
Take a look at this fiddle. This might gave you an idea of how to create it with css.
Beveled border with css
HTML
<div class='box'>
<img src="http://placehold.it/350x150" />
<img class='cart' src="http://www.rotweinelang.at/themes/wein/img/elements/smallShoppingCartIcon.png" />
</div>
CSS
.box {
width: 350px;
position: relative;
}
.box::after {
content: "";
position: absolute;
top: 0;
right: -2px;
border-style: solid;
border-width: 0 40px 40px 0;
border-color: transparent #fff transparent transparent;
}
.cart {
position: absolute;
top: 0;
right: -4px;
z-index: 1;
}
I have problem positioning left sidebar (variating height DIV) ON IE6.
Main needs:
1. I cant set height value, cause height is variating and should be computed by browser.
2. Sidebar must have top and bottom spacings.
Top bar issue is solved by replacing position to relative.
Any ideas ? Thank you in advance !
Below you can see simplified code and snapshot how it looks on standard browsers.
.container {
left: 550px;
top: 10px;
width: 196px;
position: absolute;
line-height: 0px;
font-size: 1px;
}
.inner {
width: 100%;
height: 114px;
background-color: rgb(227, 227, 227);
}
.leftbar {
left: 0px;
top: 7px;
bottom: 7px;
width: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
.topbar {
left: 7px;
top: 0px;
right: 7px;
height: 4px;
position: absolute;
background-color: rgb(111, 111, 111);
}
<div class="container">
<div class="inner"></div>
<div class="leftbar"></div>
<div class="topbar"></div>
</div>
LINK TO SCREEN SHOT IMAGE
IE6 is tremendously bad when it comes to absolute positioning. Positioning something at the same time from left and right or from top and bottom just doesn't work.
You basically have four options:
Drop support for IE6.
Give up on absolute positioning and use some other method (floats for example).
Provide dumbed down version of the site for IE6 - for example overriding some styles using conditional comments.
Use JavaScript to aid IE6 in positioning (for example absolutefudge.js).