I would like to know how can I make in CSS3 angled boxes. Like this site:
http://themeluxe.com/themes/glissando/ (the whites ones)
And how can I make the borders look better, smooth.
Looking on their code, I found this css:
.container:before, .container:after {
border-bottom: 80px solid transparent;
border-left: 110vw solid transparent;
content: "";
display: none;
height: 0;
margin-top: -80px;
position: relative;
width: 0;
}
But is not working for me.
In the website you link to they use the "border technique" to create the oblique boxes on pseudo elements you may understand this technique in this SO question.
Here is a simple fiddle using this technique to create the oblique bottom and top. It should help you understand how it works :
DEMO
HTML :
<div></div>
<div class="second"></div>
CSS :
body{
margin:0;
padding:0;
}
div{
height:200px;
background:teal;
position:relative;
}
.second{
background:gold;
}
.second:before{
content:'';
position:absolute;
bottom:100%;
border-left:100vw solid transparent;
border-bottom: 80px solid gold;
}
You should also be aware that in the website you link to, they are using vw units. They are not supported by IE8-
Related
I am currently building a site and the photoshop image shows that sections must be created diagonally, alternating colors as shown in the picture below.
I am wondering if somebody might help me with the CSS for such a request (just for the diagonal boxes) - I can only think of rotating or skewing, but then the div will have to start off the page in order to not leave gaps, and this obviously isn't ideal especially as the requirements are that the site is responsive.
Thanks in advance.
You can do this by creating triangle effects using the borders of the :before and :after pseudo elements.
Demo Fiddle
HTML
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
CSS
div {
height:200px;
width:200px;
}
div:nth-child(odd) {
position:relative;
background:lightgrey;
margin-top:20px;
}
div:nth-child(odd):before {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 200px 0px 0;
border-color: transparent lightgrey transparent transparent;
content:'';
position:absolute;
right:0;
top:-20px;
}
div:nth-child(odd):after {
width: 0;
height: 0;
border-style: solid;
border-width: 20px 200px 0px 0;
border-color: transparent white transparent transparent;
content:'';
position:absolute;
right:0;
bottom:0px;
}
Hi all,
I've been trying to make a header for a website I'm working on like the image above, the issue is I would like that the header fill 100% of the page width.
Is it possible to show me a way to do this in HTML5/CSS3 without using this image as a background img.
You need to create everything on 100%, fully flexible. Try the code given below DEMO
This is just to make you understand how you can do this.
CSS
body { background: #ccc; margin:0; padding: 0;}
header {background: #fff; width:100%; float:left; height:60px; position:relative;}
nav {background: red; height:30px; width:100%; float:left; margin-top: 30px;}
.logo {
position:absolute;
width:150px; height:80px; background: #fff;
border-radius: 0 0 3px 0; left:0; top:0;
}
.triangleDown { width: 0; height: 0; border-left: 50px solid transparent; border-right: 35px solid transparent; border-top: 81px solid #fff; left: 98px; position: absolute;}
HTML
<header>
<div class="logo"></div>
<div class="triangleDown"></div>
<nav></nav>
</header>
Salam my friend, the best idea is to use Css3 proprieties i mean the gradient role, i made a demo for you, you can costumize it as u need.
http://codepen.io/anon/pen/FBpEv
set the containing div to 100% and have a bg image of 1px wide and repeat the image. above this will sit the original main image with margin: 0 auto;
This will give you the desired result as above.
Try this, it has examples of what you want:
http://css-tricks.com/full-browser-width-bars/
You can use below code:
*{margin:0; padding:0;}
html, body{height:100%; width:100%;}
header{width:100%; background:#ccc;}
Let's say I have the following rectangle box (this is a div) and I would like to represent an arrow on the left side. I was searching for a really simple way of doing but every solution I found is a little tricky for my purpose.
<div class="redbox">
<b>Hello world</b>
</div>
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
http://jsfiddle.net/3N6yP/
How to transform this simple div to show an arrow on the left side?
Something like it:
Here am using a CSS triangle which is positioned absolute to the element, and than and using :before pseudo, so that, it creates virtual element for you. This will just save you few characters in the DOM. Just make sure you use position: relative; for the element having class .redbox, so that the absolute positioned virtual element doesn't fly away in the wild.
Demo
.redbox:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-right:15px solid #f00;
top: 0;
left: -15px;
}
You can use this cross-browser generator: http://cssarrowplease.com/
I've found that the "border trick" sometimes has unpredictable margin offsets across different browsers (and of course depending on your markup) and prefer other methods.
I'd personally use a proven method and use an image. Depending on your situation you can just have one sprite image or you can wrap your arrow and content.
http://jsfiddle.net/3N6yP/5/
HTML:
<div class="redbox">
<span></span><div>Hello World</div>
</div>
CSS:
.redbox {
display: inline-block;
padding: 5px;
background-color: red;
}
.redbox div{
height:30px;
background:#ff0000;
display:inline-block;
line-height:30px;
}
.redbox span{
float:left;
display:block;
height:30px;
width:20px;
background:#333333 url(http://i.stack.imgur.com/cUsjz.png) center left no-repeat;
}
What is the proper way to re-create a subtle inner outline like the following that works cross-browser?
Currently, I've an outer div and an inner div which both have a border of different color. Is there a solution that only uses one div and not two?
jsFiddle Demo
What I usually do for this type of approach is make a div container with a border and a padding. And then I will have a div inner with a border. This way the container can hold the outer border and the contained border colors. And your inner div can hold the inner border color.
html
<div class="outer">
<div class="inner">
<div class="content">
Just some text.<br>
Could be other stuff,<hr>
In here too.
</div>
</div>
</div>
css
body{
background-color:#545454;
}
.outer{
border: 2px solid black;
padding: 3px;
border-radius:4px;
width:200px;
height:200px;
background-color:#858585;
}
.inner{
background-color:#545454;
width:196px;
height:196px;
border-radius:4px;
border:2px solid black;
}
.content{
color:white;
padding:5px;
}
Untested: You can use a combination of box-shadow, outline & border:
div{
height:200px;
width:200px;
background:#F7F7F7;
box-shadow:0 0 3px red inset;
outline: solid 2px blue;
border:solid 1px #F7F7F7;
}
Preview: http://codepen.io/anon/pen/vthAJ
You can try using CSS3 border images:
http://css-tricks.com/understanding-border-image/
This will allow you to just use one div.
You just need to create simple, small repeatable thumbnails. Just have one color on one side, another color on the other. Or create a gradient like in the picture. You probably know the drill.
I think if you combine it with CSS3 border-radius you can also get the rounded corners effect.
How about this? FIDDLE
You can add the :after psuedo-element with a border.
.double {
position: relative;
border: 2px solid silver;
}
.double:after {
content: '';
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
border: 1px solid black;
}
The screenshot has border-radius as well, so if you can use CSS3 and are only looking to go a version back in IE there are CSS3 methods that will work using box-shadow: inset... to accomplish the second border.
If you are not concerned about the border-radius aspect of the screenshot you can use a combo of border and outline. Please see Fiddle for an example.
I'm having an interaction that I don't quite understand. I'm building a progress bar (seriously, can we have the entire standard implemented yet?) that displays info based off of data-* attributes, so I'm using :before and :after to display the labels.
I've got it in a fiddle: http://jsfiddle.net/WtrfL/
HTML:
<div class="wrap">
<div class="inner">
</div>
</div>
Styles:
.wrap {
width:500px;
height:2em;
border:1px solid black;
}
.wrap:before {
content:"1";
float:left;
border:1px solid black;
}
.wrap:after {
content:"2";
float:right;
border:1px solid black;
}
.inner {
width:30%;
height:100%;
background-color:#DDD;
border:1px solid #888;
}
Unfortunately, I'm having this happen:
I'd expect the [2] to be inside of the main bar, not underneath it.
I'm seeing the same behavior in IE9 and Chrome 27 on Windows, so I'm pretty sure this is me misunderstanding the way these things are supposed to work, not a bug in a rendering engine.
So... what's up? Any ideas? I'm good with a hack, this is just a prototype for the present.
I never use floats on pseudo elements. I would position them absolute. Something like this:
.wrap {
width:500px;
height:2em;
border:1px solid black;
position: relative;
}
.wrap:before {
content:"1";
position: absolute;
left: 0;
top: 0;
border:1px solid black;
}
.wrap:after {
content:"2";
position: absolute;
right: 0;
top: 0;
border:1px solid black;
}
I tested it in your fiddle and looks fine! http://jsfiddle.net/WtrfL/1/