Im a newbie of css3, although there are a lot of css tool generators outhere, i dont't know how to code this image i provide. Kindly help please??..This will benefit my assignment on one of my major subject. Thanks a lot!
it's very simple in CSS to round the corners of a div use 'border-radius' CSS property on the div tag and place the image within it.
Your HTML will look like this:
<div id=image_box>
<img src='someimagelocation'>
</div>
You will then want to set the size of the dive to the exact width and height of the image and ensure that overflow is set to hidden and that your border radius property is set:
#image_box {
width:200px;
height:150px;
overflow: hidden;
border-radius:0.5em;
}
this should give you your desired result!
ADDED:
To add dropshadow etc, use the CSS property 'box-shadow' in the same div CSS tag.
box-shadow:0 1px 2px #aaa;
You will need to google how these syntax work. But I have given you all the necessary tools to research it very easily
The trick is to use box-shadow multiple times:
box-shadow: 0 4px 6px -5px hsl(0, 0%, 40%), inset 0px 4px 6px -5px black;
Demo: http://jsfiddle.net/wUgXk/1/
If you're on Google Chrome, open up Inspector, click on one of the values (4px, for instance) and press your Up and Down keys. You can tweak the values in real time and setup these kinds of effects pretty quickly.
Try this
<html>
<html>
<head>
<style type="text/css">
.tbox
{
border:2px solid #b3b3b3;
background:#dddddd;
width:200px;
border-radius:25px;
-moz-border-radius:25px;
-moz-box-shadow: 1px 1px 1px #ccc;
-webkit-box-shadow: 1px 1px 1px 1px #ccc;
box-shadow: 1px 2px 2px 2px #ccc;
}
</style>
</head>
<body>
<input type="text" class="tbox" />
</body>
</html>
<input type="text" placeholder="Your Name" style="text-align:center; color:white; background:black; border-radius:50px; height:30;" />
<input type="email" placeholder="Enter your email id" style="text-align:center; color:white; background:black; border-radius:50px 5px 50px; height:30;" />
Seccond textbox in Different style
Related
I´m trying to do a basic effect in css to give some depth to my input, something like the image below. I´m trying to do with my code below but anything is missing here because my result is not icual to my image example.
My html:
<form>
<input type="text" placeholder="Search..." />
</form>
My css:
input[type="text"] {background-color:#232323; color:#fff; border:1px solid #151515; -webkit-border-radius: 15px;}
What I´m trying:
You will need at last 2 elements here: one for the dark-grey background, the other for the input.
The rest of my answer has been tested and works in IE10 +, FF & Chrome. If you're looking for IE support for 9 and below this wont work out of the box. It also relies on setting some fixed widths.
You'll recall I mentioned two elements, well you should be using a label tag anyway.
Adjust your HTML to te following:
<label>Search
<input type="text" placeholder="Search" />
</label>
The follwoing CSS positions the input to hide label text.
label {
display:inline-block;
border:1px;
padding:10px;
background-color:#111;
position:relative;
color:#FFF;
width:200px;
height:20px;
}
label input {
-moz-box-shadow: inset -1px -1px 2px #CCC;
-webkit-box-shadow: inset -1px -1px 2px #CCC;
box-shadow: inset -1px -1px 2px #CCC;
border-radius:5px;
background-color:#000;
color:#FFF;
border:none;
padding:3px;
position:absolute;
left:5px;
padding:5px;
width:200px;
height:16px;
top:7px; /* This is ((label hight + (padding * 2)) - this height)/2;*/
/* e.g. ((20 + (2 * 10)) - 16)/2 */
}
Demo
Not sure exactly what you mean, but is this getting close to what you want?
input[type="text"] {
background-color:#232323;
color:#fff;
padding:2px 5px;
border:5px solid #151515;
-webkit-border-radius: 15px;
}
Using background image to input box and padding value would show like this:
Now how to apply border-right to the background-image?
Or, what's the best practice to make this?
I have just like these inputs
<form>
<input type="text" />
<input type="text" />
<input type="submit" />
</form>
css
input{background: url('path') no-repeat left center; padding-left: 50px;}
I would just add the border-right to the background image like so:
CSS
input[type=text]{
background: url('http://uploadpie.com/LctRy') no-repeat left center;
padding: 18px 0 18px 70px;
border: 1px solid #eaeaea;
font-size: 17px;
color: #999;
}
Demo
Well I played with some box-shadows and I came up with this
FIDDLE
input[type="text"] {
padding: 15px;
border: 1px solid #ccc;
padding-left: 60px;
background-image: url("http://i.imgur.com/m8lJN4g.png");
background-repeat: no-repeat;
background-position: 2px 3px;
box-shadow: inset -175px 0px #fff, inset -176px 0px #ccc;
}
You can just add border to the background image. If you are not targeting for browsers from IE6. If you are checking from IE6 then you have to wrap the textbox within span or div and add background image to div. Hope this helps.
I'm using the jQuery Validation Engine to validate some form fields. Everything's working well except in IE7 and IE8.
The style sheet has a :focus class, which gives them a blue box-shadow when the form field is focussed on:
input:focus { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #06c !important; -moz-box-shadow: 0px 0px 1px 1px #06c; box-shadow: 0px 0px 1px 1px #06c; }
I'm using jQuery to add a class to the form fields when they're not valid (as defined by the jQuery Validation Engine,) so that those fields can have a red box-shadow:
input.error { outline: none; -webkit-box-shadow: 0px 0px 2px 1px #c00 !important; -moz-box-shadow: 0px 0px 1px 1px #c00; box-shadow: 0px 0px 1px 1px #c00; }
This works great...in IE9, Firefox, and Chrome. It doesn't work in IE8 or 7. (There was a party when we stopped supporting IE6.) I tried installing PIE.htc and adding a style option that indicated a border for those elements, rather than a box-shadow, but that didn't seem to help and it caused some other display weirdness with the error-bubbles, so I removed PIE.htc. Then I tried having a separate style definition, enclosed in IE-conditional tags, that specified borders for those inputs, but still it didn't work. Here's my conditional-CSS:
<!--[if lte IE 8]>
<style type="text/css">
input:focus { border: 1px solid #06c; }
input.error { border: 1px solid #c00; }
</style>
<![endif]-->
...help?
Not everything is supported in those browsers. Just live with it and find an alternative, like showing an additional message. Or you could embed the input element inside a div:
div.invalid {
display: inline-block;
border: 1px solid red;
}
<div class="invalid">
<input type="text"/>
</div>
If you start adding element like this, I would do that though JQuery too, and preferably in a separate piece of code that is included only in IE7 and 8, so you can easily drop it once you don't need it anymore. Or you could choose to always use the div, and just style div.invalid input{...} for other browsers.
I have a parent div with a child div inside it (the child div acts as a pop up menu). When the child div pops out it has a tiny space so that it's not lined up with the left of the parent div.
here's the styles:
.ButtonContent
{
display:none;
border: solid 1px black;
width:275px;
position:absolute;
left:0;
margin:0px;
padding:0px;
float:left;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
margin:0px;
padding:0px;
border: solid 1px black;
border-radius:4px 4px 4px 4px;
width:276px;
text-align:center;
position:relative;
}
Here's the HTML:
<div class="Button" id="Button1" >
Add <br />
<div class="ButtonContent" id="ButtonContent1">
Date purchased:
<div class="Date" id="datePurchased1"></div><br/>
Purchase Location:<br />
<input type="text" maxlength="150" /><br />
<a>Add</a>
</div>
</div>
Since you have an absolutely positioned element inside a relatively positioned one with a border, left:0 positions it within the border which makes it look off by a pixel.
Quick fix: make them both the same width and use left:-1px; instead.
http://jsfiddle.net/RtGfc/
It looks to me like you don't need all this CSS to achieve the look you want, maybe a better fix (without touching your HTML):
.ButtonContent
{
border-top: solid 1px black;
background-color:#FFF;
border-radius:0 0 4px 4px;
}
.Button
{
border: solid 1px black;
border-radius:4px;
width:275px;
text-align:center;
}
http://jsfiddle.net/RtGfc/1/
It's two things: the 1px border from the outside <div> and the fact that you chose to put one <div> inside the other.
The 1px border is positioned outside the leftmost mark of left: 0px;. If you remove the border, it works.
Demo: http://jsfiddle.net/MmwYv/
You want .ButtonContent, which is the inner <div>, to be displayed outside .Button, which is the outer <div>. That is going to cause problems, because the inner one is going to be restricted by the measurements of the outer one. If you take .ButtonContent outside, it works too.
Demo: http://jsfiddle.net/NxCp4/
Hi i created a label with some css. The label css is working fine Firefox , chrome but when i run in IE the css is not coming properly.
label.formInputField {width:119px; height:26px; margin:3px 0px 0 0; padding:11px 6px 0 6px; background: #dadada url('css-images/labelBG.png') 50% 50% repeat-x; float:left; display: block; font-size: 12px; font-weight: normal; line-height: 1.1; color:#333; text-align:right; border: 1px solid #AAAAAA; border-right: 1px solid #dadada; }
.div_form_textbox { width:200px; float:left; text-align:left; background-color:#E6E6E6; height:29px; margin:3px 2px 0 0; padding:5px 0 3px 5px; border-right: 1px solid #AAAAAA;border-top: 1px solid #AAAAAA;border-bottom: 1px solid #AAAAAA; background: #e6e6e6 url('siva_images/form_input_bg.png') 50% 50% repeat-x;}
.ui-corner-left { -webkit-border-bottom-left-radius :4px;-webkit-border-top-left-radius :4px; border-bottom-left-radius: 4px; border-top-left-radius: 4px; }
.ui-corner-right { -webkit-border-bottom-right-radius :4px;-webkit-border-top-right-radius :4px;border-bottom-right-radius: 4px; border-top-right-radius: 4px; }
<label class ="formInputField ui-corner-left" for="Pdoctor">Doctor First Name:</label>
<div class="div_form_textbox ui-corner-right">
<input id="fname" name="fname" type="text" size="30" class="textbox ui-corner-all"/>
</div>
The proper output in mozilla and chrome like this
So the same thing in IE is coming like this:
The left side is the label and the right is the div inside there is a textbox. my problem
Only half of that is coming in the label of doctors first name . Please help me to get out this issue
I get that exact behaviour in IE when I look at it in Quirks Mode.
You probably just need to add a valid doctype as the very first line, such as:
<!DOCTYPE html>
If you already have that, then there are other possible reasons for Quirks Mode.
IE8 and less browsers cannot render CSS3 -webkit commands. Like the one you have used in css style:
.ui-corner-left { -webkit-border-bottom-left-radius :4px;....