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
Related
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>
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%;
The following snippet perfectly works on Chrome: the background image fades into to the background behind towards the bottom.
div {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
-webkit-mask-image: linear-gradient(black, black, transparent);
mask-image: linear-gradient(black, black, transparent);
}
<div></div>
But it doesn't work on Firefox, the value is said to be incorrect.
Why ? And how can I fix that ?
Note that I know how to use another div as overlay, which isn't a general solution to me as it has too many consequences on content and element position. The only answers I'm interested in are the ones which fix the background of the div.
I don't know why, but you can replicate the effect by using the :after property for this, and this works for all browsers - even our old friend IE:
.container {
height: 200px;
overflow: hidden;
position: relative;
}
.image {
width: 200px;
height: 200px;
background-image: url("http://i.imgur.com/wcDxIZG.jpg");
background-size: cover;
background-position: center center;
}
.image:after {
content: '';
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FAFAFA', endColorstr='#FAFAFA');
background-image: -webkit-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: -ms-linear-gradient(top, rgba(248, 244, 243, 0) 0%, #fafafa 100%);
background-image: linear-gradient(to bottom, rgba(2248, 244, 243, 0) 0%, #fafafa 100%);
display: block;
position: absolute;
pointer-event: none;
bottom: 0;
left: 0;
width: 200px;
height: 20%;
}
<div class="container">
<div class="image"></div>
</div>
Starting from Firefox 53 (released April 19, 2017) , this is now possible as the support of masking images has been completed.
See http://caniuse.com/#search=mask
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%;
}
}
Example: http://cdpn.io/EaDdx
Next to the "Sample Title" you can see the arrowhead I'm trying to create. I'm trying to get this to work in the same manner as the rectangles and the circle, allowing it to act as a 'porthole' to it's own fixed background image.
I've tried everything from using borders to create a triangle (which blocked out the body's background image), to using various rotations, alternations of use between an actual background image and background gradient.
Right now I'm using basically using this method, as so:
.gradient-triangle {
width: 50px;
height: 50px;
position: absolute;
top: 0px;
left: -25px;
clip: rect(auto 25px 50px auto);
}
.gradient-triangle:after {
content: '';
position: absolute;
top: 4px;
bottom: 4px;
left: 9px;
right: 0px;
-webkit-transform:rotate(-45deg);
background-attachment: fixed;
background: -moz-linear-gradient(45deg, #000000 0%, #000000 50%, #ffffff 50%, #ffffff 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#000000), color-stop(49%,#000000), color-stop(50%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(45deg, #000000 0%,#000000 49%,#ffffff 50%,#ffffff 100%);
background: -o-linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
background: -ms-linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
background: linear-gradient(45deg, #000000 0%,#000000 50%,#ffffff 50%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );
background-position: center center;
background-attachment: fixed;
border: 1px solid #fff;
}
This is mainly a chrome issue right now, though as you'll see, it does something different in each browser, which is pretty odd.
I haven't seen any other websites that do this sort of thing, using fixed background images, within elements, to offer the "porthole" style view. I'd be interested to see any that anyone may know of, to checkout how they handle things similar to this.
Edit: Just to clarify what I think is causing this. Usually a fixed background image is relative to the window, not the element it's assigned to. As soon as that element is rotated, the background image becomes relative to it. There's a good chance this is a browser bug, I'd just like to be sure.
I could get the following to work in Chrome:
CSS
.filler {
height: 2000px;
}
.test2 {
position: absolute;
width: 400px;
height: 370px;
left: 219px;
top: 10px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position-x: -266px;
background-position-y: -107px;
}
.container {
-webkit-transform: rotate(45deg);
position: absolute;
margin-left: -275px;
margin-top: -116px;
clip: rect(-265px, 693px, 0px, 428px);
}
.container2 {
-webkit-transform: rotate(-45deg);
position: absolute;
}
.test {
position: absolute;
width: 186px;
height: 400px;
left: 300px;
top: 85px;
background-attachment: fixed;
background-repeat: no-repeat;
}
.test, .test2 {
background-image: url(http://placekitten.com/900/600);
}
fiddle
There is alot of hand-set positions; probably that could be set easier playing with transform-origins.
Also, I have a difference between positions in Chrome (on one side) and Firefox - IE (on the other). Still trying to understand why ..