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.
Related
Please check this image. (The black slate)
Is there any way of achieving these edges through CSS?
The only way I can think of is by using an image editor.
Thanks for your time.
To follow on from the comments, I don't think what your asking for is possible through CSS. I think you're right is through editing the image itself.
But what you can do is create an image to give you the effect, to save you editing each image separately, and then applying the image as a background on a wrapping element, so your mark-up could look like this for example:
<span class="chiseled">
<img />
</span>
You can then use your created image and apply that to the span and overlay it on the image to have the effect.
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.
I have a button with a Fontawesome icon inside of it, as bullet that I want to be always on the right of the button's text. See Fiddle
Let's say I always want that icon to be in a fixed distance of 6px from the left edge of the button.
I can't figure how to do that, so right now I'm using right:150px as the positioning value, but this only fits the dimensions of a certain button, according to the text inside of it. Once I change the text to longer/shorter, the icon would move as well.
How can I make it fixed?
(I don't remember if my current code works well on IE7/8 in the first place, but if it does, I want the solution to work with these versions as well).
HTML:
<form>
<div class="button-area">
<label>
<span class="fa fa-eye fa-lg bullet"></span>
<input type="submit" class="button" value="Changing Text">
</label>
</div>
</form>
CSS:
.button-area{float:left;margin-left:5px;position:relative;padding-bottom:8px}
.button{display:inline-block;zoom:1;line-height:normal;white-space:nowrap;vertical-align:baseline;text-align:center;cursor:pointer;-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-family:inherit;font-family:'Open Sans',arial;font-size:17px;padding:.6em .8em .5em 1.8em;text-decoration:none;border-radius:4px}
.button{color:#fff;background-color:green}
label{display:inline-block;cursor:pointer}
.bullet{position:absolute;height:11px;top:15px;right:150px;width:3px;color:white;font-size:1em !important;text-shadow:0 1px 1px rgba(0,0,0,.2)}
If i read your question right, you want the .bullet span to be 6px from the left, but you are using right:150px; to place it?
Why dont you just use left:6px;, thats what it is for.
JSFIddle
Easy enough. when you using font based icons you just have to treat your image as if it were a single letter from a font.
that means. Don't give it any width. If you want to make it bigger use font-size and then. If you want to make the position of your single "letter" absolute, it's fine (although I would prefer other ways). Just remove your "width" from your css and add left:6px insteed of right.
for your next fiddles I recomend you to make it a bit cleared (a propertie for line) as it's hard to look it easily as you have it right now.
I just change this css:
.bullet{position:absolute;height:11px;top:15px;left:6px;color:white;font-size:1em !important;text-shadow:0 1px 1px rgba(0,0,0,.2)}
EDITED: I am adding one of my comments as I think it may relevant to make a better use of html/css (imho)
But it you really want it to do it really right.. insteed of an
input.. and if you can't use simple links ( a tag) then use button tag
insteed. because you could do something like this:
https://jsfiddle.net/gw6ce83o/5/, your users now can click everywhere
in your button (insteed of just the input) and there's a very high
posibilitie your submit will works the same (programming) than it does
your input atm
updated FIDDLE
I have a on/off jquery switch on this page http://www.fospower.com/test that basically overlays the entire page in a dark color. However I need some help in trying to make the div below appear above the overlay. Any help is welcome.
I've tried changing z-index and overflow content but that doesnt seem to help any.
<div id="light">
<div id="itoggle">
<p style="text-align:center">Turn Off The Lights</p>
<label class="itoggle iToff" for="lightswitch"><span></span></label>
<input id="lightswitch" type="checkbox" class="iT_checkbox">
</div>
</div>
If you are adding the overlay via JS then just add the div after the overlay the same thing goes for if you are just using html then styling just add the div you want on top at the end and make it position absolute then it should appear on top of the overlay
I am trying to style an Input of type File:
http://codepen.io/mdmoura/pen/njAgJ
The HTML markup I am using is the following:
<span class="file">
browse<input type="file" name="annex"/>
<span>path</span>
</span>
The inner span (in RED) is to display the selected file (using JQuery).
The problem is I am not able to vertically align the RED span with the Browse "Button".
I tried other options but I always end with some kind of problem.
Could someone, please, help me out?
Thank You,
Miguel
You can use display:table-cell for both the <a> and the <span>.