|
Post by Ƈσяαℓ Mєямαι∂ ღ on Aug 8, 2016 10:55:45 GMT -5
Ok. What about a header box above the regular text box?
|
|
|
Post by Deleted on Aug 8, 2016 11:11:28 GMT -5
What exactly do you mean by a header box?
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on Aug 8, 2016 11:22:01 GMT -5
Like for coded layouts, there's usually a header that's in a different area as the text box. hold on, I'll find an example.
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on Aug 8, 2016 11:22:50 GMT -5
|
|
|
Post by Deleted on Aug 8, 2016 11:50:34 GMT -5
Ohh, ok. I actually didn't know exactly how that was done till looking at that example, so I'll have to experiment a little and figure it out and get back to you on that a bit later. :3
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on Aug 8, 2016 11:53:49 GMT -5
Okay, that's fine, take your time!
|
|
|
Post by cloudyromxnce on Aug 8, 2016 16:08:36 GMT -5
Don't mind me. Just using your lessons
|
|
|
Post by Deleted on Aug 8, 2016 22:49:41 GMT -5
Don't mind me. Just using your lessons c'x that's fine. Hopefully they help.
|
|
|
Post by Deleted on Aug 8, 2016 22:50:13 GMT -5
Ok, let me see if I can figure out that header stuff. Header goes here text text text text text goes here Header here, slightly longer now text text text text text goes here
|
|
|
Post by Deleted on Aug 8, 2016 23:41:37 GMT -5
Header goes here text text text text text goes here <div style="margin:auto;width:90%;padding:10px;background:#35643c;border:10px double #0b3011;"> <div style="text-align:center;width:180px;height:30px;background:rgb(120, 211, 133);margin-left:20px;">Header goes here</div><div style="margin:auto;width:85%;padding:20px;background:#000000;">text text text text text goes here</div> </div> Ok, here's the coding for what I just did. (it did the weird thing with the color code again; ignore that xP) So you can do whatever with the outer box (the darker green one). Start your "div style" and put in your coding. Just don't put the </div> for the end of this box yet, since that needs to go at the very end of all your coding to be able to hold the other boxes inside of it. Then, the second "div style" section I did is for the light green box, the header box. You can make it a certain width and height (I made this one 180 px wide and 30px tall); you can adjust that for however long your header is. I also added a bit of a margin on the left to scoot the box towards the right a little bit - that's the "margin-left: 20px" thing. You don't have to have that, but the header box will just be scooted over more towards the left. (also I centered the text) After this, make sure to put the </div> to close the header box before you start the box below it. So after doing that, you start the next "div style" to make what is the black box in my example. You can do whatever for this box, just like the first one. You can use a percentage for the width here; you don't have to put a specific width/height in pixels unless you want to. After that, make sure to put a </div> to close that box. Also, notice how the header box is resting right on top of the black box? That's because I didn't press enter in the coding to move the coding for the black box to the next line. If you do that, it will put a little space between the header box and the black box. You can do that or not do that, depending on how you want it to look. And then finally, after you put a </div> to close the black box, put one last </div> to close the very outer box (the darker green one).
|
|
|
Post by Deleted on Aug 8, 2016 23:53:14 GMT -5
Adding shadow to text:
It can be cool to add shadow to text. It makes it pop out from the page a little more. I like to use this on headers. So, how do you do it?
<font style="text-shadow: 2px 2px 2px #000000;">put your text here</font>
That's the coding you add. You can change the color code to whatever color you want the shadow to be. As for the pixel numbers, the "default" numbers that I go to are 2, 2, and 2. You can adjust them to how you want the shadow to look.
The first px number codes for how far to the right the shadow is (if you want the shadow to fall to the left, make the first number negative). Ex. here is text with the first px number as 15px, while the others are still at 2px.
It can be cool to add shadow to text. It makes it pop out from the page a little more. I like to use this on headers. So, how do you do it?
The second px number codes for how far down the shadow is (if you want the shadow to move upwards from the text, make the second number negative). Ex. here is text with the second px number as 15px, while the others are still at 2px.
It can be cool to add shadow to text. It makes it pop out from the page a little more. I like to use this on headers. So, how do you do it?
The last px number codes for how blurred the shadow is, I think. Ex. here is text with the last px number as 15px, while the first two are still at 2px. It's pretty soft and blurred in this example, whereas at 2px like the very first shadowed text in this post, it's a lot sharper.
It can be cool to add shadow to text. It makes it pop out from the page a little more. I like to use this on headers. So, how do you do it?
|
|
|
Post by Deleted on Aug 9, 2016 0:13:25 GMT -5
Rounding the edges of a box: You can have boxes like this...
text text text text text text text text ...Or you can have boxes like this.
text text text text text text text text
Or even like this!
text text text text text text text text
All you have to do to round the corners of your box is add "border-radius:" in after your "background:" "padding:" etc., and then a pixel number. The pixel number determines how rounded the corners are. The greater the number, the more rounded they'll be. The middle box above with the slightly rounded corners is set at "border-radius: 15px" Now you'll notice that the third box only has one corner rounded. To do that, instead of putting "border-radius," I put "border-top-right-radius" So you could put top-right, top-left, bottom-right, or bottom-left, for whichever corner you wanted rounded, and then your pixel value. You can even do more than one corner! Let's say you wanted the bottom left and top right corners rounded - you'd put in your coding after background etc., "border-bottom-left-radius: 30px; border-top-right-radius: 30px" or whatever amount of roundness you wanted. That coding would look like this: Tada! Yay for coding
text text text text text text text text
Also, "border:" and "border-radius" aren't really related, so you can still have borders on your boxes, and have rounded corners, at the same time. c: Here's an example. This one has the top right and bottom right corners rounded (set at 50px), and a solid border. Wooo more examples, with a border this time!
text text text text text text text text
|
|
|
Post by Deleted on Aug 9, 2016 0:19:04 GMT -5
There, there's the stuff on the header box, and a few other random things for you guys. ^^
|
|
|
Post by cloudyromxnce on Aug 9, 2016 12:29:12 GMT -5
Thanks! I learned it before but completely forgot, and this boosted my memory.
|
|
|
Post by Deleted on Aug 9, 2016 12:51:17 GMT -5
No problem!
|
|
|
Post by Ƈσяαℓ Mєямαι∂ ღ on Aug 9, 2016 12:52:26 GMT -5
Thank you!!!
|
|
|
Post by Deleted on Aug 9, 2016 12:53:53 GMT -5
You're welcome c:
|
|