sox
محبت
Last edited:
-
When posting, please be aware that artistic nudity is still nudity and not allowed under RpNation rules. Please edit your pictures accordingly!
Remember to credit artists when using work not your own.
Closed ⇾ an outdated guide to bad coding ⇽
- Thread starter sox
- Start date
constellation
𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋
oooh, i am very looking forward to this! c:
i hope you don’t mind me commenting sbdbsjf
sox
محبت
Designing BBCode in Adobe XD: Introduction
The first part of our XD series (yes, that name makes me just as uncomfortable as it makes you) teaches us how to find our way around the software once it's been downloaded, how to format objects in our layouts, and how to turn the layout into useful code. Enjoy! My cat really wanted to make her presence known in the background.
The first part of our XD series (yes, that name makes me just as uncomfortable as it makes you) teaches us how to find our way around the software once it's been downloaded, how to format objects in our layouts, and how to turn the layout into useful code. Enjoy! My cat really wanted to make her presence known in the background.
sox
محبت
thank you for your enthusiasm! i don't mind at all hehe it's an open forum for questions and comments c:
constellation
𝖺 𝗌𝗁𝗂𝗇𝗒 𝗌𝗍𝖺𝗋
okay but that first video was amazing and super helpful! i honestly can't wait to see more.
and you have a rly cute voice. it is not ugly (ง'̀-'́)ง
sox
محبت
if you don't stop this instant ima plant a fat smooch!!! you've been warned!!!
sox
محبت
Designing BBCode in Adobe XD: Formatting Classes
The second part of our XD series teaches us how to take the gross ugly markup that the software gave us and turn it into BBCode that we recognize and can manipulate. If a lot of these CSS properties look unfamiliar to you, let me know and I'll upload a tutorial on navigating classes. Enjoy!
sox
محبت
Designing BBCode in Adobe XD: Shadows
The third part of our XD series teaches us how to make box and text shadows in our design, and how to convert those into the proper code for our BBCodes. Enjoy!
Code:
[nobr]
[class=bkgd]
position: relative;
box-sizing: border-box;
width: 300px;
height: 400px;
background-color: #3F0D16;
overflow: hidden;
margin-right: auto;
margin-left: auto;
padding: 0;
[/class]
[class=pic]
position: absolute;
overflow: visible;
width: 100px;
height: 100px;
left: 100px;
top: 21px;
background: url(https://www.biography.com/.image/t_share/MTIwNjA4NjMzMjIxNzExMzcy/napoleon-i-9420291-2-402.jpg);
background-size: 100%;
border-radius: 200px;
border: 2px solid #BC7837;
box-shadow: 3px 3px 0px #000;
[/class]
[class=text]
position: relative;
overflow: auto;
width: 260px;
height: 220px;
font-size: 10px;
font-weight: normal;
line-height: 11px;
color: #A49582;
padding: 5px;
text-align: justify;
[/class]
[class=textcontainer]
position: absolute;
overflow: hidden;
width: 250px;
height: 220px;
left: 25px;
top: 165px;
background-color: #042F28;
border-radius: 10px;
box-shadow: 3px 3px 0px #000;
[/class]
[class=title]
position: absolute;
left: 25px;
top: 130px;
overflow: hidden;
width: 251px;
height: 28px;
text-align: center;
font-family: Righteous;
font-style: normal;
font-weight: normal;
font-size: 20px;
color: rgba(164,149,130,1);
text-shadow: 3px 3px 0px #000;
[/class]
[/nobr]
[div class=bkgd]
[div class=pic][/div]
[div class=textcontainer][div class=text][font=Quicksand]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In metus vulputate eu scelerisque felis imperdiet. Ut venenatis tellus in metus vulputate eu scelerisque. Cursus mattis molestie a iaculis at erat pellentesque. Vel elit scelerisque mauris pellentesque pulvinar pellentesque. Ut etiam sit amet nisl purus in mollis nunc sed. Venenatis lectus magna fringilla urna. Erat imperdiet sed euismod nisi porta lorem mollis. Lectus urna duis convallis convallis tellus id interdum velit laoreet. In est ante in nibh mauris cursus. Pharetra diam sit amet nisl suscipit adipiscing bibendum est. Semper risus in hendrerit gravida rutrum quisque non. Cursus metus aliquam eleifend mi in nulla posuere. Elementum facilisis leo vel fringilla. Rhoncus urna neque viverra justo nec ultrices dui sapien eget.
Quam viverra orci sagittis eu volutpat odio facilisis. Lacus vel facilisis volutpat est. Id aliquet lectus proin nibh. Ultricies tristique nulla aliquet enim tortor at auctor. Mi quis hendrerit dolor magna. Risus feugiat in ante metus. Magnis dis parturient montes nascetur ridiculus. Phasellus egestas tellus rutrum tellus. Dictum non consectetur a erat nam. Tincidunt tortor aliquam nulla facilisi cras. Aliquam nulla facilisi cras fermentum.
Non quam lacus suspendisse faucibus. Consequat mauris nunc congue nisi. Accumsan sit amet nulla facilisi morbi tempus iaculis. Convallis a cras semper auctor neque vitae tempus quam. Eu volutpat odio facilisis mauris sit amet massa. Consectetur purus ut faucibus pulvinar elementum integer. Scelerisque felis imperdiet proin fermentum leo. Fringilla est ullamcorper eget nulla facilisi. Fermentum iaculis eu non diam phasellus vestibulum lorem. Vitae sapien pellentesque habitant morbi tristique senectus et netus et. Eget nunc scelerisque viverra mauris. Dui faucibus in ornare quam. Rhoncus urna neque viverra justo nec. Ultricies leo integer malesuada nunc. Porttitor massa id neque aliquam vestibulum morbi. Orci sagittis eu volutpat odio facilisis mauris sit amet massa. Id aliquet risus feugiat in ante.
Neque vitae tempus quam pellentesque. Nulla facilisi cras fermentum odio eu feugiat. Blandit libero volutpat sed cras ornare. Dictum at tempor commodo ullamcorper a lacus vestibulum. Id faucibus nisl tincidunt eget nullam non nisi est sit. Ut porttitor leo a diam sollicitudin tempor id. Amet mauris commodo quis imperdiet massa tincidunt. Nisl condimentum id venenatis a. Pharetra sit amet aliquam id diam maecenas ultricies. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Est velit egestas dui id ornare. Nunc pulvinar sapien et ligula ullamcorper malesuada proin. Mi quis hendrerit dolor magna eget. Eget gravida cum sociis natoque penatibus et. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Id interdum velit laoreet id donec ultrices tincidunt. Sapien eget mi proin sed libero enim sed faucibus.
Lectus nulla at volutpat diam ut venenatis tellus. Fames ac turpis egestas sed tempus urna et. Sit amet mattis vulputate enim. Quis blandit turpis cursus in hac. Nullam ac tortor vitae purus. Egestas pretium aenean pharetra magna ac placerat vestibulum lectus. Tincidunt id aliquet risus feugiat in ante metus. Ultrices sagittis orci a scelerisque purus semper eget duis. Et tortor consequat id porta nibh venenatis cras sed felis. Enim nunc faucibus a pellentesque sit. Aliquam etiam erat velit scelerisque in dictum non consectetur. Accumsan tortor posuere ac ut consequat semper viverra nam. Pellentesque massa placerat duis ultricies lacus sed turpis. Posuere lorem ipsum dolor sit amet consectetur adipiscing.
[/font][/div][/div]
[div class=title]NAPOLEAN BONAPARTE[/div]
[/div]
Last edited:
This is amazing!
sox
محبت
i’m glad you think so!!!
I don't code a whole lot due to work and school so watching this inspires me to create some codes with adobe xd and see what i can doi’m glad you think so!!!
sox
محبت
oof my heart is happy ;-; i hope you like it!! i’m sure you’ll make some bomb codes
iMeisaki
mighty lil goon
I really enjoy watching you videos! Your coding is really nice ;; I had a quick question as to how easy it would be to achieve putting text over an image? Or even a solid colored background with text over an image?
I'm relatively new to BBCoding + and wanted to know how easy// hard it is. I don't have Adobe XD and I'm just not the greatest at coding in general!
I'm relatively new to BBCoding + and wanted to know how easy// hard it is. I don't have Adobe XD and I'm just not the greatest at coding in general!
sox
محبت
hello! thank you so much for your kind words c: it's pretty easy to layer objects/text over images, so long as you have your divs in the right order. let's say you have a div for you image, and a div for your text. if you write the code for your text before the code for the image, then the image will cover the text and you won't be able to see your words. here's a quick example:
[class=image] position: absolute; overflow: visible; width: 300px; height: 400px; top: 40px; left: 90px; background: url(https://i.pinimg.com/564x/56/89/3d/56893d92c0b1ecc5dfd239bae2b77cc0.jpg); background-size: 100%; border-radius: 100%; border: 10px solid #fff9e8; [/class] [class=text] position: absolute; width: auto; top: 55px; left: 80px; margin-left: auto; margin-right: auto; color: #1f0c00; font-size: 60px; font-weight: 700; transform: rotate(8deg); text-shadow: 2px 2px 0px #fff9e8; [/class]
[div class=image]
[div class=text]life's a bitch, boy.[/div]
[/div]
Code:
[nobr]
[class=image]
position: absolute;
overflow: visible;
width: 300px;
height: 400px;
top: 40px;
left: 90px;
background: url(https://i.pinimg.com/564x/56/89/3d/56893d92c0b1ecc5dfd239bae2b77cc0.jpg);
background-size: 100%;
border-radius: 100%;
border: 10px solid #fff9e8;
[/class]
[class=text]
position: absolute;
width: auto;
top: 55px;
left: 80px;
margin-left: auto;
margin-right: auto;
color: #1f0c00;
font-size: 60px;
font-weight: 700;
transform: rotate(8deg);
text-shadow: 2px 2px 0px #fff9e8;
[/class]
[div=background-color:#ebb93b;position:relative;height:500px;width:500px;margin-left:auto;margin-right:auto;]
[div class=image][/div]
[div class=text][font=Arizonia]life's a bitch, boy.[/font][/div]
[/div]
[/nobr]in this code, i have two classes: the image and the text. the background div is just for some contrast, which is why i didn't give it a class. you can use this same format with putting other objects over pictures, too. i hope this helps!
dazzling
blurry
new skill unlocked: CODING
sox
محبت
HELL YAR
yousmelldead
𝐰𝐡𝐚𝐭 𝐭𝐡𝐞 𝐟𝐮𝐜𝐡𝐬𝐢𝐚
You, are a goddess.
sox
محبت
oops im about to propose
Hoekage
Anti-social Extrovert
sox
محبت
im gonna CRY bitch STOP
Last edited:
jasmyn
f r e e b i r d
Seriously love this! I can’t wait to get my new laptop so I can try all of this myself! 
So helpful. 
So helpful.
sox
محبت
thank you love!!! i can't wait for you to try it all too c:Seriously love this! I can’t wait to get my new laptop so I can try all of this myself!
sox
محبت
Editing BBCode in Adobe Dreamweaver: Part One
A tutorial on using Dreamweaver (or any other similar HTML editor) to format our junk code that Adobe XD spits out c: Part one of unknown many bc who knows how long it'll take to edit this. Every code is a gamble lol
A tutorial on using Dreamweaver (or any other similar HTML editor) to format our junk code that Adobe XD spits out c: Part one of unknown many bc who knows how long it'll take to edit this. Every code is a gamble lol
sox
محبت
Here's a good resource that talks about alternatives to Dreamweaver if you're interested in this process! As I said in the video, it's definitely NOT a necessary step, but it saves me a whole lot of time and helps me pump out a code in a day or two at most.
sox
محبت
Editing BBCode in Adobe Dreamweaver: Part Two
Part 2/? of our tutorial on using Dreamweaver (or any other similar HTML editor) to format our junk code that Adobe XD spits out c: In this video, we do a lot of the tedious adjusting and scaling objects to fit them exactly how we want, as well as format text that goes in those objects,
Part 2/? of our tutorial on using Dreamweaver (or any other similar HTML editor) to format our junk code that Adobe XD spits out c: In this video, we do a lot of the tedious adjusting and scaling objects to fit them exactly how we want, as well as format text that goes in those objects,
Users who are viewing this thread
Similar threads
