Creating Sexy Stuff...Css on Uptrennd


Sick of having to edit, crop and tint images to fake a nice post only for it to look a bit shitty in a single wide white abyss. The lines of text flowing one after the other like wet hair.



Want your pooch to be fluffy and not look like a rat?



I am not a fan of markdown, and even less of a wysiwyg so it is natural for me to create my posts just using html tags like a mad person. Maybe I like the control. Anyway I noticed everyone had colourful rainbow text, and figured that is nice everyone is puking on their screen.



It was nice though, because apart from allowing me to paint my text with rainbow sharts the Uptrennd editor also allows me to use inline styling.



Noice!



We have to admit although blockchain social blogging is all the rage, for the most part it looks dreary. Which is fair enough, considering you can't go and make "designer" posts on Medium or Facebook. It all has to look the same because equality and shit... Ok maybe not for those reasons but for something I guess.



I only wrote all of the above so the text can wrap around the title text on the right. The point is on Uptrennd we have the ability to use css, although only inline but css nonetheless and that means with a little effort every post can look pretty nifty. If you are so inclined, also I am totally ignoring the fact that I am not the first one to make a post about this.








Cascading Style Sheets - CSS




"CSS is designed to enable the separation of presentation and content, including layout, colors, and fonts. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file, and reduce complexity and repetition in the structural content.

Wikipedia



A post is a post.



So you may think what does it matter. You can easily change your text colour using the buttons in the wysiwyg, scale images to make the text flow next to it. In the end it is just a blog post and for fancy things you can use "banners" and "dividers". Which is fair enough, it most likely does not matter at all. It is just nice.



CSS is used to allow your text to wrap around images, the colour to change and the font size to be different. In combination with the HTML it provides structure, hierarchy and transforms a wall of text into a...nicer wall of text.



The other part to not really caring about all the fancyness is because most people seem to be on mobile so multi-columns and galleries etc. really have no use. Since everything on mobile is in a straight line to death.



If you are on a pc however a person quickly notices a lack of layout and structure to content, this is even more evident on a platform that showcases long-form content. The lack of justification, grid-lines and visual hierarchy can be a real eyesore.



From being on Hive and Whaleshares I know a person does not need a lot to make a post look good - on those platforms we only have a pull-left, pull-right style which is allowed and with that alone you can then at least bring some simple variance to pages.



Here however you have seemingly all the power of raw CSS to use, albeit inline. It would be a shame to not see better use and support for that.



With use, I mean people should fiddle around and see what they can make things do and by support I mean an official framework of styles that Uptrennd will support and bug fix so people can know there content will look the same in the future and across devices.



For example: currently you are able to use the bootsrap grid styles which Uptrennd is built upon but this does not mean it will work in the app which will break your posts layout. So an official framework would allow you to trust that your content will display the best it can even if it is displayed through the browser or a nativescript app.





What a hassle.



I know right, and I am pretty sure I have not even explained WTF inline-css is vs CSS


Nah I am just fucking with you, they are the same thing. Inline-css just refers to using the css directly inside your html tag using the style attribute. To see this in action you can go to edit a post then change some text to any colour and click the code icon to see what the editor did in the background. For example a dark grey will give you something like this:style="color:#333" or style="rgb(80,80,80)". I think that if you want you will Google this stuff and learn it anyway so I don't need to do a full blown tutorial or anything. To get you started with the very basics you can have a look at this article and see what css looks like and how to use it: Beginners Guide to CSS.



What I would like to just reiterate is that we are allowed to use "inline-css" that narrows what we are capable of accomplishing a little from the traditional styling. It limits you to only being able to change the direct element you want to affect. So if you want your text another colour and bigger then the style is directly applied to that text and not all text of that type. This causes a lot of redunancy but is still incredibly powerful. It also means that if you find a tutorial that uses the css externally or targets multiple elements in one declaration you just need to keep in mind which styles can be applied in such a direct manner.




Just get on with it!



Hey, this is hard. Well not hard just confusing. Well not confusing just a lot. Where to even begin...



To start you add the style="(your fancy stuff goes here)" to an HTML element you want to be changed. That would be the ones with brackets such as <p></p> <h1></h1> <div></div>



You change them to look like this <p style="css goes here"></p>



So the simplest might be to show examples using this post. That is why I tried to add as many elements as is reasonable. It is worth noting that I did not use the Uptrennd - Twitter Bootsrap Grid System for the reasons I mention above. If they ever change it then my post will break. So here is hoping they don't remove styling altogether. Maybe we must ask Jeffafa to make an official framework for posts.



Anyway...






The header text that is aligned to the right with the content wrapping around it uses a float, this is one of the most useful and quick styles you can use on images or text to shift them left or right on a page and have other things take up space around them. The code for the heading title looks like this:


<h2 style="float:right;max-width:40%;min-width:250px;font-size:3em;margin:0;padding:0.5em;color:#32936f">Want your pooch to be fluffy and not look like a rat?</h2>


You see the float:right, max-width:40%,font-size:3em those are the main parts that tell the text what it should do. I am telling it that it should position to the right side of the screen, it cannot be wider than 40% of available space and should be 3 times the normal text size. Everything else is just tweaking.








Ok, this one seems like it has a lot going on but is just a few elements working together by reducing space used and their position on the page.



The main parts are the background image, the title and then custom styling the blockquote element.For the background to stay in position I used an image background instead of a colour. When you use an image background you have properties that can be changed. For example the repeat property is used to repeat a pattern - usually a small image - that then creates a texture, they are best used with seamless textures. In this case I just used an oversized image and set the position to fixed so the image will stay in place even if the page scrolls. This is the code for it with the additional rotation I added:



<div style="height:100px; background-image:url('https://yourimageurl'); min-height:5em;background-repeat:no-repeat;  background-attachment: fixed; background-position: center;background-size: cover; display:block; transform: rotate(3deg); margin-top:-50px; z-index:0;"></div>

The part you can easily reuse without really thinking about it is this background-image:url('https://yourimageurl');background-repeat:no-repeat;  background-attachment: fixed; background-position: center;background-size: cover;

The background image says use my image, do not repeat it, make it fixed to the page and center it in the box then make sure it fills the whole area. If you use this on an element that has content inside then you won't have to worry about adding height and space so the image is actually visible. That is why mine has a min-height because it has no contents and I want it to show the background. Else it would be 0 high and show nothing.



The title



has the following added to it:

<h1 style="text-shadow:2px 2px 3px rgba(0,0,0,0.8);color:#090E0F;">The title</h1>

That if read means - shift the title 20px up, add a shadow whose RGB colours are black with an opacity of 0.8 and make the text color this hex:090E0F or you could use the RGB values.



A lot of the effects in CSS can easily be generated for you, even HTML templates are freely available one of the sites with a lot of generator options that will provide you the code for text-shadows, image/box shadows and gradients html-css-js.com. You just need to copy the code they give into the style tag and that will work in most browsers.



I think this is getting quite long-winded and I am even to tired to fucking swear so the last style that is very sueful is the border style. All of this is very easy to find information on if you want so there is no point going into detail on every single item. I hope this post sparks a little interest in some to maybe experiment with what is possible and the rest well, meh.




The code for the box border and for almost all the borders I used through this post is mainly the same, you just change it between whether it must be solid or dashed. Clearly I like dashed and then what size and colour you want it to be. For the box I added a corner radius to get the rounded effect and I think it looks simple but nice so suck it.


<div style="background:#090E0F;padding:1em;margin-top:2em;border-top:dashed 2px white;border-left:dashed 2px white;border-radius:40px 0 0 0;margin-left:1em;color:#32936f">

So to step through the above, as it reads. I am telling it make my background that Hex colour, then put 1 font-size worth of space inside, then move it down 2 font-sizes from the top. That just positions it and makes so the text does not touch the inside of the box. Then I tell it border-top:, you can also use the short version which is just border and set all four sides but I chose to do each explicitly. So I tell it the top and left borders must be dashed and 2px thick and colour them white. Then the border-radius says the corner must have a radius of 40px which causes it to start rounding and finally I move it 1 font-size to the right - away from the left.





It might be evident that I am now super lazy so instead here are some pics of my cats when they were little and a final tip: Use your browser console and inspect elements to easily see what styles are applied to something you might like.








Resources




  • https://css-tricks.com/

    Is a great site showing off a lot of what is possible with CSS, it is in the name afterall.

  • Colorzilla

    Is a great plugin to sample colours from any web page and get the hex or rgb value.

  • https://cloudinary.com/

    Has a very nice free tier for image hosting and management. You can easily change an images colour, effects and scale just by using a url.




Tell Jeffafa an official post CSS framework would be nice.

COMMENT

14

Ikechukwu Ndukwe
11 Jun

You have a great contest here and I think once the app comes out it will work greatly there. This nice and very creative

2 REPLY

10

Joe Yenum
11 Jun

This is really comprehensive.

To be honest it's also really long.

2 REPLY

19

Not Penderis
11 Jun

:) I feel like comprehensive and long go hand in hand... I should try for concise though. Thanx. 

0 REPLY

25

Tiger Lily
11 Jun

lolol   I CANNOT BELIEVE YOU

0 REPLY

19

Not Penderis
11 Jun

Whaaaaat! I am innocent.

0 REPLY

25

Tiger Lily
12 Jun

I have proof that this is a lie 

0 REPLY

21

aloha dreamer
11 Jun

Aloha Not Penderis ~ you certainly have shown us a lot of your skills here!  Thanks so much for sharing the possibilities of creating much more than just words, but visually this is so much more in-depth.

However, it's a bit challenging to follow for someone like me, no CSS skills.. where would one start?

2 REPLY

19

Not Penderis
11 Jun

Reading it myself now I was also thinking well this is a ton of fluff. I think this is a good quide to understand the basics https://www.quicksprout.com/beginners-guide-to-css/  and people may hate on W3schools but they were always the best quick and dirty reference https://www.w3schools.com/css/default.asp  and you can do a free course on codeacademy https://www.codecademy.com/learn/learn-css . For basic text and color change things the references will be fine. Considering how much the editor changes when you actually post there might be a few things you would have to work around but I think in most cases people just want a nice background behind text or something so then it easy enough to grab a single line from a tutorial or inspect things via the browsers code inspector and take the style directly.

1 REPLY

25

Tiger Lily
11 Jun

Isn't he the best?   :)

this is why i snagged him for our logo designing hehehehe

0 REPLY

19

Not Penderis
11 Jun

Keep saying stuff like that and I will downvote you. :)

0 REPLY

21

aloha dreamer
11 Jun

WOW! and Woah!  haha - I think creativity just flows out of your pores! all kidding aside though, I can't wait to see what I can create with your suggestions!

THANK YOU!

0 REPLY

21

aloha dreamer
11 Jun

haha @ Tiger Lily!  you definitely have an eye for all things creative!

by the way, where can I find my picture without the professor badge?  I know you showed it to me a few weeks ago but I didn't download it back then and now I can't seem to find it :(

0 REPLY

25

Tiger Lily
12 Jun

Don't you downvote me anyway, my little pumpkin pie? 🥧😍😉🤗

0 REPLY

3

elsa Varela
11 Jun

Big educative post 

1 REPLY

19

Not Penderis
11 Jun

Well fuck this parser. Also, I need a new keyboard... This post is officially an example of how pathetic the editor actually is. Even with clear instructions it goes and fucks shit up. 

1 REPLY

25

Tiger Lily
11 Jun

you have bad language lol

1 REPLY

19

Not Penderis
11 Jun

Better than a fake smile :)

0 REPLY

21

aloha dreamer
11 Jun

haha please don'thold back and tell us how you really feel... NOT!

0 REPLY

25

Tiger Lily
12 Jun

I wouldn't know....I never fake my smiles!!! 😋

0 REPLY

25

Tiger Lily
12 Jun

LOLOLL

Such a potty mouth on him

0 REPLY

COMMUNITY DETAILS

Uptrennd

17866

Subscriber

1

Online

A platform designed to redistribute wealth from corporations to individuals. A site that empowers content creators to thrive through creating digital content.

RELATED COMMUNITIES

Bitcoin Cash

23412 subscribers

Litecoin

22919 subscribers

Cryptocurrency Mining

21974 subscribers

Trading & TA

19626 subscribers

Zcash

16256 subscribers

Uptrennd Optimization

12973 subscribers

© 2020 UpTrennd.com