I'm trying to make a group of elements sit in the upper left corner on a webpage. When the browser is at its max, the elements look fine. But when the browser width becomes less than the biggest element's width (outer-circle of 927px), the horizontal scrollbar appears. I would like to make it so that the elements scale down and that the horizontal scrollbar doesn't appear. I could resize all of the individual elements with media queries but I wanted to know if there's a better way of doing it.
I tried inserting the group into a bootstrap column and that didn't do anything. I also tried setting the element sizes to vw (example is setting .inner-circle width and height to 20vw). That worked until I started resizing the browser and the elements shifted off of the page.
HTML:
<div class="corner">
<div class="moon"></div>
<div class="inner-circle"></div>
<div class="mid-circle"></div>
<div class="outer-circle"></div>
</div>
CSS:
.moon{
position: absolute;
width: 240px;
height: 240px;
left: 170px;
top: -40px;
border-radius: 50%;
box-shadow: -80px 50px white;
}
.inner-circle {
position: absolute;
width: 635px;
height: 598px;
left: -134px;
top: -300px;
border-radius: 50%;
background:rgba(229, 227, 238, 0.5);
opacity: 0.4;
}
.mid-circle {
position: absolute;
width: 841px;
height: 795px;
left: -240px;
top: -400px;
border-radius: 50%;
background: rgba(229, 227, 238, 0.5);
opacity: 0.3;
}
.outer-circle {
position: absolute;
width: 927px;
height: 902px;
left: -230px;
top: -410px;
border-radius: 50%;
background: rgba(229, 227, 238, 0.5);
opacity: 0.2;
}
You have given the values in px. Better give in perecentages, so that it will adjust with respect to the screen.
Or try giving position relative to the parent div 'corner'.
Try using the following css properties:
max-width: (your width)px;
width: 100%;
This will decrease the size of your div as your screen size starts to get smaller than the set width.
Related
I need to create a div with the top left and right border with different heights, with a radius of 50px at each top end respectively, plus a linear gradient background color.
Do you know if it is possible to create it with CSS and HTML?
Thanks for your comments.
It should look like below:
You'll need 2 divs for this, with 1 nested in the other.
Rotate the child element using transform: rotate(deg) and hide the overflowing sides by applying overflow:hidden to the parent.
.parent {
background-color: #E6E6E6;
width: 200px;
height: 200px;
overflow: hidden;
padding-top: 8px;
}
.child {
height: 222px;
width: 217px;
margin-left: -10px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
border-radius: 25px 25px 0px 0px;
transform: rotate( -6deg);
}
<div class="parent">
<div class="child">
</div>
</div>
Yes, with a lot of manipulation (building on the other answer but closer to the example):
We need three divs. The outer one is the wrapper (invisible). The second one is the one with "different heights" and a gradient, which is rotated to give the "different heights" illusion. Finally, we have another div that's almost the same as the second one but fills in the empty space caused by the rotation of the second one.
#wrapper {
height: 500px;
width: 300px;
background-color: transparent;
position: relative;
overflow: hidden;
}
#f {
position: absolute;
width: 100%;
height: 150%;
top: 20px;
left: 18px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
border-radius: 10px 25px 0 0;
transform: rotate(-3deg);
}
#g {
position: absolute;
width: 100%;
height: 150%;
top: 50px;
background: linear-gradient( 0deg, #FFFFFF, #E9F3FF);
}
<div id="wrapper">
<div id="f"></div>
<div id="g"></div>
</div>
One DOM element with position: fixed, another one inside with css-transforms, another one inside that one with position: fixed
All fixed position elements is supposed to be positioned based on the viewport as container, but when the middle element has css-transforms, the inner fixed element is positioned based on the middle element instead of the viewport.
.backdrop {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.1);
}
.contents {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 200px;
border: 1px solid red;
transform: translateX(-50%) translateY(-50%);
}
.inner-fixed {
position: fixed;
top: 20px;
left: 20px;
background: rgba(0, 0, 255, 0.1);
width: 100px;
height: 50px;
}
<div class="backdrop">
<div class="contents">
Contents in centered box
<div class="inner-fixed">
Inner-fixed contents
</div>
</div>
</div>
If I remove the transform on the .contents, the inner element is fixed based on viewport.
Happens in Chrome 62 and Firefox 57 (Mac)
Any way around this with the same DOM, so the inner element is fixed based on the viewport without having to skip the use of css-transforms?
With the css-transform:
Without the css-transform:
After creating a clip path to mask away a part of an image leaving behind a downward pointing arrow, I get this thin line on high resolution screens or when i zoom in on a regular screen.
here is the css for the clip path:
.clearflowptr {
margin-bottom: 40px;
margin-top: 40px;
background: white;
height: 50px;
width: 100%;
-webkit-clip-path: polygon(0 0, 46% 0, 50% 100%, 54% 0, 100% 0, 100% 100%, 0 100%);
the margin-bottom and margin-top just add spacing to the element. I tried playing around with the padding but to no avail.
Any help is appreciated.
Thanks
You can try this one instead of using clip-path if its not a requirement.
div{
background-color: #0b8192;
width: 100%;
height: 15px;
position: relative;
}
div:after{
content: '';
width: 0px;
height: 0px;
border: 40px solid #0b8192;
position: absolute;
top: 100%;
left: 0;
right: 0;
margin: auto;
border-right-color:transparent;
border-left-color:transparent;
border-bottom-color:transparent;
}
<div>
</div>
I'm trying to get a modal window that will size with its content up to 80% of the height of the window, and then scroll. I also need the close button (represented by the "X" in the top-right) to stay fixed. This is what I have so far:
HTML
<div>
<div class="dialog-overlay"></div>
<div class="dialog" style="left:75%;">
<span class="close">X</span>
<div class="dialog-wrap">
<div class="dialog-content">
<!-- Long amounts of content here -->
</div>
</div>
</div>
</div>
CSS
.dialog-overlay {
background-color: rgb(0, 0, 0);
position: fixed;
z-index: 88;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0.8;
}
.dialog {
background-color: rgb(66, 66, 66);
position: absolute;
height: 80%;
max-height: 80%;
width: 40%;
top: 50%;
left: 50%;
z-index: 89;
border-width: 1px;
border-style: solid;
border-color: #666;
border-radius: 5px;
box-shadow: 4px 4px 80px #000;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
}
.dialog .close {
position: absolute;
top: 0px;
right: 20px;
}
.dialog-wrap {
overflow-y: auto;
height: 100%;
}
.dialog-content {
color: #ccc;
padding: 20px;
}
With this code, I got as far as the codepen below, but I'm stuck. The one on the right works as desired, but then the one on the left, where the content is small, is too big with unnecessary empty space. If I comment out the "height: 80%" from .dialog, the one on the left is fixed, but then the scrolling one on the right ceases to work correctly. I don't want to have to set the height, but it seems to be required for the inner content to scroll for some reason, even though I thought max-height should do it as well.
http://codepen.io/evshell18/pen/QNPyGr
I have the following code: http://jsfiddle.net/Leytgm3L/ and as you can see, I use here extended resource - bootstrap.min.css. So far the page looks like in the result of this fiddle. I would like to change it so the darker background is blurred (exactly like in this tutorial http://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/ ). Is it possible without modifing the bootstrap css file?
I tried to replace this line:
background: rgba(0, 0, 0, 0.35);
with what they suggest on this tutorial:
#black{
-webkit-filter: blur(10px);
filter: url('/media/blur.svg#blur');
filter: blur(10px);
}
#black p, #black h1{
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px
}
but all I get is blurred text: http://jsfiddle.net/Leytgm3L/1/
could you help me with that?
You're going to need a blank "background" div that matches the width/position/etc of the content you want it on using the blur property and z-index: -1;. For example, say I had a box that was 300px wide and 100px tall. I'd have to make a #blurredbackground div that matches that same width, height, and position with filter: blur and z-index: -1 added.
HTML:
<div id="blurredbackground></div>
<div id="content">
...
</div>
CSS:
#content {
position: absolute;
bottom: 72px; left: 72px;
width: 300px;
height: 100px;
}
#blurredbackground {
position: absolute; /*matches #content position*/
bottom: 72px; left: 72px; /*matches #content position*/
width: 300px; /*matches #content width*/
height: 100px; /*matches #content height*/
-webkit-filter: blur(10px);
filter: blur(10px);
z-index: -1;
}