Related
I'm trying to add a background to my java scene using a css file. The background I'm trying to achieve should look like this: http://lea.verou.me/css3patterns/#blueprint-grid
All I get in my screen, however, is a blue background with no white lines. This is how I implemented into my css-file:
.root {
-fx-background-color:#269;
-fx-background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
-fx-background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
-fx-background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
}
As you can see, I had to add -fx- to the beginning of every line, however the linear gradients remain invisible.
I don't believe you can use a linear-gradient as a value for -fx-background-image. Instead, layer some -fx-background-colors on top of each other:
.root {
-fx-background-color: #269,
linear-gradient(from 0px 0px to 20px 0px, repeat, rgba(255, 255, 255, 0.3) 0%, transparent 5%, transparent 95%, rgba(255, 255, 255, 0.3) 100% ),
linear-gradient(from 0px 0px to 0px 20px, repeat, rgba(255, 255, 255, 0.3) 0%, transparent 5%, transparent 95%, rgba(255, 255, 255, 0.3) 100% ),
linear-gradient(from 0px 0px to 100px 0px, repeat, white 0%, transparent 1%, transparent 99%, white 100% ),
linear-gradient(from 0px 0px to 0px 100px, repeat, white 0%, transparent 1%, transparent 99%, white 100% );
}
I have a background with grid lines drawn using CSS. You can see it in this fiddle
It looks ok, but the grid is starting with a quarter of a square and I want it to start with a whole square. How to do this?
I have tried using margin-left -50px; but this influences the content in this DIV aswell (which I don't want).
The CSS:
.board {
position: absolute;
margin: 0px;
top: 0px;
left: 0px;
width: 576px;
height: 576px;
background-color: #434343;
background-image: linear-gradient(0deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.05) 26%, transparent 27%, transparent 74%, rgba(255, 255, 255, 0.05) 75%, rgba(255, 255, 255, 0.05) 76%, transparent 77%, transparent);
background-size: 100px 100px;
}
Any ideas on this?
You can add the background-position element to your class:
.board {
background-position: 27px 27px;
}
The first value is the horizontal position and the second value is the vertical. You can also use % instead of px
#page {
background-color:#269;
background-image: linear-gradient(white 2px, transparent 2px),
linear-gradient(90deg, white 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px
}
I have this div that looks like a hr line.
The styles only work in Firefox.
I created a Fiddle : http://jsfiddle.net/vLFN7/
<mydiv> </mydiv>
mydiv {
background-image: -webkit-gradient(linear, left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -ms-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -o-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
border: 0 none;
height: 1px;
margin: 20px 0 40px;
}
Please help.
jsFiddle Demo
Problem is fixed when you use to left
background-image: linear-gradient(to left, transparent,
rgba(0, 0, 0, 0.1), transparent);
Read the linear-gradient - CSS documentation
It is works in all.
div {
background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -moz-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -ms-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: -o-linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
background-image: linear-gradient(left center , transparent, rgba(0, 0, 0, 0.1), transparent);
border: 0 none;
height: 1px;
margin: 20px 0 40px;
}
Hey there I'm struggling with creating multiple colour background with CSS. I tried gradient but it makes shades which I doesn't want. I want to create this with CSS:
Does anyone know how to create this without getting shades that I got when I used gradient.
Here is my html code.
<div id="head">
<h1>Mira's place</h1><br>
<h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
<ul>
<li>Home</li>
<li>Games</li>
<li>Applications</li>
<li>Contact</li>
</ul>
</div>
Try it again with gradients, but with this code:
#head /* or body */
{
-webkit-background-size: 40px 40px;
-moz-background-size: 40px 40px;
background-size: 40px 40px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
-moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
-webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
width: 100%;
border: 1px solid;
color: #fff;
padding: 15px;
position: fixed;
_position: absolute;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
BTW: I got this code from www.red-team-design.com. Here is the link.
Don't know, what you mean with shades. Does the following not look like you wanted to? (Some modifications may be needed, but it shows the way to go)
background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);
Here is the Fiddle.
.element{
border-bottom: 25px solid #2C58DF;
border-top: 25px solid #D71E26;
height: 25px;
width: 150px;
-webkit-transform-origin: top left;
-webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
-moz-transform-origin: top left;
-moz-transform: translateX(165px) translateY(55px) rotate(135deg);
transform: translateX(165px) translateY(55px) rotate(135deg);
transform-origin: left top 0;
}
http://jsfiddle.net/etW25/
I want the corners of an element to essentially be cut off. This element has a solid background whereas it's parent element has an image as it's background. The height of this element is unknown. CSS's border-radius property doesn't help me since it rounds it. I found a jQuery plugin that help but it doesn't account for the background image.
What you want is this: http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/
All in CSS.
div {
background: #c00; /* fallback */
background:
-moz-linear-gradient(45deg, transparent 10px, #c00 10px),
-moz-linear-gradient(135deg, transparent 10px, #c00 10px),
-moz-linear-gradient(225deg, transparent 10px, #c00 10px),
-moz-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-o-linear-gradient(45deg, transparent 10px, #c00 10px),
-o-linear-gradient(135deg, transparent 10px, #c00 10px),
-o-linear-gradient(225deg, transparent 10px, #c00 10px),
-o-linear-gradient(315deg, transparent 10px, #c00 10px);
background:
-webkit-linear-gradient(45deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(135deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(225deg, transparent 10px, #c00 10px),
-webkit-linear-gradient(315deg, transparent 10px, #c00 10px);
}
div.round {
background:
-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-o-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
background:
-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 15px),
-webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 14px, #c00 15px);
}
div, div.round {
background-position: bottom left, bottom right, top right, top left;
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-size: 50% 50%;
background-repeat: no-repeat;
}
/* Ignore the CSS from this point, it's just to make the demo more presentable */
body {
background: #444 url('http://leaverou.me/ft2010/img/darker_wood.jpg') bottom;
font-family: sans-serif;
}
div {
width: 500px;
margin:15px auto;
padding:13px 15px;
color: white;
line-height:1.5;
}
p:first-of-type { margin-top: 0 }
p:last-of-type { margin-bottom: 0}
-= 2017 =-
Here is the updated and upgraded version which works across all evergreen browsers.
https://codepen.io/aternus/pen/mqqXdK
It even allows you to specify a custom background color/image with ease. Just add another background layer (as the last).
/* Demo Styling */
body {
background: #333333;
padding: 2rem;
}
/* CSS */
.container {
padding: 1rem 2rem;
color: #ffffff;
background-color: transparent;
background-image: linear-gradient(180deg, #ffdc00, #ffdc00)
,linear-gradient(225deg, #ffdc00, #ffdc00)
,linear-gradient(0deg, #ffdc00, #ffdc00)
,linear-gradient(90deg, #ffdc00, #ffdc00)
,linear-gradient(135deg, transparent 9px, #ffdc00 10px, #ffdc00 12px, transparent 12px)
;
background-position: top right
,top right
,bottom left
,bottom left
,top left
;
background-size: calc(100% - 15px) 2px
,2px 100%
,100% 2px
,2px calc(100% - 15px)
,15px 15px
;
background-repeat: no-repeat;
}
<div class="container">
Lorem that ipsum, dolor that amet
</div>
Not exactly sure of the question but perhaps you are referring to border-style?
border-style: outset produces beveled edges.
More info: http://www.w3schools.com/css/css_border.asp