I've found several articles on how to angle borders, but what I'm trying to do is a little different.
I have an element with dashed borders like so:
.box { border: 1px dashed #fff; }
However, I am trying to simultaneously have the corners of the .box element and its dashed border be at a 45 degree angle.
Is this possible?
You could get some pretty close-to-45 degree angles by tweaking the bezier of border-radius:
http://www.css3.info/preview/rounded-border/
Is there a reason why you wouldn't want to do this with 2 background elements?
.box {
/* this background image will stick to the top of the box */
background: url(/* you would put a 10px high image that is the width of said box */) no-repeat left top;
display: block;
padding: 10px 0 0; /* this padding element needs to match the background height */
}
.box .inner {
/* this will stick the background image to the bottom, and grow with the natural height of the box */
background: url(/* you'd put a looong background image, that could stretch vertically */) no-repeat left bottom;
display: block;
padding: 0 10px 10px;
}
Your markup would look like this:
<div class="box">
<div class="inner">
...Content goes here...
</div>
</div>
I can understand if you want to do it with just the border style, but I don't know of a way to do right angles and make it work in IE, to be honsest.
Related
I have a block(div) with a lineair gradient.
Is it possible to make the top right corner to cut out a triangle?
You have border-radius 5px for instance to make a block with round corners. But is it possible to have a transparant top right corner of 40px?
Thanks for reading
Sorry it is like this:
https://www.w3schools.com/cssref/playit.asp?filename=playcss_border-top-right-radius&preval=100px
Only not rounded but a sharp corner like a triangle. (Straight line)
<div class="top-block">content</div>
.top-block {
background: lineair-gradient(from top to right, red, blue);
border-top-right-radius: 100px;
}
You can achieve the effect with ::after / :: before elements like this.
.yourelement{
position:relative; // Required.
}
.yourelement::after {
content: "";
position: absolute;
border-left: 40px solid transparent;
border-top: 40px solid #fff; // YOUR BG COLOR
top: 0px;
right:0px
}
You can base the px sizes on the size of your element as you please, also adjust the colors etc.
this essentially places a triangle over your corner to make it appear cut.
I have problem, that I don't know how to resolve.
I want to create 3 images(arrows, that I drew before) and put text inside each one, and all this should be responsive...
Here is my code:
HTML:
<div class="arrows">
<div class="arrow1">
<h2></h2>
<p></p>
</div>
<div class="arrow2">
<h2></h2>
<p></p>
</div>
<div class="arrow3">
<h2></h2>
<p></p>
</div>
CSS:
.arrows {
width: 1000px;
margin: 0 auto;
.arrow1 {
background: url("features/arrow-blue.png") top center no-repeat;
min-height: 250px;
}
.arrow2 {
background: url("/features/arrow-orange.png") top center no-repeat;
min-height: 250px;
}
.arrow3 {
background: url("/features/arrow-red.png") top center no-repeat;
min-height: 250px;
}
p {
padding: 0 300px 0 120px;
}
}
For now arrows not responsive at all, they act as cover(background)
I want to do overlay, but instead of color I want to put text.
P.S Bootstrap 2
Thanks!
I had almost exactly the same task to solve for a site I set up just 2 or 3 months ago. (I was actually putting the text inside circles, not arrows, but it's the same principle). If I show you the CSS for it you can adapt it for your arrows.
Basically I used absolute positioning to place the items over each other. The text, of course, has a z-index to overlay it, and a transparent background. Then to get the thing to be responsive, and keep that whatever text size the user might be running with, the media queries have breakpoints in em units, not px ones. The site is http://www.enigmaticweb.com, and it's the two circles containing the logo and the slogan below the logo.
The tricky bit is getting the positions exactly right so the two things stay fluidly on top of each other whatever the screen width; you will have to use trial and error to get the exact positions right. Here's the HTML:
<div id='usrSiteNameDiv'></div>
<p id='gpSiteName'><a href='http://www.enigmaticweb.com'>The Enigmatic Web</a></p>
<div id='usrSiteSloganDiv'></div>
<p id='gpSiteSlogan'>Occasional web development blog articles.....</p>
The circles aren't an image (they are actually made by a div with rounded corners and zero width/height) but that shouldn't affect you, I could have used an image underneath the text just as easily. One problem you might have is a good layout of the text; at one point in this text the browser was wrapping text in a way that made it look unbalanced within the circle, which is why you see the hard space there to force it wrap in a different way.
The CSS (for desktop screen widths) is:
#usrSiteNameDiv {
position : absolute;
border : 4px solid blue;
border-radius: 6.2em;
box-shadow : 5px 0 15px;
height : 12em;
width : 12em;
background : #99ffff;
top : 0;
left : 3em;
z-index : 2;
}
#gpHeader #gpSiteName {
position : absolute;
background : transparent;
font-size : 200%;
width : 5em;
top : 1.2em;
left : 1.5em; /* half the div width cos font in this div is twice the size */
text-align : center;
padding-left: 0.6em;
z-index : 2;
}
#usrSiteSloganDiv {
position : absolute;
bottom : 0;
left : 13.5em;
border : 4px solid #0033cc;
border-radius: 5.17em;
box-shadow : -5px -2px 2px 0px darkblue;
height : 10em;
width : 10em;
background : #99ffff;
}
#gpHeader #gpSiteSlogan {
position : absolute;
bottom : 1.7em;
left : 13.5em;
width : 9em;
background : transparent;
text-align : center;
padding-left: 1em;
font-size : 100%;
}
There wasn't much to do for the responsive part of it, except for mobiles I moved the logo to the left edge, and the slogan is taken out of the circle and just displayed in a line under the logo:
#media all and (max-width: 27em)
{
#usrSiteNameDiv,
#gpHeader #gpSiteName {
left : 0;
}
#usrSiteSloganDiv {
display : none;
}
#gpHeader #gpSiteSlogan {
bottom : 0;
left : 0;
width : 90%;
}
but since we are dealing with text, using em units for the breakpoints ensures it behaves correctly whatever text size the user is using in their browser.
I think that's everything. I hope this will give you enough info to do your design.
Im trying to change the the height of my container from 527px (Which is the height of the background for the desktop) to make the background image hidden and make background color stretch to the bottom of the div when on mobile. The clearfix is handled from bootstrap. There are several floated divs inside of my .partbackdrop class that are not show because they are too long. No matter what I change the #PartCarContainer on the #media, besides setting it to a fixed value, it will not adjust accordingly and stretch the background to the div.
Link Removed. Problem Solved. Setting height to auto for all the divs inside the container.
CSS
#PartCarContainer { background-color: #FFFFFF; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.25); box-shadow: 0 2px 10px rgba(0,0,0,.25); border-radius: 3px; overflow: visible; }
.partbackdrop { background-image: url(../../_common/img/backdrop.jpg); background-position: top center; height: 527px; }
#media (max-width: 767px) {
#PartCarContainer { height: auto; }
.partbackdrop { background-image: none; }
}
HTML
<div id="PartCarContainer">
<div class="partbackdrop">
Content
<div class="clearfix"></div>
</div>
</div>
Edit: It may be a floating problem because of the floats for the page.
I also believe the footer may be suffering from the same problem. If you shrink the window down to below 767px you will see the red background which is my problem.
You need a height:auto on .partbackdrop and on .partDivMain
.partbackdrop, .partDivMain { height:auto; }
Is there a way to create a box-shadow that radiates in a circle from a rectangular div element? So like a regular shadow, except rounded.
Strictly speaking - no. The box-shadow is tied to the shape of the object it's assigned to.
That said - assuming your code allows for nested div elements - you can effectively do this by styling a wrapping div as a circle with a drop-shadow, and the inner content div with the rectangular element.
.wrapper {
/* Equal width and height create a perfect square */
width: 300px;
height: 300px;
/* Adding a border-radius of 1/2 width or height (same value) */
/* turns that square into a circle */
border-radius: 150px;
/* Apply your box-shadow styles, which inherit the round .wrapper shape */
box-shadow: 0px 0px 200px #444444;
}
.content {
/* Apply .content styles as needed; */
/* will display on top of the round shadow */
background-color: yellow;
}
<div class="wrapper">
<div class="content">Content Here</div>
</div>
Just wondering if its possible to cleanup (less code needed to do the same thing) making this div container. Basically it's just a div with a background image however the top & bottom of the div have rounded graphical corners which is why I have a top, middle, and bottom div inside the container div.
<div class="fbox">
<div class="ftop"></div>
<div class="fmid">
Fullbox Text Goes Here
</div>
<div class="fbot"></div>
</div>
Css:
.fbox {
width: 934px;
margin: 0 auto;
opacity: 0.70;
}
.ftop {
width: 934px;
background:url(../images/cb/full.png) no-repeat 0 -34px;
height: 17px;
margin:0
}
.fmid {
width: 894px;
padding-left: 20px;
padding-right: 20px;
background:url(../images/cb/fullmid.png) repeat-y;
min-height: 50px;
margin:0
}
.fbot {
width: 934px;
background:url(../images/cb/full.png) no-repeat 0 -17px;
height: 17px;
margin:0
}
Outcome:
http://img709.imageshack.us/img709/6681/fbox.jpg
http://www.the-art-of-web.com/css/border-radius/
You can use CSS Border Radius with a single div instead of creating the top and bottom. IE won't recognize this but there are some handy work arounds for that as well.
I will commonly use CSS3 PIE which is an htc behavior for IE. It does a bunch of other stuff like linear gradient background colors etc. All you do is supply the border radius css for each browser and the browser will know which one to use.
http://css3pie.com/
.yourbox {
/* PIE Sample */
border: 1px solid #696;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
behavior: url(/PIE.htc);
}
All you really need is the border radius stuff for other browsers though.
You could use the border-radius CSS property. In Firefox, you would use -moz-border-radius and in WebKit you would use -webkit-border-radius. I generally will use all three. This will round the corners of the box without need for all the extra div's.
Of course, users of IE are S.O.L. but sometimes you have to give a little to take a little, right? :)
<div id="box">Blah blah blah.</div>
#box{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px}
The easiest way would be to use border-radius, but it's not compatible across all browsers. Support is decent. Also, covering all supported browsers requires vendor specific code, which is kind of annoying:
-webkit-border-radius: 4px; /* Vendor code */
-moz-border-radius: 4px; /* Vendor code */
border-radius: 4px; /* CSS 3 Standard */
You can add borders to divs with border-radius applied, and it'll follow the round of the corners as you'd hope.
If you have to use images which is what it sounds like. Create a single image file that has the borders you want and use special css selectors to adjust the background position so your not loading 3 different background images.
.fbox .border {
background: url(bg.png);
}
.border.mid {
background-position: center center;
background-repeat: repeat-y
}
.border.top {
background-position: top left;
background-repeat: no-repeat
}
and so on and so forth
I can't say exactly how you would adjust the bg position because it will depend on the image you use and whether or not your using a constant fixed width. But I highly recommend using only one image and then using an additional selector to just move the bg position.