I have just finished my PSD design for a website and am stuck at the text field.
How would I get a text field to maintain the size of the round corners of the background image?
Something similar to the sliding doors technique that you can do with perhaps?
http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
The text field doesn't actually need round corners, background images of the wrapping DIV elements do.
The "sexy buttons" tutorial will work - instead of having text inside the span (as described in the tutorial), drop in your input box. Set border:0 and background-color:transparent for your input.
Related
I am creating a website using wordpress and I've added some additional css also. There is a image and there is some text underneath it; when I hover over the image the image highlights but the text doesn't show up.
What I want is the text to appear with some background color when hover over it.
However your question is not clear enough to answer, may be its due to z-index values of image & text.
I want to resize the section properties of a text element within a dashboard. The text size should stay the same - I want to scale down the height of the green object (see pics).
Currently the element is displayed with the best fit as (here I want to reduce the height of the green object - to align it to the text):
Configuring a specific size adds an unwanted scrollbar. Apparently this appears as default due to the configured size of the text. However, the height appears still to be sufficient for the text size.
Ideas and suggestions are much appreciated - so far I was not able to resolve this issue with the custom css style options (HTML Only).
For the benefit of other users:
What settings did you touch on the text element's parent section and parent column? Because when you set nothing at all there is hardly any padding around dashboard-rendered text element: dropbox.com/s/2toep1vrs6xpla2/text_dashboard.png?dl=0 Edit: The .SectionTable has a padding of 3px all in all
I need to create this layout and I'd like to do as much of it as possible with CSS, rather than using images and whatever.
As such, how can I do this in CSS? (if at all?)
As you can see, there is the image behind, with the button overlaid with padding. The bit that I'm struggling with is creating the curves on the IMAGE above and to the left of the button and bottom to the right of the button (I've pointed them out on the pic below).
Any help would be great.
Thanks
I know just enough CSS to be dangerous so I can't detail every step, but I think you can approach it like this:
Split the background image into two separate images both at a z-index of 0 at the height of the top of the grey box. I think you can use two div's that reference the same original image with different offsets (similar to CSS Sprites) but I don't know the details of how to do that. The left edge of the lower div would start where the grey box ends. Round the lower-left corner of each "image" div.
Add the grey box at a z-index of 1 with appropriate rounding, and then the blue box at a z-index of 2, again with appropriate rounding.
The background of the block element containing all of this would also have to be grey to match the grey border and properly fill in grey where your right-most arrow is pointing.
You don't have to split your image at all, only the container divs.
Let me detail a bit:
You can have your image set as a background image instead of putting it in a src attribute of an img tag. This technique is most commonly used when working with CSS sprites.
So, if you have you uppermost div at a constant width and height, if you try to apply the background image in it, you'll see it fits very nice.
On the bottom, you have two divs or whatever block element you'll like, just be sure to put fixed width and height, so the background will be applied and you will be able to actually see it.
Then all you have to do is fiddle with css background-position to adjust the SE chunk of image.
I'll be putting a small demo together to better illustrate the idea.
After you have a big div at the top, and two smaller at the bottom, where two of them share the same background-image, but with different background-position, you can safely add some css3 border-radius to fit your roundness needs. You can also use some tool like http://css3generator.com/ to add a compatibility layer on all browsers with ease.
That is very easy to realize with pure css. The page you have shown is divided into 3 divs without any margin. You only need to set the right border radius for each div.
This is a function of the background image, which is a css element if that's what you mean, but it is not a seperate attribute for a selector, at least not in standard CSS. Wait until CSS3 becomes more prevelant, then it's corner-radius or some such thing.
Well it's 3 probably 3 seperate divs, a hole "burned" into the background image, or a div being overlayed for the button.
The best way to figure out how it's done is to read the source of the page you found it on.
For convenience:
If you have a webkit based browser like chrome or safari then enable developper mode mouse over the button "right click" and choose inspect element. Otherwise you can pour over the page source until you find what you want.
I am trying to create a menu bar which will consist of a series of icons and text laid out horizontally. I am using an unordered list as the container, but I am having a problem. All of the menu items which contain no text, just an empty anchor tag with a background image, display in-line just fine.
However, whenever I try to use text, instead of a background image as a menu item, the text list item is slid downward. You can see this example on JSFiddle, be sure to rollover each of the items to see how the background color indicator behaves: http://jsfiddle.net/pAfgm/6/.
Notice how each of the links with a globe icon (yes, I hot-linked from Facebook for this example) displays nice and neat. However the text and it's background indicator are way off alignment. I see this is the case for FF 3.6, Opera 11, but not IE7! For once, IE7 isn't having a problem where other browsers are.
Could someone please show me how I can correct this issue?
Thank you for your time!
You simply need to add vertical-align: top to nav.pluginBar ul.pluginBarLeft li, on which you also have display: inline-block.
See: http://jsfiddle.net/pAfgm/7/
The default vertical-align value is baseline, which is the cause of this problem.
See the difference between different vertical-align values here:
http://www.brunildo.org/test/inline-block.html
See the "baseline" section here for a graphical explanation:
http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/
I added these icons http://grab.by/9HYW to my site and wanted to change the color on hover...what is the best solution?
The icons are in png format and would like to change on hover to their blue colors...thanks in advance.
You should generate new blue images with your editor (the one that you've created the first icons), then you use css hover.
You can use a css sprite (arguably the cleanest and most cross-browser comparable way) in which you basically have both the regular and hover state in one image and change the background-position of the div on hover. (xpixelz links should help you.)
If the images are actually printed on the page, you can use javascript to swipe the image with the hover state on hover.
I'm not sure how they are displayed on the page, but if they are on a solid colored background, you could make a png of the negative space and place it inside a div of the exact width and height of the image then just change the background color of the div on hover, since the actual logo is transparent you would see the background color of the parent div.
as you may opt for CSS sprites
http://css-tricks.com/css-sprites/
google for "css sprites generator" if you need a quick way ;)
If you are using flat png icons then you can use jFlat jquery plugin. Remember it only supports for HTML5 supported browsers
source : http://flaticon.sodhanalibrary.com/jFlat.html