Duolingo is the most popular way to learn languages in the world. Best of all, it's 100% free!

https://www.duolingo.com/truelefty

CSS in Duolingo threads

truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Inspired on this: https://www.duolingo.com/comment/11646765


Hello fellow Duoers.
I know most of you know how to make text bold or italics etc. by adding asterisks at the sides, but do you know...

how to change colour? {@style=color: red}

You are getting excited, aren't you?

[Hover on this text] Are you on Excel? {@style=cursor: cell}

Ok, all these things and much more can be done here as you see, and it's better if you know some CSS.


How to do it:

The 'code' is { @style=variable: value; variable2: value; variable3: value }
(without any space, only one space after every ":"; and add as many variables you want)
Variable can be "color", "font-size", "cursor", "background-color", etc. All those of CSS.
And the value depends on the variable. If it's "color", you can write "red", "blue", whatever.
If it is "cursor", you can write "help" to show this:

hover {@style=cursor: help}

or "cell" to show the Excel cursor, and etc.

And so on.

Just write a text, and right after it, that "code" with the things you want to add to the text.

For example, I want a red and bold text:

write this: { @style=color: red; text-style: bold } after the text, and only with spaces after the ":"s, to make this:

text {@style=color: red; text-style: bold}

If you want to see which things you can do, search "basic CSS" (or you can have fun taking a look at all the links at the left here )


Use it wise and carefuly, and have fun :) {@style=background-color: black; color: white}

PS: Btw, I'm not sure, is this really CSS?

2 years ago

63 Comments


https://www.duolingo.com/Hyllning

Thank you very much for the shout-out from my post!

2 years ago

https://www.duolingo.com/Hyllning
  • Some of these could be quite spammy {@style=border: 1px solid blue; outline: 5px dotted red;}
2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

I know... that's why I wrote "Use wisely and carefuly" ;D

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

You are welcome! I couldn't take all the credit.

2 years ago

https://www.duolingo.com/Hyllning

Just a heads up, it will be moved soon. So be ready!

2 years ago

https://www.duolingo.com/AvaFerengue4

AvaFerengue4: It is entertaining {@style=background-color:wheat;position:relative;float:right; top:-50px;border:1px red dotted;}

AvaFerengue4: And it seems as though it can make a mess {@style=background-color:wheat;color:green;position:relative;float:right; top:110px;border:3px orange dashed;}

(Playing with relative positioning)

2 years ago

https://www.duolingo.com/FerrisLikesEsp

Probably relative positioning outside of one's own post should not be allowed...

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

loool... that could really make a mess

btw, check the fixed positioning! xD bottom 0 and right 0

2 years ago

https://www.duolingo.com/AvaFerengue4

Very cute :)

2 years ago

https://www.duolingo.com/DiegoCancelinha
DiegoCancelinha
  • 14
  • 12
  • 8
  • 7
  • 7
  • 6
  • 5
  • 4

This is amazing! Thank you very much, {@style=color:purple;font-family:Georgia;backgroud-color:red;border:solid blue}

[G2DIPI_true]{@style=color:blue;font-family:TimesNewRoman;background-color:;border:solid purple}

DiegoCancelinha: Finally it works!{@style=color:FireBrick;background-color:silver;border:solid gold 5px;position:fixed;bottom:113px;right:0px;font-family:Georgia}

{@style=backgroud-color:red)}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

You are welcome, DiegoCancelinha :) {@style=color: red}

2 years ago

https://www.duolingo.com/DiegoCancelinha
DiegoCancelinha
  • 14
  • 12
  • 8
  • 7
  • 7
  • 6
  • 5
  • 4

Give some lingots XD:

1 True Lingot + 999,999 False Lingots = 1,000,000 Lingots. So you are a millionaire!!!

{@class=icon icon-lingot-micro}{@style=background- color:yellow;position:relative;bottom:489px;right:-330px}

999999{@style=position:relative;bottom:517px;right:-345px;color:gray}

{@style=skill-icon-65"}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Amazing!!! Actually how did you do that? I wasn't able to figure out how to move the lingots.

{@class=icon icon-lingot-micro}

2 years ago

https://www.duolingo.com/DiegoCancelinha
DiegoCancelinha
  • 14
  • 12
  • 8
  • 7
  • 7
  • 6
  • 5
  • 4

It's easy! I suppose that this should work as a normal comment, so I wrote [without spaces]:

{ @ class = icon icon - lingot - micro } { @ style = position : relative ; bottom : - px ; right : - px }{@style=background-color:yellow}

But I think relative position is too dangerous: you can make any comment or post "seem" like you want. :0{@style=cursor:pointer}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Strange, I have tried that, and it didn't work for me o.O But now it does wtf?

And if you consider it dangerous, I'd recommend you to delete that part of your comment... (because it is dangerous!)

{@class=icon icon-lingot-micro} {@style=position: relative; bottom: 300px; left: 100px}

2 years ago

https://www.duolingo.com/WanderingMonk
WanderingMonk
  • 16
  • 10
  • 3
  • 3
  • 2
  • 2
  • 2

What about some awesome css background patterns {@style =color: lightpink; text-shadow: 5px 5px 10px #110; padding: 8px 8px; font-size: 25px; font-weight: 900; line-height: 25px; background: lightpink; background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187,0,51,0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221,51,85,0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221,51,85,0) 31%) 50px 50px; background-color:#b03; background-size:100px 100px; border-radius: 40px; border: 2px dashed lightpink; box-shadow: 0 0 0 4px #b03, 6px 6px 3px 4px #888888; padding: 8px 30px; height: 200px;}

Could get really spammy! and ugly-up the place!{@style =color: blue; text-shadow: -1px -1px 0 navy, 1px -1px 0 navy, -1px 1px 0 navy, 1px 1px 0 navy, 0 0 2.5px blue, 0 0 15px blue, 0 0 25px blue; padding: 8px 8px; font-size: 45px; font-family: comic sans ms, marker felt, sans-serif; font-weight: 900; text-align: center; line-height: 37px; background: lightblue; background-color: silver; background-image: linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px), linear-gradient(335deg, #b00 23px, transparent 23px), linear-gradient(155deg, #d00 23px, transparent 23px); background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; box-shadow: -1px -1px 0px darkred, 1px 1px 0px darkred, 2px 2px 0px darkred, 3px 3px 0px darkred, 4px 4px 0px darkred, 5px 5px 0px darkred, 6px 6px 0px darkred, 7px 7px 0px darkred, 8px 8px 0px darkred, 9px 9px 0px darkred, 10px 10px 0px darkred, 11px 11px 0px darkred, 12px 12px 0px darkred, 13px 13px 0px darkred, 14px 14px 0px darkred, 15px 15px 0px darkred;}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

This is the most spammed post ever in Duolingo XD {@style=font-size: 25px; border-width: 10px; border-style: groove; border-color: green; background: linear-gradient(45deg, white 25%, #8b0 25%, #8b0 50%, white 50%, white 75%, #8b0 75%); background-size:100px 100px}

2 years ago

https://www.duolingo.com/WanderingMonk
WanderingMonk
  • 16
  • 10
  • 3
  • 3
  • 2
  • 2
  • 2

Now it's starting to look worse than http://theworldsworstwebsiteever.com/ {@style =color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 5px 5px 10px #110, 1px 1px 0 black; padding: 8px 8px; font-size: 30px; font-weight: 900; line-height: 30px; background: lightblue; background-color:white; background-image: linear-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 50%), linear-gradient(rgba(200,0,0,.5) 50%, transparent 50%); background-size:50px 50px; box-shadow: 4px 4px 5px #888888;}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Agreed!Agreed!Agreed!Agreed!Agreed!Agreed!Agreed!Agreed!Agreed!Agreed! woops {@style=font-size: 25px; border-width: 3px; border-style: groove; border-color: black; background: linear-gradient(45deg, white 25%, violet 25%, red 50%, white 50%, white 75%, yellow 75%); background-size:100px 100px}

2 years ago

https://www.duolingo.com/WanderingMonk
WanderingMonk
  • 16
  • 10
  • 3
  • 3
  • 2
  • 2
  • 2

But they could be very cool!{@style =color: white; text-shadow: 0 0 2.5px orange, 0 0 5px orange, 0 0 15px orange, 0 0 20px orange, 0 0 35px orange, 0 0 40px orange, 0 0 50px orange, 0 0 75px orange; background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px; border-radius: 40px; border: 2px dashed orange; box-shadow: 0 0 0 4px black, 3px 3px 3px 4px #888888; padding: 8px 30px; font-size: 30px; font-weight: 900; line-height: 36px;}

Or very nerdy{@style =color: white; text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 5px 5px 10px #110, 1px 1px 0 black; padding: 8px 8px; font-size: 25px; font-weight: 900; line-height: 25px; background: lightgreen; background-color: #6d695c; background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px), linear-gradient(60deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)), linear-gradient(120deg, rgba(0,0,0,.1) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)); background-size: 70px 120px; box-shadow: 4px 4px 5px #888888; height: 200px;}

Lime{@style =color: white; text-shadow: 0 0 2.5px lime, 0 0 5px lime, 0 0 15px lime, 0 0 20px lime, 0 0 35px lime, 0 0 40px lime, 0 0 50px lime, 0 0 75px lime; background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px; border-radius: 40px; border: 2px dashed lime; box-shadow: 0 0 0 4px black, 3px 3px 3px 4px #888888; padding: 8px 30px; font-size: 30px; font-weight: 900; line-height: 36px;}

Yellow{@style =color: white; text-shadow: 0 0 2.5px yellow, 0 0 5px yellow, 0 0 15px yellow, 0 0 20px yellow, 0 0 35px yellow, 0 0 40px yellow, 0 0 50px yellow, 0 0 75px yellow; background: radial-gradient(black 15%, transparent 16%) 0 0, radial-gradient(black 15%, transparent 16%) 8px 8px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px; background-color:#282828; background-size:16px 16px; border-radius: 40px; border: 2px dashed yellow; box-shadow: 0 0 0 4px black, 3px 3px 3px 4px #888888; padding: 8px 30px; font-size: 30px; font-weight: 900; line-height: 36px;}

I really should be writing all this down:){@style=background: lightblue; background-color: #fff; background-image: linear-gradient(90deg, transparent 79px, lightpink 79px, lightpink 81px, transparent 81px),linear-gradient(#eee .1em, transparent .1em); background-size: 100% 1.2em; padding: 29px 80px; box-shadow: 3px 3px 5px #888888; font-size: 20px; font-family: comic sans ms, marker felt, sans-serif; line-height: 24px; border: 1px solid silver; height: 200px;}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Actually, this one is quite neat! Candy stick {@style=font-size: 25px; border-width: 3px; border-style: groove; border-color: black; background: linear-gradient(45deg, white 25%, red 25%, red 50%, white 50%, white 75%, red 75%); background-size:100px 100px}

2 years ago

https://www.duolingo.com/GrandApple
GrandApple
  • 18
  • 11
  • 11
  • 9
  • 8
  • 6
  • 5
  • 5
  • 4
  • 3
  • 3
  • 2

This is so cool! {@style=background-color: #d0e4fe}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

The text goes before the code, and your code should be:

{ @style=background-color: #d0e4fe } only with a space after the ":"

This is so cool! {@style=background-color: #d0e4fe}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

That's it! :)

2 years ago

https://www.duolingo.com/GrandApple
GrandApple
  • 18
  • 11
  • 11
  • 9
  • 8
  • 6
  • 5
  • 5
  • 4
  • 3
  • 3
  • 2

Thanks! {@style=color: red}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

You are welcome :)

2 years ago

https://www.duolingo.com/Garrett2015
Garrett2015
  • 15
  • 11
  • 11
  • 10
  • 4

We can do this here?! Thank you! I didn't see the updated version of the source post.

I use CSS all the time outside of Duolingo, but I had no idea it could be implemented here with the at-sign. This is going to be fun. :D

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

For sure it is going to be fun! Enjoy! :D {@style=text-decoration: line-through}

2 years ago

https://www.duolingo.com/Hyllning

By the way.. The link for CSS is SO HELPFUL!! Thank you for that! Have a few Lingots!

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Thanks!

2 years ago

https://www.duolingo.com/AvaFerengue4

Trying out absolute positioning in the corner

AvaFerengue: Lower left absolute positioning {@style=color:green;background-color:wheat;border:solid black 2px;position:absolute;bottom:0;right:0}

2 years ago

https://www.duolingo.com/AvaFerengue4

lingot {@class=icon icon-lingot-micro;position}

Now that is funny {@style=background-color:Azure;}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

{@class=icon icon-lingot-micro}

I can't use positioning on this! >.<

2 years ago

https://www.duolingo.com/DiegoCancelinha
DiegoCancelinha
  • 14
  • 12
  • 8
  • 7
  • 7
  • 6
  • 5
  • 4

{@class=icon icon-lingot-micro}

2 years ago

https://www.duolingo.com/AvaFerengue4

Trying out fixed positioning in the corner (slightly offset to not overwrite G2DIPI_true's)

AvaFerengue: Lower left fixed positioning {@style=color:green;background-color:wheat;border:solid black 2px;position: fixed; bottom: 30px; right: 20px}

2 years ago

https://www.duolingo.com/AvaFerengue4

text {@style=background-image: url("//d7mj4aqfscim2.cloudfront.net/images/icon-sprite_mv_f782f3d9122731199c1e184f389b2f2a.svg");color:white;height:24px;width:27px;background-position: -313px -40px;}

Experimental post.

2 years ago

https://www.duolingo.com/AvaFerengue4

{@style=height:40px;width:40px;}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

This is the beginning of a new era!

2 years ago

https://www.duolingo.com/AvaFerengue4

AF4: I wonder if they won't add filtering to disable this at some point... {@style=color:DarkRed;background-color:Azure;border:solid black 4px;position:fixed; bottom: 70px; right: 60px;}

More lower right fixed positioning: wondering if they won't disable this eventually

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

I hope not... just be careful and let's hope they don't disable it! :S

2 years ago

https://www.duolingo.com/AvaFerengue4

Hm. Maybe I should remove my fixed ones....

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

only if you want...

2 years ago

https://www.duolingo.com/vcel10
vcel10
  • 25
  • 22
  • 12
  • 6
  • 4

Thanks, I love CSS!

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Glad you liked it! :)

Btw, what a streak!

--- I'm almighty G2DIPI_true, writing in other people's comments... (lol) {@style=position: relative; bottom: 238px; left: 70px}

2 years ago

https://www.duolingo.com/vcel10
vcel10
  • 25
  • 22
  • 12
  • 6
  • 4
2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Ya hay como 5 usuarios con rachas de más de 1000 días! Increíble.

https://www.duolingo.com/comment/10883422

(I wrote in your comment... magic?)

2 years ago

https://www.duolingo.com/vcel10
vcel10
  • 25
  • 22
  • 12
  • 6
  • 4

¿Cómo lo hiciste?

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Ya te digo...

2 years ago

https://www.duolingo.com/KOokey_Pokey

{@style=orange: value

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

It should be:

{ @style=color: orange } after your text, and only with a space after the ":"

Orange {@style=color: orange}

2 years ago

https://www.duolingo.com/KOokey_Pokey

oh... {@style=color: orange}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

yep, and the closing } at the end :)

2 years ago

https://www.duolingo.com/KOokey_Pokey

this is so cool {@style=background-color: red}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

I know... :D {@style=cursor: move}

2 years ago

https://www.duolingo.com/KOokey_Pokey

sup {@style=color orange}

2 years ago

https://www.duolingo.com/KOokey_Pokey

sup {@style=color: orange }

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

Testing fixed positioning...

G2DIPI_true: I hope you have liked this! {@style=border: 2px solid black; position: fixed; bottom: 0px; right: 0px}

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

G2DIPI_true: absolute positioning... {@style=position: absolute; top: 0px; left: 0px; border-color: black; border-style: groove; border-width: 5px; background-color: grey; color: white}

...can make a mess! {@style=position: absolute; top: 0px; right: 0px; border-color: black; border-style: groove; border-width: 5px; background-color: grey; color: white}

Testing...

2 years ago

https://www.duolingo.com/WanderingMonk
WanderingMonk
  • 16
  • 10
  • 3
  • 3
  • 2
  • 2
  • 2

Testing this. Edit: I wish I could figure out how to make the background not skew so it would be a rectangle and then this could be the Star Wars crawl. {@style=color: yellow; font-family: Arial, Gadget, sans-serif; font-weight: 900; font-size: 40px; text-align: justify; line-height: 35px; overflow: hidden; transform-origin: 50% 100%; transform: perspective(300px) rotateX(25deg); padding: 10px; background: black; }

2 years ago

https://www.duolingo.com/truelefty
truelefty
  • 25
  • 24
  • 24
  • 18
  • 14
  • 13
  • 12
  • 12
  • 11
  • 11
  • 11
  • 10
  • 10
  • 8
  • 6
  • 6
  • 5
  • 4
  • 3
  • 2
  • 220

wow, that's so cool

Idk about what you ask, btw xD Sorry

2 years ago

https://www.duolingo.com/WanderingMonk
WanderingMonk
  • 16
  • 10
  • 3
  • 3
  • 2
  • 2
  • 2

{@style=background: black; background-color:black; background-image: radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px), radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px), radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px), radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px); background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px; background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; height: 500px;}

Testing- Well I see this isn't going to work, I tried using the relative positioning thing and it messes up the area leaving a lot of room at the bottom and you have to type quite a bit for it to look alright. Then since it is two elements I have to adjust the size of the background and the position of the text (depending on how much is typed) after everything is typed. I give up, this will probably be it's only appearance, and who knows what it will look like on a mobile device...{@style=color: yellow; font-family: Arial, sans-serif; font-weight: 900; font-size: 40px; text-align: justify; position: relative; top: -560px; line-height: 38px; transform-origin: 50% 100%; transform: perspective(300px) rotateX(25deg); padding: 10px;}

2 years ago

https://www.duolingo.com/Perritonueby
Perritonueby
  • 14
  • 11
  • 10
  • 9
  • 9
  • 8
  • 8
  • 8
  • 7
  • 7
  • 7
  • 7
  • 7
  • 6
  • 6
  • 6
  • 6
  • 5
  • 4
  • 4
  • 4
  • 4
  • 3
  • 2

ruby require 'redcarpet' markdown = Redcarpet.new("Hello World!") puts markdown.to_html Code?

9 months ago