I want to make gradient text only with css3 or html5 working on Android. I tried with css3 but on android there's a little problem. I tried this http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/. Here's how it looks like in android http://img121.imageshack.us/img121/5014/androidw.png . Can somebody tell me how to fix it, or another way to do it, no matter with css3 or html5 canvas?
header h1 {
position: relative;
display:inline-block;
margin-top: 0px;
background: rgba(0,0,0,0);
margin: 23px 0 0 77px;
}
header h1 a {
color: #fff;
position: absolute;
background: rgba(0,0,0,0);
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
header h1:after {
content: 'Company name';
background: rgba(0,0,0,0);
text-shadow: -1px 1px 2px #232323;
color: #dadada;
}
It could be a browser issue.
Here is a link to a cross-browser css gradient generator.
Try creating any gradient and try it. If it works, then it's a browser issue.
Here is the link: CSS Gradient Generator
Let me know if it sorts the problem for you.
Related
I've been trying to fix this bug for days, yet I didn't find a single solution.
On certain levels of zoom (even on my phone with default zoom) I can see grey borders below some divs. I've been trying to fix this with A LOT of options including:
box-shadow
margin-bottom
outline: none
... and some other ones which I don't even remember anymore
The issue can be seen here.
PICTURE LINK
It's visible on the top of the triangle.
The whole code is available here:
https://noobish.eu/beta/
I went through your website (BTW great design) and i think i figured out a solution for your issue. You need to add a negative margin to the triangle to cover the space:
.white_triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 130px 50vw 0 50vw;
border-color: white transparent transparent transparent;
margin-top: -5px; /* Here's the addition */
}
Update:
The margin-top solution seems to be buggy, so I found another solution, which would require adding a before element on top of the border. Here's the code:
.white_triangle_container:before {
content: "";
position: absolute;
width: 100%;
height: 8px;
background: #fff;
margin-top: -4px;
border-radius: 0 0 50% 50%;
}
This is how it looks: https://i.gyazo.com/25db9e4b9db16c42d374cfd78b47736d.png
In mobile Chrome there are faint lines at the edges of backgrounds and border-images as seen in this screenshot (bottom of bricks and around the inside of green header.)
I've seen it mentioned on SO that backgrounds that get repeated (in my case the image has repeat-x) but I haven't seen the border-image case mentioned (in the screenshot the border has green in it then the background-color is set to the same green.)
Has anybody worked around this? I recently installed Android 4.4 on my phone and this bug goes all the way back to then. Thanks!
EDIT:
Here's the CSS for those elements:
#content { /* div the background is on */
background-image: url('/media/top.png');
background-repeat: repeat-x;
background-position: left top;
}
h1 { /* headings (green boxes */
border: 30px solid transparent;
border-radius: 10px;
padding: 0px;
background-color: #25552e;
border-image: url('media/border.png') 33.3% round;
color: white;
}
I'm developing a web based app. I load a page on an android WebView.
The issue is, I set a wave border effect to a div using css3 radial gradient, the page shows correctly on most browsers, and works fine for iOS version app as well. But on the android app, If I add this style, the page will totally become blurred. I paste my css code here:
wave-l:before{
display: block;
position: absolute;
content: '';
top: 0px;
left: -4px;
height: 100%;
width: 4px;
background-position: 0px 0px;
background-size: 4px 8px;
background-image: -webkit-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: -moz-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: radial-gradient(circle at 100% 4px, $color 4px, transparent 4px);
}
This css will generate a left wave style border. The blurred pages shown on android WebView is as shown below:
I'm quite sure it's this css code snippet caused the issue. So anybody know the solution?
Add the code
android:hardwareAccelerated="false"
in the AndroidManifest.xml webview used activity.
It is too late to respond, but I was also getting the blurred issue in webView. I resolved it by adding
webView.getSettings().setJavaScriptEnabled(true);
It may help somebody
I created simple Qt iu form in Qt Designer. I thought it is kind of WYSIWYG editor for Qt, but I'm starting to think it's more like WYSITUTWYG.
Jokes aside, I am trying to use CSS as much as possible so that we can quickly change design once we have an idea that doesn't look like crap. This is the CSS, which is applied to MainWindow:
* {
margin: 0;
padding: 0;
}
QWidget {
background-color: black;
color: white;
font-family: Arial;
}
*[class="h1"] {
color: yellow;
background-color: rgb(50, 191, 12); /* light green*/
font-size: 15pt;
padding: 6px 8px 6px 8px;
}
QPushButton {
background-color: rgb(50, 191, 12); /* light green*/
color: black;
padding: 2px 5px 2px 5px;
}
*[class="datapointWidget"], DataPoint {
border: 1px solid white;
}
I am using custom dynamic property to use [class="h1"] selector. This one thing actually works really well.
This is the result:
As you can see we have some problems here:
padding has no effect at all
magically, yellow border appeared around headings
buttons did show green background but still also render natively
DataPoint widget has no border
One thing that actually holds well is the weird right margin - the one thing I hoped was just a Designer visual bug, but actually appears in the program.
i can't fix the problem. I'm testing website on Android smartphone and when i tap on links it becomes hotpink on a second.
I'm using styles:
::-moz-selection { background: #989898; color: #fff; text-shadow: none; }
::selection { background: #989898; color: #fff; text-shadow: none; }
a,a:hover,a:active,a:visited {-webkit-tap-highlight-color: #989898;}
But it doesn't work. How to fix this?
add this to your css file
a:focus{}
in your reset.css ::-moz-selection{ background: #FF5E99;} changes color code