I wanted to make a cool div, so I made this image to get its borders:
The problem is that half of the borders are transparent area, so when I try to fill the empty center of the div with background-color it also paints the outer, transparent area. I'd like the background color not to get past the border.
Here's what I'm talking about:
#charset "utf-8";
/* CSS Document */
#testDiv{
border-image-source:url(https://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
min-height:600px;
width:600px;
}
#body {
height:100%;
width: 100%;
background: #CCC;
position: absolute;
margin: 50px 0 0 0;
}
<div id="testDiv">
</div>
Or see http://jsfiddle.net/6M59T/119/.
How can I solve this? I've thought on putting a slightly smaller div inside this one, but I don't know how to adjust it so it always covers a bit less than its parent. Also, I'd like to keep it as simple as possible. Any ideas?
Maybe i am mistaken, but you can try to play with border-image-outset and margin attribute.
float:left;
margin:50px 20px;
border-image-source:url(http://s9.postimg.org/40j461sf3/Div_Sprite.png);
border-image-slice: 50% 25% 25%;
border-image-repeat:repeat;
border-image-width:auto;
border-image-repeat:round;
background-color: red;
border-image-outset:30px;
http://jsfiddle.net/6M59T/120/
Related
I have a div spanning the whole height of the viewport, while being horizontally center-aligned through use of margins, and would like to center a red square of, say, a 100px by 100px in that div just using CSS. Background-color: red wouldn't work, because that will span the whole div, which will be bigger than 100 pixels. I currently have the following solution:
div {
background-image: linear-gradient(to right, red, red);
background-size: 100px 100px;
background-repeat: no-repeat;
background-position: center;
}
It works, because there's no shift in gradient, but using linear-gradient in this way seems sort of hackish, which makes the solution less useable. Is there any way to generate a purely red square of some size smaller than the div without resorting editing the HTML of the page, or resizing the div with CSS? Preferably, I would also like to avoid scaling up an image of 1 red pixel (I wouldn't easily be able to change the colour).
Thanks for reading!
You could use the :after pseudo selector to add a block with these dimensions. If you position it absolute you can center it using left, top and a transform.
.box {
position: relative;
}
.box:after {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
}
Or see http://codepen.io/ckuijjer/pen/CbduL
try this
html
<body>
<div id="div0">
<div id="div1"></hr>
</div>
</body>
css
#div1 {
width:100px;
height:100px;
background-color:red;
top: 50%;
transform: translateY(50%);
margin-right:auto;
margin-left:auto;
}
#div0{
height:500px;
width:100%;
background:white;
}
http://jsbin.com/huzem/1/edit?html,css,output
In the above site how do i extend the border to the bottom of the page, compared to where it ends now(right at the edge of the content)? Also is there a way to make the border line up on the edge of the right and left sides of the screen without using negative values for margin such as i did by setting margin -right and margin-left to -4%?
You are setting the width to 93%, and then you are overriding that with your -4% thing - so, just don't do the first part. body has a margin of something by default: so get rid of that:
Put a border on your html and body, like - red. and look at what is actually going on. The body only stretches to fit your content... so you need to tell it how big it can be... (100%) then you have to tell the things inside what to do etc... This isn't the complete / perfect answer --- but it should get you closer to your goal.
html, body {
height: 100%; /* remind these guys they can be as tall as the viewport if they want */
}
body{
margin: 0; /* remove default margin */
color: white;
background-color: black; /* white on white is no helpful */
}
#main{
height: 100%;
}
#content{
border: solid white; /* you need a px value */
min-height: 100%;
}
a {
color:white; /* you don't need to specify for every state */
}
I suggest you to set the main div at the height of the window and set a height property to 100% to your content div like this :
#main {
width: 93%;
margin: -2% auto 0% auto;
position: absolute;
top: 0;
bottom: 0;
}
#content {
border: solid white;
margin: 0% -4% 1000% -4%;
height: 100%;
}
The border will now extend to the bottom of the page!
I am trying to make a very simple gray background bar on the page. The bar should be 81 pixels from page top and height of the bar should be 71 pixels.
I can do this with an image file and background-repeat:x. Such as demonstrated here: http://jsfiddle.net/G29vE/ or the code below (image file removed):
body {
width: 100px;
height: 100px;
background-image: url('data:image/png;base64,...');
background-repeat: repeat-x;
margin: 0px;
padding: 0px;
}
But it seems unnecessary to include (or link to) the image file. I wonder - and am asking - if this could be done pure CSS (or CSS3)? I could not find an answer or similar example from Google or SO.
You can use linear-gradient() for the bar color and use background-size to limit its height:
body {
background: linear-gradient(to bottom, #dfe0e1, #dfe0e1) 0 81px / 100% 71px no-repeat #fff;
}
You can just create a div and style it as you want:
HTML
<div class="bar"></div>
CSS
.bar {
width: 100%;
height: 71px;
background: #DDD;
margin-top: 81px;
padding: 0px;
}
Fiddle Demo
Try adding a Div with a z-index.
This div can you give it's own css style
Simply placed a div with id or class..
<div id="topbar"></div>
and placed css code in stylesheet
#topbar { position:absolute; z-index:9; height:71px; top:81px; left:10px; right:10px; background:#ccc; }
this not only float you div as a top bar but also extend to you browser 100%.
I'm sure this is correct behavior for the implementation I have, but I'm wondering if theres an easy way to do what I want to accomplish.
I have a background image that is a 3px x 3px pattern.
I want this pattern to repeat-x the full width (100%) of the element its set in, however I only want it to repeat-y for half of the width of the element its in (50%).
I have this implementation:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
}
which successefully repeats the pattern throughout the entire element. To attempt to achieve the 50% repeat-y height, which is what I want, i tried:
.element {
width: 100%;
background-image: url('/path/to/pattern.png');
background-repeat: repeat;
background-size: 100% 50%;
}
However, the background-size skews the pattern image to 100%/50% height/width instead of keeping the desired repeat effect.
Is there any way to simply accomplish this?
Thanks
Make a graphic 3px wide and really tall with the different background below. Or, though more code, make a 'unit' of three divs: the base is a div with whatever other color/pattern you want that will be the 50% of the y. Next in that div is the background repeating to a fixed height and that one is positioned relative to the top of the base. The last div is just the content. Not as pretty as a simple CSS declaration, but it works across platforms and most browsers, even IE6.
How does your pattern look like? This may fulfill your requirements. Instead of using a background to display the PNG, you now use an img element, and set the width to 100% and the height to 50%. Or use a div to benefit from background:
<div id="element">
<div id="pattern"/>
<div>I'm at the top!<div>
</div>
The rules:
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#element {
position: relative;
min-height: 100%;
}
#element #pattern {
background: url(path/to/pattern.png);
height: 50%;
left: 0px;
position: absolute;
z-index: -1;
top: 0px;
width: 100%;
}
Add another container div
You can create another div inside the container div & set its width to 50% of parent container div. Inside this div, you can fill your pattern.
<div id="container">
<div id="myPattern"></div>
#container{
width:200px;
height:400px;
background-color:black;
}
#myPattern
{
background-color:yellow;
height:50%;
width:100%;
/* fill pattern here */
background-image: url(tt.png);
background-repeat: repeat-x repeat-y;
}
JSFiddle
Have a client request for irregular corners in CSS. Is that even a thing? So far I had experimented with CSS triangles ( http://css-tricks.com/snippets/css/css-triangle/ ) but no bueno.
https://dl.dropbox.com/u/4031469/irreg.png
Thinking I'll probably have to do it with images sadly... unless y'alls know of any way to pull it off.
The main parameters: Needs to be at least flexible in height, preferably flexible in width too, but not required. Current solution: Top capper that extends potentially above the box enough to make the corner effect work on the secondary box... with the lower descender pieces right absolutely aligned pushing below.
My closest attempt so far (uses image for top): https://dl.dropbox.com/u/4031469/fs.html
Stealing from http://nicolasgallagher.com/pure-css-speech-bubbles/
http://jsfiddle.net/aBYHX/
EDIT :- Second attempt. Simpler, less css and on the same side as your example pic.
http://jsfiddle.net/aBYHX/1/
<div class="content">
<p class="triangle-isosceles">This only needs one HTML element.</p>
<p class="irregular-corner"> ---- </p>
</div>
Css:
.content
{
padding: 15px;
}
.triangle-isosceles, .irregular-corner
{
position:relative;
padding:15px;
margin:1em 0 3em;
color:#000;
background:#f3961c;
}
.triangle-isosceles:after {
content:"";
position:absolute;
bottom: 0;
right: 0;
border-width: 25px 50px 0 0;
border-style: solid;
border-color: transparent white;
/* reduce the damage in FF3.0 */
display:block;
}
.irregular-corner:before
{
content:"";
position:absolute;
top: -25px;
right: 0px;
border-width: 25px 50px 0 0;
border-style:solid;
border-color:transparent #f3961c;
/* reduce the damage in FF3.0 */
display:block;
}
Under CSS3, as far as I've researched, the particulars of this look make it not yet possible.
This look has a subtle gradient and inner glow, which we've accomplished using an inset box shadow... that seems to not work with the prior css triangle effects.
CSS Masks look like they might be able to assist in many circumstances, but in circumstances requiring box-shadow: inset, images are the only way to go.
Today I got this working using the -webkit-clip-path property, which has varying browser support.
.entry{
background-color: blue;
width: 500px;
height: 200px;
-webkit-clip-path: polygon(0% 0%, 90% 0%, 100% 40%, 100% 100%, 0 100%);
-webkit-transform: translateY(-30px);
top: 10px;
left: 0;
}
body{
background-color: green;
}
http://codepen.io/randallb/pen/tmlAH
Nora Brown wrote a lovely article on the CSS3 border-image property. It's worth a quick read...
If you're worried about cross-browser support (and you should be), then offer a graceful fallback. Perhaps just having a border with no "crazy corners" would do as a fallback situation, perhaps not.
This method isn't cross-browser, but some find it nice to be "progressive".