#html and css tutorial

[izicodes]

Convert HTML to Image: A Step-by-Step Guide ✨

Do you want to turn some HTML code you've made that's on your website and have a way to convert it into an image for you to save?

Well, look no further! I too wanted to do the same thing but funny enough, there weren't any straightforward tutorials out there that could show you how! After hours of searching, I finally discovered the solution~!

This is an old tutorial I made 🐼

💛 Set your environment

Before we dive into the conversion process, I'll assume you already have your HTML code ready. What you want to learn is how to turn it into an image file. You should have a good grasp of HTML and JavaScript. For this tutorial, we'll use the following HTML code example:

We won't include the CSS code, as it doesn't affect this tutorial. The JavaScript file (script.js) at the bottom of the body element is where we'll add the functionality for the conversion.

Your page should resemble the following:

As you can see, the "Click me" button will handle the conversion. We aim to convert everything within the div.info-div into an image.

💛 Using the html2canvas JavaScript Library

The html2canvas library allows you to take screenshots of webpages and target specific elements on a screen. Here are the steps to include the library in your project:

The steps to put the library in your project:

Visit the html2canvas website for more information.

Copy the CDN link from here

and include it in a script tag in your project's head tag in the HTML file:

That's it for including the library on the HTML side. Now, let's move on to the JavaScript code.

💛 JavaScript Functionality

Here's the JavaScript code to handle the conversion:

In this code, I want to turn the whole div.info-div into an image, I put it into a variable in const div = document.querySelector(".info-div");.

I also put the button into a variable in const button = document.querySelector("button");

I added a click event listener to the button so when the user clicks the button, it will follow the code inside of the event listener!

You can find similar code like this in the documentation of the html2canvas library:

What is happening here is:

We add the div (or what the element we want to take an image of) into the html2canvas([element]).then((canvas)

Added the image file type url to a variable = const imageDataURL = canvas.toDataURL("image/png"); - You can replace the png to other image file types such as jpg, jpeg etc

Created an anchor/link tag, added the href attribute to imageDataURL

The download attribute is where we will give the default name to the image file, I added "dog.png"

Perform the click() function to the anchor tag so it starts to download the image we created

And that's it!

💛 The End

And that's it! You've successfully learned how to turn your HTML into an image. It's a great way to save and share your web content in a unique format.

If you have any questions or need further clarification, please comfortable to ask. Enjoy converting your HTML into images! 💖🐼

[lavendergalactic]

Hiii may i ask how you install fonts on bundlrs? I keep trying and it won’t work, I even looked at how you did it on your template but when I try to change the font it just doesn’t work?🥺 help please

yeah course i'll start from the very beginning

step 1

first i go to dafont and find a font i like and download it

step 2

i got to my files and extract all

step 3

i head my way over to catbox and just drop the OTF or TTF file into the box

step 4

ok now it's coding time, make sure you've got your code inbetween <style> </style> or else it wont work

so what you're going to write is

@font-face{ font-family:'font name'; src:url(ur catbox url);}

step 5

to actually use this font you've got to assign it to something (go to this website if you need extra help)

if you want the font to be assigned to everything you do this

p, r { font-family:font name; }

and if you need it bigger or smaller you can add " font-size:15px; " (15 can be replaced with anything)

hope this helps

[forecast0ctopus]

Idk if anyone's ever asked you this but how do you go about animating? i.e. what program do you use and what's your process?

I really wanna start animating but it seems like such a daunting task lol

okay lots of words so. under the read more lmao

toon boom harmony is industry standard 2d animation software so thats what i use for freelance work and more finished things like that antibodies animation (though i did the bg painting in procreate) – but totally not the ideal software for just starting out with animation lmao not to mention the fact that its a subscription :/// small sketches like that gif of bones i posted i'll sometimes tackle in procreate or procreate dreams, which are wayy more affordable and user friendly, even if theye a bit less robust.

if youre looking for a combination of robust software with the best price, blender is free and has 2d capabilities that ive messed around with a few times – its super cool, but the interface can be confusing if you've never worked in blender before and it has a bit of a steep learning curve BUT theres also always always always good ol paper and pencil, and nowadays most people own a camera and can access video editing software to stitch things together the best things to start out with are the basics, like a ball bounce animation, different weight objects falling, walk cycles – once you get an understanding of how timing works with animation, then tackling how characters move is the next step. just going into complex characters right off the bat is an easy way to get frustrated FAST lmao starting simple is always the way to go also a lot of cartoons and stuff move A Lot Less than you would think, a 10 second animation at 12 frames per second is almost never going to be 120 different individual drawings – sometimes you can just get away with a few blinks and a bit of lip sync to really sell an animation, so while animation does take a lot of time and effort try not to be too intimidated!!

[hailsatanacab]

Chapters: 1/1 Fandom: Danny Phantom, Batman - All Media Types Rating: General Audiences Warnings: No Archive Warnings Apply Relationships: Danny Fenton & Wulf Characters: Danny Fenton, Wulf (Danny Phantom), Bruce Wayne, Tim Drake, Damian Wayne, Robin (DCU), Red Robin (DCU), Batman (DCU), Ra's al Ghul Additional Tags: Portals, Ghost King Danny Fenton, Comedy of Errors, DPxDC WEEK 2022, Time Travel, dp/dc week 2022, Swearing

Summary:

Okay, so Danny’s first attempt at a portal isn’t what one would call a success.

Unfortunately, instead of opening into a relatively safe (if incredibly underwhelming) cave, it splits a hole right into a great ocean of ectoplasm in the Ghost Zone, which promptly begins to flood the space around them.

It’s up to their ankles in seconds as gallons of foaming green water surge through the opening, with a thundering roar like waves crashing upon the shore.

“Uh…” Both he and Wulf just stare, watching with wide eyes as the day just gets worse and worse.

“Wulf!” Knocking himself out of his trance, Danny turns towards him and flaps his arms in panic. Oh, shit! This isn’t good! There’s no way this amount of ectoplasm in the material world is healthy, he’s going to be in so much trouble! What the hell are they meant to do? “Help!”

Originally written for dpxdc week 2022 for the prompt "Wulf teaches Danny how to open portals. It does not go to plan."

[nicomoon69]

everyday I get closer to realizing my dream of creating a semi-interactive story for my ocs

[codingflicks]

CSS Menu Hover Animation

[riacte]

hi! i love reading your fics but i specifically love the social media shenanigans in dearly beloathed. i was wondering how you would feel if i took some inspiration from that for a fic of mine because i would love to write something that's very similarly formatted but i wanted to make sure you were fine with that (cause i'm assuming it took some time and effort to come up with) before i did. anyways your writing is awesome and i love reading it

Yes sure of course! I took inspiration from ao3 fics (F1 fandom in particular is stunning at formatting, I have so much respect for their dedication), such as this one (I basically took the formatting from this) and this Twitch streamer AU. If you're posting on ao3, there's the option of playing with HTML/CSS for a more "realistic" socmed interface, for example this one for Twitter which is magic to me. This one is an extremely impressive Discord mockup. An Unauthorised Fandom Treatise is a nice look into mid 2010s Superwholock era fandom whereas F1 rpf and indeed mcyt / streamer stuff is more "modern". Anyways yeah there's a lot of potential in this genre of fics and loads of stuff to check out on ao3 if you wish :) I love scrolling through the Unconventional Format tag because people are just so creative. Good luck with your writing!

[beedesigns]

How to show/hide elements.

Inspired by a recent conversation with someone on discord that prompted me to make a quick demo on codepen.io I thought I would try to make an actual tutorial out of it. So! For those that are interested, here's how to easily change what different groups see when they're logged in. This tutorial is geared specifically toward JCINK coders, but can easily be adapted to any forum or webpage. Keep reading to find out how.

The first step is to add the group id to your board's body. To do this you need to find the <body> tag in your board wrapper and replace it with:

Now you have that in place, you can use it to dictate what different groups can and can't see. This obviously has a lot of use cases, from changing group colours to hiding certain information or forums. The most common use is to swap the navigation options depending on whether someone is logged in or not.

So, you've created your nav menu, and you want guests to see the "sign-in" link, but what about members who are already signed in? You want them to have the "sign-out" link instead. What we're going to do is wrap each link in a class that corresponds to who we want to see it.

Now, in the stylesheet, we're going to add the CSS to tell the board to show or hide the corresponding link depending on who is logged in. We're going to be using JCINK's default group ids #2 for guests and #3 for members.

First for guests:

This simply says if a guest (.g-2) is viewing the page, then show anything using the class 'guest' and hide anything using the class 'member'.

Then for members:

Much like the above, we're telling the site to show anything using the class 'member' and hide anything using 'guest' when the member group (g-3) is logged in.

And that's it! You can see it in action here, where I've combined it with a colour variable to demonstrate how this method can be extended to include pretty much whatever you want. Hopefully it all makes sense! This is my first ever tutorial, and I'm just a baby coder myself. So, if you see a mistake or something that doesn't make sense, please do reach out and I shall try to correct/clarify it. Thanks for reading :)

[divinector]

CSS Card with Wavy Animation

[codenewbies]

Animated menu hover

[dipstick-university]

I try to avoid to avoid posting too much about the abyss of bad things the US, but this one was too much--in one of the more ridiculous political missteps in a US politics (which takes a lot these days) Kristi Noem, contender for the Trump VP position, describes killing a puppy and a billy goat in front of a construction crew.

"At that moment," Noem says, "I realised I had to put her down." Noem, who also represented her state in Congress for eight years, got her gun, then led Cricket to a gravel pit. "It was not a pleasant job," she writes, "but it had to be done. And after it was over, I realised another unpleasant job needed to be done." Incredibly, Noem's tale of slaughter is not finished. Her family, she writes, also owned a male goat that was "nasty and mean", because it had not been castrated. Furthermore, the goat smelled "disgusting, musky, rancid" and "loved to chase" Noem's children, knocking them down and ruining their clothes. Noem decided to kill the unnamed goat the same way she had just killed Cricket the dog. But though she "dragged him to a gravel pit", the goat jumped as she shot and therefore survived the wound. Noem says she went back to her truck, retrieved another shell, then "hurried back to the gravel pit and put him down".THE GUARDIAN

[liveorganism]

im so funny because i will fully learn basic html, not do it for a couple years and forget, then fully learn basic html, not do it for a couple years and forget. guess what i'm doing right now

[lavendergalactic]

do u need desktop to get fonts on bundlrs or is it also on mobile?

desktop helps a lot when turning fonts into a link using catbox, but you can also do it on mobile

in the edit section, you type:

<style> @font-face { src:url("font link .ttf / .otf"); font-family: 'font name'; } p, r { font-family: font name; } </style>

the "font-face" thing will import your font, and the "p, r" just stands for "everything in the pastebin" you can change "p, r" to "em, a, strong, code" etc

this sntry really helps explaining all the "p, r, em, a, strong, etc" thing

also, if the font is too big you can add

p, r { font-family: font name; font-size: 18px !important; }

you can change the number to anything you want

hope this helps! if you want links to fonts, i upload a few into the purrfect tale discord (invite here) :D feel free to ping me (@ lavgal) in "other help" if you want me to turn a font into a link for you

also if you don't know how to turn a font into a link, i made a tutorial here

[bf-rally]

felt like i was going crazy yesterday trying to set up a login system for this website 😭 it was like i was back in college again!

[frontendforever]

Responsive Animated Website With HTML & CSS

[seepunkrun]

mobile-friendly personal websites

@agentreynard wanted to hear more about how I made my website mobile friendly, so here's what I did:

First, crucially, I already had a one-column website that used css to style the HTML.

This made it easy to adapt to smaller screens...as soon as I learned the following three things thanks to Christopher Heng's How to Make a Mobile-Friendly Website: Responsive Design in CSS:

1. You need this magical incantation in the HEAD section of every page:

2. You need to tell your images to simmer down and not be stretching out the screen by being as wide as they want. They can be 100% wide and no more!! Add this to the css:

3. And then you'll probably need to give the page special instructions on how to act if it's being displayed on a small screen. This is the fiddly bit. What you put in here will be specific to your website, but it'll all go at the end of your css, tucked inside one of these:

That's what's known as a media query and it can take a variety of forms. This one says that if a screen is 320px wide or smaller, these rules apply. You can also use "min-width" if you want to tell it what to do if a screen is larger than a set number, and you can put whatever numbers in there you want.

Mine looks like this:

Those were all classes I used for the original layout, only now I want them to display differently on smaller screens. So I shrunk all the margins to remove white (and pink) space and now that same page looks something like this on mobile:

I did the same thing for the story files themselves, shrinking the margins so there's more room for text, but that took a different set of rules because they've got a different structure. I also added "back to top" links to the bottom of all my navigational pages.

Now, this is clearly not a foolproof or comprehensive plan. Everything I know about HTML and CSS I learned through trial and error, so I am barely qualified to say even this much. But these were the three things I needed to know before I could stick my hands in there and really shove stuff around.