Rotating Text with HTML?

L4TF2

Anybody here know how to make something like this?

sulky

Image with an alpha handle by css. Use some <div> with relative possitioning should work fine. Or there is a transfom instructions in CSS3

L4TF2

sulky wrote: »

Image with an alpha handle by css. Use some <div> with relative possitioning should work fine. Or there is a transfom instructions in CSS3

Looks like it's time to learn CSS. *Grabs some coffee.*

cookedpeanut

Create a div container which has the shape and text inside and then use this code in your stylesheet to rotate the container.

[html]div {
-ms-transform: rotate(); /* IE 9 */
-webkit-transform: rotate(); /* Safari */
transform: rotate();
}[/html]

For learning:
http://www.w3schools.com/
https://www.codecademy.com/

L4TF2

cookedpeanut wrote: »

Create a div container which has the shape and text inside and then use this code in your stylesheet to rotate the container.

[html]div {
-ms-transform: rotate(); /* IE 9 */
-webkit-transform: rotate(); /* Safari */
transform: rotate();
}[/html]For learning:
http://www.w3schools.com/
https://www.codecademy.com/

Thanks for the links!
Also would it be transform: rotate(); for firefox or is that something different like IE9 or Safari?

Bartalon

Dang it, I just saw you had a double post. I posted in the wrong one :poly142:

http://www.w3schools.com/cssref/css3_pr_transform.asp

L4TF2

Bartalon wrote: »

Dang it, I just saw you had a double post. I posted in the wrong one :poly142:

http://www.w3schools.com/cssref/css3_pr_transform.asp

Yeah. I double posted by mistake.

cookedpeanut

The standard code is:

[html]transform: rotate();[/html]

However not all browsers understand that piece of code by itself, that's why we add those duplicates with extensions. It allows the other browsers to work with the code.

Trust me, it's my biggest headache when it comes to using CSS3 since not all the functions are standardized across all browsers.

Also I'm not sure if you're using Windows or Mac for coding, but I've worked my way through a fair few text editors and found Adobe Brackets to be the most enjoyable to use. It allows you to grab elements straight from .PSD files and it has a live-view function which updates Chrome and FireFox as you code, pretty cool for visually building sites.

http://brackets.io/

Some good forums for coding advice:
http://www.codingforums.com/
http://www.dreamincode.net/

Some good web based utilities:
https://snazzymaps.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://cssanimate.com/
https://github.com/bodymovin/bodymovin
http://www.cssmatic.com/
http://css3generator.com/
http://www.danstools.com/
http://enjoycss.com/
http://www.freeformatter.com/
http://www.generatecss.com/

If you want to learn a markup language..?
http://coffeescript.org/#top
http://haml.info/
http://lesscss.org/#
http://sass-lang.com/
http://slim-lang.com/

Some resources:
http://simbyone.com/
https://www.youtube.com/user/realcsstricks/videos
http://www.quackit.com/
https://css-tricks.com/

Also Google fonts are great since they are free to use and can be hooked with the @FaceFont function directly:
https://www.google.com/fonts

Code repositories:
http://codepen.io/
http://cssdeck.com/

Online code sharing:
https://cryptbin.com/
http://jsbin.com/
http://jsfiddle.net/
https://koding.com/

Some good frameworks:
http://getbootstrap.com/
http://vanillaforums.org/

Lots of links, hope they are useful to you.

Also if you're interested, I'm looking for a coding partner to work with online, as in just casually over TS or something. If you're interested let me know, I'm also still an intermediate novice...

L4TF2

cookedpeanut wrote: »

The standard code is:

[html]transform: rotate();[/html]However not all browsers understand that piece of code by itself, that's why we add those duplicates with extensions. It allows the other browsers to work with the code.

Trust me, it's my biggest headache when it comes to using CSS3 since not all the functions are standardized across all browsers.

Also I'm not sure if you're using Windows or Mac for coding, but I've worked my way through a fair few text editors and found Adobe Brackets to be the most enjoyable to use. It allows you to grab elements straight from .PSD files and it has a live-view function which updates Chrome and FireFox as you code, pretty cool for visually building sites.

http://brackets.io/

Some good forums for coding advice:
http://www.codingforums.com/
http://www.dreamincode.net/

Some good web based utilities:
https://snazzymaps.com/
http://www.fontsquirrel.com/tools/webfont-generator
http://cssanimate.com/
https://github.com/bodymovin/bodymovin
http://www.cssmatic.com/
http://css3generator.com/
http://www.danstools.com/
http://enjoycss.com/
http://www.freeformatter.com/
http://www.generatecss.com/

If you want to learn a markup language..?
http://coffeescript.org/#top
http://haml.info/
http://lesscss.org/#
http://sass-lang.com/
http://slim-lang.com/

Some resources:
http://simbyone.com/
https://www.youtube.com/user/realcsstricks/videos
http://www.quackit.com/
https://css-tricks.com/

Also Google fonts are great since they are free to use and can be hooked with the @FaceFont function directly:
https://www.google.com/fonts

Code repositories:
http://codepen.io/
http://cssdeck.com/

Online code sharing:
https://cryptbin.com/
http://jsbin.com/
http://jsfiddle.net/
https://koding.com/

Some good frameworks:
http://getbootstrap.com/
http://vanillaforums.org/

Lots of links, hope they are useful to you.

Also if you're interested, I'm looking for a coding partner to work with online, as in just casually over TS or something. If you're interested let me know, I'm also still an intermediate novice...

I'm dying from code overload This is very helpful!

L4TF2

Btw here's what I can kinda do with HTML.



Just some of the basic junk.