Related
I'm trying to make a shape with four negatively curved corners, and I tried the radial gradients. However, only one of the corners is being applied, and I can't figure out why.
https://jsfiddle.net/xiej/1Lqysaho/1/
#shape2 {
width: 120px;
height: 120px;
position: absolute;
top: 400px;
right: 400px;
background-image:
radial-gradient(circle at 0px 0px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 0px 120px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 120px 0px, #FFF 0px, #FFF 60px, #F00 60px),
radial-gradient(circle at 120px 120px, #FFF 0px, #FFF 60px, #F00 60px);
}
The last color stop of each radial gradient is covering up the rest of the square, think of them layering over each other. I'm not sure that my fix is the best way to get the shape you're looking for, but I think this will make the shape at least! I shortened the stops to end the radial gradient before it would cover any of the other three corners.
https://jsfiddle.net/1Lqysaho/2/
background: #F00;
background-image:
radial-gradient(circle at 0px 0px, #FFF 60px, #f00 1px, transparent 1px),
radial-gradient(circle at 0px 120px, #FFF 60px,#f00 1px, transparent 1px),
radial-gradient(circle at 120px 0px, #FFF 60px,#f00 1px, transparent 1px),
radial-gradient(circle at 120px 120px, #FFF 60px,#f00 1px, transparent 1px);
div.round {
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; c
-moz-background-size: 50% 50%;
-webkit-background-size: 50% 50%;
background-repeat: no-repeat;
}
div {
width: 130px;
height:100px;
margin:15px auto;
padding:13px 15px;
}
<div class="round"></div>
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
}
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 to get exactly this result with CSS3 and HTML5 texhnologies using no images.
here is HTML
<div id="overlay"></div>
<div id="lines"></div>
and CSS
body {
background: #45484d;
z-index:-5;
}
#lines {
background-size: 20px 20px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-4;
}
#overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-3;
}
I kinda get some piece of reuslt on jsfiddle:
http://jsfiddle.net/tt13/BA8Wk/2/
But can't figure out what to do else. Can anyone help me to achieve this result?
http://i.stack.imgur.com/6BrlY.jpg
dabblet: http://dabblet.com/gist/4649123
jsfiddle: http://jsfiddle.net/W4LpR/6/ (try opening the results in a larger window)
HTML
<div id="overlay"></div>
<div id="lines"></div>
<div id="lines2"></div>
CSS
body {
background-image: -ms-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -moz-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -o-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 447, color-stop(0, #636363), color-stop(1, #27282B));
background-image: -webkit-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
background-image: radial-gradient(circle closest-corner at center, #636363 0%, #27282B 100%);
z-index:-5;
}
#lines {
background-size: 20px 20px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-o-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-4;
}
#lines2 {
background-size: 100px 100px;
background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
height:100%;
width:100%;
opacity:0.14;
position:absolute;
top:0;
left:0;
z-index:-3;
}
#overlay {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:-2;
}
My try on this (only -webkit rules (Chrome) for demo):
background-size: 100px 100px;
background-image:
repeating-linear-gradient(0deg, #999, transparent 2px, transparent 20px),
repeating-linear-gradient(0deg, #fff 1px, transparent 2px, transparent 100px),
repeating-linear-gradient(90deg, #999, transparent 2px, transparent 20px),
repeating-linear-gradient(90deg, #fff 1px, transparent 2px, transparent 100px);
(fiddle)
And here's one with added stripes:
background-size:4px 4px;
background-image:
repeating-linear-gradient(45deg, transparent, transparent 1px, #333 2px, transparent 3px);
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