have you any idea how to created dotted background like:
https://www.123rf.com/photo_55576363_stock-vector-halftone-seamless-pattern-abstract-background-with-black-dots-.html
only with css code? I don't know how create this shape and shadow effects and google can't help me. :-)
I can only do the basic step like:
.dotted {
padding: 2.25em 1.6875em;
background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, #383e42 1px, #0c0d0e 100%);
-webkit-background-size: 3px 3px;
-moz-background-size: 3px 3px;
background-size: 3px 3px;
}
You can approximate this using drop-shadow filter combined with radial-gradient()
html {
background:#444444;
}
html::before {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
background:radial-gradient(farthest-side,black 70%,transparent 80%) 0 0/30px 30px;
filter:drop-shadow(-2px 2px 2px #fff);
}
And like below to get more closer to your pattern:
html {
background:#494949;
}
html::before,
html::after {
content:"";
position:fixed;
top:0;
left:0;
right:0;
bottom:0;
}
html::before {
--c:radial-gradient(circle 10px at 10px 10px,black 90%,transparent);
background: var(--c) 0 0,var(--c) 20px 25px;
background-size:40px 50px;
filter:drop-shadow(-2px 2px 2px #fff);
}
html::after {
background:radial-gradient(transparent,#040404);
}
Related
I need to create button with gradient border and highlights at corners.
Im try do this with pseudoelements, but i have only 2/4 border sides. Thanks in advance!
.fly--btn {
background: rgba(0, 0, 0, 0.5);
color: #A9A9A9;
margin-top: 12%;
position: relative;
border: none;
padding: 5px 20px;
}
.fly--btn:before,
.fly--btn:after {
content: "";
position: absolute;
bottom: -1px;
left: -1px;
}
.fly--btn:before {
top: -1px;
width: 1px;
background-image: -webkit-gradient(linear, left top, left bottom, from(#101f2d), to(#3263a3));
background-image: -webkit-linear-gradient(#101f2d, #3263a3);
background-image: -o-linear-gradient(#101f2d, #3263a3);
background-image: linear-gradient(#101f2d, #3263a3);
}
.fly--btn:after {
right: -1px;
height: 1px;
background-image: -webkit-gradient(linear, left top, right top, from(#3263a3), to(#101f2d));
background-image: -webkit-linear-gradient(left, #3263a3, #101f2d);
background-image: -o-linear-gradient(left, #3263a3, #101f2d);
background-image: linear-gradient(left, #3263a3, #101f2d);
}
<button type="button" class="fly--btn">
Начать путешествие
</button>
Here is and idea with gradient and multiple background:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(#fff,#fff) top right/10px 2px,
linear-gradient(#fff,#fff) top right/2px 10px,
linear-gradient(#fff,#fff) bottom left/10px 2px,
linear-gradient(#fff,#fff) bottom left/2px 10px,
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
}
body {
background:#222;
}
<div class="box"> some text here </div>
And if you want the shadow in the corner you can try pseudo element and drop-shadow like this:
.box {
display:inline-block;
padding:10px;
color:#fff;
font-size:30px;
background:
linear-gradient(to right,transparent, #3263a3) top/100% 2px,
linear-gradient(to left,transparent, #3263a3) bottom/100% 2px,
linear-gradient(to bottom,transparent, #3263a3) left/2px 100%,
linear-gradient(to top,transparent, #3263a3) right/2px 100%;
background-repeat:no-repeat;
position:relative;
}
.box:before,
.box:after {
content:"";
position:absolute;
width:10px;
height:10px;
border:2px solid #fff;
filter:drop-shadow(0 0 3px);
}
.box:before {
top:0;
right:0;
border-left:none;
border-bottom:none;
}
.box:after {
bottom:0;
left:0;
border-right:none;
border-top:none;
}
body {
background:#222;
}
<div class="box"> some text here </div>
Just started with styling buttons and my desire was to have a background to the left of the button while the text search was to the right of the image.
Heres the code I have so far. And here is how the button is so far
How can I add a small icon to the left of the text? I tried running this code but no luck.
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
.button {
-moz-box-shadow:inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 0px 0px 0px #ffffff;
box-shadow:inset 0px 0px 0px 0px #ffffff;
background:-webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background:linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color:#f9f9f9;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:76px;
border:1px solid #dcdcdc;
display:inline-block;
color:#666666;
font-family:Arial;
font-size:15px;
font-weight:bold;
font-style:normal;
height:66px;
line-height:66px;
width:152px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #ffffff;
}
.button:hover {
background:-webkit-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-moz-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-ms-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:-o-linear-gradient(top, #e9e9e9 5%, #f9f9f9 100%);
background:linear-gradient(to bottom, #e9e9e9 5%, #f9f9f9 100%);
background-color:#e9e9e9;
}
.button:active {
position:relative;
top:1px;
}
<div class="button">Search!</div>
Adding your exact code to the example code output works, so there's something wrong with the way you incorporated the line into your css definitions.
Unfortunately, your example code doesn't include the actual line, but my guess is that you might have put it above the linear-gradient background definitions, which would then override your image. To test if this is the error, put it all the way at the bottom of the .button declaration and see if it's being displayed.
To use multiple background images, you can comma-seperate the individual values, like so:
background-image: url('one.png'), url('two.jpg');
background-position: center center, left top;
Try to add your background image after background linear gradient
To add multiple backgrounds to an element, you need to declare them all in a comma-separated list, like this:
.button {
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0, linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
}
Backgrounds are painted from last to first, so your icon should show up just fine.
If you declare a property multiple times, the browser will really overwrite the previous value, unless the new one is invalid. Also, keep in mind that gradients are considered "images".
Try to give background-size property like this
.button {
-moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
box-shadow: inset 0px 0px 0px 0px #ffffff;
background: -webkit-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f9f9f9 5%, #e9e9e9 100%);
background: linear-gradient(to bottom, #f9f9f9 5%, #e9e9e9 100%);
background-color: #f9f9f9;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topleft: 0px;
border-top-left-radius: 0px;
-webkit-border-top-right-radius: 0px;
-moz-border-radius-topright: 0px;
border-top-right-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
border-bottom-right-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-bottomleft: 0px;
border-bottom-left-radius: 0px;
text-indent: 76px;
border: 1px solid #dcdcdc;
display: inline-block;
color: #666666;
font-family: Arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 66px;
line-height: 66px;
width: 152px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
background: no-repeat url("http://www.veryicon.com/icon/ico/System/Small%20%26%20Flat/beer.ico") 0 0;
background-size: contain;
}
<html>
<body>
<div class="button">Search!</div>
</body>
</html>
I have been trying to apply glow with CSS box-shadow property (tried inset) on hover. So far, I have been able to do this with inset - http://jsfiddle.net/bgGS6 (hover over list item to see the effect).
Test code:
HTML:
<ul>
<li>
home
</li>
</ul>
CSS:
ul {
list-style:none;
}
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
I'm trying to achieve something like this:
I'm wondering if it will be possible to increase glow toward the center and fade it out towards the edges. I assume ultimate solution will be to add a png on hover, but want to find out if this can be achieved with CSS alone.
Update: Added radial gradient to top and it is pretty close to what I need - http://jsfiddle.net/bgGS6/5 Will add rules for cross-browser compatibility as well.
It flickers because of transition, not sure how to fix that. Any suggestions?
You can simply chain your shadows, thus:
box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;
Demo Fiddle
What this does is add an initial inset box shadow with the same colour as the background (in this case just white) to make it look like the element is faded at the edges, before applying your highlighing box shadow- with larger pixel distances defined.
just as a note, you should structure your html like this:
<ul>
<li>
<a>Home</a>
</li>
</ul>
The following is css to create a blue effect, and you can probably customize it to your liking but you can get the basic gist of it:
ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
As a further note, please check out some tutorials on CSS3. There are plenty out there that could help you get a more broad idea of the tools you have to play with to achieve what you need. A good place to start would be Codeacademy.com They have a pretty good tutorial on CSS3
You could add a :before pseudo-element which has a box-shadow;
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
position: relative;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
position: absolute;
width: 10px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
content:' ';
left: 30px;
top: 1px;
box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}
See this fiddle
I have this gradient line:
hr {
margin: 10px 0px;
border: 0;
height: 2px;
background: #a60000;
background-image: -webkit-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -moz-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -ms-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -o-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
}
I want to replace the border-bottom in this css with the same gradient line:
h2{
color: #000000;
padding: 0em;
font-size: 1.5em;
margin: 4px 0 16px 0;
font-weight: bold;
border-bottom: 2px solid #a60000;
}
I have tried using hr:after {, but the background-image will appear at the top of the text not as a line below the text.
I want it to appear each time h2 is used. Such as < h2 >Find Help< /h2 >.
Have you tried ::after?
h2::after{
position:absolute;
top:100%;
left:0px;
content:" ";
width:100%;
height:2px;
background: #a60000;
background-image: -webkit-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -moz-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -ms-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
background-image: -o-linear-gradient(left, #B2B2B2, #a60000, #B2B2B2);
}
also add:
h2{
position:relative;
}
I've created a jsFiddle for you
I am trying to make a pure css div with arrow ( like speech bubble )
I have created a fiddle here http://jsfiddle.net/ozzy/j9Wku/
Basically, I havent used an image in the fiddle but to the left of the div box when you hover over the image the div animates. You can see effect when you hover over the link.
I want to make it look like a speech bubble, but struggling to accomplish this.
Here is image of what I am after.
Any help greatly appreciated. I only need help doing the arrow for the div.
Easiest way I can think of is using before pseudo class to insert "blank space" before your P tag then style it with borders.
p::before {
display: block;
position: absolute;
top: 18px;
left: -10px;
content: '';
border-top: 10px solid transparent;
border-right: 10px solid #eeeeee;
border-bottom: 10px solid transparent;
}
http://jsfiddle.net/j9Wku/6/
I fiddled with this myself, and came up with a great solution. Code below.
.logo-heading {
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
}
.logo-heading2{
position:absolute;
font-size:12px;
margin-left:230px;
float:left;
line-height:16px;
display:none;
color:#404040;
background: rgb(255,255,255);
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(238,238,238,1)));
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
background: linear-gradient(left, rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=1 );
top:38px;
padding:5px;
border-width:1px;
border-color: #cccccc #F6F6F6 #F6F6F6 #cccccc;
border-style:solid;
border-radius:3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
text-shadow: 1px 1px 0 #fff;
}
#tail1 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #f0f0f0 transparent transparent;
position:absolute;
top: 14px;
left: -21px;
}
#tail2 {
width: 0px;
height: 0px;
border: 10px solid;
border-color: transparent #ffffff transparent transparent;
position:absolute;
left: -20px;
top: 14px;
}
Changed a couple of things in the js and works perfect. Thanks guys
ther is an example
http://jsfiddle.net/amkrtchyan/j9Wku/7/
i try it with canvas