As I said in the title, this shorthand:
.settingsSelect {
background: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png') no-repeat, repeat 97%, 0;
background-size: 12px, contain;
}
is displayed as
and with proper longhand:
.settingsSelect {
background-image: url('../images/Custom.Select.Background.png'), url('../images/Settings.Input.Background.png');
background-position: 97%, 0;
background-repeat: no-repeat, repeat;
background-size: 12px, contain;
}
everything works as expected.
Where is the problem? Thanks.
The syntax in the shorthand version is incorrect. It should be:
.settingsSelect {
background: url('../images/Custom.Select.Background.png') no-repeat 97%, url('../images/Settings.Input.Background.png') repeat 0;
}
Think of it as this:
.selector {
background: background1, background2, background3, etc;
}
where background1, background2, etc are each a shorthand background of:
url() repeat X%;
Related
I just found out about tailwind and absolutely loving it. However I am a bit stuck at this part. i dunno how to convert this bit of code into tailwindcss.
.link-underline {
border-bottom-width: 0;
background-image: linear-gradient(transparent, transparent),
linear-gradient(#fff, #fff);
background-size: 0 3px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.5s ease-in-out;
}
.link-underline-black {
background-image: linear-gradient(transparent, transparent),
linear-gradient(#ec8200, #ec8200);
}
.link-underline:hover {
background-size: 100% 3px;
background-position: 0 100%;
}
I tried the following but it does not work.
before:bg-[#ec8200] before:rounded-bl before:-bottom-1.5 before:h-0.5 before:inset-x-0 before:absolute before:transform before:origin-left before:scale-x-0 before:transition-all before:duration-200 group-hover:before:scale-x-100;
any help would be great. Thanks
I would like to pass the entire linear-gradient to my mixin.
I've tried any way I could think of and it always results in it coming up 'none' which covers my image in white.
#mixin webp-backgroundGradient($imgpath, $type: '.jpg') {
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 10%, white 80%), url('#{$imgpath}#{$type}');
}
Seems to work pretty good, see codepen...
https://codepen.io/joshmoto/pen/GRNegrP
I'm guessing its an issue with your image path maybe? Hard to tell with out seeing your console source.
I removed $type: '.jpg' from your mixin params and passed the image url directly.
#mixin webp-backgroundGradient($img) {
background-size: cover;
background-repeat: no-repeat;
background-image: linear-gradient(
to bottom,
rgba(white, 0.5) 10%,
rgba(white, 1) 90%
),
url("#{$img}");
}
.image {
height: 100vh;
#include webp-backgroundGradient("https://i.imgur.com/UNV29z8.jpeg");
}
And this is the output...
.image {
height: 100vh;
background-size: cover;
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 10%, white 90%), url("https://i.imgur.com/UNV29z8.jpeg");
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="image"></div>
Update to your comment...
#mixin to pass background image url and optional background gradient overlay...
See codepen example here https://codepen.io/joshmoto/pen/JjbzOoj
#mixin bg_img_gradient($img,$gradient:false) {
background-size: cover;
background-repeat: no-repeat;
#if $gradient != false {
background-image: #{$gradient}, url("#{$img}");
} #else {
background-image: url("#{$img}");
}
}
.image-1 {
height: 100vh;
width:50%;
float: left;
#include bg_img_gradient(
"https://i.imgur.com/UNV29z8.jpeg"
);
}
.image-2 {
height: 100vh;
width:50%;
float: left;
#include bg_img_gradient(
"https://i.imgur.com/UNV29z8.jpeg",
linear-gradient(
to bottom,
rgba(white, 0.5) 10%,
rgba(white, 1) 90%
)
);
}
And here is the css output...
.image-1 {
height: 100vh;
width: 50%;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-image:url("https://i.imgur.com/UNV29z8.jpeg");
}
.image-2 {
height: 100vh;
width: 50%;
float: left;
background-size: cover;
background-repeat: no-repeat;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 10%, white 90%), url("https://i.imgur.com/UNV29z8.jpeg");
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" rel="stylesheet"/>
<div class="image-1"></div>
<div class="image-2"></div>
I'm using a background image with linear gradient to create a highlight text effect but it's causing an unwanted bottom border:
.fancy-underline {
text-decoration: none;
background-image: -webkit-gradient(linear,left top, left bottom,from(rgba(255,255,255,.7)),to(rgba(255,255,255,.7))),-webkit-gradient(linear,left top, left bottom,from(#91c678),to(#91c678));
background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
background-position: 0 100%;
background-repeat: no-repeat;
background-size: 100% 50%;
}
<p><span class="fancy-underline">here is some fancy underline</span></p>
I can't see anything under the computed styles in the debugger that might cause this so I'm thinking it must be an issue with my linear gradient. Can anyone point me in the right direction?
You can cover more area like below. You make the gradient big enough and you shift it to uncover the top 50% and you will have the same result as you did
.fancy-underline {
text-decoration: none;
background-image: linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.7)),linear-gradient(#91c678,#91c678);
background-position: 0 -50%;
background-repeat: no-repeat;
background-size: 100% 200%;
}
<p><span class="fancy-underline">here is some fancy underline</span></p>
Related question to understand how it works: Using percentage values with background-position on a linear-gradient
A zoomed version to better see:
.fancy-underline {
text-decoration: none;
font-size:100px;
background-image: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7)), linear-gradient(#91c678, #91c678);
}
.new {
background-position: 0 -50%;
background-size: 100% 200%;
background-repeat:no-repeat
}
.old {
background-position: 0 100%;
background-size: 100% 50%;
background-repeat:no-repeat
}
<span class="fancy-underline new">new</span>
<span class="fancy-underline old">old</span>
I've got a semi-circular radial-gradient working here: http://codepen.io/Inlesco/pen/bpgbKN?editors=1100
Gradient styles:
.el:after {
content: '\00a0';
background: radial-gradient(at 50% 0%, red 0%, rgba(0,0,0,0.2) 0%, transparent 70%);
background-size: 100% 30px;
background-repeat: no-repeat;
float:left;
width:100%;
}
The pen uses CSS. However, if you set a CSS preprocessor (LESS/SASS), no gradient is created as, fe., Chrome marks it as invalid (seen when inspecting).
And if I place the same code (HTML / CSS from CodePen) to a local file (CSS in body <style>), no gradient is created either.
How come it works in web code editors like CodePen, but only without any CSS preprocessors? Is the output of them somehow different for radial-gradient?
When compiled with Sass (SCSS), I get the following result:
.el:after {
content: '\00a0';
background: radial-gradient(at 50% 0% at 50% 0%, #ff0000 0%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
background-size: 100% 30px;
background-repeat: no-repeat;
float: left;
width: 100%;
}
Sites like Codepen and Sassmeister don't compile with Sass, they compile with Compass (which is Sass with a bunch of extra stuff added to it).
Compass provides a function called radial-gradient (along with linear-gradient) that does a bunch of fancy stuff underneath the hood when combined with the background and background-image mixins to generate prefixes and inline SVGs for you.
Certain versions of Compass have a bug where they'll generate an invalid radial-gradient when you omit the optional shape argument. You just need to add it:
.el:after {
content: '\00a0';
background: radial-gradient(ellipse at 50% 0%, #ff0000 0%, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
// ^ added `ellipse` here
background-size: 100% 30px;
background-repeat: no-repeat;
float: left;
width: 100%;
}
See: https://github.com/Compass/compass/issues/1937
Maybe you are declaring the LESS syntax in an incorrect manner. Try this,
.el {
margin: 0 auto;
width: 6em;
text-align:center;
font-size:30px;
&::after {
content: '\00a0';
background: radial-gradient(at 50% 0%, red 0%, rgba(0,0,0,0.2) 0%, transparent 70%);
background-size: 100% 30px;
background-repeat: no-repeat;
float:left;
width:100%;
}
}
I'm using a radial gradient as the background for a website. It works great on Safari, Chrome, and Firefox 3.5+, but Opera and Internet Explorer have problems. So, I made a background image to show on those browsers to give the same look. Right now, I'm detecting the browser and version server-side from the user-agent, and then including the correct CSS file. However, I feel like there must be a better way than having to maintain two seperate CSS files to do essentially the same thing (the only difference between the CSS files is html and body).
For good browsers:
html, body {
width: 100%;
height: 100%;
}
html {
background-image: -ms-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -moz-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -o-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 480, color-stop(0, #23395D), color-stop(0.6, #122037), color-stop(1, #0A131F));
background-image: -webkit-radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
background-image: radial-gradient(center, circle farthest-side, #23395D 0%, #122037 60%, #0A131F 100%);
-moz-box-shadow:inset 0 0 100px #080f1a;
-webkit-box-shadow:inset 0 0 100px #080f1a;
box-shadow:inset 0 0 100px #080f1a;
background-attachment: fixed;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: url(/images/portal/checkered_bg.png) repeat;
}
For bad browsers:
html, body {
width: 100%;
height: 100%;
}
body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}
Sounds like a job for Modernizr.
Modernizr is a small JavaScript library that detects the availability of native implementations for next-generation web technologies, i.e. features that stem from the HTML5 and CSS3 specifications. Many of these features are already implemented in at least one major browser (most of them in two or more), and what Modernizr does is, very simply, tell you whether the current browser has this feature natively implemented or not.
When you try to apply css that the browser doesn't recognize, it just reports nothing, so if you do...
//ommiting document ready for brevity
if ($("html").css("background-image").indexOf("radial") < 0) {
$("html").addClass("no-radial")
}
Then you can override the classes in CSS:
.no-radial body {
font-family: arial, sans-serif;
font-size: 14px;
color: #fff;
line-height: 22px;
text-decoration: none;
background: #09101b url(/images/portal/big_bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/portal/big_bg.jpg', sizingMethod='scale')";
}
Rather then browser detection, use feature detection, a JavaScript plugin such as Modernizr will do the job very neatly.
It adds class names to the root element so you can check for it like in your css.
Modernizr is your friend...