Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
Is it possible to convert Elements I created with Photoshop.
f.e. If I created a "skin" for a button in Photoshop without any Text in it. Could I convert it to CSS so that I can add a Text and adjust the Button's height/width later when adding the button to the HTML?
If it is possible, how?
Thanks in advance!
there are a lot of tutorials that will teach you to slice photoshop to html & css
http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/
http://net.tutsplus.com/articles/news/photoshop-to-html-upcoming-ebook-from-nettuts-and-rockable/
but to answer your question. It all depends the button you designed. But for the standards wone you will have to copy the background of your button into a new document and save as a png or jpg (make sure to slice a 1 or 3px image that can be repeated)
and then with some css3 magic you can style your button and make sure it fits the content of your button.
eg:
input[type="text"]
{
/*add rounded corners*/
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
background:#000 url('../images/button-background.jpg') repeat-x top left;
paddng:3px 6px;
margin:2px 0;
}
the url to the background should point to the image and best add a matching background color when the button is to big
What you're trying to do has many, many different solutions. Here are just a couple:
1. You could create the button using css3 only
warning: this solution will not work on older browsers without javascript plugins
html
Hello World
css
.button {
border:solid 2px white;
-moz-border-radius:5px;
border-radius:5px;
-moz-box-shadow:5px 5px 5px black;
box-shadow:5px 5px 5px black;
padding:20px;
background:lightgray;
color:darkgray;
}
2. You could create the button using 2 images
photoshop:
create the image of the left side of the button.
make sure it's much longer than it needs to be.
the right end doesn't matter:
___________________________
/
| button1.png ...
\___________________________
now create the right side of the button.
make sure it's very short, like below:
_____
\
... button2.png |
_____/
html
<a href="http:/my.url.com/" class="button">
<span>Hello World</span>
</a>
css
.button {
background: url(path/to/button1.png);
}
.button span{
height: (height-of-button2.png);
line-height: (height-of-button2.png);
padding: 0 20px;
background: url(path/to/button2.png) no-repeat right top;
}
These are just a couple variations.
EDIT: apologies. the above code was wrong. i fixed it just now.
No, it's not possible to convert directly from Photoshop Elements to a HTML and CSS version that scales. You need to either export the whole button as one big image (and use a separate image for each button), or construct the button yourself with CSS.
Sexybuttons - http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html would let to create a button in Photoshop and once you have built it in CSS it would adjust its width to whatever text you put in it, as for height...not sure.
It's not a good idea to use Photoshop for creating code. It creates god awful looking code. It's best to just slice and name your slices, save them to images and then write code by hand. Unfortunately it's a very manual process and bridging the gap between design and code isn't something humans have done well yet!
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
Within a WordPress plugin (own creation) I want to position some WooCommerce category images... but there something strange happens.
Each category box is defined more or less in the following way :
<div class="edu-cat-item">
<img src="some-image.jpg>
Title of the cat
</div>
In the CSS the boxes are made to float to the left...
.edu-cat-item {
box-sizing:border-box;
width: 175px;
float: left;
padding:10px;
}
edu-cat-item img {
border-width:2px;
border-style:solid;
}
.edu-cat-item a {
text-align:center;
margin-left:auto;
margin-right:auto;
}
And -not really a surprise- it works... HOWEVER!
The customer wants the selected category to have an orange border.
So in the PHP code an extra class is added to one specific item... The HTML becomes :
<div class="edu-cat-item edu-sub-select">
<img src="some-image.jpg>
Title of the cat
</div>
And the CSS gets an additional :
.edu-sub-select img {
border-color: #ff9900!important;
border-style: solid;
border-width: 2px;
}
And now strange things happen... when it is more than one row, the second row 'indents' one position behind the selected cat... Would love to post images but I need 'reputation 10' to do so...
However willing to share them by mail.
You are missing a quotation mark:
<img src="some-image.jpg>
Maybe that's just an error in posting the question though. Could you create a jsfiddle showing the problem, it's hard to understand what you mean by "indent"
By the way, you might want to try getting rid of float:left; and replacing with display:inline-block;. I avoid the unpredictable behavior of float wherever possible.
Was curious so I made a simplified fiddle myself: http://jsfiddle.net/bca1m1n2/
What's happening is that the border causes the height of the orange element to be taller than the rest. When a floated element goes to the next line, it positions itself against the orange element because the orange element is taller. Behavior seems strange, but is correct - so don't use floats for alignment :)
So if you give .edu-cat-item a fixed height, that also solves the problem
.edu-cat-item {
width: 175px;
height:100px;
float:left;
}
Cool question OP
Alternatively to what Kurt Serge wrote, you could use an outline instead of a border. This way your "border" (outline) does not affect the flow of items.
Here's a little definition of CSS outlines from MDN / W3C (they write the same thing):
Outlines do not take up space
MDN adds the following detail:
they are drawn above the content.
So your css would look like this:
.edu-sub-select img {
outline-color: #ff9900!important;
outline-style: solid;
outline-width: 2px;
}
I have an application that has a lot of buttons in the window. In writing the HTML documentation pages for this, I've been successful in creating a bordered, sorta-shadowed CSS <span> with text within that represent the buttons that just have legends on them.
This allows me to show "momentary" buttons like these...
...that just have a legend on them in such a way that it's reasonably obvious what I'm describing by simply putting...
<span id="button">LAP</span>
...in line with the associated description (and my custom documentation system makes it even easier by letting me invoke the style inline with [s button LAP]. Fun. :) Here's the style I built for that:
span#button
{
font-family: Courier;
font-weight: bold;
white-space: pre;
border: 1px solid #000000;
background: #ddddee;
padding-left: 2px;
padding-right: 2px;
color: #000000;
}
Here's screen clip of part of the documentation that uses that technique:
Also within the application, I have buttons that have "LED" indicators on them. A typical one might display a green LED when on, and a dark LED when off. Screen clip from the application (with a dark style sheet, so the buttons are dark) showing some of these:
I already have nice little .jpg images that show all the "LED" colors I use, conversely, an embedded CCSS box filled with the right color would be fine too.
What I would like to do, and am having no luck at all doing, is create a <span> within the text that looks as least somewhat like one of those buttons -- without going to specific images for each button, or in other words, using CSS. Since the only things that vary are the LEDs and the text, I want to can the LEDs and feed in the text. Something like...
<span id="greenbutton">Run</span>
In order to do that, I need the LED to appear above the text, and size the text small enough to land underneath it, and center them both within a bordered box as the text-only version above does. I would like an output like this (button built in an image processor)...
press to start
...from this:
press <span id="greenbutton">RUN</span> to start
It seems like it ought to be easy enough; and I can add quite a bit of complexity within my documentation system if required to make it all work -- multiple nested spans, divs, images, test, whatever it takes -- but I keep running into these two showstoppers:
<span> wants things to come one after another horizontally
<div> either causes line breaks or floats left or right
I can't seem to get a <div> to just land in the text where I put it in the first place, although I've been able to make them look just like I want them to because they understand vertical alignment and positioning withing their own context.
I was also thinking of some actual images of buttons with the text removed from them in each LED state, used as background to a span, where the text is overlaid on that background, thereby looking like a specific button. I've not tried this, as I can't seem to find how to make a span have a background and <div>... a <div> won't stay where I want it (not left or right, but right there, or else refrain from breaking the lines if it's not floated.
I'm not opposed to putting a table inline, either. If I knew how...
I hope I'm missing something. In which case, help! Or is this impossible, and the only solution is to screen-cap the many, many buttons in each of their various states (some actually display multiple LED colors for various settings, worse yet) and then drop the images in where I want them? Because although I could do that, it's awfully clumsy and effort intensive. :(
Introducing the pseudo element "before"! Ta-da!
<p>Green button</p>
<span class="myButton greenbutton">RUN</span>
<p>Red button</p>
<span class="myButton redbutton">RUN</span>
<p>Click this purple button <span class="myButton purplebutton">RUN</span> here.</p>
<style>
span.myButton {
display:inline-block;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-right: 2px solid #000;
border-bottom: 2px solid #000;
padding:1px 2px 0;
background: #dde;
width:20px;
height:auto;
font-size:10px;
font-family:monospace;
text-align:center;
}
span.myButton:before {
display:block;
margin:2px auto 0;
width: 16px;
height: 5px;
border: 1px solid #000;
content: "";
}
span.greenbutton:before {background:#99FF00;}
span.redbutton:before {background:#FF0043;}
span.purplebutton:before {background:#A200C1;}
</style>
Updated answer: I changed the display on the span to inline-block, so it will go inside a paragraph. I missed that requirement on my previous answer.
I added a class to each span, so that all spans in your document won't be affected, just the ones with that class.
Technically, if you are going to have more than one green button, you shouldn't use an ID for it. ID's are supposed to be unique and therefore only used once in a document. So I've also converted that to a class.
in CSS, the period denotes a class, as opposed to the # sign denoting an id. Ergo: span.myButton targets the span with class "myButton". span.greenbutton targets a span with the class greenbutton. You can have more than one class on an element.
I took the background-color property out of the span:before style, and put it in a class specific style -> span.greenbutton:before. Basically, the classes for the span.myButton and the pseudo element span.myButton:before are the same for all these buttons. But for each color, put an additional class on the span, and create a style with that class for it, using the background color you want. Hope that's clear. Fiddle updated too.
https://jsfiddle.net/maguijo/05zwwjy6/
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist
Closed 9 years ago.
Improve this question
Recently when I right clicked on the cross icon and saw the background image in the Tags section of Ask Question page I saw that it consisted of multiple icons other than the cross. I searched it on google and came to know that its done using html and css. The search results didn't help.
I am new to html and after searching I am introduced to this new language css. This may be a simple question to answer for experts like you but headache for beginners like me. Please I really want to know how its done.
Thanks in advance.
1. Its done using background-image,background-position for an element with set width and height.
See this fiddle(It contains a Facebook Image instead) :
http://jsfiddle.net/axF59/
2. These CSS queries can be solved urself by using Inspect Element. Like you saw the background image by Right Click > View Background Image , in similar way you can see CSS of web page by Right Click > Inspect Element in browsers like Mozilla ,Chrome ...
It's called a spritesheet. You'll find vast of amounts of info, tips and tutorials if you search the internet for spritesheet + js/css
This is done using the CSS background-position and background-image property. It allows all of the sprites to be loaded using a single image.
The background-position CSS property sets the initial position [...] for each defined background image.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-position
The CSS background-image property sets one or several background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the background-color is drawn beneath them.
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
Example
HTML
<span class="sprite sprite1"></span>
<span class="sprite sprite2"></span>
<span class="sprite sprite3"></span>
CSS
.sprite {
display: inline-block;
/* Replace this with a live image. */
background-image: url("http://www.example.com/example.jpg");
height: 16px;
width: 16px;
}
.sprite1 {
/* This doesn't actually need to be here, because this is default. */
background-position: 0 0;
}
.sprite2 {
/* Move 16 pixels to the left. */
background-position: -16px 0;
}
.sprite3 {
/* Move 16 pixels up. */
background-position: 0 -16px;
}
I'm hoping to find a nice way to edit the css on this page:
http://carbonbi.com/build/?page_id=46
I'm using the wordpress layout shortcodes to create three separate columns. I'd like to add a border in between the first and the second column and the second and the third.
I realize using the built in shortcode might not be the best way to do this, and may require creating my own class to handle this, but if anyone has any effective ways to work on this it would be nice to see.
Thank you in advance.
Just a general tip: by using plugins like "Web Developer" for Firefox (my favorite) or simply left clicking an element and choosing "inspect element" (Firebug is a good choice, although most browsers have their own, firefox actually has a spacy 3d one that can come in handy) you can get the names of classes and id's used by plugins and the like, and then add them to your style.css and edit away!
Bonus Tip: Firebug let's you edit the CSS in real time to preview what it would look like without having to refresh the page.
Add the following CSS to your stylesheet.css:
body .three_col {
margin-right: 2%;
border-right: 1px solid #CCCCCC;
padding-right: 1.75%;
}
body .last {
padding-right: 0px !important;
border-right: none !important;
}
This will add a 1px solid gray border in-between the columns.
I would like to know if there is a framework that can make standard html forms look more web 2.0 style, I would like to have rounded corners on text boxes and a more casual looking submit button, other than the out of box html one, which looks very old school.
If you know of something that's quick to implement, and open source, thank you in advance.
Try NiceForms a Javascript library for styling forms.
Or JqTransform for jQuery.
You can find some other resources below:
http://www.noupe.com/css/form-elements-40-cssjs-styling-and-functionality-techniques.html
http://speckyboy.com/2009/08/26/20-jquery-plugins-and-tutorials-to-enhance-forms/
http://devsnippets.com/reviews/using-jquery-to-style-design-elements-20-impressive-plugins.html
You will have to style the form elements with a combination of css and image backgrounds. This is fairly easy to do though and you should be able to find a lot of examples out there...
http://www.assemblesoft.com/examples/form/
http://pupungbp.erastica.com/css/rounded-corner-input-form/
It's called CSS.
The plain old HTML look is created by the default CSS settings. If you want to change the look, then you need to change the CSS. Find a website that has a look similar to what you want, and look at the HTML source. You will see a lot of CSS near the begining wrapped by STYLE tags. For instance:
<style type="text/css">
input {
border: none;
background: #FFF;
width: 165px;
}
.rounded {
background: url(rounded.gif) no-repeat left top;
padding: 8px;
width: 180px;
}
</style>
In order to get the actual rounded corners you are going to need some images that can cover the sharp corners. In the example CSS it refers to a single image of a box, but generally you will need four corner images, and four separate line images (top, bottom, left, right).
Check this article about creating forms with rounded elements: http://www.picment.com/articles/css/funwithforms/
Regarding rounded corners, you can use a background image which is rounded off using transparencies or if a user is using mozilla based browser or opera, you can use:
#formbox {
-moz-border-radius: 5px;
background-image: url('roundededges.jpg');
}
In your CSS to add rounded corners to any div. Either that or use some simple flash.