I want to make make div with background, I want to make oeverlay effect in div. This is what I do.
I want to make it like this
body {
background: blue;
}
.wrap {
height: 300px;
width: 600px;
margin: 0 auto;
background-color: #000000;
}
.background {
padding: 20px;
background: #ffffff;
background: -moz-linear-gradient(center top, #ffffff 50%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, #ffffff), color-stop(1, #e5e5e5));
background: -o-linear-gradient(top, #ffffff 50%, #e5e5e5 100%);
background: -ms-linear-gradient(top, #ffffff 50%, #e5e5e5 100%);
}
<section class="background">
<div class="wrap"></div>
</section>
Something like this might get you started.
You can use position:absolute; to remove the .wrap div from the HTML flow, allowing you to position it relative to its parent element (in this case, .container)
Note that you must style the container div as either position:relative or position:absolute in order for position:absolute to work for the wrap div.
body{
background:blue;
}
.container{position:absolute;height:1000px;}
.background{
height:200px;
width:400px;
margin-top:150px;
padding:20px;
background: #ffffff;
}
.wrap{
position:absolute;
top:20px;
left:50px;
height:250px;
width:350px;
margin:0 auto;
background-color:#000000;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<section class="background"></section>
<div class="wrap"></div>
</div>
</body>
</html>
Related
**see the image in snippet having color gradient on some angle. I am unable to make color gradient from top to buttom **
the child div should have background :linear-gradient(0deg, #FF6633 0%, #CC0066 100%), some inclined angle and color should be gradient from top to bottom.
any solution
for parent div background :linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%); ,
for child div background :linear-gradient(0deg, #FF6633 0%, #CC0066 100%) and some
inclined angle
thanks.
.parent{
width: 100%;
height: 900px;
background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
}
.child{
width:50%;
height: 900px;
float: right;
background: linear-gradient(75deg , transparent 50%, #FF6633 0%, #CC0066 100%);
}
<div class=parent>
<div class=child>
</div>
Default body tag will have margin. we can remove that. please check the below code
<!DOCTYPE html>
<html>
<head>
</head>
<style>
body{
padding: 0;
margin: 0;
}
.parent{
width: 100%;
height: 900px;
background: linear-gradient(180deg, #F1F1F1 0%, #FFFFFF 100%);
}
.child{
width:50%;
height: 900px;
float: right;
background: linear-gradient(75deg , transparent 50%, #FF6633 0%, #CC0066 100%);
}
</style>
<body>
<div class=parent>
<div class=child>
</div>
</body>
</html>
I am trying to achieve a cut off border on two points of the browser. top left and top right. I am trying to get the black borders not to scale. Meaning the parts always remain the same width / height while also leaving the extra 7% vh at the bottom. currently I am using a clip-path. Im trying to do this without using svg Thanks!
body {
margin: 0;
padding: 0;
}
.section2 {
background: white;
height: 100vh;
width: 100vw;
clip-path: polygon(1px 9px, 99% 1px, 100% 99%, 1% 100%);
}
.section1 {
background: black;
height: 93vh;
width: 100vw;
}
header {
padding: 10px;
}
<div class="section1">
<div class="section2">
<header>
Zebra
</header>
</div>
</div>
You can try mulitple background like below:
.box {
margin:10px;
height:300px;
background:
linear-gradient(to top left,transparent 47%,#000 50%) top /100% 10px,
linear-gradient(to bottom left,transparent 47%,#000 50%) left /10px 100%,
linear-gradient(to top right,transparent 47%,#000 50%) right /10px 100%;
background-repeat:no-repeat;
padding:10px;
}
<div class="box"> some text </div>
With clip-path it can be done like below
.box {
margin:10px;
height:300px;
padding:10px;
position:relative;
z-index:0;
}
.box::before {
content:"";
position:absolute;
z-index:-1;
top:0;
left:0;
right:0;
bottom:0;
border:10px solid #000;
clip-path:polygon(0 0,100% 0,100% 100%,calc(100% - 10px) 1px,1px 10px,10px 100%, 0 100%);
}
<div class="box"> some text </div>
I need help with auto expanding a gradient done in css. Like, if I enter my website with my mobile phone, it auto adjusts to it. Actualy, the website doesn't auto adjust to the browsers very well: it does in my pc with google chrome, but it doesn't in other browsers or devices.
http://jsfiddle.net/g4YNk/
<html>
<link rel="stylesheet" type="text/css" href="main.css" />
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document .body.scrollHeight;
newwidth=document.getElementById(id).contentWindow.document .body.scrollWidth;
}
document.getElementById(id).height= (newheight) + "px";
document.getElementById(id).width= (newwidth) + "px";
}
//-->
</script>
<body>
<div id="wrapper">
<div id="content">
<iframe src="http://www.9gag.com" width="800px" height="400px" name="CHANGETHIS" id="CHANGETHIS" marginheight="0" frameborder="0" onLoad="autoResize('CHANGETHIS');"></iframe>
<H1>HOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLAHOLAGOLA</H1>
</div>
</div> <!-- End Wrapper -->
</body>
</html>
css:
* { padding: 0; margin: 0; }
html, body {
background-repeat: no-repeat;
min-height: 100%
height: 100%;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
min-height: 100%
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.07, #59BFFF),
color-stop(1, #000000)
);
background-image: -o-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -moz-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -webkit-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -ms-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: linear-gradient(to right bottom, #59BFFF 7%, #000000 100%);
}
#wrapper {
width: 70%;
margin: 0 auto;
background-color:transparent;
word-wrap: break-word;
height: 100%;
}
background-color:Red;
}
#content {
background: Yellow;
}
FIX:
REPLACE PREVIOUS CSS FOR THIS ONE:
* { padding: 0; margin: 0; }
html, body {
background-repeat: no-repeat;
min-height: 100%;
margin: 0;
padding: 0;
}
body {
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-image: -webkit-gradient(
linear,
left top,
right bottom,
color-stop(0.07, #59BFFF),
color-stop(1, #000000)
);
background-image: -o-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -moz-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -webkit-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: -ms-linear-gradient(right bottom, #59BFFF 7%, #000000 100%);
background-image: linear-gradient(to right bottom, #59BFFF 7%, #000000 100%);
}
#wrapper {
height:80%;
width:80%;
width:700px;
margin: 0 auto;
background-color:transparent;
word-wrap: break-word;
}
background-color:Red;
}
#content {
background: Yellow;
}
{}{}{}{}{}{}
To make your web site adjust to devices. You will first of all need a viewport meta tag in your documents head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This will prevent the devices from zooming the content.
Next you will need to specify all css widths in % rather than pixels (you can combine it with a max-width)
#mainWrapper{
width:80%;
max-width:1200px;
}
If you have some elements that will need to be in px you can use mediaqueries to specify different values for different displays.
About the CSS gradients: The gradients will allways take up the entire size of the element you have assigned it to. You might be able to change this by playing around with background-position and background-attachment with css (not really sure on that)
Here's a good CSS gradient generator that will generate code for all browsers:
http://www.colorzilla.com/gradient-editor/
You really need to look into css media queries:
you can specify different settings for each screen size (or other media)
for your Iframe, you can just set it to 'width=100%' and it will fill the width of '#content'
eg:
#media screen and (max-width:320px){
#wrapper {
/*
* css gradient here
*/
}
#content{
margin:0 auto;
max-width:300px;
}
}
#media screen and (min-width:321px) and (max-width:1024px){
#wrapper {
/*
* css gradient here
*/
}
#content{
margin:0 auto;
max-width:1000px;
}
}
this is a great place to get started:
http://css-tricks.com/css-media-queries/
to have a gradient that sits behind the iframe, and fills up the width and height of the 'viewable area' then you would need to do something like this with your markup:
<body>
<div id="wrapper"></div>
<div id="content">
iframe goes here
</div>
</body>
and alter your css for the #wrapper element and the #content element to be something like:
#wrapper {
background: linear-gradient(red, blue);
left: 0;
min-height: 100%;
min-width: 100%;
position: absolute;
top: 0;
z-index: 9;
}
#content{
position: relative;
z-index: 10;
}
Here is a proof of concept: http://jsfiddle.net/aa7vJ/
I have a page with a container and two columns. My structure looks this
<div id="page">
<div id="left"></div>
<div id="right"></div>
</div>
Here is the CSS
#page {
min-height: 100%;
height: 100%;
width: 90%;
font-size: 100%;
margin: 0 auto 0 auto;
padding: 0;
font-size: 1em;
position: relative;
}
#left {
background-image: url("../images/layout/background.png");
width: 198px;
min-height: 100%;
float: left;
}
#right {
margin-left: 230px;
min-height: 100%;
background-color: #FFFFFF;
border: 1px solid red;
padding: 150px 20px 0px 20px;
text-align: justify;
}
At the moment with the previous code the #page element doesn't stretch to the bottom and neither does the #left. If I remove the paddings from #right, #page and #left are equal height with #right.
How do I solve this?
So there are a couple ways you could handle that. If you're looking to just have two columns with different backgrounds that both reach the bottom of their container you could use a background image that repeats vertically or a css3 gradient. I set up an example here:
http://jsfiddle.net/29wBn/1/
Notice the gradient background on the #page element
#page {
background: -moz-linear-gradient(left, #b2f8ff 0%, #b2f8ff 50%, #9effaf 50%, #9effaf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b2f8ff), color-stop(50%,#b2f8ff), color-stop(50%,#9effaf), color-stop(100%,#9effaf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* IE10+ */
background: linear-gradient(to right, #b2f8ff 0%,#b2f8ff 50%,#9effaf 50%,#9effaf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2f8ff', endColorstr='#9effaf',GradientType=1 ); /* IE6-9 */
overflow:hidden; /* make the container wrap the floated contents */
}
As a fall back the #page element gets assigned the left columns color and the right column receives it's own color.
Chris Coyer wrote a great article that shows several different ways.
http://css-tricks.com/fluid-width-equal-height-columns/
I'm building a fixed width website (using the classic wrapper with margin:auto), but I want the sidebar background to extend to the right end of the screen.
So far I've accomplished this:
HTML
<div id="wrapper">
<div id="left">Content area</div>
<div id="right">
<div id="actual-sidebar">
Sidebar
<span class="clearme"></span>
</div>
</div>
</div>
CSS
body {
background: #333;
color: #fff;
overflow-x: hidden;
}
#wrapper {
width: 500px;
height: 1200px;
margin: auto;
border: 2px dashed #fff;
}
#left {
width: 300px;
height: 500px;
float: left;
}
#right {
width: 175px;
height: 500px;
margin-left: 325px;
margin-right: -9999px;
padding-right: 9999px;
background: #777;
}
#actual-sidebar {
width: 100%;
height: 100%;
border: 2px dotted #f0f;
}
You can see it in action here:
http://jsfiddle.net/knjDV/
http://www.spazionegativo.it/layout-test/
Is this kind of "full-width sidebar" possible using css only?
In the example above, the actual sidebar width is highlighted by the pink border, and the rest is all padding and negative margin; worked in chrome but IE broke it so I've added overflow-x: hidden to fix it.
The problem is, click-dragging to the right will scroll the view even if there's nothing to select, eventually hiding the content. I can't seem to get past this problem.
Is there a fix to the "drag-n-scroll" issue, or an entirely different way to accomplish this?
If you add to #right{ position: fixed;} that will get rid of the horizontal scrollbar. Is that acceptable?
Use CSS3 gradients as a background for the body (with the same color as the sidebar) to create the illusion that it extends to the edge of the screen.
.sidebar {
background: salmon;
}
body {
background: -webkit-gradient(linear, 100% 50%, 0% 50%, color-stop(50%, #fa8072), color-stop(50%, #ffffff));
background: -webkit-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: -moz-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: -o-linear-gradient(right, #fa8072 50%, #ffffff 50%);
background: linear-gradient(right, #fa8072 50%, #ffffff 50%);
}
Demo