Jump to content
New account registrations are disabed. This website is now an archive. Read more here.

Chief

Member
  • Content Count

    949
  • Joined

  • Last visited

  • Days Won

    14

Everything posted by Chief

  1. No, sorry. I am actually going to get this tutorial published onto webdesign tuts plus, and they require that you don't have the tutorial anywhere else. I emailed the web master for it and he said that my tutorial would be a great addition. So, once I get it submitted and up there, I have to remove it here, lol. I will provide a small chunk of it here and then provide the link to read the whole article. But yeah, this technique is amazing. I am so happy I figured it out.
  2. So, I have been on the search for a way to style checkboxes and radio buttons with ONLY CSS. I had yet to find one, and it was getting a bit frustrating. Having to use Jquery UI was just something I didnt want to do. Then, while playing around, I discovered how! It was really quite simple, silly that I hadn't thought of it before. Here is a tutorial on how to do so. My finished product: I will not provide you with the exact styling. I will be leaving that open for you to do, but I will give you the empty classes and all that. So, first thing to do is create the checkbox in your HTML. <input type="checkbox" /> It won't do much as is, so, what you need to do, is give the checkbox a name, so that you can apply a specific label to it. <input type="checkbox" name="remember_me" /> Now, lets do that label <label for="remember_me"></label> the for="" needs to be the same as the name that you gave your checkbox. This makes it so that the label is directly connected to the checkbox. Now, what we're actually going to be doing, is completely removing the checkbox from the screen, and making our own, using a <p> tag. So, this isn't actually direct styling of the checkbox, but instead more like a replacement. So, inside of your <label>, put a <p> <label for="remember_me"><p> </p></label> Now for the CSS styling.. This is where it gets fun! First thing first, hide that ugly checkbox! input[type="checkbox"] { position:absolute; left:-99999px; outline:none; } Setting the position to absolute and giving it such a large negative left positioning will knock it so far off of the screen, you would have to have an extremely massive monitor to see it! But now how do we make our own checkbox? Hmm... oh! Remember how your label is now directly linked to the checkbox? Well, because it is linked, you can now click the label to check and uncheck the box. Cool, huh? So, what we need to do, is style the label for when the box is checked. How do we do that? Like so: input[type="checkbox"]:checked + label { } What this does, is tells the browser that when the checkbox is checked, we want this style to show for the label. But you can't really style a label all that well, so what we'll actually be doing is targeting the <p> inside of the label. input[type="checkbox"]:checked + label p { } Now, what I did to my <p> was make it look like a simple white box with rounded corners. However, it's only like that when checked, but I can't see it because the checkbox is gone. So, we need to make a style for the <p> for when the checkbox is unchecked. Simple enough! input[type="checkbox"] + label p { } Now, when you style that one, you should see the <p>. Then, when you click on it, if your styles are different for checked/unchecked, you should notice that you are now checking your own, custom checkbox! Now, the check mark that I used is in a font, so I have the character inside of the <p>, but I needed it to not show up if the box is unchecked... hmm. Well, lets do a similar effect to it as we did to the real checkbox, using text-indent. We need the indent to go back to 0 though, for when the box is checked, so do it like this: input[type="checkbox"] + label p { text-indent:-99999px; } input[type="checkbox"]:checked + label p { text-indent:0px } The large negative text indent will knock that as far off the screen as your default checkbox, then setting it to 0 when the box is checked, will bring the text back, so you can see it. Its not a perfect solution, but there are no problems. Now, you can also have a hover effect by replacing :checked with :hover and even a hover effect when the box is checked, by doing this: input[type="checkbox"]:checked + label:hover p { } So, as a recap, what we did was completely remove the default checkbox from the user's view, and replace it with a custom styled <p> that sits inside of the label, which is directly linked to the checkbox! Its such an easy fix. I feel silly for not figuring this out sooner.
  3. Designing a UI for the iPad is so much better than for just the iPhone. So much more room, lol

    1. Marked

      Marked

      By the way I dont use MSN anymore. Marked1316 if you use skype.

    2. Chief
    3. Marked

      Marked

      he showed me on Skype!

    4. Show next comments  12 more
  4. NOT MADE BY ME So, this artist Slym and I are pretty close I would say. Him and I actually started doing art along side eachother. He went more in the pixel art direction, and I went more towards web design, but we can each hold our own in either area lol. Anyways, he has released some game tiles that he had made a while back. http://www.touchofde...ic,78112.0.html He is an amazing artist, and he's only 16 I believe! He's crazy good, and for his age, it should be an encouragement to us all. So yeah, there you are, enjoy! Don't forget to Credit him!
  5. Just remembered the url to the forums where Don Miguel is present (The original translator to english of RPG Maker 2000)

    1. kellessdee

      kellessdee

      :O Don Miguel still exists???? Tell him to finish Don's Adventures!!! Still my fave rpg maker game!

    2. Chief
  6. .TK domains are terrible. I would suggest .co.cc to anyone looking for a temporary domain.
  7. So, I am on the RMXPU theme and it works wonderful, but yeah, when I tried the GDU theme just now, it looks just like that.
  8. But I didnt change my theme to this.. How do I change it back?
  9. This definately sounds pretty cool.
  10. also add: clear:both; to those elements as well.
  11. This is actually a problem that would be fixed with CSS. If you can't learn HTML, then you can't learn CSS... But really, HTML is the easiest thing. Its made especially for designers so its an extremely self explanitory 'language' thats super simple to learn.
  12. lol, I was about to say, I'm no gonna even worry about it until Microsoft confirms, denies, and/or gives more information on it, but it seems Isaac beat me to it, lol
  13. Chief

    Iso Cabin

    Painted this using my tablet, just for fun/practice. I'm pretty happy with the outcome.
  14. http://gamepolitics.com/2012/01/24/polish-government-will-sign-acta-thursday
  15. Well, youve all seen IndieBurn progress into new areas of design, multiple times, and It has been an amazing learning experience for me, even if it never did get finished. However, it is not dead... More like a new paint job... lol Introducing the new name for IndieBurn; IndieFolio Instead of it being just for indie game developers, think of it as a job market for IT, artists, programmers, composers, etc.. Thats all for now, folks!
  16. Question. So, the layout is really cool, but is that design temporary, or good? Not really too big on it..
  17. Chief

    Your Pics

    Got some new glasses, lol
  18. Chief

    Portrait

    Updated with Final product!
  19. Chief

    Portrait

    So, blah blah backstory.. the end. Here is the art (WIP) Preview #1 http://d.localhostr....FKrob/sarah.png Preview #2 http://d.localhostr....RzvQ3/sarah.png Preview #3 http://d.localhostr....2IITS/sarah.png Final Product
  20. Well, if you download the PSD you could see, lol. But it was layers on top of layers with the fill set to 0, then played with the blending options and opacities. Its pretty simple once you do it a few times, lol
  21. So, I needed a break from web design, and decided to make a Game GUI. just for kicks. I have no use for any of it, so feel free to download the PSD and make something out of it! Here's a preview: Enjoy! :) http://localhostr.com/file/nXPcyro/brownUI.psd
  22. Chief

    Modern Warfare 3

    Modern Warfare 3; same as the last two. Call of duty; please stop, your games are all the same.
×
×
  • Create New...