I'm on my first approach with photoshop patterns.I'm buildin a webpage where I want to use my pattern to give a nice effect to my webpage background.
The pattern I found is 120x120 px
If I was done here I should use this css:
background-imag:url(mypattern.jpg);
background-repeat:repeat;
But Im not done.Id like to **add to my page's background a linear gradient(dir=top/down col=light-blue/green) with the pattern fill layer on top of it, with blending mode=darken **.
This is the final effect:
I come to the point.
QUESTION:
Combining linear vertical-gradient effect and my 120x120 pattern is it possible to find a pattern that I could use to repeat itself endlessly both vertical and horizontal??which is a common solution in this case?
Hope It's clear
thanks
Luca
or you can use background gradinent css3
body { background: url('pattern.jpg') repeat;}
#container {
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(0,0,0,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(0,0,0,0) 100%);
}
to make it work in IE lte 7 add:
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FFFFFFFF', EndColorStr='#00FFFFFF')
color is provided in #aarrggbb format, where aa=alpha(transparency), rest like normal hex color.
Apply
html{
background: url('mypattern.jpg') repeat;
}
body{
background: url('gradient.png') repeat-x;
width:100%;
height:100%;
}
where gradient.png is your white gradient which becomes transparent to it's bottom.
Dis will work, bg pattern with linear or radial gradient:
background-image: url(images/pattern.png), -webkit-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -moz-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -ms-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), -o-radial-gradient(30% 40%, rgb(20,150,224), rgb(0,0,0));
background-image: url(images/pattern.png), radial-gradient(circle at 30% 40%, rgb(20,150,224), rgb(0,0,0));
Related
is it possible to colour only half a div white from the left and the other side green? I want to do this on the 19th date in this graphic
td.specialDate:first-of-type {
background-image: linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
background-image: -webkit-linear-gradient(left, lightgreen, lightgreen 50%, transparent 50%, transparent 100%);
}
try something like this:
background: green;
background: -moz-linear-gradient(left, green 0%, white 50%);
background: -webkit-linear-gradient(left, green 0%, white 50%);
background: linear-gradient(to right, green 0%, white 50%);
Here a link to a code sample on CodePen
You can go crazy with gradients on this nice website
EDIT
If you want to color exactly half of the div, w/o the shade/gradient, use this code:
background: green;
background: -moz-linear-gradient(left, green 50%, white 50%);
background: -webkit-linear-gradient(left, green 50%, white 50%);
background: linear-gradient(to right, green 50%, white 50%);
if you want a diagonal from bottom left to top right, use this code:
background: green;
background: -moz-linear-gradient(45deg, green 50%, white 50%);
background: -webkit-linear-gradient(45deg, green 50%, white 50%);
background: linear-gradient(45deg, green 50%, white 50%);
Check the linked Codepen sample for the updated code sample.
Yes, and you're not too far off with the gradient:
html, body {
width:100%;
height:100%;
}
div {
width:100%;
height:100%;
}
div {
background: linear-gradient(to left, lightgreen 50%, transparent 50%);
}
<div>
</div>
And here's a Fiddle as well.
Check this code.
background: -moz-linear-gradient(left, #ffffff 50%, #0f0 50%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #ffffff 50%,#0f0 50%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #ffffff 50%,#0f0 50%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
JSFIDDLE
Use this in CSS:
div {
height: 100px;
background-color: red;
background-image:
linear-gradient(
to right,
red,
red 50%,
green 50%,
green 100%
);
}
Yes it is possible.
Here it is . You can copy the code by clicking "Copy Text" below. It's too long to post here.
I hope it helps.
If I have the following CSS property for my body:
body {
background-color: red;
background-image: linear-gradient(red, orange);
}
Then the gradient appears on my web page but it does not take up the full screen size (I have a big monitor). It appears as below: Is this a issue with the footer? I do not have a footer currently.
Got the same problem but only this one is working, please add this style to your css
background-attachment: fixed;
The background-attachment property sets whether a background image scrolls with the rest of the page, or is fixed. There are three values: scroll, fixed, and local. Works best with gradient background.
Check out the doc here
Try this DEMO
body, html {
height: 100%;
width: 100%;
}
body {
background: rgba(231,56,39,1);
background: -moz-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(231,56,39,1)), color-stop(27%, rgba(231,56,39,1)), color-stop(100%, rgba(255,166,0,1)));
background: -webkit-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -o-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: -ms-linear-gradient(top, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
background: linear-gradient(to bottom, rgba(231,56,39,1) 0%, rgba(231,56,39,1) 27%, rgba(255,166,0,1) 100%);
}
The answer was actually the margin property.
body, html {
height: 100%;
width: 100%;
margin: 0;
}
First, this is for the boxed part of a of a wordpress theme.
what i want to do is to make the top of the background transparent of 300px and the rest a #f2f2f2.
check this example:
background: linear-gradient(to top, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
i want it in pixels and not percentage
After some research and editing I was able to get that sharp change in color.
Here is the answer :
background: -webkit-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: -o-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: -moz-linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
background: linear-gradient(top, transparent 0px,transparent 300px,#f2f2f2 300px,#f2f2f2 100%);
I have to apply gradient to button with following things.
For normal state of button, I want to use
Top gradient from #0069A6 to #0078C0
Bottom gradient from #005F96 to #004085
For Hover state of button, I want to use
Top gradient from #02356A to #024183
Bottom gradient from #002147 to #01152D
For on click state of button, I want to use
Top gradient from #004085 to #005F96
Bottom gradient from #0078C0 to #0069A6
I have tried the following code.
HTML
<button type="button" class="button_color">
Make Payment
CSS
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(to bottom,#005F96 10%,#004085 10%);
background: linear-gradient(to top,#0069A6 10%,#0078C0 10%);
}
Kindly help me get this solved.
You must use pseudo classes.
css for hover state will be writen 'button:hover {desierd css}'.
css for keydown state will be writen 'button:active{desierd css}'.
here is a link that describes the issue
http://www.w3schools.com/css/css_pseudo_classes.asp
hope it helps
You can use css selectors for this:
<style>
.button_color:hover{
background: linear-gradient(#01152D 10%,#0078C0 100%);
}
.button_color:active{
background: linear-gradient(#0000ff 10%,#ffffff 100%);
}
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(#ff002D 10%,#00eeC0 100%);
}
</style>
<button type="button" class="button_color">
Make Payment
</button>
The usage is simple: http://www.w3schools.com/cssref/sel_active.asp, there are other selectors that you can find by googling it. You can also change the color, border, and any property of your class and it will all be automated.
add any changes you want regard to your main class and when the selector activated, your css will be replaced.
please change the colors yourself, this is just a demo for how to do your work. You also don't need to include to top, etc. You have to play with the percentages. and that means the start of the color.
In your code, you set both of the start and end to 10% which it is wrong for a two color gradient.
For example, for 3 color gradient, one may use this: (red 10%, green 50%, blue 100%)
Take a look to the CSS-gradient-generator.
I don't know how you imagined it, so I created the gradients with hard breaks for you:
.button_color{
height:40px;
border-radius:10px;
color:white;
background: #0069a6;
background: -moz-linear-gradient(top, #0069a6 0%, #1e5799 50%, #0078c0 50%, #0078c0 51%, #005f96 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0069a6), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(51%,#0078c0), color-stop(100%,#005f96));
background: -webkit-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -o-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: -ms-linear-gradient(top, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
background: linear-gradient(to bottom, #0069a6 0%,#1e5799 50%,#0078c0 50%,#0078c0 51%,#005f96 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0069a6', endColorstr='#005f96',GradientType=0 );
}
.button_color:hover{
background: #02356a;
background: -moz-linear-gradient(top, #02356a 0%, #1e5799 50%, #0078c0 50%, #0078c0 50%, #01152d 51%, #002147 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#02356a), color-stop(50%,#1e5799), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#01152d), color-stop(100%,#002147));
background: -webkit-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -o-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: -ms-linear-gradient(top, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
background: linear-gradient(to bottom, #02356a 0%,#1e5799 50%,#0078c0 50%,#0078c0 50%,#01152d 51%,#002147 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#02356a', endColorstr='#002147',GradientType=0 );
}
.button_color:active{
background: #004085;
background: -moz-linear-gradient(top, #004085 0%, #005f96 50%, #0078c0 50%, #0078c0 50%, #0069a6 51%, #0078c0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004085), color-stop(50%,#005f96), color-stop(50%,#0078c0), color-stop(50%,#0078c0), color-stop(51%,#0069a6), color-stop(100%,#0078c0));
background: -webkit-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -o-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: -ms-linear-gradient(top, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
background: linear-gradient(to bottom, #004085 0%,#005f96 50%,#0078c0 50%,#0078c0 50%,#0069a6 51%,#0078c0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004085', endColorstr='#0078c0',GradientType=0 );
}
If this is not what you expected, try it yourself with the gradient generator.
You may try this one:
background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);
.button_color{
height:40px;
border-radius:10px;
color:white;
background: linear-gradient(#0069A6,#0078C0,#005F96,#004085);
}
<button type="button" class="button_color">
Make Payment
I don't want to use an image for this. I want to create a line which from transparent towards solid with css. Can I? with css3 or html5 as like this;
Like this: http://codepen.io/richbradshaw/pen/uexaG
.blurred-line {
height:30px;
width:600px;
margin:0 auto;
-moz-background-image: linear-gradient(to right, transparent 0%, black 100%);
background-image: linear-gradient(to right, transparent 0%, black 100%);
border-radius:15px;
-webkit-filter:blur(1px);
}
Which renders like:
Despite what most people seem to think, that gradient syntax is the real syntax, and works in Firefox 10+, Chrome 26+, IE10+ and Safari 6 (or 7?)+.
Including all the ancient gradient stuff is a waste of time, unless you are planning to support browsers that don't exist (e.g. Chrome 10, Firefox 3.6).
I suggest you to use a horizontal linear gradient with border radius, something like:
border-radius:50px;
background:linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
See this jsfiddle or the snippet below for more details.
.rounded {
height:50px;
width:80%;
border-radius:50px;
background: -webkit-gradient(linear, 100% 0, 0 0, from(rgba(0,0,0,0)), to(rgba(0,0,0,1)));
background: -webkit-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -moz-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: -o-linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
}
<div class="rounded"></div>
There is a gradient generator that i like a lot since it gives crossBrowser solution called "Ultimate CSS Gradient Generator".
Use rgba format
/* webkit example */
background-image: -webkit-gradient(
linear, left top, left bottom, from(rgba(50,50,50,0.8)),
to(rgba(80,80,80,0.2)), color-stop(.5,#333333)
)
An example: http://nicolahibbert.com/css3-alpha-transparent-gradients/
Duplicate: CSS3 Transparency + Gradient
This tool might be helpful too: http://www.colorzilla.com/gradient-editor/
As you said "from transparent towards solid", this should be what you want:
HTML
<div class="container">
<div class="gradient">
</div>
</div>
CSS
div.container {
width: 500px;
height: 30px;
/*background-color: #791;*/ /*uncomment this property to see the transparency effect*/
padding: 10px;
}
div.gradient {
width: 100%;
height: 100%;
background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,1)); /* use vendor specific property if the standard one does not work */
border-radius: 25px;
}
You can do this with CSS3, and if you want it to look just like the image you provided, you can use some transparency and border-radius. I always found this link helpful: