CSS gradient to produce dotted line - html

I needed to print a textearea content (user input) and I just used css gradient to produce lines below the text. The following css did the trick for me.
.linedText {
color: #000000;
line-height: 24px;
background-color: #ffffff;
background: -webkit-gradient(linear, 2% 2%, 2% 100%, from(#000000), color-stop(1%, #ffffff)) 0 -2px;
background: -webkit-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -moz-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -ms-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: -o-linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
background: linear-gradient(top, #000000 0%, #ffffff 1%) 0 -1px;
-webkit-background-size: 100% 24px;
-moz-background-size: 100% 24px;
-ms-background-size: 100% 24px;
-o-background-size: 100% 24px;
background-size: 100% 24px;
}
<p class="linedText">fdfdfdfdfdfdf<br>dfdfd<br>fdf<br>df</p>
And it generates like following:
Now I need to change the style to dotted. Can anyone do it for me please? I tried it for sometimes, but no luck, so thought of SO for a quick response.
Thanks.


This is an example of how you can achieve what you're trying.
It's just a matter of using two linear gradients with rgba colors = transparency and make them overlap to create a pattern to be repeated.
It's not cross browser (webkit only). Just a snippet to get you started.
background-image:
-webkit-linear-gradient(right, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%,rgba(255,255,255,0) 100%),
-webkit-linear-gradient(bottom, rgba(128,128,128,1) 0%, rgba(128,128,128,0) 8%, rgba(128,128,128,0) 100%);
background-size: 12px 24px;

Related

Change the flow of colours in a CSS gradient

I use a <div class="menu"></div> and I set a background color with a gradient.
It floats from red in the top to white in the Bottom. Here is my .css code:
.menu {
background-color: #FFF;
background-image: -webkit-gradient(linear, left top, left bottom, from(#791014), to(#FFF));
background-image: -webkit-linear-gradient(top, #791014, #FFF);
background-image: -moz-linear-gradient(top, #791014, #FFF);
background-image: -ms-linear-gradient(top, #791014, #FFF);
background-image: -o-linear-gradient(top, #791014, #FFF);
background-image: linear-gradient(top, #791014, #FFF);
clear: both;
}
I like the starting and end color. My question is, if there is a way that I can change how it flows from red (top) to white (bottom)
For example that it switches very much earlier to white, so that I have the dark red at the beginning of the top but in the middle it is already much more white.
In other words, I want to change how fast it transitions from red to white.

If you want the transition between the colors to happen quicker than normal , just change the point by where the transition should be fully completed. When just two colors are given without any color-stop percentage then the first color starts at 0% and the in between colors are calculated such that second color is reached at 100% mark (100% = container's height by default or background-size in Y-axis if specified). Instead of that give a lower value for the white color. In the below snippet, I have given it as 60% and so the background reaches white color by the time it reaches 60% of the container's height.
Note:
100% = Container's height (default) or background-size in Y-axis (if it is specified) for a vertical gradient.
100% = Container's width (default) or background-size in X-axis (if it is specified) for horizontal gradient.
div {
float: left;
height: 100px;
width: 200px;
line-height: 100px;
text-align: center;
margin-right: 5px;
}
.menu-60 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 60%);
background-image: linear-gradient(top, #791014 0%, #FFF 60%);
}
.menu-40 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 40%);
background-image: linear-gradient(top, #791014 0%, #FFF 40%);
}
.menu-80 {
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -moz-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -ms-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: -o-linear-gradient(top, #791014 0%, #FFF 80%);
background-image: linear-gradient(top, #791014 0%, #FFF 80%);
}
br {
clear: both;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<h3>Red to White at 60%</h3>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<div class='menu-60'>Text</div>
<br/>
<h3>Red to White at 40%</h3>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<div class='menu-40'>Text</div>
<br/>
<h3>Red to White at 80%</h3>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>
<div class='menu-80'>Text</div>

You can use colour stops to achieve this like
background: -moz-linear-gradient(top, #791014 0%, #ffffff 28%);
background: -webkit-linear-gradient(top, #791014 0%,#ffffff 28%);
background: linear-gradient(to bottom, #791014 0%,#ffffff 28%);
You could use a tool like http://www.colorzilla.com/gradient-editor/ to easily tweak this visually and have the code generated for you.
http://colorzilla.com/gradient-editor/#791014+0,ffffff+28

Prevent scrolling

I have this div, and i need it to be fixed, but i can't use position fixed (the site goes to the left when i push a button, and if the div it's fixed, t will stay in the same spot)... How can i do it?
#baar{
height: 56px;
width: 100%;
background: linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%);
background: -moz-linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%);
background: -webkit-linear-gradient(top, #e3e3e3 0%, #f9f9f9 100%);
background-image: -ms-linear-gradient(top left, #e3e3e3 0%, #f9f9f9 100%);
background-image: -o-linear-gradient(top left, #e3e3e3 0%, #f9f9f9 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #f9f9f9), color-stop(1, #e3e3e3));
background-image: linear-gradient(to bottom right, #e3e3e3 0%, #f9f9f9 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
position: relative;
margin-top: 16px;
left: 0;
text-align: center;
}
I've already tried overflow: hidden...
Thanks

Try this,
position: absolute;
and check if that works, also maybe add a float parameter.
Have a look at this documentation/syntax of style sheets on w3schools, it can be helpful if you forget a couple things now and again.
-http://www.w3schools.com/css/css_syntax.asp

CSS Square Div with an Inward Oval Shape

I am trying to create a div in css with an inward oval shape to it like this.
At the moment, I have a shape that is outward instead of inward (JS Fiddle Link).
.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
Any ideas on how to go about this?

Have a look at my example fiddle.
I used a pseudo-element and some elliptical border-radius coupled with an inset box-shadow.
div {
position:relative;
width: 200px;height: 100px;
background: #CC0000;
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
div:after {
position:absolute;content:"";
width: 100%;height: 95%;
background: #222;
box-shadow:inset 10px -10px 5px -10px #000;
border-radius: 0 0 0 200px / 100px;
}
With a little more effort, one could probably get closer to your result, but this might be a good starting point.

I have created this fiddle for you. Here is the code:
HTML
<div class="container">
<div class="shape"></div>
</div>
CSS
.container {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
background-image: -webkit-gradient( linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000) );
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
}
.shape {
width: 100px;
height: 50px;
border: none;
background: #000000;
border-radius: 0 0 0 90px;
-moz-border-radius: 0 0 0 90px;
-webkit-border-radius: 0 0 0 90px;
}

If the part of the graphic that "isn't there" doesn't have to be actually transparent, then you can just make a regular rectangle, and build a curved shape that will sit on top of the rectangle and has the same color as the background.
http://jsfiddle.net/ub8fM/1/
.shape {
float: left;
width: 100px;
height: 50px;
border: none;
background: #CC0000;
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #520C0C), color-stop(1, #CC0000));
background-image: -o-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -moz-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -webkit-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: -ms-linear-gradient(right bottom, #520C0C 0%, #CC0000 100%);
background-image: linear-gradient(to right bottom, #520C0C 0%, #CC0000 100%);
position:relative;
}
.shape:before {
border-radius: 0 90px 0 0;
-moz-border-radius: 0 90px 0 0;
-webkit-border-radius: 0 90px 0 0;
content:'';
position:absolute;
top:0;
left:0;
background:white;
width:100%;
height:100%;
}
Having the shadow would a bit harder and I have no solution for that yet.
Also jsfiddle has a tidy up button that's super useful.

How can I create this gradient using CSS3?

I've asked the question before one day. And someone give me a link too. But, I can't write the proper code. I need a CSS for this background image:
In this online generator, I've tried, but I can't generate the almost left pure/solid portion of white background color:
Can you please, help me for it.
HTML Codes:
<div id="banner" class="outer">
<div class="inner"></div>
</div>
CSS code:
.outer {
width: 100%;
float: left;
}
.inner {
width: 978px;
margin: 0 auto;
text-align: left;
position: relative;
}
#banner {
display: block;
float: left;
margin: 2px 0 0 0;
padding: 12px 0 0 0;
height: 290px;
background: rgb(208,208,208); /* Old browsers */
background: -moz-linear-gradient(left, rgba(208,208,208,1) 0%, rgba(202,202,202,1) 1%, rgba(202,202,202,1) 2%, rgba(223,223,223,1) 9%, rgba(225,225,225,1) 12%, rgba(228,228,228,1) 13%, rgba(228,228,228,1) 53%, rgba(207,207,207,1) 65%, rgba(207,207,207,1) 68%, rgba(198,198,198,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(208,208,208,1)), color-stop(1%,rgba(202,202,202,1)), color-stop(2%,rgba(202,202,202,1)), color-stop(9%,rgba(223,223,223,1)), color-stop(12%,rgba(225,225,225,1)), color-stop(13%,rgba(228,228,228,1)), color-stop(53%,rgba(228,228,228,1)), color-stop(65%,rgba(207,207,207,1)), color-stop(68%,rgba(207,207,207,1)), color-stop(100%,rgba(198,198,198,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(208,208,208,1) 0%,rgba(202,202,202,1) 1%,rgba(202,202,202,1) 2%,rgba(223,223,223,1) 9%,rgba(225,225,225,1) 12%,rgba(228,228,228,1) 13%,rgba(228,228,228,1) 53%,rgba(207,207,207,1) 65%,rgba(207,207,207,1) 68%,rgba(198,198,198,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0d0d0', endColorstr='#c6c6c6',GradientType=1 ); /* IE6-9 */
}

That generator isn't working because that's not a single gradient; it's two. There's a horizontal gradient on the bottom and a vertical gradient atop that. You can use multiple backgrounds for that. This is what I came up with:
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent 20%, transparent 97%, rgba(0, 0, 0, 0.2)), linear-gradient(to right, #e2e2e2, #fff 40%, #cbcbcb);
As you can see, there's a comma between the linear gradients, which means to composite the first one atop the second one. You can also see I'm using rgba and transparent on the top one so parts show through to the bottom gradient.
Take a look.

This is pretty close to your image. It uses a radial gradient and an inset shadow.
http://jsfiddle.net/daCrosby/eZN6Y/
/* Inner Shadow */
-webkit-box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
box-shadow: inset 0px 5px 20px 5px rgba(0, 0, 0, .1);
/* Gradient */
background: #ffffff;
background: -moz-radial-gradient(40% 20%, ellipse cover, #ffffff 25%, #cccccc 60%);
background: -webkit-gradient(radial, 40% 20%, 0px, 40% 20%, 100%, color-stop(25%,#ffffff), color-stop(600%,#cccccc));
background: -webkit-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -o-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: -ms-radial-gradient(40% 20%, ellipse cover, #ffffff 25%,#cccccc 60%);
background: radial-gradient(ellipse at 40% 20%, #ffffff 25%,#cccccc 60%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#cccccc',GradientType=1 );

-webkit-linear-gradient Not working in Dreamweaver CS6

I've tried multiple times to apply the following piece of code in a CSS document:
display: block;
width: 500px;
margin: 500px auto;
padding: 15px;
text-align: center;
border: 4px solid blue;
background: -webkit-linear-gradient(top,black,white);
outline: 7px solid red;
Everything appears correctly, except the gradient. I have CS6 Live View turned on, and it still refuses to appear. All I get in my box is a white background, as opposed to the black to white gradient. However, when I type the same line of code into the trial of Coda 2 I downloaded, it works perfectly. Is there anything I can do to resolve the issue?

Try this:
background-image: linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -o-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -moz-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -webkit-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -ms-linear-gradient(top, rgb(0,0,0) 0%, rgb(255,255,255) 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(0,0,0)),
color-stop(1, rgb(255,255,255))
);
from : http://gradients.glrzad.com/