Below is some css that is used to create a radial gradient pattern.
My question: Is it possible to add opacity to the colors giving them a ghost like effect? Can one use RGBa instead of Purple??
I tried the above but couldn't get it to work as expected
/* Note the RADIAL */
background: repeating-radial-gradient(
circle,
purple,
purple 10px,
#4b026f 10px,
#4b026f 20px
);
Many thanks,
P
You can use RGBa values within repeating radial gradients but you need to make sure that both the start point and end point are set.
Try changing the background colour in .bg and see the gradient colours change.
.bg {
background: red;
height: 500px;
width: 500px;
}
.gradient {
width: 500px;
height: 500px;
background: repeating-radial-gradient(circle, rgba(128,0,128, 0.5), rgba(128,0,128, 0.5) 10px, rgba(75, 2, 111, 0.5) 10px, rgba(75, 2, 111, 0.5) 20px);
}
<div class="bg">
<div class="gradient"></div>
</div>
The following lines can also be used to enable opacity for a div. You can use it in most cases.
.div_element{
opacity : 0.9; /*Value can be changed to increase or decrease opacity level*/
filter : alpha(opacity=90);
}
Related
I want to create a legend using html, css which contains change of color gradient from green to yellow to red. I have tried using linear gradient property of css. However, what I got so far is given below:
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
}
<div id="color_range"></div>
My code for color gradient
I need a figure like this:
How can I make a legend like above?
Simply change: background: linear-gradient(to top, #DAECB8 0%, #E33127 100%);
To: background: linear-gradient(red,yellow,green);
You can also change it to: linear-gradient(to top, green,yellow,red); but I don't think that to top is necessary
#color_range {
height: 280px;
width: 40px;
background: linear-gradient(red,yellow,green);
}
<div id="color_range"></div>
To understand how linear-gradient works in CSS please read: CSS Gradients
Also take a look at this page that can be helpful when using CSS gradients: https://www.colorzilla.com/gradient-editor/
You can try this.
#color_range{
height:280px;
width:40px
background:linear-gradient(red,yellow,green);
}
You can also use the color codes for these colors .
I am reading the book: CSS Secrets: Better Solutions to Everyday Web Design Problems. And encountered this part where the color setting css can work for every potential background colors. The css is as follows:
.button {
padding: .3em .8em;
border: 1px solid rgba(0,0,0,.1);
background: #58a linear-gradient(hsla(0, 0%, 100%, .2), transparent);
border-radius: .2em;
box-shadow: 0 .05em .25em rgba(0, 0, 0, .5);
color: white;
text-shadow: 0 -.05em .05em rgba(0, 0, 0, .5);
font-size: 50px;
line-height: 1.5;
width: 2.5em;
}
.greenButton {
background-color: #6b0;
}
.redButton {
background-color: #c00;
}
The Jsfiddle link: https://jsfiddle.net/mr7kwxsm/. This does work. But I don't know how... How does the background color pass as a parameter to hsla and rgba color settings? They seem to be fixed values there. And since transparent is the last variable in linear-gradient. I am not sure how this is working. Can someone please help to explain a little bit?
Not sure what you are asking but I think you want to know how does your element get a color of green and red where you've defined another color using hsla() in gradient which is bluish with a gradient overlay.
So it goes like this. Your .button class holds a shorthand property of background where you specify a linear-gradient which is nothing but a background-image and you also specify a hex of #58a. If you split this shorthand you will read it like
.button {
background-image: linear-gradient(hsla(0, 0%, 100%, .2), transparent);
background-color: #58a;
}
Now further down you declare couple of more classes with their background-color so when you use .button and .greenButton on the same element, browser overrides the background-color of .button with .greenButton and that's how you get different colors using a common .button class and you override them by defining other classes.
.greenButton {
background-color: #6b0; /* Overrides your #58a when you call
this class with .button */
}
Order in your CSS does matter. If you move the declaration
of .greenButton and .redButton above .button, your buttons will
always be of default color which is bluish.
Demo
After you commented, you asked that why your borders adapt the colors, so the thing is that you use rgba(0,0,0,.1) for your border which is equivalent to a hex of #000 with an opacity i.e alpha of 0.1. Now since the your borders are opaque, you can see your background-color being rendered behind that.
Now I can explain you how borders work but I think it's not in the scope of this question.
The class .button makes use of the property background to set various properties (colour and transparent gradient). In the classes for .greenButton and .redButton you only overwrite the background-color element. Therefore, all properties that are not part of the background-color element remain intact.
I wish to create a white circle with fuzzy edges contained within a transparent div by using css gradients.
With the z-index higher than the body and absolute positioning I should be able to move this over any part of the page and "white-out" everything beneath the circle.
I have tried my favorite gradient generators, but they haven't worked.
<div id="circle"></div>
css
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
Try using http://www.colorzilla.com/gradient-editor/.
Here's one I made using their tool: (Set the orientation to radial)
http://www.colorzilla.com/gradient-editor/#ffffff+24,ffffff+59&1+31,0+34;Custom
To make the edges more fuzzy, drag the second opacity stop further from the white - and vice versa.
try white background with box-shadow's inset property to create fuzzy edges. Although I don't get what fuzzy means to you. If you have a specific color in mind for the edges, I might be able to give you the code.
Used the gradient suggested by George Reith.
CSS
#white-circle {
background: radial-gradient(ellipse at center center , #FFFFFF 24%, #FFFFFF 31%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0) 71%) repeat scroll 0 0 transparent;
height: 100px;
left: 150px;
position: absolute;
top: 0;
width: 100px;
z-index: 1;
}
Here is the outcome: http://jsbin.com/avipih/1
I guess that radial gradient is an overkill for such purpose. Here's much simplier solution with better browser support: http://cdpn.io/yrJji
Ive tried to use the rgba() to define a div's background color, but instead of changing the opacity, the fourth value changes brightness (apparently), and rendering the rounded borders black. Here is my CSS, really simple stuff:
#content {
min-height: 200px;
padding: 25px;
border-radius: 50px;
background-color: rgba(169, 245, 208, 0.4);
}
And here is a picture of this issue in both Firefox and Chrome:
Finally, the URL of the site: http://lksonorizacao.com.br/newsite/
The #container parent has a background:#000 set on it. #content’s rounded corners are just revealing that black. rgba() does work the way you think it should.
When you go to the page http://m.google.com using Mobile Safari, you will see the beautiful bar on the top of the page.
I wanna draw some trapeziums (US: trapezoids) like that, but I don't know how. Should I use css3 3d transform? If you have a good method to achieve it please tell me.
As this is quite old now, I feel it could use with some new updated answers with some new technologies.
CSS Transform Perspective
.trapezoid {
width: 200px;
height: 200px;
background: red;
transform: perspective(10px) rotateX(1deg);
margin: 50px;
}
<div class="trapezoid"></div>
SVG
<svg viewBox="0 0 20 20" width="20%">
<path d="M3,0 L17,0 L20,20 L0,20z" fill="red" />
</svg>
Canvas
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(30, 0);
ctx.lineTo(170, 0);
ctx.lineTo(200, 200);
ctx.lineTo(0, 200);
ctx.fillStyle = "#FF0000";
ctx.fill();
<canvas id="myCanvas" width="200" height="200"></canvas>
You can use some CSS like this:
#trapezoid {
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0;
width: 100px;
}
<div id="trapezoid"></div>
It is really cool to make all this shapes, Take a look to more nice shapes at:
http://css-tricks.com/examples/ShapesOfCSS/
EDIT:
This css is applied to a DIV element
Simple way
To draw any shape, you can use the CSS clip-path property like below.
You can use free online editors to generate this code (ex: https://bennettfeely.com/clippy/)
.trapezoid {
clip-path: polygon(0 0, 100% 0, 84% 41%, 16% 41%);
}
With reusable code
If you want it more adaptative, you can define a Sass mixin like :
#mixin trapezoid ($top-width, $bottom-width, $height) {
$width: max($top-width, $bottom-width);
$half-width-diff: abs($top-width - $bottom-width) / 2;
$top-left-x: 0;
$top-right-x: 0;
$bottom-left-x: 0;
$bottom-right-x: 0;
#if ($top-width > $bottom-width) {
$top-left-x: 0;
$top-right-x: $top-width;
$bottom-left-x: $half-width-diff;
$bottom-right-x: $top-width - $half-width-diff;
} #else {
$top-left-x: $half-width-diff;
$top-right-x: $bottom-width - $half-width-diff;
$bottom-left-x: 0;
$bottom-right-x: $bottom-width;
}
clip-path: polygon($top-left-x 0, $top-right-x 0, $bottom-right-x $height, $bottom-left-x $height);
width: $width;
height: $height;
}
And then use it for the desired element like this (here parameters are $top-width, $bottom-width, $height) :
.my-div {
#include trapezoid(8rem, 6rem, 2rem);
}
This is an old question... but I want to add a method that has not been mentioned. It is possible to draw triangles with gradients of half color half transparent, and then it is possible to build a trapezoid from 3 gradient shapes. Here is an example code, the 3 blocks drawed in different colors for better understanding:
#example {
width: 250px;
height: 100px;
background-image:
linear-gradient(to top left, red 0 50%, transparent 50% 100%),
linear-gradient(to top right, green 0 50%, transparent 50% 100%),
linear-gradient(blue 0 100%);
background-size:
20% 100%, 20% 100%, 60% 100%;
background-position:
left top, right top, center top;
background-repeat: no-repeat;
}
<div id="example"></div>
You have a few options available to you. You can just plain use an image, draw something with svg or distort a regular div with css transforms. An image would be easiest, and would work across all browsers. Drawing in svg is a bit more complex and is not guaranteed to work across the board.
Using css transforms on the other hand would mean you'd have to have your shape divs in the background, then layer the actual text over them in another element to that the text isn't skewed as well. Again, browser support isn't guaranteed.