I find myself seeing things like buttons, inputs, header, ect. and wanting the code so I can reference off them and make my elementary designs look better. I always try to change it up a bit, I don't like stealing other peoples designs.
Viewing the page source from just the browser is very sloppy and usually hard to read. I tried using Firebug but I noticed one huge problem. It doesn't show all the CSS.
Example
Firebug will only show:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
When the full code is:
box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-webkit-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
-moz-box-shadow: 0 14px 10px -12px rgba(111,112,114,0.8);
If leaves out the moz and webkit.
I can speak with experience in the Chrome Inspect tool, when debugging the page elements the browser automatically ignores and does not show the invalid properties or styles, but if you look at the actual page source code (or the css) your styles will be there.
I think that if Firebug does not show those styles it means Firefox is ignoring them, in this case you are using the -moz-box-shadow but Firefox uses box-shadow to render the element.
download the latest version of any browser and you see absolutely all the css.
With Inspector in Chrome you can see even the different states like :hover :active and so on
Why not just use the inspect element that's built in to Chrome? I use it every day of my life and love it.
I also use "stylebot" to show me some styles of websites, but I only use that to style websites (clientside) that I feel need a bit of fixing, like making buttons bigger, etc.
Related
I apply same values for box-shadow property, but on IE11, the shadows seem thinner and I even can't see it in some case.
See this fiddle: http://jsfiddle.net/anhhnt/8pvgZ/2/
Here is result of IE11 for who don't have this browser:
The original property value is :
box-shadow: 0px 1px 3px 0px #777;
When I change it into
box-shadow: 0px 1px 6px 0px #777;
... then it seems OK, but why there is this difference? and what is best solution to work around this?
Thanks in advanced
This happens because each browser has it's own way of rendering elements.
The best way to work around this really is to make your page non-dependant on graphic elements that may differ from browser to browser (such as box-shadow). When i have to use box-shadow, i usually put an almost invisble one, with a subtle border. It works out really nice, and avoid most of the problems we usually have with the absurd difference between browsers' interpretation of the box-shadowproperty.
I made a fiddle based on the one you posted.
When I use the text shadow css, mozilla and chrome are showing different smudging levels.
#dfg{
color: #fff;
text-shadow: 0px 0px 2px white;
}
In mozilla I'm getting a more smudged look which i don't want. I've tried
-moz-text-shadow : 0px 0px 1px white;
but it doesn't help. Is there a method in css to give browser specific text shadow values or should i go for a javascript to identify the browser and then select a shadow level.? Please help.
chrome version
mozilla version
Personally I think a Javascript based method would work best, all modren browsers support the standard CSS shadow function, I think you were thinking of -moz-window-shadow which is a OSX feature.
also look into the blur property of text-shadow, perhaps explicitly defining it?
So I've been working on a HTML5 iPad application for work and have come across a problem. I didn't have access to an iPad whilst first working on this app and relied on desktop Safari to get my app quickly together (probably not the best thing, anyhow...)
I'm having to rely on a input range for a part of the interface. After seeing that HTML5 had a range input, I was happy as this is just what I needed. I even managed to style it up to exactly what was designed:
This is great! ...until I actually tried it on an iPad and it doesn't work. Just shows a text input. I'm now wondering what to do... I do need a slider, something that when dragged, it spits out the data. Obviously needs to work with touch. After looking around all over the web, there doesn't seem to be a solid solution.
What do you guys suggest here? What's the proper way of coding up a working touch-friendly slider, just like the native HTML5 one that it doesn't support!?
Any ideas/thoughts/knowledge/experience would be greatly appreciated!
James
I tested all the proposed "solutions" and found them all lacking.
All are excessively bloated, some change your existing markup or force unnecessary CSS styles.
So I crafted my own solution in 2kb of JavaScript (minified).
Try it (on your mobile device): https://range-touch.herokuapp.com
Code: https://github.com/dwyl/range-touch (concise and commented)
To get this working in your own project all you need to do is include the range-touch.min.js file in your page/template.
Magically <input type="range"> works on all mobile devices.
You can style the slider & button how ever you like.
I've included sample styles in the optional/style.css
Note: this solution Assumes you have JQuery or Zepto.js
You could have a look over http://jqueryui.com/demos/slider/ .
Try accessing the page on the iPad and see if it's touch friendly.
I have exactly the same problem, only with an iPhone.
This is because Mobile Safari only supports a subset of HTML5. I am using JqTouch which is causing me all manner of issues so do avoid this framework.
Take a look at jquery mobile. Its currently Alpha 3, but has a slider control which works on iOS.
Hope this helps you a little.
Try this one - https://github.com/freqdec/fd-slider. Even the tooltip on the demo page is working on mobile safari - http://www.frequency-decoder.com/demo/fd-slider/tooltip/.
There's a fix for rangeinput from jquerytools for touch devices: https://github.com/Patrick64/jquerytools/blob/dev/src/rangeinput/rangeinput.js
Works like a charm!
I found that you have to use a very light touch on Safari mini-tablet (or phone), and the slider works. If you press down too hard, Safari Mobile (or tablet), tries to bring up the "select/select all" pop-up bubble, as if it were a text field. Also, Safari on my tablet or phone thought that I wanted to "move the window around" - I have not found a solution to these issues yet. However, I did get the slider to work in Safari with a "light finger touch".
I found the following resources to be helpful:
Pen by Aron Woost:
https://codepen.io/aronwoost/pen/nlyrf
Here is a sample of Woost's code:
input[type="range"] {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 100%;
height: 20px;
margin: 0;
border: none;
padding: 1px 2px;
border-radius: 14px;
background: #232528;
box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
outline: none; /* no focus outline */
}
Daniel Stern:
https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
You can do a google search on " How to style range sliders in Webkit
By Sara Vieira" and find her article.
I hope this helps.
An easy and quick SOLUTION!
The input range slider can be made User-Friendly on a mobile device by removing the troublesome highlight effect on the slider when tapped upon.
The Fix - Add the CSS property, -webkit-tap-highlight-color: transparent to the CSS of the element or the complete html page. This will remove the highlight effect on an element when it is tapped on a mobile device.
I have a website page that uses tables for layout and I am trying to convert it to CSS (never used before)
The navigation is 6 forms with different images placed besides. I know I can give each of these an id and position using css but there must be a less clunky way?
I was wondering If I can create a class which specifies the links position relative to the previous links position, and maybe set the first one manually?
Thanks :)
Purists would say that tables should only be used for tabular data. Your site is not tabular data, it's a layout, so using a table here is a hack. It's a perfectly fine hack if it works, but it may not ultimately be the cleanest solution.
The pragmatic part of me (which is much bigger than the standards Nazi in me) says there might be a cleaner approach using CSS. This could eliminate the need to clutter your source with unnecessary table cruft. You really have two divisions, each with paragraphs containing images, links, and text. It would be ideal if your HTML didn't have to contain anything but that.
If you use CSS well, you can get exactly that result:
http://www.aharrisbooks.net/demo/sample.html
Use 'view source' to see the HTML and CSS code.
A few notes:
I used the 'fieldset' element (which is supposed to be used in forms, but it works well here)
I guessed on colors
Modify the CSS to get exactly the effect you're looking for
I (obviously) used only one icon, but the same effect will work for the whole page
Only one div is needed (even that isn't necessary, but it looks nice to center content on the page
What I like about this design is how clean it keeps the HTML.
Best of luck, and feel free to drop a line if you have questions.
PS for more fun, add the following CSS3 syntax to the fieldset
box-shadow: 5px 5px 5px #333;
border-radius: 10px;
-moz-box-shadow: 5px 5px 5px #333;
-moz-border-radius: 10px;
-webkit-box-shadow: 5px 5px 5px #333;
-webkit-border-radius: 10px;
These attributes add rounded corners and drop shadows for a very nice effect. It won't work in IE, but the other recent browsers (Safari, Chrome, Firefox, and most mobile browsers) will see really nice effects. Yay for CSS3!
Try div.classname { float: left; width: 200px } and give the container object the same or different width - experiment with this until you're satisfied
While jimplode will not disagree with me, tables are still a valid element in HTML. You can even emulate them with DIVs using the CSS styles display: table (see quirksmode for browser compatibility). So unless the design is a maintenance nightmare or there is some other really pressing reason to change the layout, keep it.
Getting CSS right for most browsers can be a nightmare, especially if you need something "special". Say several elements on the same line with the same (automatic) height.
If you're new to CSS, look for an example that works and start to modify that.
If you're doing this for a public website, get Firefox 3, Chrome, Opera, IE6, IE7 and IE8 and test it with each of them.
Here is an image of the current layout using tables. It's simple but all the information I can find on css talks about multiple columns. I think I only need one? And maybe two divs?
img208.imageshack.us/img208/7038/layoutsz.png
Here's an example, I'm looking at in in FF 3.6 and the input with background: transparent has a different border to the untouched one.
http://jsfiddle.net/Pa2Kd/
My hypothesis is that, when the style is unaltered, a native Win32 control is used, with its default settings (more or less). But when you do alter the style, a custom control is used, or a more customized version of the Win32 control.
I remember similar things from when I was a boy and toyed with the scrollbars in Internet Explorer 4: They look normal if you do not mess with them (the theme of the OS), but if you do, they get "flat". Another thing is buttons: Windows Aero buttons look like they do - there is not really much to change. If you want to change the color of the button, you need to "disable" Aero theming of the button, and you get an old-style 3D, or flat, button, depending on your browser.
Just some thought. I might be entirely wrong, for web design is not my major field.
I second what Andreas says.
I don't know why exactly this is neither. I deduct from experience that when one of the border background-color visual attributes is altered, the browser switches from "OS rendering style" mode to "create rendering rules yourself" mode. Sadly, to my knowledge there is no CSS way of getting back to the OS rendering style.
The only way I can see to deal with this is to define a consistent ruleset for controls - which is a shame, because it's a perfectly logical choice to leave those styles rules to the user's OS.
Like the others said, this is due to default OS styling that is cleared as soon as you add any properties. You can mimick the default styling with CSS, though it would probably be overkill to do an OS detection and apply different CSS rules accordingly. Instead you could choose an OS styling that you like and apply that as the default for all text-inputs. Mac OSX styling can be reasonably reproduced with the following CSS:
#background {
background: transparent;
border:1px solid #ddd;
padding:2px;
-webkit-box-shadow:inset 0px 1px 2px #333;
-moz-box-shadow:inset 0px 1px 2px #333;
box-shadow:inset 0px 1px 2px #333;
}
Season to taste.