I have the css animation which works only in Chrome. How can I make it cross-browser? Below is the code and the jsfiddle of it:
HTML:
<div class="main-nav">
<a href="#">
<div id="outer">
<p>Hello!!!</p>
</div>
</a>
</div>
SCSS:
.main-nav {
font-size: 250%;
width: 280px;
margin: 0 200px;
text-shadow: 2px 1px 6px lighten(#141414, 50%);
color: #141414;
a {
text-decoration: none;
}
#outer {
background:linear-gradient(to right, #1abc9c 50%, #444 50%);
background-size:200% 100%;
background-position:right bottom;
font-size:64px;
text-align:center;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
transition:all 1s;
&:hover {
background-position:left bottom;
cursor:pointer;
}
}
}
Jsfiddle: http://jsfiddle.net/yakovenkodenis/jq4rb3ox/3/
(It works correctly only in Chrome!)
The background-clip: textproperty is only supported in webkit (safari and chrome), so there is no way for this to work in other browsers. You could try making an svg and animating the fill of that, although hopefully other browsers will adopt this someday.
Related
I have two boxes that when you hover over, the background opacity should change, but the foreground text opacity should not change. I know the solution to this is on hover, set the rgba to the background color and add the opacity. Example:
#join:hover {
rgba(0, 102, 255, .4)
}
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option. I'd like to use just opacity: .4 so that the opacity is the same regardless of the background color of each box.
When I use opacity on hover, the opacity of the text in each box changes as well. To get around this, I tried using z-index/position: relative and setting the text (#join-text, #learn-text) to a higher z-index and the background (#join, #learn) to a lesser z-index. This did not render the correct results.
I also tried using pseudo class ::before like #join:hover::before but that also did not render the correct results, the position:absolute changed the position of the buttons.
Is there any way to change the opacity on hover ONLY for the background, using the opacity: .4 property? Any input would be greatly appreciated.
Find code here: https://jsfiddle.net/Lsqjwu15/1/
You can use CSS3 :before selector
#join:before {
background: #0066ff;
}
#learn:before {
background: #ffb31a;
}
.rectangle:before {
content: "";
width: inherit;
height: inherit;
position: absolute;
}
.rectangle:hover:before {
opacity: .4;
}
JSFiddle
You could make a workaround with pseudo elements (changed the "join" box):
.rectangle {
position:relative;
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join:before {
content:"";
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background: #0066ff;
}
#learn {
background: #ffb31a;
}
#join:hover:before,
#learn:hover {
opacity: .4;
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
Could you make the text "rgba(0,0,0,1) !important" to override the background opacity? would that still fade with the background?
However, the thing is that in jquery the background of each of the boxes change when clicked on, so using a solid and specific color is not an option.
You haven't specified HOW the background colors are changed or what they are initially but using RGBA Colors throughout seems simple enough. JQ is perfectly capable of handing RGBA.
.rectangle {
height: 200px;
width: 80px;
border: 1px solid transparent;
}
#join {
background: rgba(0, 102, 255, 1)
}
#learn {
background: rgba(255, 179, 26, 1)
}
#join:hover {
background: rgba(0, 102, 255, .4)
}
#learn:hover {
background: rgba(255, 179, 26, .4)
}
.vertical {
text-align: center;
color: #000000;
font-size: 30px;
font-weight: bold;
white-space: nowrap;
transform: rotate(-90deg);
}
#join-text {
margin-top: 110px;
}
#learn-text {
margin-top: 125px;
}
<div class="rectangle" id="join">
<div class="vertical" id="join-text">
Join Here
</div>
</div>
<div class="rectangle" id="learn">
<div class="vertical" id="learn-text">
Learn More
</div>
</div>
If there is something else you haven't told us then if you want a solution to your code, you're going to have to reproduce the exact issue including the JS/JQ
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 looking for a way to get the blurry background effect of OS X 10.10 working in css. Blurring with filter:blur or an SVG Gaussian filter will also blur the border, so this will not work.
Here is an example of the effect:
this is CSS imitating OSX Yosemite
Stylesheet
body {
background-image: url('your image');
background-size: cover;
font-size: 14px;
}
.block {
color: #000;
border: 1px solid rgba(0,0,0,0.1);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
background: inherit;
position: relative;
}
.block:before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: inherit;
-webkit-filter: blur(10px) saturate(2);
}
.title {
font-size: 1.4em;
font-weight: 300;
color: #222;
padding: 8px;
background: rgba(235,235,235,0.85);
border-bottom: 1px solid rgba(0,0,0,0.1);
text-align: center;
}
.content {
padding: 8px;
background: rgba(255,255,255,0.66);
}
and your html like following
<div class="block">
<div class="title">Hello World</div>
<div class="content">This is your main content!</div>
</div>
Example
You can use Css3 and JS, as explained in this article. Below you can find a snippet of Css code, for the full working example, please refer to the original post and fiddle below:
/* TRANSFORMATIONS */
.glass.down {
/* Fallback for browsers that don't support 3D Transforms */
transform: translateY(100%) translateY(-7rem);
transform: translateY(100%) translateY(-7rem) translateZ(0);
}
.glass.down::before {
transform: translateY(-100%) translateY(7rem);
transform: translateY(-100%) translateY(7rem) translateZ(0);
}
.glass.up, .glass.up::before {
transform: translateY(0);
transform: translateY(0) translateZ(0);
}
See this demo:
http://jsfiddle.net/cQQ9u/
You can achieve this effect with webkit's backdrop-filter css property
https://webkit.org/demos/backdrop-filter/
These are just workarounds... it works only with image background and it won't with text (for example if we want to create modals windows).... you can combine css and js to get some similar effect but for now we can't get the right behavior with pure CSS.
This is my idea and hope some CSS guru can contradict me but I think this is a CSS3 technology limit..... maybe in future we'll can do it.
I was looking for this.
But when I tried it, it won't work.
The text is transparent, but not through the div, which is the big idea.
Fiddle
.title1_background {
background-color: rgba(255, 255, 255, 0.8);
height: 20%;
width: 100%;
position: fixed;
bottom: 8%;
margin: 0;
left: 0;
text-align: center;
}
.title1_background h1 {
font-size: 400%;
display: block;
-webkit-text-fill-color: transparent;
}
The better way is to use two images.
The background image and the image with hollow text above it.
You can achieve the same using -webkit-text-fill-color: transparent; but this would only work with browsers supporting -webkit.
see this link it works fine in chrome since it supports -webkit but won't work in firefox.
See the browsers and their versions that support -webkit
We should always prefer to design and develop that supports cross browser compatibility.
Try This link
<div id="outer">
<div id="wrapper">
<div id="inner">TEXT</div>
</div>
CSS
#outer {
width:300px;
height:300px;
background-image: url(http://www.placekitten.com/300/300);
overflow:auto;
}
#wrapper {
background: #fff;
margin: 100px 0;
opacity:0.6;
}
#inner {
font: bold 60px Arial;
text-align:center;
margin:20px;
background-color: #fff;
background-image: url(http://www.placekitten.com/300/300);
background-position: 280px 201px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
#outer:hover{
border:solid 2px #4072B4;
}
I am working on a menu with a custom font and in chrome (and safari) it is spaced exactly how I want it.
http://american-motorsports.net/2012/
When I view it in firefox, the kerning of the font is a little different causing a little black gap on the far right menu item. I can see the difference between the F and A in FABRICATION
The HTML is very simple right now:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="resources/css/reset.css" />
<link rel="stylesheet" href="resources/css/main.css" />
<title><?php echo date('M d, Y') . ' | '; ?>American Motorsports - Off-Road Fabrication</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div id="logo">
<img src="resources/images/logo.png" width="291" height="150" alt="American Motorsports - Off-Road Fabrication" />
</div>
<div id="menu">
<span class="item">HOME</span><span class="item">SUSPENSION</span><span class="item">FABRICATION</span><span class="item">PROJECTS</span><span class="item">MEDIA</span><span class="item">CONTACT</span>
</div>
</div>
<div id="main"></div>
</div>
</body>
</html>
and the CSS consists of this so far
#font-face {
font-family: bebas;
src: url("../fonts/bebas.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
body {
font-size: 14px;
color: #ccc;
line-height: 20px;
margin: 0;
padding: 0;
background: url("../images/bg.png") #202020;
}
#wrap {
background: url("../images/bg_main.jpg") no-repeat center top;
min-height:800px;
}
#header {
border-top: 5px solid #3a3a3a;
height:150px;
width:970px;
background-color:#000000;
margin: 50px auto;
}
#logo {
width:324px;
height:179px;
background-color:#121212;
border-top: 5px solid #3a3a3a;
border-bottom: 5px solid #ffffff;
margin-top:-22px;
float:left;
}
#logo img {
margin-left:13px;
margin-top:17px;
}
#menu {
width:646px;
height:150px;
float:right;
margin:0;
padding:0;
}
#menu a {
margin:0;
padding:0;
}
.item {
font-family:bebas;
font-size:18px;
height:150px;
display:inline-block;
text-align:center;
line-height:8em;
color:#fff;
cursor:pointer;
padding-left:20px;
padding-right:20px;
margin:0;
text-shadow: 0 3px 3px #111;
}
.item:hover {
background: -moz-linear-gradient(top, #3a3a3a 0%, #101010 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3a3a3a), color-stop(100%,#101010));
background: -webkit-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -o-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: -ms-linear-gradient(top, #3a3a3a 0%,#101010 100%);
background: linear-gradient(to bottom, #3a3a3a 0%,#101010 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3a3a3a', endColorstr='#101010',GradientType=0 );
}
#main {
width:970px;
/*background-color:#ffffff;*/
margin: 0 auto;
}
So the question is how to remove the gap so it looks like chrome and safari or fix the kerning issue..I just dont want that gap in firefox
You'd have to wrap a span around the offending letters and tweak the CSS letter-spacing: property until you get what you want.
The finesse of good typography, especially when it comes to custom fonts, isn't quite ready for prime-time on browsers.
Plan B: use an image.
A quick dirty solution is
#menu{
white-space: nowrap;
overflow: hidden; /* means you don't get a dirty edge, but the last link may be smaller on the right */
}
Ideally though, you shouldn't be relying on the width of the font to make your menu look right.
If you have the time, give each of these links a class, and a custom width.
Or even better, use a list with links in each item, to get greater control.
For example, if you add:
.item{
padding: 0;
width: 16.66%; /* assuming you always have 6 links */
}
...they will always fit, but some will look rubbish.
For the most professional-looking finish, you'll want to give each a class and custom width.
I don’t see what gap you are trying to remove, but what you are describing is the issue that Firefox (modern versions) apply kerning by default, if defined in a font. Other browsers don’t. So it’s a matter of kerning vs. no kerning, not a difference in kerning. Kerning is generally considered as typographically desirable. But if you really want to prevent Firefox from kerning, that’s possible using font feature settings, e.g. in this case with
#menu { -moz-font-feature-settings: "kern" 0; }