I have a css style something like:
.button {background:#e9e9e9 url('/image.png') no-repeat 9px 12px;}
.button:hover {background:#e9e9e9 url('/bold-image.png') no-repeat 9px 12px;}
Is there a way to skip above :hover part and make the image.png "bolder" (a bold effect of the original image)? (without having to create an image for it)
Actually it is not possible to alter the content of images by CSS. However in this particular case, we can fake the bold effect of the contents by using drop-shadow filter (assuming the image is transparent and there is no background color attached!):
.button {
background: url('/image.png') no-repeat 9px 12px;
}
.button:hover {
background: url('/image.png') no-repeat 9px 12px;
-webkit-filter: drop-shadow(0 0 8px black); /* webkit only
assuming the content is written in black */
filter: drop-shadow(0 0 8px black); /* FF~35 */
filter: drop-shadow(0 0 0 8px black); /* MDN */
}
As can be seen, the browser support is limited to Webkit-based web browsers and Firefox 35+ as of writing.
Here is an online example:
.button-container {
display: inline-block;
background-color: #e9e9e9;
}
.button {
width: 488px;
height: 198px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
background: url('http://overshoot.tv/sites/overshoot.tv/files/black-on-transparent.png') no-repeat 9px 12px;
}
.button:hover {
background: url('http://overshoot.tv/sites/overshoot.tv/files/black-on-transparent.png') no-repeat 9px 12px;
-webkit-filter: drop-shadow(0 0 5px black); /* webkit only
assuming the content is written in black */
filter: drop-shadow(0 0 5px black); /* FF~35 */
filter: drop-shadow(0 0 0 5px black); /* MDN */
}
<div class="button-container">
<button class="button"></button>
</div>
Webkit-based web browsers and also Firefox 35 don't seem to support the syntax stated by Mozilla Developer Network, however let's leave it at there for upcoming web browsers.
Do you want something like zoom effect?
Try
img:hover {zoom:120%;}
The background-size property will let you scale the image in just one direction, which may or may not look ugly, but from your snippet, I'm not sure if you're using a sprite there, where there might be more number-fiddling involved than it's worth. Browser support is de facto universal.
.button {
background-image: url('http://dummyimage.com/400x200/000/fff&text=Send');
background-size: 100% 100%;
background-position: center center;
}
.button:hover {
background-size: 105% 100%;
}
<a style="display:inline-block;width:400px;height:200px;" class="button">...</a>
Related
I want to edit/change a dropdown style with css specially the arrow of the dropdown.
The arrow appear perfect in mozilla firefox but in google chrome it's kind of ugly (he had a bad borders).
How can I get the same result in both of two brwosers (firefox and chrome) without any 1% of difference in this project and any of projects I use ?
This image shows how the button is displayed in firefox :
https://ibb.co/whTPVt3
This image shows how the button is displayed in chrome:
https://ibb.co/35b2Y6D
Html code :
<select class="round">
<option>Search type</option>
<option>Room</option>
<option>Device</option>
<option>Tourist</option>
</select>
CSS code :
select {
/* styling */
background-color: #314669;
border: thin solid #314669;
border-radius: 50px;
display: inline-block;
font: inherit;
line-height: 1.5em;
padding: 0.5em 3.5em 0.5em 1em;
color: white;
/* reset */
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
}
/* arrows */
select.round {
background-image:
linear-gradient(45deg, transparent 50%, yellow 50%),
linear-gradient(135deg, yellow 50%, transparent 50%),
radial-gradient(#314669 65%, transparent 72%);
background-position:
calc(100% - 20px) calc(1em + 2px),
calc(100% - 15px) calc(1em + 2px),
calc(100% - .5em) .5em;
background-size:
5px 5px,
5px 5px,
1.5em 1.5em;
background-repeat: no-repeat;
}
Inspect the element and make changes on Chrome or Firefox in developer tools, after that write css only for Firefox OR Chrome.
Target Firefox:
#-moz-document url-prefix() {
h1 {
color: green;
}
}
Target Chrome:
#media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
.h1 {
color: green;
}
}
Its browser default behavior.
If you want same result in all browser then try use Bootstrap.
I'm trying to create a button that has two colors as a border.
The two colors i need used are blue: #00a7e1, orange: #f6531d.
I would like to just use css if possible.
Thank in advance!
link to button concept
Example:
.btn
{
border: 0;
padding: 4px;
display: inline-block;
background: linear-gradient(20deg, #00a7e1 49%, #e65300 50%);
}
.bg
{
background: #349645;
padding: 8px 14px;
font: bold 24px Consolas;
}
.btn:active .bg
{
background: #0a1117;
color: #ffffff;
}
<div class="btn"><div class="bg">YOU'R TITLE</div></div>
<button class="btn"><div class="bg">YOU'R TITLE</div></div>
You may also play with gradient and background-clip (see comments in CSS)
button {
vertical-align: top;
border: 5px solid transparent;/* give extra space for gradients colors */
font-size: 2.5rem;
margin: 0.25em;
padding: 0.5em 2em;
background: linear-gradient(#333, #333),/* black turned into gradient to hold with background-clip and hide the 2 color gradient under it */
linear-gradient(/* 2 colors to draw under the borders also via background-clip*/
to bottom left,
rgb(230, 83, 0) 50%,
gray 51%,
rgb(0, 166, 224) 40%
)
no-repeat center center;
background-clip:
padding-box, /* drawn inside including padding area */
border-box;/* drawn also under borders */
background-size:
100% 100%,
110% 150%;/* must be bigger than 100% so it include also borders, else it repeats */
color: white;
box-shadow: 0 0 2px 2px black, inset 0 0 2px black;/* did you want this too ? */
}
<button>BUTTON</button> <button> TO</button> <button> PLAY</button>
If you think this is too much, you also have border-image .
Simply use border-image with a gradient:
button {
padding:20px;
border:5px solid;
border-image:linear-gradient(60deg,#00a7e1 50%,#f6531d 0) 20;
background:transparent;
}
<button>some text</button>
Hi i've got a input range on html5 min 0 and max 100.
But i would like to color a part for example between 70 and 100.
I don't want to use bootstrap for this.
I don't know how to do that.
You can easily do this by using a linear-gradient as background for the track. All that we need to do is create a gradient which is colored only for the width that we need (30% for your case because you need it colored only between 70-100) and then position it with respect to the track's (the track is the bar of the range input) right side. Since the styling of range inputs is still in experimental phase we have to use browser prefixed selectors (to select the track of each browser) and then apply styles to it. We also have to do some additional corrections to address browser specific problems, I've marked these with inline comments in the code.
The below code is tested and found to be working fine in Edge, IE11 and latest versions of Chrome, Firefox and Opera (all on a Windows 10 machine).
Note: This will only color the part between 70-100 of the range input differently. This doesn't have the code to make the appearance of range input the same in all browsers. I've not done that because that is out of the scope of this question.
Also, as mentioned by ssc-hrep3 in his comment, this may not be good for production implementation because these things are still in experimental stage and we've to use browser specific selectors but if you want to apply custom styling to HTML5 range inputs then there is probably no other way.
input[type=range] {
-webkit-appearance: none;
border: 1px solid black; /* just for demo */
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border: none; /* just do away with the track's border */
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
<input type="range" min="0" max="100" value="70" step="10" />
For the benefit of future readers: Just in case you need uniform styling across all major browsers then you could use the below snippet. It produces almost similar output in all of them.
input[type=range] {
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-moz-range-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
height: 10px;
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-track {
background: linear-gradient(to left, red 30%, transparent 30%);
background-position: right top;
background-repeat: no-repeat; /* no repeat means background appears a little on the left due to width issue and hence the fix */
width: 100%; /* to fix width issue in Edge */
height: 10px;
color: transparent; /* to avoid the intermediate stripe lines in < IE11 */
border-color: transparent;
border-style: solid;
border-width: 10px 0px; /* dummy just to increase height, otherwise thumb gets hidden */
box-shadow: inset 0px 0px 0px 1px black;
}
input[type=range]::-ms-fill-lower {
background: transparent; /* IE11 has default fill and that needs to be removed */
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
height: 18px;
width: 18px;
margin-top: -4px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-moz-range-thumb {
height: 18px;
width: 18px;
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
input[type=range]::-ms-thumb {
height: 18px;
width: 18px;
margin-top: 0px; /* nullify default margin */
background: sandybrown;
border: 1px solid chocolate;
border-radius: 50%;
}
<input type="range" min="0" max="100" value="70" step="10" />
I am trying to create a line inside the thumb of a <input> with type range.
I have managed to modify some of the styling of the thumb using the ::-webkit-slider-thumb pseduo-element selector, as shown below, but I need a vertical line centered in the thumb of the slider. Is there a way to create such a line?
input[type="range"]{
-webkit-appearance:none !important;
width: 344px;
height: 18px;
/*background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 75%,#f6f6f6 75%,#f6f6f6 100%);*/
/*-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));*/
border-radius: 18px;
margin: auto;
transition: all 0.3s ease;
background: rgb(190,220,0);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
/*background-color: blue;*/
border: 1px solid #c0c0c0;
width: 34px;
height: 34px;
border-radius: 18px;
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(235,235,235,1) 100%, );
-webkit-filter: drop-shadow(0px 3px 5px rgba(0,0,0, 0.2));
z-index: 1;
/*background: white url(../icons/gc4_icon_cssbutton-v.svg) no-repeat;*/
}
<input type="range" id="test" />
In some old versions of Chrome only (but not in most browsers), you can do this using ::after or ::before pseudo-elements:
input[type="range"]::-webkit-slider-thumb{
position:relative;
display:block;
}
input[type="range"]::-webkit-slider-thumb::after{
content:'';
position:absolute;
top:0;
height:100%;
left:50%;
width:1px;
background:#000;
}
DEMO
However, from Chrome 49 onwards, this no longer works; allowing pseudo-elements to be chained in a CSS selector (like foo::-webkit-slider-thumb::after) was a violation of the CSS spec, and Chrome has changed its behaviour to conform to the spec. This also never worked in Firefox, Internet Explorer, or Edge.
I'm trying to create a button with CSS that will sit on a semi-transparent background that has a beveled or cut edge to it. Here is the Photoshop mockup:
I'm able to do this successfully with a solid color background because I can use an pseudo element with that same background and "cover" the edge of the button, but it doesn't work with a semi-transparent background.
Here's what I've got so far, on a solid background: http://codepen.io/anon/pen/GJFpc
I'm beginning to believe this isn't possible with just CSS, but still hoping S.O. can save me once again!
I love a good css challenge so I tried a few things and this is what I could come up with:
http://jsfiddle.net/QE67v/3/
The css (unprefixed) looks like this:
a.cta {
position: relative;
float: left;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset 0 -2px 1px 2px #fff;
line-height: 16px;
height: 16px;
z-index: 2;
}
a.cta:after {
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
right: -16px;
top: 0;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset -3px -2px 1px 2px #fff;
transform: skewX(-45deg);
z-index: -1;
}
There are two main differences with your code:
I use a inset box-shadow to achieve the white 'bevel'. You could
probably do this with gradients as well, but I just find the shadows
more intuitive.
In stead of making the button wider and covering the bottom left
corner with a pseudo element in the color of the background, I kept
the button in its normal width and added a pseudo element to which a
applied the skewX transformation. This allows for any background, as
you can see by the gradient I set as a background in my fiddle.
I believe this is what you where after. Feel free to ask if you need any further help/explanation.