What if I want to use gradient diagonally as shown in the image? Is there any way to select an angle while applying a gradient?
YOu can use the gradient lass of tailwind css like this.
Below is the example
<script src="https://cdn.tailwindcss.com"></script>
<div class="h-96 w-96 bg-gradient-to-tl from-slate-200 via-rose-100 to-purple-300"></div>
Related
I want to use Tailwind Css to maintain a perfect circle for my icon avatars shown below for both large and small screens.
I do know that I can use a gradient-radial like this:
.avatar{
background: radial-gradient(circle closest-side,
yellow calc(100% - 2px),#db0100 calc(100% - 1px) 99%,transparent 100%);
color: #db0100;
}
But I scrictly want to use Tailwind. Is it possible? Thanks.
You can do that rather easy with Tailwind. You need to create a div with rounded-full, grow-0 and shrink-0. Besides this, you need to set a width and height. The setting the grow and shrink to 0 means that the div will not resize, even if the browser needs more space for other elements.
<div class="w-11 h-11 shrink-0 grow-0 rounded-full bg-green-300 text-green-700">Content</div>
I have made an example for you in Tailwind Play.
Hope this helps.
A background gradient won't actually have any effect on the size or shape of an element.
In order to maintain a perfect circle you first need to make an element a square and then use something like border radius to round the corners.
The most recent version of Tailwind CSS has a class to utilize the "aspect-ratio" property.
(More on that here: https://tailwindcss.com/docs/aspect-ratio )
Your HTML might look something like this:
<div class="avatar aspect-square rounded-full"></div>
"aspect-square" will make the element always be a square.
"rounded-full" will use border-radius to make the square a circle.
Both of these classes are available in Tailwind CSS.
If you haven't already, your icon avatars may need a defined height or width to make sure they match each other in size.
I'm trying to center a before pseudo element relative to its parent and I'm wondering whether there is a tailwind syntax to apply negative values to the translation of the before element.
My div looks like
<div class="relative before:absolute before:content-['centered'] before:left-1/2">
I'm a div and my before element is perfectly centered
</div>
I would like to use something like before:-translate-x-1/2 or -before:translate-x-1/2 but this does not seem to work.
I can work around by defining an extra center class like
.center::before{
transform: translate(-50%);
}
Is there a way to achieve this using only tailwind utility classes ?
Turns out you can do before:-translate-x-1/2.
If you have a similar issue, for me the fix was that for some reason the tailwind layer base was commented out so some utilities didn't work.
<img class="icon-document" src="/images/icon-document.svg" alt="icon-document">
<img class="icon-folder" src="/images/icon-folder.svg" alt="icon-folder">
<img class="icon-upload" src="/images/icon-upload.svg" alt="icon-upload">
</div>
this is the image of what I want to achievestrong text
Raphael, it is either the icon image is already carrying the background-color, but if not then the icon would have to be png image with no background.
It is only when the image itself has no background that you can add background with CSS
try to use font awesome icon. then you can easily set a background color.
You cannot apply background color on that way. I would suggest three options:
Give a border radius to the image like this: <img src="/images/icon-document.svg" alt="icon-document" style="border-radius: 50%;">
You can crop the image with any editor or online circle_crop_image . Do the same with an image which contains only the color you want and add your image on top of that)
Find a similar icon on bootstrap
Given my CodePen https://codepen.io/scottmgerstl/pen/MpMeBy this is my image layout in question
<span class="profile-pic-wrapper">
<a href="https://www.google.com" target="_blank">
<img class="profile-pic" src="http://i-cdn.phonearena.com/images/article/67689-image/Video-shows-Super-Mario-64-HD-playing-on-the-Apple-iPhone-6.jpg"/>
<span class="profile-pic-overlay">
<span class="social-icon">View Profile</span>
</span>
</a>
</span>
Description
I am trying to use a CSS transition on a linear gradient (profile-pic-overlay) that is clipped by a border radius (profile-pic-wrapper). The desired behavior is to have a profile image when, the rounded image container is hovered over, a linear gradient fades into view indicating you can view the profile.
The issue
The gradient does not honor the bounds of the border radius. I tried this answer but when I do that, the linear gradient will not transition. #Keyframe animation doesn't help either.
Any ideas?
Edit
This appears to be an issue only with Chrome on Windows
As far I can test the problem is related to the <a> container of your gradient layer. Searching about how to solve this issue here are some properties you can add that will cover most browsers:
will-change & transform:translate3d
Add this to your code:
.profile-pic-wrapper, .profile-pic-wrapper a {
display:block;
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0);
will-change:transform;
}
Codepen Demo
Note: Info adapted from this answer, I want to post here my answer to suit your case beacuse you need to do it on a tag and parent tag, but if you want we can close it as dup.
How can I appply gradient to the border of a div using CSS ? Any one example please. I have tried using google, but not able to do it.
the trick is to use a wrapper and had an background image to it, so it's IE7+ proof
<span class="buttonWrapper">
<input type="button" value="Submit" />
</span>
live example on JsBin
http://jsfiddle.net/nicktheandroid/b875w/1/
check out my demo, i'm in the process of trying to get the gradient to only be on the right border, not the others.