I have this wireframe http://problemio.com/problemionewest.pdf and you see on the top-right there is a text box that has rounded corners.
Is that done with css only or image and css? I have an image that was provided to me, but would much rather just do it with css. In any case, I don't know how to do it either way lol, so any help would be great!
The current version I have is here: http://www.problemio.com
You could use CSS to do that, but it wouldn't be supported in IE8-. You can use some site like http://borderradius.com to come up with actual CSS you'd use, which would look something like this (again, depending on how many browsers you're trying to support):
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
This can be done with CSS3:
<input type="text" />
input
{
-moz-border-radius: 15px;
border-radius: 15px;
border:solid 1px black;
padding:5px;
}
http://jsfiddle.net/UbSkn/1/
However, an alternative would be to put the input inside a div with a rounded background, and no border on the input
Related
I'm looking to achieve an effect where, when typing in a form, the textarea grows as you type, and adds an underline for each line of text.
See the effect in GIF form here:
Can this be easily accomplished just by using CSS? How might I go about this?
You can do that by using a <div contenteditable="true"> instead of textarea:
HTML:
<div contenteditable="true" class="validate[required,length[6,300]]
feedback-input" id="comment"
placeholder="Start writing your message here..."></div>
CSS:
.feedback-input>div{
padding: 2px 0;
line-height: 28px;
border-top: 1px solid #ccc;
}
.feedback-input>div:first-child{
margin-top: 5px;
}
.feedback-input>div:last-child{
border-bottom: 1px solid #ccc;
}
Demo
Adjust the CSS as you want.
You can implement the constant underlines by making a background image that has some blank space and an underline. Then set the image as background of your textarea and have it repeat. Lastly, set the line-height in CSS to be equal to the height of your background. The lines will now repeat along with the height of the text.
For the textarea resizing, you can use TrungDQ's answer or one of many libraries available through Google.
So I'm trying to create a textbox with rounded corners but I don't know exactly how to go about doing it. I have the HTML and CSS here for what I want so far but I can't wrap my mind around rounding the corners.
Html:
<form action="index.php">
Textbox <input type="text"/> <br />
</form>
For right now, all I need is the CSS if it is possible. This is what I have so far of the CSS:
form {
height:50px; width:200px;
}
If this is impossible for CSS to this just say that in the comments but if not, please tell me. Thanks
You could try border-radius, however keep in mind it won't work in all browsers:
input[type="text"] {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
Demo: http://jsbin.com/uduyew/1/edit
You can add rounded corners by adding the following to your css file:
input {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
I use 3px here as an example - you could easily change that. The higher the number the more rounded the corners. You could also add rounded corners to a single corner like this:
input {
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topleft: 3px;
border-top-left-radius: 3px;
}
That example would round only the top left corner. Playing with that code you could probably see how easily you could round any specific corner or all of them at once.
i'm creating a new website and im looking to recreate the curved corner of the SAVE 25% banner. http://www.sonycreativesoftware.com/
Does anyone know how i would do this with css or html?
Cheers
Use the image as a background-image, and apply border-radius on the element
div
{
background-image:url('http://placehold.it/350x150');
width:350px;height:150px;
border-radius:5px;
}
http://jsfiddle.net/mdNCm/1/
You can use border-radius.com to generate cross-browser CSS
Yes, by using border-radius.
CSS:
div.rounded{
border-radius: 5px;
border: 1px solid black;
}
HTML:
<div class="rounded">This text is in a rounded border!</div>
This is a css3 feature and not yet fully supported of all browsers. Read further about this tag:
border-radius: 25px;
You can achieve this with
border-radius: 5px;
If you want a cornered border please use this.
Border-radius.com
Which gives you the code.
Note: border-radius don't work with some browsers such as ie
Alternatively you can use some image as background in css.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Draw Circle using css alone
I would like to know if there is any way to change the shape of the submit button from rectangle to circular shape??
I dont want to use an circular shapped image solution. I want the all other characteristics of the button as from the css style.
Use border-radius property.
Example:
.button {
width: 100px;
height: 100px;
background-color: #000;
border: solid 1px #000;
border-radius: 50%
}
The above example will give you a regular circle.
If you want just a little rounded shape, try this:
.button {
width: 100px;
height: 30px;
background-color: #000;
border: solid 1px #000;
border-radius: 5px
}
Live demo: Regular circle
Live demo: Rounded shape
Live demo: Input button with text
Your question is already answered but I recommend you Twitter Bootstrap.
It is a HTML/CSS framework which allows you make great buttons (among others) easily.
This buttons are "crossbrowser" which means they are compatible with Internet Explorer.
With only one class - btn - you can stylize a <button>, <input type="button"> or <a>.
This :
<button class="btn"></button>
Gives that:
You also can customize your button quickly with an optional class :
btn-primary, btn-info, btn-success, btn-warning, btn-danger and btn-inverse.
This classes transform your button like that :
Then you can choose a size with the classes btn-large, btn-small and btn-mini.
Finally, you can add an icon (the list is here) in your button.
This:
<button class="btn btn-success">
<i class="icon-shopping-cart icon-white"></i>
<span>Checkout</span>
</button>
Gives that:
Have fun with your new buttons. :)
Use CSS border radius. I would recommend googling 'CSS button generator' or such and finding any number of button generating tools that you can play around with to get the css right. You would just need to make sure the element's height=width and then adjust the corner radii accordingly.
Use this style:
input[type='submit'] {
width:100px;
height:100px;
border-radius:50px;
}
You can use border-radius in your CSS but it won't be supported in IE.
Play around with:-
border-radius: 10px 10px 10px 10px
I would suggest to either use the Jquery UI (you can make you own theme)
http://jqueryui.com/themeroller/
or
CSS3
http://webdesignerwall.com/tutorials/css3-gradient-buttons
CSS3 will not work in IE.
I am trying to make the shape below in CSS. Any ideas how to do this? Or know a tutorial site that can help? I am talking about the tag like shapes that are yellow.
Also secondly does anyone know how to make a shape with css that is a square/rectangle that has two rounded edges at the bottom but right angled corners at the top?
Thanks!
James
To answer your second question first, you use border-radius
div{
border:1px solid black;
border-radius:0 0 4px 4px;
-moz-border-radius:0 0 4px 4px;
-webkit-border-radius:0 0 4px 4px;
height:100px;
width:100px;
margin:2em;
}
The -moz and -webkit are specific vendor prefixes.
You can change the numbers as you wish, but they follow this pattern
1st # = top left corner
2nd # = top right corner
3rd # = bottom right corner
4th # = bottom left corner
Example: http://jsfiddle.net/9VbFn/
As for the first question, here is a tutorial to help you
http://debiprasad.net/coding-and-logic/create-a-price-tag-using-css
Yes; you can do this with pure CSS & with gradient also.
Check this http://jsfiddle.net/9EEEP/3/
with border & circle http://jsfiddle.net/9EEEP/2/
you can adjust the css as per your requirement like this http://jsfiddle.net/9EEEP/5/
The second part of your question is easy: border-radius: 0 0 5px 5px, just replace the 5s with whatever value you wish. The first part, although technically possible with CSS, is better achieved with a background image.
EDIT: Here is a rough version of your tag in CSS to get you started if you really want to give it a shot. http://jsfiddle.net/hsuF3/
Looking at the tags you could achieve that affect using :before and :after and CSS3 transforms (rotate the before and after psuedo-classes). It'd be best to use a background-image instead, though.
To answer your second query – you can easily achieve that effect with border-radius.
e.g.
p {
-moz-border-radius: 0 0 2px 2px;
-webkit-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
}
The values are clockwise from the top left corner to the bottom left corner.
First if you want that image exactly you will have to download it and add it to your solution. Once you have you can aplly it either to your link or button or whichever control you want to use. I used a button so i created the following style class and applied it.
.btnLarge_blue { background:url("../images/btn_Large_blue.gif"); width:68px; height:20px; font:12px Calibri; cursor:pointer; border:0px; padding:0px;}
......
Hope this helps :)