I'm working with the designer and he sent me the following design for the search bar on our webpage:
I'm very much against using images in webpage design unless completely necessary, so I'm hoping that I can recreate the whole search bar widget in CSS. I know how to do border-radius, gradients, box-shadows, etc, so that's not a problem.
Question: Assuming CSS3 browser compatibility, how can I go about recreating the actual search button (the magnifying glass portion) with the double curved edge, and the slight drop shadow on the bottom left?
Thoughts: My initial feeling was that the search button would be circular and free-standing, then overlap the search input div with a negative left-margin, but then I was unsure how I would get that drop shadow.
Edit: I'm not completely opposed to using an image for the magnifying glass, but I've seen a similar icon created in CSS before. Would an image vs. pure CSS end up loading at the same speed, or should I do all I can do in pure CSS?
Solving the problem a different way, you could use a font to render the magnifying glass. There are some free ones here that you could load via JS or by creating an #font-face with a service like FontSquirrel. This one comes with all the necessary files to do so and it includes the magnifying glass pointing in either direction: http://www.tenbytwenty.com/sosa.php
From there, you should be able to style it with CSS to make it look the way your designer wants.
Something like this will manage
<style type="text/css">
form {
background-image: url(1noty.png);
height: 50px;
width: 240px;
}
input {
background-image: url(bg.png);
margin-top: 15px;
margin-right: 15px;
margin-bottom: 15px;
margin-left: 17px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
</style>
Related
Hoping someone here has seen this before. I have a site that required me to remove the default bullet points and replace them in css, on every browser and mobile device it shows up the way I've style it to aside from IOS.
I've checked safari and chrome on my iphone 6s and in the list where I replaced the bullets with a white box it's changing it to a rather large box with a black gradient.
This is how it looks on a pc/android - the bullets are orange which is the desired colour
An this is how its displaying on all IOS mobile browsers:
This is the css that I'm using for the bullets:
section.specificationsSection ul li:before {
content: "\25AA";
font-size: 37px;
display: inline-block;
width: auto;
line-height: 15px;
margin-left: -.8em;
color: #f15822;
margin-right: 8px;
margin-top: 4px;
}
I'm stumped, I've looked around to see if anyone else has seen this, asked a few designers and developers with no luck, any help is welcome! thank you.
iOS may be replacing the "\25AA" entity with a black square emoji? (reference: https://www.iemoji.com/view/emoji/521/symbols/black-small-square)
We had this issue as well. We switched to "\25FC", which looks similar to "\25AA" and avoids the huge, beveled look on iOS. We've only needed to use it in black color, though.
I have a style for inputs on my page, with some basic padding and font size, I tried applying the same style to a link, but for some reason the link is always larger (height) than the button no matter what I do, even with the exact same text and font size, I tried doing display: block but that just makes the button the width of the screen.
Here is the CSS:
.button{
padding: 10px 15px 7px 15px!important;
font-size: 16px !important;
color: white;
cursor: pointer;
border-radius: 2px;
text-decoration: none;
}
.button-3{
background-color: #ff4d4d;
border: 1px solid #ff4d4d !important;
}
I've looked at the Chrome styles panel and confirmed the font / padding is being used (it's not strikken through).
Here is what it looks like:
Looks like the issue is because:
You aren't using a CSS reset.
The line-height needs to be the same.
Make sure you give a consistent line-height to both. For now, set in the both:
line-height: 1.5;
This should fix it. Also, you can compare both the styles with the computed ones, to check if there's anything else being set. Since you say <button>, it might also have some border.
Also, like I guessed, you are also giving border and same colour as background to the button, making it look 2px bigger.
When you open the Developer Tools, try comparing the Computed Styles part:
To avoid this kind of stuff I always set the font family I used.
Take a look at this example: https://fiddle.jshell.net/tnr0jxka/
You also might want to consider adding:-webkit-apperance:none;-moz-apperance:none; to this kind of css, it will save you big time in cross-browser experience.
Buttons do not inherit the global styling automatically.
So, setting font-size of button explicitly will solve the problem
see this solution for more info
Really simple but very annoying issue - I have a form text box which has a button sitting along side it horizontally so they should both be aligned heights. I am adding a couple of pixels top and bottom padding but i cant get this to work cross browser - internet explorer in particular seems to double the padding for some reason.
Can some one offer advice on how to get buttons the exact same size in most major browsers.
Here is the css I am using for a button
.button {
color: #44444a;
cursor: pointer;
font-weight: bold;
overflow: visible;
padding: 0.1em 1em;
width: auto;
border: solid 1px #44444a;
}
Best advice I can offer based on the very limited information you have provided is:
1 - Ensure you have declared your doctype.
2 - Perform a CSS reset. Something like:
*{
margin:0;
padding:0;
}
Googling "CSS reset" will usually turn up something useful.
3 - Know your box-model!
It would be useful if you could perhaps provide us with a bit more information (HTML & CSS code) or a link to the offending page.
By any chance anyone know how the these cute blue boxes under "Browse Categories" are created? Is it simple css and javascript?
Once I know what they are called I can google something like "Cute Blue boxes generator" or something along those lines.
url with cute boxes:
http://vimeo.com/categories
The majority of the styling is simply adding rounded corners to a light blue box. In CSS, a similar effect can be achieved (in modern browsers) with:
li {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
Note Vimeo simply uses an image as a background:
http://a.vimeocdn.com/images/categories/cat_browse_on.png
It's a simple background image put there with CSS:
#cat_browse ul li.highlight {
background: url(http://a.vimeocdn.com/images/categories/cat_browse_off.png);
}
I noticed I am not the first to ask about CSS sliding doors. However this seems (at least to me) to be a rather odd problem which I have not seen an answer for.
Trying to create a simple rounded corner link button:
html:
<span>Add A New Somthing</span>
css:
.link_button {
background: transparent url('img/backgrounds/bg-buttonRight.png') no-repeat scroll top right;
color: #444;
display: block;
float: left;
font: normal 12px arial;
height: 41px;
margin-right: 6px;
padding-right: 14px;
text-decoration: none;
}
.link_button span {
background: transparent url('img/backgrounds/bg-buttonLeft.png') no-repeat top left;
display: block;
line-height: 31px;
padding: 5px 0 5px 14px;
}
.link_button:active {
background-position: bottom right;
color: #000;
outline: none;
}
.link_button:active span {
background-position: bottom left;
padding: 6px 0 4px 18px;
}
results:
alt text http://www.codefruition.com/sandbox/img/buttonProblems/problemImageOne.jpg
The two images are overlapping, which is what I want, but why the discoloration? Why would one be darker? I tried using png jpg, gif, with and without transparency.
I posted the code here, along with another attempt using only one jpg instead of two, but still the same results.
Did I miss something?
Thanks in advance.
Your problem isn't your CSS. It's that the images generated for use in the CSS aren't seamless. The edges have a darker color that doesn't fade out in less than 14px, the width of the right "door."
There seems to be a bevel or an inner shadow on the button. If you are the designer and have the Photoshop document, check what the styling is on the button; you may have to shrink the aforementioned styles.
ethyreal, the two images are completely different colours, hence the discolouration. I suggest you actually try physically doing it yourself.
Open bg-buttonLeft.png and bg-buttonRight.png separately in Photoshop or some form of image editing software, then place bg-buttonRight.png over bg-buttonLeft.png and you should notice the two are actually different colours.
If you still can't see it, move your head vertically up and down to see you monitor from different angles.
Are you on a Mac using Safari? Mac's have 1.8 gamma value that wouldn’t match with (files created on) Windows’ 2.2 gamma value. This was fixed in Snow Leopard, which now has 2.2 by default.
Try previewing in Firefox and let us know if its the same?
Your image has a transparency set to the button. Look at your layer - maybe it is set to 90% transparency or something. When they overlap you get a little darker on the overlap image?