I found this code snippets at http://www.css3shapes.com/, but I can't understand the logic behind it. I mean I know the before and after selector's function. What I'm confused with is why we have { height:0; width:40px; } in the code. If anyone could give a full explanation on this code, it will be greatly appreciated.
#octagon {
width: 100px;
height: 100px;
background: blue;
}
#octagon:before {
height: 0;
width: 40px;
content:"";
position: absolute;
border-bottom: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
}
#octagon:after {
height: 0;
width: 40px;
content:"";
position: absolute;
border-top: 30px solid blue;
border-left: 30px solid white;
border-right: 30px solid white;
margin: 70px 0 0 0;
}
If you change a few of the colours you can see what's going on: the 'after' bit is like the top part of a bevelled picture frame:
The top of the frame is red, the sides are green & blue, but there's no bottom, and the size of the 'picture' in the frame is width 40, height zero (ie the line along the bottom edge of the red bit).
If you add the missing bottom, and make the height 40, you can see the entire frame:
It's a trick to force css to render a triangular shape. Check out #octagon:before { ... }
The border-bottom-width determines the height of the element. The borders on the sides add to the defined width giving the shape a width of 100px.
You can imagine the height: 0 acting like a vanishing point in the distance. Both of the sides move toward it but in this case never reach it since the width (100) is greater than the height 30.
The difference between the triangle and the octagon is the additional width:
width: 40px;
Play with his example: http://jsfiddle.net/mXTrG/
The gray is the side borders and the blue is the bottom border.
Does that make sense? Let me know if you have any questions!
Related
I want an empty container to glow so I use this code:
box-shadow: 0 1px 20px 1px lightcyan;
The problem with this is that only the borders glow and there is a big hole in the center which is not the effect I want. I know I can move the position of the shadow so is not overlapped by the container itself but I don't want that because it would be out of place.
Is there any other alternative to achieve this effect with pure CSS?
Something like this, but without the background:
box-shadow can do it, just crank up the blur and the spread (the 3rd and 4th parameters).
For a circle, add border-radius: 50%; and give a small width and height.
div {
margin: 100px;
width: 1px;
height: 1px;
background-color: lime; /* for the 1px in the center */
border-radius: 50%;
box-shadow: 0 0 50px 70px lime;
}
<div></div>
I want to try and achieve something in CSS using borders but they don't seem to have something I want. In Photoshop, when you add a Stroke (border), you select the position. Outside, Inside, or Center. Outside being where the entire border wraps around the object. Inside is where it sits on the inside (obviously), and center being half and half.
I want a 2px border that's positioned in the center. So it shows 1px outside and 1px inside. Is there anyway to do this with CSS? I imagine I can do it with a box-shadow of some kind but I'm horrendous at shadows in CSS.
There's also the issue of having to be pure CSS so I can't lay an image over it. Can someone possibly help me out with this.
Thanks.
There's a work around, since border represents outer stroke for you, you can make use of outline css property with outline-offset set to negative value to have the inner 1px stroke( 1 ) JS Fiddle
body {
padding-top: 10px;
}
#test {
width: 250px;
height: 200px;
background-color: orange;
margin: 0 auto;
border: 1px navy solid; /* outer stroke */
outline: 1px navy solid; /* inner stroke */
outline-offset: -2px; /* negative border width + outline width */
}
<div id="test"></div>
( 1 ) As the above fiddle might not demonstrate the explanation good enough, here's the same example with two colored strokes and 4px for each stroke instead of 1px Demo Fiddle
Resources:
http://caniuse.com/#search=outline
https://developer.mozilla.org/en/docs/Web/CSS/outline-offset
http://www.w3schools.com/cssref/css3_pr_outline-offset.asp
https://davidwalsh.name/outline-offset
Perhaps with a suitable sized absolutely positioned pseudo-element?
div {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 1em auto;
position: relative;
}
div:after {
content: '';
position: absolute;
top:-6px;
left: -6px;
width: calc(100% - 12px);
height: calc(100% - 12px);
border:12px solid rgba(255,0,0,0.5)
}
<div></div>
You could nudge the container so that it would look like it's an inner border. For example, if you have have a 2px left border and want it to appear as an inner border, you can just offset the whole container to the right, like this:
position: relative;
left: 2px;
You might have to do other corrections, such as reducing the width of the container by 2px.
I want to create an animation with css that simulate a wave movement.
I need to change a line-or div- to a curve for this...
The CSS rules that I'm familiar to, make the entire div to semicircular or change element border.
For example:
border-radius, or perspective or border-top-radius...
This image show you what I want:
Is this possible? If so, how can it be done?
You could use an asymmetrical border to make curves with CSS.
border-radius: 50%/100px 100px 0 0;
VIEW DEMO
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: #000 transparent transparent transparent;
border-radius: 50%/100px 100px 0 0;
}
<div class="box"></div>
#Navaneeth and #Antfish, no need to transform you can do like this also because in above solution only top border is visible so for inside curve you can use bottom border.
.box {
width: 500px;
height: 100px;
border: solid 5px #000;
border-color: transparent transparent #000 transparent;
border-radius: 0 0 240px 50%/60px;
}
<div class="box"></div>
I'm trying to get a gap created within a div's border to fit an image, similar to this:
Is there a way to do this in pure CSS? All I can see is:
.box {
background: url(img.png) bottom left;
border-top: 1px solid #eee;
border-left: 1px solid #eee;
}
But my problem is border-right: 1px solid #eee; creates a line on top of my image, which is of course not desired.
It needs to be responsive. This image is an example, but you get the general idea.
Something like this?
http://jsfiddle.net/6Ufb5/
div {
border: 1px solid #ccc;
position: relative;
}
img {
position: absolute;
top: 10px;
left: 10px;
}
Give the container position relative and the img absolute, shift it to left 10px and shift it down 10px from the top and you have what you desire.
For the responsive part, that's just giving the container and/or img a % width.
Like so:
http://jsfiddle.net/6Ufb5/2/
You can achieve this by using absolute positioning of the image element - and it has to be in a <img> element, not as the background image because it will never overlap the parent border (or even if it does by adjusting the background-position property, the border will lie on top of the background image... a behavior that is expected, by the way.
<div class="box">
Content goes here
<img src="http://placehold.it/300x200" />
</div>
And the CSS:
.box {
position: relative;
border: 1px solid #333;
}
.box img {
position: absolute;
bottom: -1px;
right: -1px;
}
If you want a dynamic and/or responsive solution, you might have to resort to JS to doing so - such as resizing the image depending on the box dimensions, and assigning a height to the box to take into account of the image height (since image is absolutely positioned, it is taken out of the document flow).
See fiddle here: http://jsfiddle.net/teddyrised/xH6UV/
This might work if you can alter your markup. For accessibility I think the image should be an image and not a background, and this method is responsive (though you may want to alter margins at small sizes with media queries).
http://jsfiddle.net/isherwood/79Js5
.box {
border: 1px solid #ccc;
display: inline-block;
padding: 10px 0 10px 10px;
width: 40%;
}
.box img {
margin-right: -10%;
margin-bottom: -10%;
width: 105%;
}
<div class="box">
<img src="http://placehold.it/200x100/f3f3f3" />
</div>
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.