I am making a website which is designed to look somewhat like an iPhone UI, and I am using a popup. By popup (I don't know what it's actually called) I mean this sort of thing:
My question is, how would I make the buttons on it? I tried it, and -webkit-border-image doesn't work.
Thanks!
There are two ways to do this. One way is to use some webkit CSS properties, like -webkit-border-radius. Combine this with other webkit-specific properties and you will (after a long time) get rather good results.
However, there is an easier method. You can also make a button image (by photoshopping your screenshot) and use that as a background for the link. Than you just have to find the right font and probably use some webkit text shadow: an easy method to get great results!
I hope i understand your question right.
If you are allowed to use CSS3 have a look for border-radius
An example: (NEW LINK) http://jsfiddle.net/MGr3t/2/
CSS:
.button{
border-radius: 8px;
background-image: url("http://www.krause-sohn.com/images/background.jpg");
border-color: 1px solid black;
}
HTML
<input class="button" type="button" value="send"><br/><br/>
<img class="button" src="http://www.domain.com/background.jpg" width="100" height="40">
Related
I would like to use an image that is 195 x 29 to replace the hand when someone hovers over a map image. I'm trying to do this css but would consider a javascript option if no css option is available. I've tried several different css options but can not get the results I'm looking for. Currently i have my css code setup as:
#docmap {float:left;width:620px;height:225px;}
.click a:hover {cursor:url(images/click.png) no-repeat !important;}
and my html is:
<div id="docmap" class="click"><img src="http://whistlerworks.com/clients/918smile/site/wp-content/themes/Karma/images/map.png" alt="" /></div>
Thanks for the help.
.click a {cursor: url(images/click.png), pointer}
https://developer.mozilla.org/en-US/docs/CSS/cursor/url
check this out, might help let me know if its useful
http://www.htmlgoodies.com/beyond/css/create-custom-cursors-with-javascript-and-css3.html#fbid=2P5qQIHDj3T
The safest image format is a 32x32 8-bit black and white .ico file.
As #isherwood mentioned, the basic syntax is:
.click a {
cursor: url(my-icon.ico), auto;
}
I don't think JavaScript would help. Any browser support available would likely be via CSS alone. And you'd have to be willing to live with some browsers simply not supporting it (i.e., progressive enhancement).
Testing in different browsers
Here's a demo that uses a variety of image formats. Move the mouse over the squares to find out what works in each browser. In each case, if it works, you'll see a butterfly cursor.
Exceptions: The bottom row uses a completely-transparent image, so you should see no cursor at all. On the first two rows, in the "Help" column, you should see the default help icon (which is the fallback cursor for all of the other squares).
Been a while since I had a CSS related problem but here I am. to cut a long story short I want to highlight text with a gradient background which I have managed to achieve using the <span> tag and setting a background image onto it. The problem is it startes to get a bit trippy and breaks when the text goes on to a new line.
I have managed to fix it but the HTML is horrible and I don't like compromising HTML code for style purposes as a rule.
The best way to describe this is just to show you.
http://jsfiddle.net/sambeckhamdesign/2HSqh/11/
The top <li> is the good HTML with the broken style and the botom <li> is how it's supposed to look but with awful HTML markup.
Any solutions obviously appreciated. Don't mind using Javascript or jQuery but I'd rarther do it in CSS if I could.
Ta pets :)
I can provide you the css hacks working only for firefox and safari
::selection {
background: #ffb7b7; /* Safari */
}
::-moz-selection {
background: #ffb7b7; /* Firefox */
}
Reference:
http://www.catswhocode.com/blog/10-astonishing-css-hacks-and-techniques
Hope this help :)
The only method (that does not need extra markup) that i can think of would be to use a repeating background-image that has exactly the height of a line. This should work properly and fast if your line-height is constant. All other approaches are likely to be quite slow or bulky.
The best way I could se to do this in the end was to use the <span> tag. I hate doing this and try to avoid it when I can but it needed to be used in this case. See the updated JS fiddle in the question for how I did it.
Maybe this provides what you want
ul#container li.hilight {
padding:3px 20px;
background:url('http://www.sambeckhamdesign.com/_images/rain_1.jpg') left repeat-y #c06;
line-height:30px;
color:#fff;
}
and
<li class="hilight">
This is how the text should look
<br />
but the HTML markup is messy
</li>
Okay, so I've seen lots of solutions for styling checkboxes via CSS on the web. However, I'm looking for something slightly more robust, and I'm wondering if someone can help. Basically, I want to have this solution, but with the ability to have a CSS-specified color overlaying a gray checkbox. I need this because I will have unpredictable numbers of different checkboxes, each needing a different color, and I don't want to create vast amounts of different images to handle this. Anyone have any ideas on how to achieve this?
I created a transparent png, where the outside is white, and the checkbox is partially transparent. I modified the code to put a backgroundColor on the element, and voila!, a colorized checkbox.
http://i48.tinypic.com/raz13m.jpg (It says jpg, but it's a png).
I would post the example, but I don't know of a good way to show it. Any good sandbox sites out there?
This, of course, depends on png support. You could poorly do this with gif, or put a semi-transparent css layer over the image, like you suggested, and then use a gif mask to mask out the bleed of the colored box. This method assumes transparency support.
My png method uses the css, js from the page you linked to, with these changes:
JS:
// Changed all instances of '== "styled"' to '.search(...)'
// to handle the additional classes needed for the colors (see CSS/HTML below)
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className.search(/^styled/) != -1) {
span[a] = document.createElement("span");
// Added '+ ...' to this line to handle additional classes on the checkbox
span[a].className = inputs[a].type + inputs[a].className.replace(/^styled/, "");
CSS:
.checkbox, .radio {
width: 19px;
height: 25px;
padding: 0px; /* Removed padding to eliminate color bleeding around image
you could make the image wider on the right to get the padding back */
background: url(checkbox2.png) no-repeat;
display: block;
clear: left;
float: left;
}
.green {
background-color: green;
}
.red {
background-color: red;
}
etc...
HTML:
<p><input type="checkbox" name="1" class="styled green"/> (green)</p>
<p><input type="checkbox" name="2" class="styled red" /> (red)</p>
<p><input type="checkbox" name="3" class="styled purple" /> (purple)</p>
Hope that makes sense.
Edit:
Here is a jQuery example that illustrates the principle with checkboxes:
http://jsfiddle.net/jtbowden/xP2Ns/
It sounds like you already know this, but the solution you linked to above actually replaces the checkbox with a span tag with an image to give the effect of a "styled" checkbox.
For most browsers like IE and Firefox, there are few (if any) options and very little support for styling checkboxes with CSS alone.
Jeff B's answer on how to edit the said solution is correct. Here is the implementation of his edit to the solution if someone needs to copy and paste.
JavaScript http://pastebin.com/WFdKwdCt
CSS http://pastebin.com/TM1WwSQW
I've found http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/
a javascript + css solution thats works on win ie, win and mac: chrome, safari, firefox, opera. iOS Safari and chrome.
I am creating a form which is validated under jQuery Validation. I want to apply a light-red background colour to inputs which are invalid and need to be corrected.
When I apply background-color: #FFCCCC; to the input, the attractive styling seems to be removed and a hard border replaces it. For example, with a text input in Firefox:
Styled and unstyled text input http://liranuna.com/strager/b/textbox-difference.png
(Live demo)
This occurs with several browsers. It also occurs if I set any background other than #FFFFFF.
Is there a way to preserve styling while applying a background colour?
I am open to Javascript solutions which emulate the style somehow.
Sorry - any sort of styling on input elements tends to destroy their OS/browser defaults. The default inputs are rendered in an entirely different way - it's not like they're coded into the browser as CSS styles, unfortunately.
The best thing to do here is, rather than try to make your red-background inputs emulate normal ones, create your own attractive styling! If you like those light borders, use border: 1px #ccc solid. If you like round corners, take advantage of border-radius and -moz-border-radius - for those who are on the edge of browser development, they'll have 'em. For those who aren't, they won't notice the difference.
In short, don't try to make the inputs fit in with the OS environment, but rather style them to your own site's look and feel. This will create better design for your website overall :)
I'd say the default (Windows 2000) look of the controls is easier to implement for the browser vendors. A browser has to draw everything itself, including any controls. That they look native in their default style is just a little convenience for the user but without something really fancy (and heavyweight) like WPF it quickly becomes unwieldly to draw the control correctly with visual styles of the OS and CSS applied.
The exact style is also dependent on the OS and therefore a solution giving you exactly one look might not be what most visitors of your site want. Then again, using only CSS you can achieve The One Lookâ˘. If that just happens to look like the native one on a specific OS, well, then so be it :-)
What you're looking for might probably be emulated a little by using a light-gray border and on hover/focus a light blue one, emulating the Aero look of Vista and Windows 7.
Here the browser is using its default styling.
I would suggest adding something like the following CSS to BOTH inputs, then they will look consistent.
border: solid 1px #ccc;
Short answer: no.
Browsers and form controls is without doubt the most inconsistent part of CSS. All I can suggest is to use a 1px border on input fields, as most browsers use something similar to this. CSS3 rounded corners should also work in a few browsers.
input.text {
border: 1px solid #ccc;
background-color: #fcc;
border-radius: 4px;
-moz-border-radius: 4px;
}
You will find this page at 456 Berea Street interesting. It showcases how each browser applies different styles on text boxes.
Check out what styles the normal input field is getting for border. And apply that to the error one also.
Change your HTML to be like this:
<p><input type="text" value="text" style="border:1px solid #999999;" /></p>
<p><input type="text" value="text" style="background-color: #FFDDDD;border:1px solid #999999;" /></p>
Edit: If you want it to look consistent across all browsers and not only slightly rounded in Mozilla then you'll have to do a lot more work. Here's a link that will show you how to completely override the textbox style.
I am studying the css methods Google uses to create their ui. I realized that the css code on their home page contains no reference to their search box; it seems like just a naked input tag, with not a border, background image or any of the conventions normally used to stylize a border. And yet it can display not only a hue and a kind of gradient, but it is slightly round and also reacts to the cursor focus.
So, your guess is as good as mine. Please use your Firebug to check it out and help me get to the bottom of this riddle.
http://www.google.com/
EDIT: Just to be clear, I'm not trying to make an aesthetic judgment. Although I think minimalism of Google's homepage is fantastic, I am really interested to find out the techniques they used to stylize the borders around their search box -- without using any css whatsoever.
Are you using a mac? Aren't all of the native UI elements round, glow, and change color?
Do you have any add-ons like the Google Toolbar which could be modifying the UI of the page without you being able to detect it?
Edit: The technique asked about in the question really has nothing to do with CSS and everything to do with the browser. The text input on the Google home page has no CSS style applied to it and is therefore left to the browser to decide how it looks. Here's what it looks like when the field has focus in Google Chrome:
removed dead ImageShack link
No secret. It's a normal text box... Google's home page has always famously been minimalist.
not sure about their home page, but they do the same in Gmail, and there's CSS involved:
.mFwySd:focus
{
border:2px solid #73A6FF !important;
margin:0 !important;
outline-color:-moz-use-text-color !important;
outline-style:none !important;
outline-width:0 !important;
}
.mFwySd {
background-color:#FFFFFF;
border-color:#666666 #CCCCCC #CCCCCC;
border-style:solid;
border-width:1px;
color:#000000;
}
It is all about Chrome, it applies an outer glow effect when you focus on any textbox with this browser.
Now that the some browser such as firefox are able to read css3 u can use that to have corner radius, im using it now! although its not valid by w3c yet.
It does not look like they are stylizing the search box. But if they wanted to they could just use the native HTML tag input. You just have to reference it in the CSS file.
input {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
This would just cover the search field box.
If you needed to cover the button, just add a class to your button input field.
I always use .btn
input.btn {
padding:???;
margin:???;
background:url(http://www.???.???/images/???.???) #FFF no-repeat 0 0;
color:#??????;
text-align:????;
font:normal ?em/?em arial;
}
Now this should give you complete control over any input field on you entire website.