I want to overlay a vignette over a webpage. The vignette will be fixed to the visible part of the page (i.e. the window) and the page will scroll up and down underneath it. I figure there must be a better way to do it than the way I am trying (which isn't working).
What I have tried is to have the 4 corners of the vignette as 4 separate images, that are positioned as "fixed" and have an increased z-index. That works fine. But I want to fill in the gaps between the corner images. I have created a couple of thin slices of the appropriate area of the vignette that I was hoping to repeat between the corners. But I can't seem to arrange my divs in a way that allows me to fill in the gaps. At the moment I have 4 corner parts of the vignette, with nothing in between the corners.
Here's a part of the code where I try and organise the divs. The "left" and "right" class of divs are floated respectively:
<body onload="sizeDivs()" onresize="sizeDivs()">
<div class="left">
<div class="vignette"><img id="vignette_topleft" src="code/images/vignette_topleft.png"/></div>
<div class="vignette_side" id="vignette_left"></div>
<div class="vignette"><img id="vignette_bottomleft" src="code/images/vignette_bottomleft.png"/></div>
</div>
<div class="vignette_top-bottom" id="vignette_top"></div>
<div class="right">
<div class="vignette"><img id="vignette_topright" src="code/images/vignette_topright.png"/></div>
<div class="vignette_side" id="vignette_right"></div>
<div class="vignette"><img id="vignette_bottomright" src="code/images/vignette_bottomright.png"/></div>
</div>
The events are javascript functions which determine the size of fill-in divs required and then sets their heights.
The CSS for top, left and right fill is:
.vignette {
z-index: 5;
}
.vignette_top-bottom {
background-repeat: repeat-x;
z-index: 5;
margin: 0 auto;
}
#vignette_topleft {
position: fixed;
top: 0;
left: 0;
}
#vignette_bottomleft {
position: fixed;
bottom: 0;
left: 0;
}
#vignette_topright {
position: fixed;
top: 0;
right: 0;
}
#vignette_bottomright {
position: fixed;
bottom: 0;
right: 0;
}
#vignette_left {
background-image: url("code/images/vignette_left.png");
background-repeat: repeat-y;
position: relative;
left: 0px;
top: 0px;
z-index: 10;
}
#vignette_right {
background-image: url("code/images/vignette_rightred.png");
background-repeat: repeat-y;
position: relative;
right: 0px;
top: 0px;
z-index: 10;
}
#vignette_top {
background-image: url("code/images/vignette_top.png");
position: relative;
}
You'll see various combinations of positioning in there, but it doesn't seem to make much of a difference how I position the fill bits.
Any ideas on how I can make this work?
Don't know how good this is for performance, but: http://codepen.io/hwg/pen/onapH
html:before {
position:fixed;
width:100%;
height:100%;
content:"";
box-shadow: 0px 0px 220px black inset;
pointer-events:none;
z-index:1000;
}
No extra markup!
(This is basically a full page CSS3 box shadow)
.vignette {
position: fixed;
-moz-box-shadow: inset 0 0 10em #000;
-webkit-box-shadow: inset 0 0 10em #000;
box-shadow: inset 0 0 10em #000;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
Related
a newbie to jsPlumb...
I am creating the block elements, endpoints and connectors dynamically and storing the data in the form of json in DB.
For editing, I am retrieving the data from db and recreating it on grid(creating using background image with repeat/linear gradient property) the block elements, endpoints(all endpoints are overlapped) are getting created on the grid as shown below...
But if I drag the block elements the endpoints are getting positioned as below..
If we observe if one one block element is moved that respective endpoint comes...
Here, I have moved both elements so it is aligned correctly...
So, Please suggest me how to load the elements in its correct position onload itself instead of on drag...I am using jsPlumb version 1.4.1-all-min.js...
This is my html
<div class="card-body" style="height:89%;padding: 1%;background:white;">
<div id="diagramContainer" style="width:100%;height:100%;">
<div plumb-item class="item" ng-repeat="module in schema" ng-style="{ 'left':module.x, 'top':module.y }" data-identifier="{{module.schema_id}}">
<div class="title">{{module.title}}</div>
{{module.description}}
<div plumb-connect class="connect"></div>
</div>
</div>
and this the css...
#diagramContainer {
padding: 21px;
width: 80%;
height: 199px;
border: 1px solid gray;
/* background-image: url(http://freedevelopertutorials.azurewebsites.net/wp-content/uploads/2015/06/grid.png);
background-repeat: repeat; */
background: #fff;
background-size: 7px 7px;
background-image: linear-gradient(to right, rgba(10, 10, 10, 0.3) 1px, transparent 1px), linear-gradient(to bottom, rgba(10, 10, 10, 0.3), transparent 1px);
position: relative;}
.item {
position: relative; } .item .top {
position: absolute;
top: 0;
left: 0; } .item .bottom {
position: absolute;
bottom: 0;
left: 0; } .item .center {
position: absolute;
top: 50%; } .item-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none; } .item-overlay.active, .item:hover .item-overlay {
display: block; }
I figured it out...i just needed to delay the creation of the blocks,connectors and endpoints...as I was creating it dynamically...the controller file was getting rendered first and then the html..hence the blocks and connectors were created first and it was layered by html divs(grid background)...even with position and z-index property connectivity was not shown as it had many parent divs...
Through help on stackoverflow I've been able to generate and position a CSS triangle in the correct position on my website, I've also learnt how to color a triangle in 2 equal halves.
But I am stuck on merging the two examples together, what I've tried I don't think is worth pasting here due to the mess I've made of it.
I am trying to get a triangle that has the proportions and sits at the bottom of the div like this fiddle example and then is split in 2 colors like this fiddle example.
Where I believe I am going wrong is that in the different fiddles there are different uses of:
:before
Well..., Here is my attempt to achieve this effect (proportions + split in 2 colors):
JSFiddle Demo.
In this demo, I added the triangle to the .bottom div and positioned that to stay at the top (with a negative value).
Then added margin-top: 1%; property to move the triangle when resizing the window:
HTML
<div class="top"></div>
<div class="bottom">
<div class="triangle"></div>
</div>
CSS:
.top {
/* other styles... */
position: relative;
z-index: 2;
}
.bottom {
background: lightGreen;
height: 100px;
position: relative;
z-index: 1; /* A lower z-index value than .top */
/* Or use overflow: hidden; instead */
}
.triangle {
width: 40px;
height: 20px;
position: absolute;
left: 0;
right: 0;
top: -20px;
margin: auto;
margin-top: 1%; /* Move the triangle when resizing the window */
z-index: 1;
}
.triangle:before {
content: " ";
position: absolute;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 0;
border-color: transparent blue transparent transparent;
}
.triangle:after {
content: " ";
position: absolute;
left: 20px;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 0;
border-color: red transparent transparent transparent;
}
I'm trying to create a layout where there is a fixed width and fixed position sidebar on the left.
The problem is setting the width of the main content area - it stretches off the screen to the right. Here's what I've got:
<body>
<div class="left-sidebar">
sidebar
</div>
<div class="main-content">
main
</div>
</body>
CSS:
body {
position: relative;
}
.left-sidebar {
position: fixed;
top: 0;
left: 0;
width: 220px;
}
.main-content {
position: absolute;
top: 0;
left: 220px;
background: #f0f0f0;
width: 100%;
}
How can I have the main content div start at 220px from the left, but only fill the window width?
Try setting the main content to appear fully left but give it a margin-left to make room for the sidebar.
.main-content {
position: absolute;
top: 0;
left: 0px;
margin-left: 220px;
background: #f0f0f0;
width: 100%;
}
Edit:
I've had a bit of time now to try out the code. I suggested margin-left instead of padding-left because it fits better with what you want to do. Using margin gives you the option of putting a border around your content. Also, if you actually do want padding in the content you can set it as normal. if you used a padding to indent for the sidebar you'd have to add the 220px to whatever actual padding you wanted.
This is what I came up with to get it working with margins instead of padding.
body {
margin: 0;
padding: 0;
border: 0;
}
.left-sidebar {
position: absolute;
top: 0;
left: 0;
width: 220px;
border: 1px solid green;
}
.main-content
{
position: fixed;
top: 0;
left: 0px;
right: 0px;
margin-left: 220px;
background: #f0f0f0;
border: 1px solid red;
}
I also agree with the anser referencing dynamic drive. One of the best ways to learn CSS initially is to have a go with a working stylesheet and customise it for your needs. The big advantage is it will already be cross browser compatible. Just use Google to find a bit of inspiration.
I am working on a website and the client wants to have something similar to this: http://www.csszengarden.com/?cssfile=202/202.css
There are several overlays that are attached to the edges of the screen, while the text in the center is contained in such a way that the original browser scroll bars remain usable. This design is made elastic by allowing it to stretch at least vertically through an extra div.
The tricky part about my design: I have a fixed size div that is supposed to be centered both vertically and horizontally. What I need now are further divs that surround the centered div and expand as the user resizes their window, in order to serve as overlays to hide the text below them.
This is basically it: http://imgur.com/TNaTU
So broken down even further, what I need is a way to have the four surrounding divs automatically expand or reduce their size so they always fill up all of the screen.
Is there a way to do this without Javascript?
This won't work in IE7 without some crazy hacks, because IE7 does not support display: table and friends.
I will have a look at making this work in IE7 if it's a requirement for you.
Tested in IE8 and recent versions of Firefox, Chrome, Safari, Opera.
Live Demo (edit)
HTML:
<div id="top">top stretch</div>
<div id="middle">
<div id="middleContainer">
<div class="stretch">left stretch</div>
<div id="fixed">fixed</div>
<div class="stretch">right stretch</div>
</div>
</div>
<div id="bottom"><div id="bottomContent">bottom stretch</div></div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden
}
#top, #bottom {
position: absolute;
left: 0;
right: 0;
text-align: center
}
#top {
top: 0;
height: 50%
}
#bottom {
bottom: 0;
height: 50%
}
#bottomContent { /* you don't need this if bottom won't hold "content" */
position: absolute;
right: 0; bottom: 0; left: 0
}
#fixed {
width: 400px
}
#middle {
background: #ee1c24;
position: absolute;
width: 100%;
height: 300px;
top: 50%;
margin-top: -150px; /* height/2 */
left: 0;
z-index: 1
}
#middleContainer {
display: table;
width: 100%;
height: 100%
}
.stretch, #fixed {
display: table-cell
}
/* just for demo */
#top, #bottom, .stretch {
background: #b5e61d;
border: 5px solid #000
}
#fixed {
border-top: 5px solid #000;
border-bottom: 5px solid #000
}
Im using position absolute to give the top left corner of a DIV a rounded corner.
HTML:
<div id="MyDiv">
Some content
<div class="topLeft"> </div>
</div>
CSS:
#MyDiv {
position: relative;
padding: 12px;
background: #fff url('graident.png') repeat-x top left;
}
.topLeft {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: transparent url('corner.png') no-repeat top right;
}
This works fine in all browsers expcept IE6.
In IE6 the corner.png image seems to be about 1px out at the top corner, essentially not top: 0; and right: 0; but more like top: 1px; right: 1px;
Can anyone explain why this might be happening only in IE6?
The only way I could find the make this work for IE6 is to add
margin-top: -1px;
margin-right: -1px;
to the topLeft class, but unfortunately that will mess up the display in other browsers