Monday, May 21, 2012

New Additions to Geek Chic

  Dear Readers,
   We added a few things to this site!
First of all- we added a new page- resources. We'll add various sites as we go along our merry way, so that you can enjoy them too. (For it to be known... the best site out there is w3schools.com. It just is. I've been hooked on it ever since I found it- say, eight months ago- and I still love it. All the way down to taking the quizzes. [And no, I'm not telling you my score. I'm supposed to be an expert- you know, I blog here- so let's just not burst my bubble. kthanks.:)])
    Second of all, We added some buttons. We made two- one hover, ((meaning, it does something awesome when you hover)) and an animated one! ((meaning, it's animated.)) Feel free to take one for a little bit. ;)

Sincerely,
The GC Team

ps. the person who wrote this tries to hard to be funny and she also has a thing for parentheses.

Saturday, May 12, 2012

Simple Tutorial on Borders in CSS


Well, here we are again! Today, I'm doing a very, very easy tutorial! This one includes a version of CSS border codes. Very easy to edit!

   CSS Borders:
border:2px solid #000066;
border-bottom:2px solid #000066;
border-width:2px 2px 2px;
border-bottom:2px line #000066;
 How to Edit: 
   2px- Thin line. Edit to your desired thickness. I like 2px, if it is around blog posts and such, but if you are doing various things- various thickness's are required! ;)
   solid: This is one continuous line. You can swap out the word "solid" for "dotted" and "dashed"- creating those effects! Really fun!
   #000066: This is a midnight blue color. Of course, you can swap this out for any other hex code. (I like http://www.colorpicker.com/.)  Make sure, whatever you do... that you don't forget this: # before the numbers. Or it won't work. :)

---
More Advanced Techniques:

   Specific Borders: When designing blogs, sometimes you just want one border- let's say, above your post footer. You want it thin and dotted, just above your comments. That's easy... just under your blog footer code, add:
border-top:1px dotted #000000;
"Top" can be swapped out for "bottom" and "right" and "left", thus creating a myriad of options to play with!

   Rounded Border Edges:

border-radius:10px;
-moz-border-radius:10px;
 The -moz part is to make sure it works in Mozilla Firefox. To create specific rounded borders, use this technique:

border-top-left-radius:10px;
-moz-border-left-radius:10px;

You can, again, swap out "top" for "bottom" and "left" for right. "10px" can be changed anyway you like it.

---
I think this just about covers everything! Thank you all for your encouraging comments and emails, they keep us going! :)