T ; boxes on top of photos
random freebies.long time no tutorial-sy? i dunno. i've been away for a long time, i have no idea how to run things now. bare with me, i'll try to teach you how to overlap boxes on top of photos. [tadahh~]
so at first, i had no idea how to do that. i just keep seeing it everywhere. and i had no idea how to do those kinds of things. i mean, i'm too lazy to open pastebin links or anything like that. so i was playing around with photos and boxes. a seamless photo to be exact. and i miraculously got my box to overlap the photo. if you're wondering what my reaction was, it was just bland. like: ._. (so that's how it was. fml) or something like that.
okay, enough chat. i'vebeenawayforsolong, i'msosorry.
so first, you're gonna want to look for a photo. a big sized-photo if you'll make a big layout of some kind. a small one if you'll just put a few words. absolutely up to you. but just be sure it won't clash with the colors you chose, because if it does, it'll be hard to read text off of it.
second, add the 'style' attribute after the last " of your src attribute. add float inside the style attribute. you can add margins as well, up to you.
third, create your box. just be sure to make it smaller than the photo. but if you want it bigger than the photo, then i won't object. it's you style, man.
fourth, add margins. i usually like things perfectly centered, so i'm kind of specific with numbers. calculators are a must for me.
and viola? i guess. i'll give a preview. it's from a layout i'm planning to make and the photo i used was seamless. the photo was from colourlovers and tis adorable. i like it. i posted patterns from colourlovers not too long ago - chapter-wise.
so at first, i had no idea how to do that. i just keep seeing it everywhere. and i had no idea how to do those kinds of things. i mean, i'm too lazy to open pastebin links or anything like that. so i was playing around with photos and boxes. a seamless photo to be exact. and i miraculously got my box to overlap the photo. if you're wondering what my reaction was, it was just bland. like: ._. (so that's how it was. fml) or something like that.
okay, enough chat. i'vebeenawayforsolong, i'msosorry.
so first, you're gonna want to look for a photo. a big sized-photo if you'll make a big layout of some kind. a small one if you'll just put a few words. absolutely up to you. but just be sure it won't clash with the colors you chose, because if it does, it'll be hard to read text off of it.
second, add the 'style' attribute after the last " of your src attribute. add float inside the style attribute. you can add margins as well, up to you.
third, create your box. just be sure to make it smaller than the photo. but if you want it bigger than the photo, then i won't object. it's you style, man.
fourth, add margins. i usually like things perfectly centered, so i'm kind of specific with numbers. calculators are a must for me.
and viola? i guess. i'll give a preview. it's from a layout i'm planning to make and the photo i used was seamless. the photo was from colourlovers and tis adorable. i like it. i posted patterns from colourlovers not too long ago - chapter-wise.
[div][ img src='' http://colourlovers.com.s3.amazonaws.com/images/patterns/2290/2290455.png" style=" float:left; margin:10px; '' /][/div]
[div style=''width:180px; height:180px; background-color:#333; float:left; margin:20px 0px 0px -200px;">
[div style=''width:180px; height:180px; background-color:#333; float:left; margin:20px 0px 0px -200px;">
kind of complicated, but if i got it, then anyone can too. i'm really stupid at times, i'll let you know. this is all for today. (nov.7, 2015 btw) bye bye. i really hope you understood what i was trying to say tho. o u o
ps: not sure if this is the only way to do it. pretty sure there are other ways of doing this, but so far, this is all i know. i might post about it if i find other ways.
pps: i made this tutorial-thingy because no one else is. and if anyone did, i wouldn't have suffered figuring out how it works. i mean, i swear my first trial was a bunch of complicated margin alignment and things. float is the answer to all my questions. i shouldn't have doubted him. ;~;
ps: not sure if this is the only way to do it. pretty sure there are other ways of doing this, but so far, this is all i know. i might post about it if i find other ways.
pps: i made this tutorial-thingy because no one else is. and if anyone did, i wouldn't have suffered figuring out how it works. i mean, i swear my first trial was a bunch of complicated margin alignment and things. float is the answer to all my questions. i shouldn't have doubted him. ;~;
Comments