I'm designing a site (a customer portal) that will probably be used with mobile/touchscreen devices at some point in the future. In the past I've used CSS code like this:
div.Info
{
display: inline;
position: relative;
text-decoration: none;
}
div.Info span.InfoDetail
{
display: none;
}
div.Info:hover span.InfoDetail
{
padding: 3px;
display: block;
position: absolute;
top: 1em; left: 1em;
border: 3px inset Gray;
background-color: White; color: #000;
text-align: left;
white-space: nowrap;
z-index: 25;
}
to create little CSS popups that display on mouseover and they seem to work very well. However I'm conscious that this may or may not work on touchscreens so I was wondering what the "correct" behaviour was as there doesn't seem to be much consistency that I've found across the limited amount of mobile browsers I've been able to look at. I had looked about a bit and it seems that this hover event may activate if the object gains focus, so I created some test code at http://mad-halfling.webs.com/testcode.htm that displays a small popup if you mouse over the "Mouse over for detail" text or the little up-arrow image:-
on iOS (I found a demo iPad in a shop to test it) this doesn't seem to work (I only tried the text as I have only just added the image)
on MicroB on my N900, tapping the text and image both bring up the popup, fine
on Firefox (I believe it's Fennec) on my N900 tapping on either does nothing
What's your take on this - it seems a shame as it's such a useful way of making popups without having to resort to javascript, but if it won't work with touch-screens going forward I'm going to have to rethink my strategy
Cheers
MH
The fundamental problem with mouseover, including when it is used for desktop websites, is that there is no UI indication of a behavior.
This isn't a definitive answer but I've noticed that in places where you would be using "mouseover" now on a mobile device you can use "long touch". The problem though is that nothing on the UI indicates that behavior. (To be fair UI conventions that have no indication have been around for a while, like double clicking).
The rule of thumb probably should still be that just like mouseovers, critical functionality shouldn't require them.
Why not have a image of a question mark in a circle (which seems to be common idiom) near whatever you'd like a popup for, and have that have onhover and onclick functionality to display your documentation?
Related
I’m currently developing an application with a GUI in C for use on a Linux machine. I’m using GTK3 and building the GUI in Glade. One part of my GUI uses the GtkCalendar widget and I’d like to customize its appearance, but I’m having some trouble. I’ve been able to style many other aspects of my GUI using a css file and have attempted to do the same for the Calendar, but with limited success.
I’ve provided a screenshot showing the current state of the calendar widget with the css styles I’ve been able to apply. I’ve also attached my css code.
I’m more or less happy with how the Calendar looks now but with 2 big exceptions:
I would like the left and right arrows in the header for changing the month and year to be larger so that they’re easier to use on a touchscreen. So far I haven’t figured out a way to do that. The most I could manage was adding a shadow so they’re more visible, but I can’t seem to increase the size of the button.
The box around the currently selected day on the calendar grid is off center. While this doesn’t affect its usability, it’s aesthetically unappealing to me and would prefer to change it. Those are the 2 big issues I’m having now.
I feel if someone is able to help me solve them, I’ll be able to tweak everything else to my liking. Thanks in advance for any help or insight you can provide.
.GtkCalendarStyle {
font: 24px "FreeSans";
padding-top: 8px;
padding-bottom: 7px;
padding-left: 7px;
padding-right: 8px;
border-color: rgba(0,0,0,0);
}
.GtkCalendarStyle .button {
color: black;
box-shadow: 3px 3px 5px gray;
}
.GtkCalendarStyle .header {
background-color: rgba(240,255,255,0.5);
}
GtkCalendar Screenshot
I've attempted to change the style of a GTK3 calendar widget using css but have been unable to change everything I needed.
Hello I am tired of the boring looking Google Chrome native html5 video player design.
It's getting worse with every time they change it.
Right now it's in a bright white which is completely unsatisfying when you ask me.
So I decided to create a little userstyle to make it dark.
This is how far I came but it's not possible for me to change the color of the little circle.
Any help is welcome.
This is my actual progress:
video::-webkit-media-controls-panel {
background-color: #161618;
}
video::-webkit-media-controls-volume-slider-container {
background-color: cyan;
}
video::-webkit-media-controls-volume-slider {
background-color: #1FB2B0;
}
video::-webkit-media-controls-timeline {
background-color: #1FB2B0;
}
Here is the jsfiddle link for it.
https://jsfiddle.net/cyc1j0nv/7/
I eventually got where I wanted to go (more or less) by applying a filter to the media controls as a whole. Of course, one could also apply filters to each pseudo-element of the controls individually.
video::-webkit-media-controls{
filter: hue-rotate(180deg) brightness(0.9);
}
<h1>Styling video controls</h1>
<video controls src="https://a.desu.sh/zflbzy.webm"><</video>
*Note: it's up to the user to add vendor-prefixes to the CSS as required
There isn't any CSS style to change the little blue circles in the same sense as your example; they're images that are packaged into chrome. Maybe one of the css3 image filter properties would work.
There's also a small caveat to overriding these styles in general: they are internal to chrome, and are subject to change at any time. Pages that depend on them might find that they simply don't work the same way in some future version of chrome.
If you'd like media controls with a custom look on your page, then you might want to take a look at the many javascript media players that give you quite a bit more flexibility. They also work across different browsers.
I succeeded in positioning the controls in a way without overlay the original video screen by:
video::-webkit-media-controls-enclosure {
overflow:hidden;
position: absolute;
bottom:-32px
}
video::-webkit-media-controls-panel {
display: flex !important;
opacity: 1 !important;
}
hide download button by adding:
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
Our designer prefers to provide web designs in .psd (Photoshop). When we get to create a page markup and styles, we usually have to compromise the design in favour of tools available to us. Surely the later depend on the skill of the person who implements the page, but given the following example, what is the general approach to research and arrive at the correct CSS technique to implement the design?
The example in question is the following:
In Photoshop, a text-based login button looks like this as the final result:
This is basically a [T] (text) element with the effect (Fx) applied to it. The effect is color overlay that appears to be set like this:
Without this effect, the login page in PSD looks like this:
Which is exactly how it looks in our page on the browser. If we are to get it to look exactly the same as in final .psd design, how we are to approach looking for the correct css-technique example?
We implemented the login link as <button> element with a given .css class. I've tried going with backgound-blend-mode: normal like this:
.login-box .login-button {
width: 100%;
height: 100%;
margin-left: 12.4vmax;
margin-top: 0.7vmax;
background: #5f6f8f;
border: 0;
outline: 0;
font-family: "OpenSansRegular";
color: rgb(57, 68, 98);
font-size: 0.9vmax;
font-weight: 700;
background-color: #5f6f8f;
background-blend-mode: normal;
}
but it gives the following look in Chrome:
I realize that the problem is probably related to the fact that we are using web font technique and it's not affected by the styling in browser, the same way text is affected in photoshop, but I'd appreciate a hint on how to approach the above-described problem. Thank you.
Try using adobe brackets it really comes in handy while slicing a psd. It has lots of cool feature and it would provide you with CSS hints so that you can achieve the same result as the .psd
Download brackets from here
Apply this css to the text:
Text-shadow: 0px 1px 2px rgba(255,255,255,0.2);
I've seen other solutions on this topic, but none of them did the result I need (or want).
The problem is, Mac renders some fonts in an awkward way, the fonts are way too thick, even on Regular style. It's annoying!
So I thought I'd go for a CSS-Workaround to let the fonts seem thinner. All I could think of would be an inner-shadow for texts in hope they won't get too blurred, but this is easier said than done, text-shadow doesn't support this (for whatever reason).
Does anyone have an idea on how to achieve this effect?
I think this would be a losing battle, if you take into consideration that now, rather than the possibility of only dealing with fonts at a fixed resolution (72dpi, the standard on monitors for a decade or so, now), you also have to deal with some Mac's "retina displays" where the resolution is approximately 220-227ppi.
I'm also certain I read somewhere that those programs that have not been rewritten to scale properly on retina displays have to be interpolated by the OS, so it's quite possible that, from Mac to Mac, browser to browser, the same font is going to look quite different. As of right now, the only browsers I can confirm having Retina support are Safari (big surprise there, right?) and Chrome.
(For more information on this subject, see this question: https://apple.stackexchange.com/questions/54905/retina-macbook-pro-fonts-look-terrible)
You might be able to vary the fonts used based on pixel-ratio with a media query, if you are really committed to trying to hit this moving target.
#media all and (-webkit-min-device-pixel-ratio: 2) {
/* all your retina-display-tweaked settings, here */
}
Maybe this is a little bit too much effect but i think this is what your are looking for.
Adding a text inner shadow effect with :before & :after
.depth:before, .depth:after {
content: attr(title);
padding: 50px;
color: rgba(255,255,255,.1);
position: absolute;
}
.depth:before { top: 3px; left: 3px }
.depth:after { top: 4px; left: 4px }
jsFiddle: http://jsfiddle.net/4GAkK/
First post from a lurker, so please bear with me.
In my company's Facebook app, there's a form that can have error messages, which are getting double left padding. They have a fair bit of padding to line up with the inputs above them (which also get the left padding).
(Broken error message img) http://img687.imageshack.us/img687/2609/windows7x64ie9beta2.png
When I pop this same page out of the Facebook iframe, it displays normally, with form elements and error messages lining up.
(Non-broken error message img) http://img535.imageshack.us/img535/651/windows7x64ie9beta14.png
The actual code is an inherited (in all senses of the word) mess, but does work in everything including IE6 & 7 with no hacks. Here are all of the non-reset-styles on these lis:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 160px;
I've confirmed that doubling the padding yields the messed up view (I can only use IE Developer tools in the non-messed up view since it can't handle the iframe).
Anyone have any idea? Other than ripping up this old code and starting over?
UPDATE: Seems like ripping up the old code might be a necessity. I have some ULs with no children that might be causing some breakage.
UPDATE 2: The dynamically generated dom is a mess, but the engineers here have no time to refactor it, so I may never get the answer to this question. :(
This may not be an ideal solution, but I would use a condition and a separate IE9-only stylesheet to fix this issue.
Something like:
<!--IF[IE 9]-->
// Include IE9 stylesheet here
<![endif]-->
and in that stylesheet maybe do something like this:
clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 80px; /* half the padding */
Are you using floats? I reached this question via a similar problem.
Check out this answer: IE 9 CSS Float problem!