Im still making a reponsive menu, with scroll controls. I added a gradient on my menu, but I want to, that gradient goes in front of my links and hide them behind it. There's is JSFiddle, you can test it.
There you can see my gradient CSS on my menu
#page .page-nav {
background: white -webkit-linear-gradient(left, transparent 50px, red);
background-size: 40% 100%;
background-repeat: no-repeat;
background-position: right;
}
Any solutions, how to do that?
As far as I know,
You can do it with vendor prefixes and it's not supported in IE (even IE 11)
Unless someone here knows a better way to implement it, I would advise against this.
body {
background: #111;
width: 50%;
margin: 0 auto;
font-size: 50px
}
.page-nav {
background: linear-gradient(to right, #900, #999);
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;
}
<body>
<p class="page-nav">Sample Sample</p>
</body>
Related
I have panel which I colored blue if this panel is being selected (clicked on it). Additionally, I add a small sign (.png image) to that panel, which indicates that the selected panel has been already selected before.
So if the user sees for example 10 panels and 4 of them have this small sign, he knows that he has already clicked on those panels before. This work fine so far. The problem is now that I can't display the small sign and make the panel blue at the same time.
I set the panel to blue with the css background: #6DB3F2; and the background image with background-image: url('images/checked.png'). But it seems that the background color is above the image so you cannot see the sign.
Is it therefore possible to set z-indexes for the background color and the background image?
You need to use the full property name for each:
background-color: #6DB3F2;
background-image: url('images/checked.png');
Or, you can use the background shorthand and specify it all in one line:
background: url('images/checked.png'), #6DB3F2;
For me this solution didn't work out:
background-color: #6DB3F2;
background-image: url('images/checked.png');
But instead it worked the other way:
<div class="block">
<span>
...
</span>
</div>
the css:
.block{
background-image: url('img.jpg') no-repeat;
position: relative;
}
.block::before{
background-color: rgba(0, 0, 0, 0.37);
content: '';
display: block;
height: 100%;
position: absolute;
width: 100%;
}
Based on MDN Web Docs you can set multiple background using shorthand background property or individual properties except for background-color. In your case, you can do a trick using linear-gradient like this:
background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);
The first item (image) in the parameter will be put on top. The second item (color background) will be put underneath the first. You can also set other properties individually. For example, to set the image size and position.
background-size: 30px 30px;
background-position: bottom right;
background-repeat: no-repeat;
Benefit of this method is you can implement it for other cases easily, for example, you want to make the blue color overlaying the image with certain opacity.
background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png');
background-size: cover, contain;
background-position: center, right bottom;
background-repeat: no-repeat, no-repeat;
Individual property parameters are set respectively. Because the image is put underneath the color overlay, its property parameters are also placed after color overlay parameters.
And if you want Generate a Black Shadow in the background, you can use
the following:
background:linear-gradient( rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");
You can also use short trick to use image and color both like this :-
body {
background:#000 url('images/checked.png');
}
really interesting problem, haven't seen it yet. this code works fine for me. tested it in chrome and IE9
<html>
<head>
<style>
body{
background-image: url('img.jpg');
background-color: #6DB3F2;
}
</style>
</head>
<body>
</body>
</html>
The next syntax can be used as well.
background: <background-color>
url('../assets/icons/my-icon.svg')
<background-position-x background-position-y>
<background-repeat>;
It allows you combining background-color, background-image, background-position and background-repeat properties.
Example
background: #696969 url('../assets/icons/my-icon.svg') center center no-repeat;
This actually works for me:
background-color: #6DB3F2;
background-image: url('images/checked.png');
You can also drop a solid shadow and set the background image:
background-image: url('images/checked.png');
box-shadow: inset 0 0 100% #6DB3F2;
If the first option is not working for some reason and you don't want to use the box shadow you can always use a pseudo element for the image without any extra HTML:
.btn{
position: relative;
background-color: #6DB3F2;
}
.btn:before{
content: "";
display: block;
width: 100%;
height: 100%;
position:absolute;
top:0;
left:0;
background-image: url('images/checked.png');
}
Here is how I styled my colored buttons with an icon in the background
I used "background-color" property for the color and "background" property for the image.
<style>
.btn {
display: inline-block;
line-height: 1em;
padding: .1em .3em .15em 2em
border-radius: .2em;
border: 1px solid #d8d8d8;
background-color: #cccccc;
}
.thumb-up {
background: url('/icons/thumb-up.png') no-repeat 3px center;
}
.thumb-down {
background: url('/icons/thumb-down.png') no-repeat 3px center;
}
</style>
<span class="btn thumb-up">Thumb up</span>
<span class="btn thumb-down">Thumb down</span>
Assuming you want an icon on the right (or left) then this should work best:
.show-hide-button::after {
content:"";
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-size: 1em;
width: 1em;
height: 1em;
background-position: 0 2px;
margin-left: .5em;
}
.show-hide-button.shown::after {
background-image: url(img/eye.svg);
}
You could also do background-size: contain;, but that should be mostly the same. the background-position will depened on your image.
Then you can easily do an alternative state on hover:
.show-hide-button.shown:hover::after {
background-image: url(img/eye-no.svg);
}
You can try with box shadow: inset
.second_info_block {
background: url('imageURL');
box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
}
<li style="background-color: #ffffff;"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></li>
Other Sample Box Center Image and Background Color
1.First clearpixel fix image area
2.style center image area box
3.li background or div color style
body
{
background-image:url('image/img2.jpg');
margin: 0px;
padding: 0px;
}
Been looking for a solution but no prevail, so I thought I'd ask here.
I am trying to apply a linear gradient to the input field as I have for the buttons as seen in this picture.
I have played around with different CSS options but have not been able to succeed.
The best version is where the placeholder is styled, but the input value is not. If I try to style the input value then things go wrong.
And advice would be greatly appreciated.
button{
background-color: dodgerblue;
height: 60px;
width: 60px;
border-radius: 50%;
font-size: 32px
}
button i{
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
input{
background-color: dodgerblue;
height: 60px;
width: 360px;
font-size: 32px
}
input::placeholder{
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*
input:focus {
background: -webkit-linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
*/
<button><i>X</i></button>
<hr />
<input placeholder="SEARCH"/>
You will need two background layer. One for the text and one for the background-color.
Unfortunately this won't work on Firefox due to known bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1571244
input {
background-color: dodgerblue;
color:transparent;
height: 60px;
width: 360px;
font-size: 32px
}
input::placeholder {
background: linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
input:not(:placeholder-shown) {
background:
linear-gradient(#ffffff70, #ffffff),
dodgerblue;
-webkit-background-clip: text, padding-box;
background-clip: text, padding-box;
-webkit-text-fill-color: transparent;
}
<input placeholder="SEARCH">
For firefox you can consider an extra div for the background:
input {
color:transparent;
height: 60px;
width: 360px;
font-size: 32px;
background: linear-gradient(#ffffff70, #ffffff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.input {
display:inline-block;
background-color: dodgerblue;
}
<div class="input"><input placeholder="SEARCH"></div>
if your trying to set a gradient on the placeholder text,
your best option is to omit or remove the placeholder completely and set another div over the top of the input with your chosen font, and the text gradient.
<div id="InpCont">
<input type="text" id="UsrInp">
<div id="InpOverlay">
<p id="PsudoPlcHlder" class="OverlayTxt" contenteditable="true" onchange="PsudoPlcHlder.value=UsrInp.value" max-length="44">Search</p>
</div>
</div>
#InpCont{
// Position Where you want this element
}
#UsrInp{
position:absolute;
top:8px; left:50%;
transform:translateX(-50%);
width:64%; height:calc(28px + 1.87vh);
background:linear-gradient(-33deg,#ffffff70, #ffffff);
z-index:20;
}
#PsudoPlcHlder{
position:relative;
top:-40px; left:calc(20px + 25%);
width:240px; height:29px; padding:2px;
background:linear-gradient(23deg,red,green,blue);
overflow-x:hidden;
background-clip:text;
color:transparent;
z-index:25;
}
(document.addEventListener('DOMContentLoaded', function(){
const UsrInp = document.getElementById('UsrInp');
const PsudoPlcHlder = document.getElementById('PsudoPlcHlder');
PsudoPlcHlder.addEventListener('click', (function(){
PsudoPlcHlder.innerText = '';
}))
})
Just tried this on my own app and it seems to be working, but i'm not sure about the form submission part as I haven't got it hooked up to a db at the moment, might have to play around with the positioning a bit as I only tested this at the very bottom of my app, but might be a good starting point for you to mess around with.
in testing this, the gradient seems to stretch to fit, however many characters there are even if there like 120, which is a bit weird. will play around with this more and edit later on if I find any better methods..
I have the following code that sets a dotted/spotted bottom border on 'h1' tags.
The full code can be found at moorparksdevon.uk
h1 {
padding: 0 0 7px 0;
margin: 0 0 10px 0;
display:table;
background-image: linear-gradient(to right, black 33%, rgba(255,255,255,0) 0%);
background-position: bottom;
background-size: 3px 1px;
background-repeat: repeat-x;
}
However... I don't appear to have consistent results in the slightest. Am I missing something here?
Safari Mac - Lots of dots working (https://i.stack.imgur.com/MAHgm.jpg)
Firefox Mac - Some dots working (https://i.stack.imgur.com/mzRTM.png)
Chrome Mac - No dots at all (https://i.stack.imgur.com/5sYfL.jpg)
You can just use CSS border-bottom to set a dotted border.
jsfiddle: https://jsfiddle.net/mmkctq59/
I was wondering how I could do a background something like the home page of Droplr? It looks very cool, and want to use that as the background for my website. It is at https://droplr.com/hello.
It's a personalized background. Click here to have it. After that, you need to add some css property to make the background fit to the screen :
From the source code of Droplr, I found :
.theElement {
background: none repeat scroll 0% 0% #575A60;
background-color: #575A60;
background-image: none;
background-repeat: repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
color: #FFF;
text-shadow: none;
}
Hope this help.
I am trying to achieve a gradient + text shadow effect in Chrome/Safari using CSS text-shadow and a combination of text-shadow and background-image: -webkit-gradient, see example blw. I can only make one of the effects apply(if I add the shadow the gradient disappears. What am I doing wrong?
h1 {
font-size: 100px;
background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 1px 1px #fff;
}
The gradient "disappears" because the text-shadow is on a level above the background.
The text (which is transparent)
The shadow
The background.
We can work around this by copying the text and put it below the original layer, then apply the shadow there, for example:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(white, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 10px 10px 11px #fff;
color: transparent;
}
#hello:after {
content: 'Hello World';
}
<h1 id="hello"><div>Hello World</div></h1>
With no extra HTML markup or pseudo elements you can achieve this effect using the filter property and drop-shadow function. This method also works with a background image vs gradient.
h1 {
font:54px 'Open Sans', 'Helvetica', Arial, sans-serif;
background-image: linear-gradient(#787878, #484848);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow(2px 2px #333);
filter: drop-shadow(2px 2px #333);
}
Fiddle: https://jsfiddle.net/eywda89g/
This answer is similar to the answer by #KennyTM above, except his answer has the shadow hard-coded into the CSS, which is not suitable for dynamic text such as in a CMS. Also, his method requires a separate ID for each instance, which would be very tedious if you plan to use this effect a lot. The example below uses a class instead, and allows dynamic text.
Try this:
h1 {
position: relative;
font-size: 100px;
text-align: center;
}
h1 div {
background-image: linear-gradient(teal, black);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
position: absolute;
width: 100%;
}
h1:after {
text-shadow: 2px 2px 2px #000000;
color: transparent;
}
.gradient-shadow:after {
content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
And then in your HTML:
<h1 class="gradient-shadow" title="Hello World"><div>Hello World</div></h1>
Just make sure that the text in the <div> matches the text in the title attribute.
Here is a Codepen example of this method:
https://codepen.io/mprewitt/pen/gexypd
These answers helped me a lot in getting to my final result. Thank you.
So I figured I would share it. Seeing the colour of my text is light, I needed a darker "border" at the top to make it pop.
Also while 'ems' are harder to work with (as opposed to px), I found that the transition of colours for the text-shadow looks a lot smoother as I wanted to make it a gradient as well :)
Works on Edge, Chrome, Vivaldi and FireFox, a little blurry though.
<h1 class="text3d">Privacy Policy</h1>
.text-3d{
background-image:linear-gradient(to bottom,#f7eb3b 30%,#f5d839 40%,#eead34 50%, #eb9531 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
filter:
drop-shadow(-0.015em -0.015em 0 #ffff00)
drop-shadow(-0.015em -0.015em 0 #bf290c)
drop-shadow(0 -0.005em 0 #bf290c)
drop-shadow(0.010em 0.025em 0 #bf290c)
drop-shadow(0.015em 0.030em 0 #b6240b)
drop-shadow(0.020em 0.035em 0 #a91d0b)
drop-shadow(0.025em 0.040em 0 #8d0d09)
drop-shadow(0.030em 0.045em 0 #830708)
drop-shadow(0.035em 0.050em 0 #680a07)
drop-shadow(0.01em 0.08em 0.01em rgba(0,0,0,0.10))
}