Is it possible to create a textfield like this with just pure CSS?
I'm at this point (SASS Code):
input[type="text"]
:background url(../../img/input_text_bg.png) repeat-x
:border-color light-grey
:width 210px
:height 30px
:-moz-border-radius 4px
:-webkit-border-radius 4px
:margin-top 20px
:margin-left 40px
:color $dark-grey
as you can see i still use a background-image, is it to replace it with some gradient?
Try this CSS for gradient background.
background-image: linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -o-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -moz-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -webkit-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -ms-linear-gradient(top, rgb(240,240,240) 10%, rgb(255,255,255) 58%);
background-image: -webkit-gradient(
linear,
right top,
right bottom,
color-stop(0.1, rgb(240,240,240)),
color-stop(0.58, rgb(255,255,255))
);
You should try Webkits it will allow you to round the border radius and create gradients from a range of colors using basic CSS/CSS3.
You can use CSS3's box-shadow, and inset. e.g
input[type=text] {
box-shadow: inset 2px 2px 2px 2px black;
}
Related
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 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:
I have a problem with a property background-image in the footer tag . I use a double background: the first layer is a stripe pattern , the second gradient generated through property -linear-gradient-. In the section the header and body works fine ( I'm using the same mechanism ). I'm using the bootstrap framework.
My HTML:
<footer class="text-center">Baron ™ New Website Menager Platform</footer>
My CSS code :
footer {
margin-top:20px;
padding-top:20px;
padding-bottom:20px;
background-color:#111111;
background:url(../images/stripe-pattern-footer.png) center repeat, linear-gradient(to top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -webkit-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -moz-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -ms-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -o-linear-gradient(top, #2B2A2B 0%, #111111 100%);
background:url(../images/stripe-pattern-footer.png) center repeat, -khtml-linear-gradient(top, #2B2A2B 0%, #111111 100%);
border: 1px solid #000000;
-moz-box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
-webkit-box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
box-shadow: 0 -3px 4px rgba(0, 0, 0, .70);
}
Please help or provide clarification.
Ok i find solution of this problem - it was wrong url construct.
I think it may be an issue with the footer.png you are using. You may be not including it or have a spelling error when naming it or the path may be incorrect.
I created a jsfiddle with the code you provided and used a css pattern - it works fine.
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAPElEQVQYV2NkQAP/gYARCNDFUQRgirAphitEl0TngxXisg5ZnBGXIpgbYfIYjkb3BNxGbBLYxIgyEaQRAA8KKAWYsZtjAAAAAElFTkSuQmCC) center repeat, linear-gradient(to top, #2B2A2B 0%, #111111 100%);
JSFIDDLE
http://jsfiddle.net/LWDT5/
I'm trying to use multiple gradient in one of my projects. My Objective is to have a fading shadow from the border of a section element.
From different sources this is what I've come up with till now
.section2 {
border-radius: 10px;
border: 2px solid #E1E1E1;
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%), -moz-linear-gradient(left, #E1E1E1 0%, #FFFFFF 5%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left, right bottom, color-stop(0, #E1E1E1), color-stop(.05, #FFFFFF));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(right, #FFFFFF 95%, #E1E1E1 100%), -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
}
But the problem is this is showing only the first gradient, the subsequent once are ignored.
You can see this in action here.
box-shadow is much more appropriate for what you're wanting to do. It's simpler, more predictable and neater than your gradient approach.
All it needs is a single property; play with the values to achieve the nicest result (read up on what they do so you're not playing blindly). This is what I did, which achieves a similar effect to your gradients:
box-shadow: inset 0 0 30px 10px #E1E1E1;
Demo: http://jsfiddle.net/EDcGP/6/
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #FF0000 95%, #E1E1E1 100%);
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #FFFFFF 95%, #E1E1E1 100%);
Tried the above css in firefox and Chrome, both works. Could not try in Safari.
You have to remove the second gradient style. having one gradient will work.
I've almost solved by using opacity along with the background color as given below.
background-image: -moz-linear-gradient(to right, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to left, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to bottom, #E1E1E1 0, rgba(255, 255, 255, 0) 50px), -moz-linear-gradient(to top, #E1E1E1 0, rgba(255, 255, 255, 0) 50px);
A working sample can be found here.
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));