8 Cool HTML Effects to Create an Awesome Website
If you don’t know the CSS or PHP to build a stylish website, use these 8 cool HTML effects tricks to create an awesome website. If you want to build an awesome website but don’t have a master’s skill in web development then, don’t despair! If you do not want to know CSS and PHP to build a good website then go with these 8 cool HTML effects. And learn how to copy and paste these tags into HTML.
To get you started with some great HTML effects, we’ve compiled free code templates to copy. They also increase functionality and user experience without paying money. In HTML mostly these cool codes contain CSS and PHP.
8 Cool HTML Effects can add to the Websites
1. Cool HTML Parallax Effect
You have seen on other websites the Parallax Effect used on these websites with online advertisements.
You can play with this effect and copy the simple parallax effect from W3Schools. This effect is combined with HTML, CSS, and JavaScript.
2. Scrollable HTML Comment Box Code
Scrollable HTML Comment Box Code is a simple but useful HTML element that helps to pack text in a compact form. That’s why the page does not give an entire space.
If you want to change the size and color of the box as your need to make it fitted, then you can easily change it
Input:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
main {
padding: 20px;
display: block;
min-height: 100vh;
min-width: 100vh;
}
h2 {
text-align: center;
color: #004aad;
}
.comment-section {
max-height: 50vh;
max-width: 100%;
background-color: #004aad;
overflow-y: scroll;
}
.comment {
height: 10%;
padding: 2%;
margin: 2%;
background-color: #ffff;
color: black;
}
</style>
<body>
<h2>Scrollable HTML Comment Box Code</h2>
<main>
<div class="comment-section">
<div class="comment">This is first comment.</div>
<div class="comment">This is second comment.</div>
<div class="comment">This is third comment.</div>
<div class="comment">This is fourth comment.</div>
<div class="comment">This is fifth comment.</div>
<div class="comment">This is sixth comment.</div>
</div>
</main>
</body>
</html>If you want to add something fancier, then you can also fetch code for a customizable comment box from Quackit.
3. A Cool HTML Trick: Highlighted Text
With the <span> tag you can use a number of cool HTML effects on your text or image. Remember all this work is across on your browser, that’s why you can use work in Google Chrome, Microsoft Edge, and Mozilla Firefox. Because they have predefined HTML codes.
The text between <span> tag is highlighted by this HTML text effect
Input:
<span style="background-color: #004aad> highlighted text.</span>4. Add Background Image to the Text
You can change the background images as well as the color of the text. You can add with your perspective that you want.
Input:
<span style="background-image: url(https://i0.wp.com/www.learnically.com/wp-content/uploads/2023/05/html-strucher.jpg resize=768%2C432&ssl=1); font-size: 20pt; ">Learnically presents...</span>The same effect is achieved by adding the style and font elements to the text in a <strong> tag.
5. Add a Title Tooltip
The tooltip comes up when you mouse hover over the text or image. You will see this in websites on images, linked text, or even menu items in desktop apps. Use this HTML effect by adding a simple HTML on your webpage.
Input:
<span title="this is the tooltip.">Move your mouse over me!</span>6. Scrolling or Falling Text
When you search on Google “marquee HTML”, you see that the slider is continually srolling the search result count at the top, this effect is created by the now-obsolete marquee tag. In some browsers, this effect is removed but most browsers still support it.
Input:
<marquee>I wanna scroll with it</marquee>Adding Switch “left” for “right” to scroll the text.
7. Switch the Menu to HTML
The HTML looks good when this is dynamic. However, in this use of scripts, one effect is creating a menu that looks very good.
It is some complicated than your average HTML tags because it works on the style sheets and the scripts. Use the style sheet and the script instead, simply paste the code from the Dynamic Drive into your <html> head section.
8. Get an HTML Spreadsheet with Tableizer
If you want to display a spreadsheet on your site, let Tableizer! Then transform your data into an HTML table. Paste the data from Excel, Google Docs, or any other spreadsheet into the converter tool at tableizer.journalistopia.com. Click the table options, then click Tableize It to receive the HTML output.
This will also be the best code in your overall HTML code for your website, as Tableize It! does all the hard work.
Click and copy the HTML code and add it to your website. And some editing properties are added as you need.
HTML, CSS, and JavaScript are the most powerful options to create a cool website. But by using only these 8 Cool HTML Effects to build a basic but cool website.
More Cool HTML Code Sites
- HTML Goodies: gives you great <span> tag ideas.
- Dynamic Drive: has incredible dynamic HTML scripts.
- Quackit: offers cool HTML code.
Practice these 8 Cool HTML Effects, because as long as you use them you will know them.
This Article is officially present on Learnically, also visit this site.
