HTML CODE
<div class="pageHeader">
<span class="coolStyleUnderline">Change Password</span>
</div>
CSS CODE
.pageHeader {
text-align: center;
color: #750000;
font-family: "MedievalSharp";
font-weight: bold;
font-size: 60px;
}
.coolStyleUnderline {
background: -webkit-linear-gradient(black, #750000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
border-image: linear-gradient(to right, black, #750000);
border-image: -webkit-linear-gradient(right, #750000, black);
border-image-slice: 1;
display: inline-block;
line-height: .9;
border-bottom: 6px solid #750000;
}
Things I have tried
Setting the padding to 0
Setting appearance (including webkit, etc.) to "none"
Setting the line-height to 1
Setting the border to none BEFORE the border-bottom attribute
Devices With Issue
iPad Pro 12.9in (Safari and Chrome)
iPhone X (Safari and Chrome)
iPhone 6s (Safari and Chrome)
I have attached two photos. The first one is what the border is supposed to look like (taken on Windows Chrome) and the second one is what I am getting on my apple devices. Any help is much appreciated. Thank you!
No Issue Photo
Issue Photo
I figured it out boys. All I had to do was specify the border image width. This was done by adding the following to .coolStyleUnderline :
border-image-width: 0px 0px 6px 0px;
Thank you to everyone that tried! Have a great day!
Related
I want to make a gradient text-shadow (like this)
Is it possible to do that with CSS or/and Javascript?
Thanks for help.
You can try it with a linear gradient, like in the example snippet below. Please note, that this does not work in Internet Explorer and Edge. I tested it successfully in Chrome, Firefox and Opera, and have no option to test it with Safari.
div {
font-size: 128px;
background: linear-gradient(90deg, #ff0000 5%, #00B053 15%, #1BAADA 30%);
-webkit-background-clip: text;
-webkit-text-stroke: 12px transparent;
color: #000;
}
<div>
Text
</div>
i was using a RGBA background, but it was not working in IE6. I found a way to sort this online.
table{
width: 100%;
border-radius: 20px;
border: 2px solid black;
padding: 10px;
text-align: center;
background: #87C4CF;
background: rgba(135, 196, 207, 0.7);
background:rgb(135,196,207);
background: transparent\9;
background:rgba(135,196,207,0.7);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b287C4CF,endColorstr=#b287C4CF);
zoom: 1;
}
table:nth-child(n) {
filter: none;
}
This works in IE6 but now the table does not display in IE 8. Works fine in every other browser.
Is a translucent background really going to make or break your layout?
For IE8, make a translucent 10px x 10px PNG in PhotoShop with the color and transparency you want and set it
as the background image, repeating.
Give IE6 a solid background
color
Everything else will support your rgba() background syntax.
You can use CSS3 PIE to better your life with ie
as u can see the border is missing from the corners (red one). if i make it 4+ px thick then its ok but i need it 1px thin. why it is a problem? ist this property behaves by design like this?
the html
<div class="win" >
<img class="rounded" src='red.jpg' />
</div>
and the css
.win{width:188px;float:left;margin:0 30px 25px 0;}
.win .rounded {
overflow: hidden;
behavior: url(PIE.htc);
border:1px solid #000;
-moz-border-radius: 7px; /* Firefox */
-webkit-border-radius: 7px; /* Safari and Chrome */
border-radius: 7px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}
/EDIT/
finally i have found a solution which makes exactly what i needed. i share the link maybe someone else has the the same problem:
http://webdesignerwall.com/tutorials/css3-rounded-image-with-jquery
You should have a look at the background-clip css property. Try background-clip: padding-box. You should also add -webkit-background-clip and -moz-background-clip to support older browsers.
There is an issue using border-radius with images in most/all browsers. There are a number of online articles about this but I've not paid attention to them. You should Google for those.
If you want good rounded borders that will work with a large number of browsers, you could use image as a background for a div with needed css-properties.
Example (only border, nothing else):
html
<div class="card" style="background:url(image.jpg) no-repeat center center; width:150px; height:150px;"></div>
css
.card {
border:1px solid #000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}
I have 5 browsers for rendering html coded pages: IE9, Firefox 4.0 and all the newest versions of Chrome, Safari and Opera. Now in IE9 and Firefox 4.0 an image is being cropped properly in using border-radius: and -moz-border-radius: but fails in Opera, Chrome and Safari using -webkit-border-radius:. With Opera the image is not being cropped at all and with Safari and Chrome the image is somewhat cropped but with the border being cropped out as well.
.nonTyp{
margin: 15px 15px 15px 15px;
border:4px inset #C1C8DD;
border-radius:25px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
width:200px;
height:200px;
}
If you have one of the 3 browsers mentioned that utilize -webkit-border-radius: please view images for example of what I have an issue with:
Graphics Page
What you could do is put all styling that's on the <img> tag now, on the parent <a> instead so as to use it as the container for the image. This, at least to me, makes more sense as well. Don't forget to keep float: left on the image to get rid of phantom bottom margin either.
I think it's because it is in the foreground above the border
try using the same code you have above, but in your html:
<div class="nonTyp" style="background-image:url('image.jpg');"></div>
This probably has to do with the order in which the border vs. radius clip is applied, but is very strange. A solution is to move the border-radius and related definitions to the enclosing tag. Remember to declare display:block so it's treated as block level on all browsers.
This worked for me in Chrome and Safari.
Image is top level.
div.someclass with radius 5px and div.someclass img with radius 4px.
That seems to make the corners look cleaner in Chrome and Safari.
.someclass {
...
border: 1px solid #000;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
-webkit-box-shadow: 0px 0px 5px #000;
-moz-box-shadow: 0px 0px 5px #000;
box-shadow: 0px 0px 5px #000;
}
.someclass img {
...
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I think drawing functions that Chrome uses for image and link are works differently between each other. And that causes a blank space between image and the link.
I partially fixed this bug via modifying Matjis' jsfiddle code a little bit. I moved img tags position to left.
.gallery a img {
...
position:relative;
left: 2px;
}
This solution may work if you set different radius values for image and the link.
I'm styling a lightbox div with the following properties:
#lightbox {
border: 0.3em solid #acaeb0;
-webkit-border-radius: 1em;
background: #eee -webkit-gradient(linear, 0% 60%, 0% 100%, from(#eee), to(#ccc));
-webkit-box-shadow: 0 0 0.6em 0.3em #888;
}
Problem is that the resulting rounded corners looks very ugly (using safari5):
Problem is the white space at the rounded corner.
Do you know how I can avoid this behavior?
EDIT:
After adding the -webkit-background-clip: padding-box; property it looks better but not perfect:
I reduced the width of the border but it looks the same with thick borders. Do I have to set another property to make it perfect looking?
EDIT2:
Seems to be a Bug of webkit:
https://bugs.webkit.org/show_bug.cgi?id=21819
This is called "background bleeding".
For a possible fix, take a look at this site: http://tumble.sneak.co.nz/post/928998513/fixing-the-background-bleed.
As it says, you should try setting:
-webkit-background-clip: padding-box;
The only hack which gave me satisfaction on a similar case was to wrap a box within another : one with the background, the second with the border, both with the same border-radius but the first one with a transparent border. And the code comes like this :
.fist-block {background: black; border-radius: 20px; border: 0px solid transparent;}
.second-block {border-radius:20px; border: 1px solid red;}
I get this problem in Chrome when using a 1px border however using 2px and above looks fine.
Chrome: 13.0.782.218 m