Sorry I couldn't express it clearly. But I have attached image to get the view of what I'm asking.Image here
These are not "connected backgorunds". This is achieved by adding a triangle to the bottom of the blue section with negative bottom margin, which can be a png image or made with css (https://css-tricks.com/examples/ShapesOfCSS/)
If you can edit template file (I will use the image you have posted as an example) you need to edit template php file and add some style to the stylesheet.
Here is a quick sample.
.blue-section, .grey-section {
display:block;
position:relative;
min-height:200px;
}
.blue-section {
background-color:blue;
}
.grey-section {
background-color:#888;
}
.triangle {
position:absolute;
bottom:-20px;
z-index:10;
left:50%;
transform: translate(-20px,0);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid blue;
}
<div class="blue-section">
test
<div class="triangle"></div>
</div>
<div class="grey-section">
test
</div>
Related
Is it possible to achieve this slanted sidebar layout with CSS? The right side would be the main content where I assume the slanted sidebar layout could overlap the extra. Thanks for reading!
Try something like this..
#shape {
border-top: 100px solid green;
border-right: 20px solid transparent;
height: 0;
width: 100px;
}
Fiddle: http://jsfiddle.net/3wLJj/1/
more info: http://css-tricks.com/examples/ShapesOfCSS/
If you are going to add some text, or elements inside the green div, it is better to do it this way than creating only a shape.
Fiddle
.main{
width:60%;
background:green;
height:400px;
position:relative;
color:white;
}
.main:after{
content:'';
position:absolute;
right:-40px;
border-top: 400px solid green;
border-right: 40px solid transparent;
}
.side{
margin-left:10%;
width:30%;
}
I want to ask how can i create a css arrow triangle with smooth sides i.e. no cut in the side of arrow without using any image? I have already tried the tutorial -
[http://css-tricks.com/snippets/css/css-triangle/][1]
.arrow_up
{
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid black;
position:absolute;
top:75px;
left:250px;
}
<div class="arrow_up"></div>
UPDATE
Sorry, the issue was found only in some older version of Firefox.
You need to use a pseudo element and rotate it:
DEMO
CSS:
.arrow_up
{
width: 100px;
height: 50px;
position:absolute;
top:150px;
left:250px;
overflow:hidden;/* hide part of the pseudo overflowing*/
}
.arrow_up:before {
content:'';
position:absolute;
width:100%;
padding-top:100%;/* it will draw a square , change this value for other degrees angles*/
transform:rotate(45deg);/* we'll see a corner */
background:black;
top:20px;/* tune this according to size of parent or size to be seen */
}
Do not forget to add vendor-prefix or use a script that adds them automaticly.
The use o a pseudo element allows to add content in the box : ie. http://codepen.io/gc-nomade/pen/gdoGA
The only thing I can possibly think of is that you have another element on the page which is slightly overlapping onto the arrow as when tested it works fine:
http://jsfiddle.net/Hive7/qLAg4/
.arrow_up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
position: absolute;
top: 75px;
left: 250px;
}
It could be something to do with your browser as well though
I am making one div in that I want to align image on right of that div and fill up color of same image on other remaining free place of div but image is not aligning right to it.
The main problem is that I don't want to use <img> tag inside div, I want to to use image as background image of that div and that also should be right align.
My Fiddle
code :
<div class="inq_parent">
<div class="inq_header">
</div>
</div>
.inq_parent
{
height:560px;
width:90%;
background-color:#000;
margin-left:5%;
}
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
text-align:right;
}
Add background-position:right;
.inq_header
{
height:100px;
width:100%;
background-color:#333333;
border-bottom: 1px solid #f2f2f2;
background-image:url(http://i.stack.imgur.com/x9be2.png);
background-repeat:no-repeat;
background-position:right;
text-align:right;
}
or in short
background:url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
DEMO
Updated
.inq_header
{
height:100px;
width:100%;
border-bottom: 1px solid #f2f2f2;
background:#333333 url(http://i.stack.imgur.com/x9be2.png) no-repeat right;
}
Updated DEMO
If I use box-sizing: "border-box" for images the images will get smaller, like on hover: Example JsFiddle
Is it possible to do the same effect without the image getting cropped?
Solution #1 Outline property. Try to use outline instead of border with negative outline-offset value equal to outline width:
img:hover {
box-sizing:border-box;
outline: solid 10px #f80;
outline-offset: -10px;
}
http://jsfiddle.net/dfsq/BPRyZ/2/
Also since IE does not understand this property you can leave box-sizing to be used by IE8+.
Solution #2 Using div as wrapper + :after:
<div class="img-wrap">
<img src="http://upload.wikimedia.org/wikipedia/commons/a/af/Bonsai_IMG_6426.jpg" class="img1" />
</div>
CSS:
.img-wrap:after {
border: 0;
}
.img-wrap:hover:after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border: solid 10px #f80;
}
http://jsfiddle.net/dfsq/BPRyZ/7/
The question you need to answer is, do you want the image itself to be 200px, or the entire box to be 200px. There are 4 different ways to code this depending on your answer to the previous question...
If you want the entire box to be 200px wide, then you can use border-box with the following code...
http://jsfiddle.net/BPRyZ/8/
img {
width:200px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
If you want the entire box to be 200px wide, then you could also use this code...
img {
width:180px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
If you want the image itself to be 200px, then you need this code... (this means your total box width is actually 220px)
img {
width:220px;
border: transparent 10px solid;
box-sizing:border-box;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
}
For the above you could also use...
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
border:solid 10px #f80;
}
I updated your jsfiddle
CSS:
img {
width:200px;
border: transparent 10px solid;
}
img:hover{
box-sizing:border-box;
border:solid 10px #f80;
width:220px;
}
I want to create a banner that goes over part of the page, I'm probably not using the correct terminology...
I've seen this on more and more websites, but while trying to find website using this I've struggled to find ones to inspect. But I did find one interesting example.
http://www.bmbw.com
-Their header logo is larger than the rest of the content, with the bottom two edges angled in.
-Their "BMBW Updates" and "BMBW Snow Report" also have this effect on their respective edges.
This is the style I'm trying to do, but I was curious about the best way to do this.
The Updates, Snow Report, and Navigation (to make the header look 3d) have the effect built into the image.
But I've also seen the effect diagonally and it didn't interfere with functionality. I guess I'm just asking if there is another way to do this other than build it into the image itself.
Any Ideas?
You can actually accomplish this sort of effect without any images whatsoever using the CSS triangle hack. I've created a jsFiddle with a working example: http://jsfiddle.net/P8W7F/
CSS gradients and shadows are a good way to do it if you're using CSS3
I looked at their page, but they have done it with an image.
The most simple way is to have a second div with a thick top border. If you have this html:
<div class="banner">first content</div>
<div class="shadow_simple"></div>
<div class="next_content">next content block</div>
Then this css will do:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid #daa520;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
border: 1px solid #daa520;
margin-top:-24px;
}
The same, but with gradient triangles:
<div class="banner">first content</div>
<div class="shadow_gradient">
<div class="shadow_simple"></div>
</div>
<div class="next_content">next content block</div>
And the css:
.banner {
width: 400px;
margin:auto;
text-align:center;
background-color:#eee8aa;
}
.shadow_simple {
margin:auto;
width: 360px;
height:12px;
border-top: 12px solid transparent;
border-left: 20px solid white;
border-right: 20px solid white;
border-bottom: none;
}
.shadow_gradient {
width: 400px;
height:24px;
margin:auto;
margin-bottom:12px;
box-shadow: inset 0px 5px 12px #daa520;
}
.next_content {
width: 360px;
margin:auto;
text-align:center;
background-color:#eee8aa;
margin-top:-36px;
border:1px solid #daa520
}